Revamp WCPay suggestion in payments task
This commit is contained in:
Ilyas Foo
parent
c596222069
commit
1980fac6fd
|
|
@ -1,63 +1,126 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Card, CardBody, CardHeader, CardFooter } from '@wordpress/components';
|
||||
import { Card, CardBody, CardFooter } from '@wordpress/components';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
import { createElement } from '@wordpress/element';
|
||||
import { Link } from '@woocommerce/components';
|
||||
import interpolateComponents from '@automattic/interpolate-components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { WCPayAcceptedMethods } from '../WCPayAcceptedMethods';
|
||||
import WCPayLogo from '../../images/wcpay-logo';
|
||||
|
||||
export const WCPayCardHeader = ( {
|
||||
logoWidth = 196,
|
||||
logoHeight = 41,
|
||||
children,
|
||||
} ) => (
|
||||
<CardHeader as="h2">
|
||||
<WCPayLogo width={ logoWidth } height={ logoHeight } />
|
||||
{ children }
|
||||
</CardHeader>
|
||||
);
|
||||
import WCPayHeroImage from '../../images/wcpay-hero-image';
|
||||
import WCPayBenefit1 from '../../images/wcpay-benefit-1';
|
||||
import WCPayBenefit2 from '../../images/wcpay-benefit-2';
|
||||
import WCPayBenefit3 from '../../images/wcpay-benefit-3';
|
||||
|
||||
export const WCPayCardBody = ( {
|
||||
description,
|
||||
heading,
|
||||
children,
|
||||
onLinkClick = () => {},
|
||||
} ) => (
|
||||
<CardBody>
|
||||
{ heading && <Text as="h2">{ heading }</Text> }
|
||||
|
||||
<Text
|
||||
className="woocommerce-task-payment-wcpay__description"
|
||||
as="p"
|
||||
lineHeight="1.5em"
|
||||
>
|
||||
{ description }
|
||||
<br />
|
||||
<Link
|
||||
target="_blank"
|
||||
type="external"
|
||||
rel="noreferrer"
|
||||
href="https://woocommerce.com/payments/?utm_medium=product"
|
||||
onClick={ onLinkClick }
|
||||
>
|
||||
{ __( 'Learn more', 'woocommerce' ) }
|
||||
</Link>
|
||||
</Text>
|
||||
|
||||
<WCPayAcceptedMethods />
|
||||
<div className="hstack">
|
||||
<div className="vstack content-center flex-1">
|
||||
{ heading && (
|
||||
<Text
|
||||
as="h1"
|
||||
className="woocommerce-task-payment-wcpay__heading"
|
||||
>
|
||||
{ heading }
|
||||
</Text>
|
||||
) }
|
||||
<Text
|
||||
className="woocommerce-task-payment-wcpay__description"
|
||||
as="p"
|
||||
lineHeight="1.5em"
|
||||
>
|
||||
{ interpolateComponents( {
|
||||
mixedString: __(
|
||||
'By using WooCommerce Payments you agree to be bound by our {{tosLink /}} and acknowledge that you have read our {{privacyLink /}}',
|
||||
'woocommerce'
|
||||
),
|
||||
components: {
|
||||
tosLink: (
|
||||
<Link
|
||||
target="_blank"
|
||||
type="external"
|
||||
rel="noreferrer"
|
||||
href="https://woocommerce.com/payments/?utm_medium=product"
|
||||
onClick={ onLinkClick }
|
||||
>
|
||||
{ __( 'Terms of Service', 'woocommerce' ) }
|
||||
</Link>
|
||||
),
|
||||
privacyLink: (
|
||||
<Link
|
||||
target="_blank"
|
||||
type="external"
|
||||
rel="noreferrer"
|
||||
href="https://woocommerce.com/payments/?utm_medium=product"
|
||||
onClick={ onLinkClick }
|
||||
>
|
||||
{ __( 'Privacy Policy', 'woocommerce' ) }
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
} ) }
|
||||
<br />
|
||||
</Text>
|
||||
<div>{ children }</div>
|
||||
</div>
|
||||
<div>
|
||||
<WCPayHeroImage className="wcpay-hero-image" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
);
|
||||
|
||||
export const WCPayCardFooter = ( { children } ) => (
|
||||
<CardFooter>{ children }</CardFooter>
|
||||
export const WCPayCardFooter = () => (
|
||||
<CardFooter>
|
||||
<WCPayAcceptedMethods />
|
||||
</CardFooter>
|
||||
);
|
||||
|
||||
export const WCPayCard = ( { children } ) => {
|
||||
return <Card className="woocommerce-task-payment-wcpay">{ children }</Card>;
|
||||
return (
|
||||
<Card className="woocommerce-task-payment-wcpay" size="large">
|
||||
{ children }
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export const WCPayBenefitCard = () => {
|
||||
return (
|
||||
<Card className="woocommerce-task-payment-wcpay" size="large">
|
||||
<CardBody>
|
||||
<div className="hstack content-around">
|
||||
<div className="woocommerce-task-payment-wcpay__benefit vstack">
|
||||
<WCPayBenefit1 />
|
||||
{ __(
|
||||
'Offer your customers their preferred way to pay including debit and credit card payments, Apple Pay, Sofort, SEPA, iDeal and many more.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</div>
|
||||
<div className="woocommerce-task-payment-wcpay__benefit vstack">
|
||||
<WCPayBenefit2 />
|
||||
{ __(
|
||||
'Sell to international markets and accept more than 135 currencies with local payment methods.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</div>
|
||||
<div className="woocommerce-task-payment-wcpay__benefit vstack">
|
||||
<WCPayBenefit3 />
|
||||
{ __(
|
||||
'Earn and manage recurring revenue and get automatic deposits into your nominated bank account.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,44 @@
|
|||
.woocommerce-task-payments .woocommerce-task-payment-wcpay {
|
||||
|
||||
.vstack, .hstack {
|
||||
display: flex;
|
||||
&.content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.content-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
&.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.vstack {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hstack {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.wcpay-hero-image {
|
||||
margin-right: -32px;
|
||||
margin-bottom: -28px;
|
||||
}
|
||||
|
||||
.woocommerce-task-payment-wcpay__heading {
|
||||
letter-spacing: 0.6px;
|
||||
max-width: 250px;
|
||||
margin-right: $gap-small;
|
||||
margin-bottom: $gap;
|
||||
}
|
||||
|
||||
.woocommerce-task-payment-wcpay__description {
|
||||
font-size: 16px;
|
||||
font-size: 13px;
|
||||
max-width: 325px;
|
||||
margin-right: $gap-small;
|
||||
margin-bottom: $gap-large;
|
||||
}
|
||||
|
||||
|
|
@ -40,4 +78,15 @@
|
|||
color: #40464d;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-task-payment-wcpay__benefit {
|
||||
svg {
|
||||
margin: 0 auto;
|
||||
}
|
||||
max-width: 170px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
export default ( { width = 141, height = 148, ...props } ) => (
|
||||
<svg
|
||||
width={ width }
|
||||
height={ height }
|
||||
viewBox={ `0 0 ${ width } ${ height }` }
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{ ...props }
|
||||
>
|
||||
<rect
|
||||
x="16.3334"
|
||||
y="16"
|
||||
width="76"
|
||||
height="76"
|
||||
rx="12"
|
||||
fill="#DCDCDE"
|
||||
/>
|
||||
<g filter="url(#filter0_d_10798_5797)">
|
||||
<rect
|
||||
x="32.3334"
|
||||
y="32"
|
||||
width="76"
|
||||
height="84"
|
||||
rx="12"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<rect
|
||||
x="26.3334"
|
||||
y="26"
|
||||
width="40"
|
||||
height="40"
|
||||
rx="20"
|
||||
fill="#9A69C7"
|
||||
/>
|
||||
<mask
|
||||
id="mask0_10798_5797"
|
||||
style={ { maskType: 'alpha' } }
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="36"
|
||||
y="38"
|
||||
width="21"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M54.3334 38H38.3334C37.2284 38 36.3334 38.895 36.3334 40V52C36.3334 53.105 37.2284 54 38.3334 54H54.3334C55.4384 54 56.3334 53.105 56.3334 52V40C56.3334 38.895 55.4384 38 54.3334 38ZM54.3334 40V42H38.3334V40H54.3334ZM38.3334 46V52H54.3334V46H38.3334ZM40.3334 48H47.3334V50H40.3334V48ZM52.3334 48H49.3334V50H52.3334V48Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_10798_5797)">
|
||||
<rect x="34.3334" y="34" width="24" height="24" fill="white" />
|
||||
</g>
|
||||
<mask
|
||||
id="mask1_10798_5797"
|
||||
style={ { maskType: 'alpha' } }
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="74"
|
||||
y="47"
|
||||
width="16"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M88.4572 55.528C88.288 56.2905 87.6114 56.833 86.8305 56.833H78.1672V58.4997H86.5005C87.4214 58.4997 88.1672 59.2455 88.1672 60.1663H78.1672C77.2464 60.1663 76.5005 59.4205 76.5005 58.4997V56.833V50.1663V49.333H74.8339V47.6663H76.5005C77.4214 47.6663 78.1672 48.4122 78.1672 49.333V50.1663H89.8339L88.4572 55.528ZM79.834 62.6663C79.834 63.583 79.084 64.333 78.1673 64.333C77.2507 64.333 76.509 63.583 76.509 62.6663C76.509 61.7497 77.2507 60.9997 78.1673 60.9997C79.084 60.9997 79.834 61.7497 79.834 62.6663ZM86.5002 60.9997C85.5835 60.9997 84.8418 61.7497 84.8418 62.6663C84.8418 63.583 85.5835 64.333 86.5002 64.333C87.4168 64.333 88.1668 63.583 88.1668 62.6663C88.1668 61.7497 87.4168 60.9997 86.5002 60.9997Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_10798_5797)">
|
||||
<rect x="72.3334" y="46" width="20" height="20" fill="#A7AAAD" />
|
||||
</g>
|
||||
<rect
|
||||
x="45.3334"
|
||||
y="92"
|
||||
width="36.8966"
|
||||
height="11.0345"
|
||||
rx="5.51724"
|
||||
fill="#674399"
|
||||
/>
|
||||
<rect
|
||||
x="46.3344"
|
||||
y="73"
|
||||
width="48.9989"
|
||||
height="4.13793"
|
||||
rx="2.06897"
|
||||
fill="#DCDCDE"
|
||||
/>
|
||||
<rect x="46.3334" y="81" width="49" height="4" rx="2" fill="#DCDCDE" />
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_d_10798_5797"
|
||||
x="0.333374"
|
||||
y="0"
|
||||
width="140"
|
||||
height="148"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset />
|
||||
<feGaussianBlur stdDeviation="16" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_10798_5797"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_10798_5797"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
export default ( { width = 140, height = 148, ...props } ) => (
|
||||
<svg
|
||||
width={ width }
|
||||
height={ height }
|
||||
viewBox={ `0 10 ${ width } ${ height }` }
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{ ...props }
|
||||
>
|
||||
<rect x="48" y="42" width="76" height="80" rx="12" fill="#DCDCDE" />
|
||||
<g filter="url(#filter0_d_10798_5832)">
|
||||
<rect x="32" y="32" width="76" height="76" rx="12" fill="white" />
|
||||
</g>
|
||||
<rect x="92" y="22" width="40" height="40" rx="20" fill="#9A69C7" />
|
||||
<mask
|
||||
id="mask0_10798_5832"
|
||||
style={ { maskType: 'alpha' } }
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="102"
|
||||
y="32"
|
||||
width="20"
|
||||
height="20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M102 42C102 36.477 106.477 32 112 32C117.523 32 122 36.477 122 42C122 47.523 117.523 52 112 52C106.477 52 102 47.523 102 42ZM115 47L114 48L112 50C115.239 50 118.029 48.061 119.286 45.286L119 45H117L116 44V42L118 40H119.736C119.434 38.834 118.882 37.767 118.13 36.87L115 40L114 39V37L115 36V34.589C114.073 34.212 113.061 34 112 34C110.939 34 109.927 34.212 109 34.589V35L110 36H112V38L109 41H107V43H105L104 42C104 46.072 107.06 49.436 111 49.931V48L109 46V43H112L113 44V45H115V47Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_10798_5832)">
|
||||
<rect x="100" y="30" width="24" height="24" fill="white" />
|
||||
</g>
|
||||
<rect x="41" y="42" width="19" height="13" rx="2" fill="#F7EDF7" />
|
||||
<path
|
||||
d="M47.7314 50.998H49.1279C49.1442 51.2389 49.2484 51.4424 49.4404 51.6084C49.6357 51.7744 49.8848 51.8737 50.1875 51.9062V50.0898L49.6748 49.9678C49.0856 49.8311 48.638 49.5967 48.332 49.2646C48.026 48.9294 47.873 48.5078 47.873 48C47.873 47.401 48.0765 46.9176 48.4834 46.5498C48.8903 46.182 49.4583 45.9688 50.1875 45.9102V45.2461H50.8711V45.9102C51.5514 45.9753 52.0951 46.1934 52.502 46.5645C52.9089 46.9323 53.1172 47.3978 53.127 47.9609H51.7646C51.7581 47.7396 51.6719 47.5459 51.5059 47.3799C51.3398 47.2139 51.1283 47.113 50.8711 47.0771V48.8154L51.3936 48.9229C52.6403 49.1898 53.2637 49.8473 53.2637 50.8955C53.2637 51.5173 53.0553 52.0137 52.6387 52.3848C52.2253 52.7559 51.6361 52.974 50.8711 53.0391V53.6592H50.1875V53.0488C49.4225 53.0065 48.8219 52.8031 48.3857 52.4385C47.9528 52.0739 47.7347 51.5938 47.7314 50.998ZM49.2891 47.8633C49.2891 48.0684 49.3656 48.2409 49.5186 48.3809C49.6715 48.5176 49.8945 48.6152 50.1875 48.6738V47.0723C49.9238 47.0853 49.7074 47.1667 49.5381 47.3164C49.3721 47.4629 49.2891 47.6452 49.2891 47.8633ZM50.8711 51.9111C51.1868 51.8916 51.4326 51.807 51.6084 51.6572C51.7874 51.5075 51.877 51.3089 51.877 51.0615C51.877 50.6188 51.5417 50.3356 50.8711 50.2119V51.9111Z"
|
||||
fill="#674399"
|
||||
/>
|
||||
<rect
|
||||
x="70"
|
||||
y="46"
|
||||
width="16"
|
||||
height="4.13793"
|
||||
rx="2.06897"
|
||||
fill="#533582"
|
||||
/>
|
||||
<rect x="41" y="63" width="19" height="13" rx="2" fill="#F7EDF7" />
|
||||
<path
|
||||
d="M47.7314 74V72.8281C48.1676 72.7663 48.5225 72.5889 48.7959 72.2959C49.0726 72.0029 49.2109 71.653 49.2109 71.2461C49.2109 71.1322 49.2012 71.0215 49.1816 70.9141H47.751V69.874H48.8447C48.6527 69.3923 48.5566 68.9967 48.5566 68.6875C48.5566 68.082 48.7943 67.6117 49.2695 67.2764C49.748 66.9411 50.4186 66.7734 51.2812 66.7734C51.5742 66.7734 51.8737 66.7979 52.1797 66.8467C52.4857 66.8923 52.7233 66.9492 52.8926 67.0176V68.209C52.7331 68.1374 52.5199 68.0788 52.2529 68.0332C51.986 67.9844 51.724 67.96 51.4668 67.96C51.0143 67.96 50.6628 68.0446 50.4121 68.2139C50.1615 68.3831 50.0361 68.6208 50.0361 68.9268C50.0361 69.1611 50.1077 69.4769 50.251 69.874H52.2773V70.9141H50.5781C50.5879 70.9922 50.5928 71.0719 50.5928 71.1533C50.5928 71.4788 50.5114 71.7799 50.3486 72.0566C50.1891 72.3333 49.984 72.5319 49.7334 72.6523V72.7451H53.2197V74H47.7314Z"
|
||||
fill="#674399"
|
||||
/>
|
||||
<rect x="70" y="68" width="25" height="4" rx="2" fill="#533582" />
|
||||
<rect x="41" y="84" width="19" height="13" rx="2" fill="#F7EDF7" />
|
||||
<path
|
||||
d="M47.3066 87.9541H48.9033L50.4561 90.9033H50.5439L52.0918 87.9541H53.6885L51.6084 91.6943H52.5605V92.5195H51.2373V93.1689H52.5605V93.9941H51.2373V95H49.7627V93.9941H48.4395V93.1689H49.7627V92.5195H48.4395V91.6943H49.3916L47.3066 87.9541Z"
|
||||
fill="#674399"
|
||||
/>
|
||||
<rect x="70" y="89" width="18" height="4" rx="2" fill="#533582" />
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_d_10798_5832"
|
||||
x="0"
|
||||
y="0"
|
||||
width="140"
|
||||
height="140"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset />
|
||||
<feGaussianBlur stdDeviation="16" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_10798_5832"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_10798_5832"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
export default ( { width = 157, height = 148, ...props } ) => (
|
||||
<svg
|
||||
width={ width }
|
||||
height={ height }
|
||||
viewBox={ `0 10 ${ width } ${ height }` }
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{ ...props }
|
||||
>
|
||||
<g filter="url(#filter0_d_10798_5865)">
|
||||
<rect
|
||||
x="46.6667"
|
||||
y="47"
|
||||
width="78"
|
||||
height="77"
|
||||
rx="12"
|
||||
fill="#DCDCDE"
|
||||
/>
|
||||
</g>
|
||||
<rect x="57.6667" y="97" width="23" height="4" rx="2" fill="white" />
|
||||
<rect
|
||||
x="57.6667"
|
||||
y="107"
|
||||
width="17.7727"
|
||||
height="4"
|
||||
rx="2"
|
||||
fill="white"
|
||||
/>
|
||||
<g filter="url(#filter1_d_10798_5865)">
|
||||
<rect
|
||||
x="32.6667"
|
||||
y="32"
|
||||
width="69"
|
||||
height="52"
|
||||
rx="12"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M44.6667 59.7224C44.6667 58.403 45.7363 57.3335 47.0556 57.3335C48.375 57.3335 49.4445 58.403 49.4445 59.7224V62.1113C49.4445 63.4306 48.375 64.5002 47.0556 64.5002C45.7363 64.5002 44.6667 63.4306 44.6667 62.1113V59.7224Z"
|
||||
fill="#674399"
|
||||
/>
|
||||
<rect
|
||||
x="54.222"
|
||||
y="53.75"
|
||||
width="4.77778"
|
||||
height="10.75"
|
||||
rx="2.38889"
|
||||
fill="#AF7DD1"
|
||||
/>
|
||||
<rect
|
||||
x="63.7773"
|
||||
y="50.1665"
|
||||
width="4.77778"
|
||||
height="14.3333"
|
||||
rx="2.38889"
|
||||
fill="#674399"
|
||||
/>
|
||||
<rect
|
||||
x="73.3337"
|
||||
y="46.5835"
|
||||
width="4.77778"
|
||||
height="17.9167"
|
||||
rx="2.38889"
|
||||
fill="#AF7DD1"
|
||||
/>
|
||||
<rect
|
||||
x="82.889"
|
||||
y="43"
|
||||
width="4.77778"
|
||||
height="21.5"
|
||||
rx="2.38889"
|
||||
fill="#674399"
|
||||
/>
|
||||
<path
|
||||
d="M44.6667 70.5C44.6667 69.1193 45.786 68 47.1667 68C48.5475 68 49.6667 69.1193 49.6667 70.5C49.6667 71.8807 48.5475 73 47.1667 73C45.786 73 44.6667 71.8807 44.6667 70.5Z"
|
||||
fill="#F6F7F7"
|
||||
/>
|
||||
<rect x="54.2224" y="68" width="5" height="5" rx="2.5" fill="#F6F7F7" />
|
||||
<rect x="63.7771" y="68" width="5" height="5" rx="2.5" fill="#F6F7F7" />
|
||||
<rect x="73.3337" y="68" width="5" height="5" rx="2.5" fill="#F6F7F7" />
|
||||
<rect x="82.8894" y="68" width="5" height="5" rx="2.5" fill="#F6F7F7" />
|
||||
<rect
|
||||
x="92.6667"
|
||||
y="92"
|
||||
width="40"
|
||||
height="40"
|
||||
rx="20"
|
||||
fill="#9A69C7"
|
||||
/>
|
||||
<mask
|
||||
id="mask0_10798_5865"
|
||||
style={ { maskType: 'alpha' } }
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="103"
|
||||
y="102"
|
||||
width="19"
|
||||
height="19"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M121.667 106V119C121.667 120.104 120.771 121 119.667 121H105.667C104.563 121 103.667 120.104 103.667 119V106C103.667 104.896 104.563 104 105.667 104H106.667V102H108.667V104H116.667V102H118.667V104H119.667C120.771 104 121.667 104.896 121.667 106ZM111.165 118.001L107.46 114.296L108.875 112.881L111.169 115.175L116.462 109.882L117.877 111.297L111.165 118.001ZM105.667 108H119.667V119H105.667V108Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_10798_5865)">
|
||||
<rect x="100.667" y="100" width="24" height="24" fill="white" />
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_d_10798_5865"
|
||||
x="14.6667"
|
||||
y="15"
|
||||
width="142"
|
||||
height="141"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset />
|
||||
<feGaussianBlur stdDeviation="16" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_10798_5865"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_10798_5865"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
<filter
|
||||
id="filter1_d_10798_5865"
|
||||
x="0.666748"
|
||||
y="0"
|
||||
width="133"
|
||||
height="116"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset />
|
||||
<feGaussianBlur stdDeviation="16" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_10798_5865"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_10798_5865"
|
||||
result="shape"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
export default ( { width = 293, height = 275, ...props } ) => (
|
||||
<svg
|
||||
width={ width }
|
||||
height={ height }
|
||||
viewBox={ `0 0 ${ width } ${ height }` }
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{ ...props }
|
||||
>
|
||||
<g clipPath="url(#clip0_212_42381)">
|
||||
<path
|
||||
d="M0 10C0 4.47716 4.47715 0 10 0H725C730.523 0 735 4.47715 735 10V332H0V10Z"
|
||||
fill="#F6F7F7"
|
||||
/>
|
||||
<circle cx="17" cy="14" r="5" fill="#D94F4F" />
|
||||
<circle cx="35" cy="14" r="5" fill="#F0B849" />
|
||||
<circle cx="53" cy="14" r="5" fill="#4AB866" />
|
||||
<rect x="3" y="28" width="730" height="304" fill="white" />
|
||||
<line x1="27" y1="95.5" x2="320" y2="95.5" stroke="#DCDCDE" />
|
||||
<line x1="49" y1="157.5" x2="306" y2="157.5" stroke="#DCDCDE" />
|
||||
<line x1="49" y1="198.5" x2="306" y2="198.5" stroke="#DCDCDE" />
|
||||
<rect
|
||||
x="27.5"
|
||||
y="116.5"
|
||||
width="372"
|
||||
height="127"
|
||||
rx="9.5"
|
||||
stroke="#DCDCDE"
|
||||
/>
|
||||
<path
|
||||
d="M49.8984 143H52.3154C54.4102 143 55.6406 141.696 55.6406 139.479V139.47C55.6406 137.258 54.4053 135.954 52.3154 135.954H49.8984V143ZM50.7773 142.209V136.745H52.2568C53.8193 136.745 54.7422 137.761 54.7422 139.479V139.489C54.7422 141.203 53.8291 142.209 52.2568 142.209H50.7773ZM59.2051 143.093C60.4453 143.093 61.1973 142.39 61.3779 141.677L61.3877 141.638H60.5381L60.5186 141.682C60.377 141.999 59.9375 142.336 59.2246 142.336C58.2871 142.336 57.6865 141.701 57.6621 140.612H61.4512V140.28C61.4512 138.708 60.582 137.644 59.1514 137.644C57.7207 137.644 56.793 138.757 56.793 140.383V140.388C56.793 142.038 57.7012 143.093 59.2051 143.093ZM59.1465 138.4C59.9229 138.4 60.499 138.894 60.5869 139.934H57.6768C57.7695 138.933 58.3652 138.4 59.1465 138.4ZM62.7695 144.758H63.6191V142.17H63.6973C63.9854 142.731 64.6152 143.093 65.3379 143.093C66.6758 143.093 67.5449 142.023 67.5449 140.373V140.363C67.5449 138.723 66.6709 137.644 65.3379 137.644C64.6055 137.644 64.0195 137.99 63.6973 138.576H63.6191V137.736H62.7695V144.758ZM65.1426 142.341C64.1855 142.341 63.5996 141.589 63.5996 140.373V140.363C63.5996 139.147 64.1855 138.396 65.1426 138.396C66.1045 138.396 66.6758 139.138 66.6758 140.363V140.373C66.6758 141.599 66.1045 142.341 65.1426 142.341ZM71.0361 143.093C72.5352 143.093 73.4629 142.058 73.4629 140.373V140.363C73.4629 138.674 72.5352 137.644 71.0361 137.644C69.5371 137.644 68.6094 138.674 68.6094 140.363V140.373C68.6094 142.058 69.5371 143.093 71.0361 143.093ZM71.0361 142.341C70.04 142.341 69.4785 141.613 69.4785 140.373V140.363C69.4785 139.118 70.04 138.396 71.0361 138.396C72.0322 138.396 72.5938 139.118 72.5938 140.363V140.373C72.5938 141.613 72.0322 142.341 71.0361 142.341ZM76.5879 143.093C77.7842 143.093 78.6973 142.443 78.6973 141.506V141.496C78.6973 140.744 78.2188 140.314 77.2275 140.075L76.417 139.88C75.7969 139.729 75.5332 139.504 75.5332 139.147V139.138C75.5332 138.674 75.9922 138.352 76.6172 138.352C77.252 138.352 77.6621 138.64 77.7744 139.055H78.6094C78.4922 138.195 77.7256 137.644 76.6221 137.644C75.5039 137.644 74.6641 138.303 74.6641 139.177V139.182C74.6641 139.938 75.1084 140.368 76.0947 140.603L76.9102 140.798C77.5596 140.954 77.8281 141.203 77.8281 141.56V141.569C77.8281 142.048 77.3252 142.385 76.6172 142.385C75.9434 142.385 75.5234 142.097 75.3818 141.657H74.5127C74.6104 142.526 75.416 143.093 76.5879 143.093ZM80.4648 136.721C80.7871 136.721 81.0508 136.457 81.0508 136.135C81.0508 135.812 80.7871 135.549 80.4648 135.549C80.1426 135.549 79.8789 135.812 79.8789 136.135C79.8789 136.457 80.1426 136.721 80.4648 136.721ZM80.0352 143H80.8848V137.736H80.0352V143ZM84.3564 143.039C84.5225 143.039 84.6836 143.02 84.8496 142.99V142.268C84.6934 142.282 84.6104 142.287 84.459 142.287C83.9121 142.287 83.6973 142.038 83.6973 141.418V138.439H84.8496V137.736H83.6973V136.374H82.8184V137.736H81.9883V138.439H82.8184V141.633C82.8184 142.639 83.2725 143.039 84.3564 143.039Z"
|
||||
fill="#2C3338"
|
||||
/>
|
||||
<path
|
||||
d="M125.866 143.708H126.452V142.888C127.604 142.795 128.562 142.136 128.562 140.964V140.954C128.562 139.934 127.858 139.416 126.604 139.113L126.452 139.079V136.838C127.111 136.921 127.58 137.326 127.644 137.98V137.99L128.493 137.985V137.98C128.454 136.906 127.58 136.174 126.452 136.071V135.246H125.866V136.071C124.709 136.179 123.884 136.892 123.884 137.937V137.946C123.884 138.903 124.538 139.445 125.754 139.738L125.866 139.768V142.116C125.017 142.023 124.641 141.54 124.553 140.935V140.925L123.703 140.93V140.935C123.742 142.067 124.704 142.775 125.866 142.883V143.708ZM124.733 137.888V137.878C124.733 137.409 125.124 136.94 125.866 136.838V138.938C125.026 138.732 124.733 138.361 124.733 137.888ZM126.481 139.914C127.448 140.148 127.712 140.49 127.712 141.022V141.032C127.712 141.594 127.36 142.053 126.452 142.126V139.909L126.481 139.914ZM132.482 143.117C133.894 143.117 134.929 142.248 134.929 141.071V141.062C134.929 140.061 134.23 139.421 133.205 139.333V139.313C134.084 139.128 134.699 138.532 134.699 137.663V137.653C134.699 136.584 133.815 135.837 132.473 135.837C131.154 135.837 130.246 136.604 130.134 137.751L130.129 137.8H130.974L130.979 137.751C131.052 137.038 131.643 136.599 132.473 136.599C133.332 136.599 133.815 137.023 133.815 137.761V137.771C133.815 138.474 133.229 138.991 132.39 138.991H131.545V139.733H132.429C133.415 139.733 134.035 140.217 134.035 141.081V141.091C134.035 141.838 133.405 142.355 132.482 142.355C131.545 142.355 130.905 141.877 130.837 141.184L130.832 141.135H129.987L129.992 141.193C130.085 142.307 131.027 143.117 132.482 143.117ZM138.669 143.166C140.1 143.166 141.12 142.175 141.12 140.754V140.744C141.12 139.382 140.168 138.391 138.845 138.391C138.205 138.391 137.653 138.649 137.341 139.123H137.263L137.502 136.74H140.729V135.954H136.809L136.438 140.002H137.199C137.287 139.836 137.399 139.699 137.521 139.582C137.824 139.294 138.225 139.152 138.693 139.152C139.606 139.152 140.261 139.821 140.261 140.759V140.769C140.261 141.721 139.616 142.39 138.679 142.39C137.854 142.39 137.243 141.853 137.16 141.179L137.155 141.14H136.311L136.315 141.193C136.418 142.321 137.355 143.166 138.669 143.166ZM142.536 143H147.097V142.209H143.757V142.131L145.358 140.476C146.633 139.162 146.979 138.576 146.979 137.771V137.761C146.979 136.623 146.037 135.788 144.807 135.788C143.459 135.788 142.492 136.687 142.487 137.937L142.497 137.941L143.337 137.946L143.342 137.937C143.342 137.106 143.903 136.555 144.748 136.555C145.578 136.555 146.081 137.111 146.081 137.854V137.863C146.081 138.479 145.817 138.845 144.919 139.816L142.536 142.395V143ZM149.123 143.049C149.475 143.049 149.758 142.761 149.758 142.414C149.758 142.062 149.475 141.779 149.123 141.779C148.776 141.779 148.488 142.062 148.488 142.414C148.488 142.761 148.776 143.049 149.123 143.049ZM153.308 135.788C151.887 135.788 150.842 136.809 150.842 138.215V138.225C150.842 139.577 151.828 140.583 153.151 140.583C154.104 140.583 154.768 140.07 155.026 139.494H155.119C155.119 139.548 155.119 139.606 155.114 139.66C155.061 141.13 154.538 142.38 153.259 142.38C152.546 142.38 152.053 142.014 151.838 141.423L151.818 141.369H150.935L150.949 141.433C151.188 142.473 152.067 143.166 153.249 143.166C154.958 143.166 155.959 141.76 155.959 139.357V139.348C155.959 136.696 154.597 135.788 153.308 135.788ZM153.303 139.816C152.39 139.816 151.726 139.143 151.726 138.205V138.195C151.726 137.282 152.434 136.564 153.317 136.564C154.211 136.564 154.909 137.297 154.909 138.225V138.229C154.909 139.147 154.216 139.816 153.303 139.816ZM159.675 135.788C158.254 135.788 157.209 136.809 157.209 138.215V138.225C157.209 139.577 158.195 140.583 159.519 140.583C160.471 140.583 161.135 140.07 161.394 139.494H161.486C161.486 139.548 161.486 139.606 161.481 139.66C161.428 141.13 160.905 142.38 159.626 142.38C158.913 142.38 158.42 142.014 158.205 141.423L158.186 141.369H157.302L157.316 141.433C157.556 142.473 158.435 143.166 159.616 143.166C161.325 143.166 162.326 141.76 162.326 139.357V139.348C162.326 136.696 160.964 135.788 159.675 135.788ZM159.67 139.816C158.757 139.816 158.093 139.143 158.093 138.205V138.195C158.093 137.282 158.801 136.564 159.685 136.564C160.578 136.564 161.276 137.297 161.276 138.225V138.229C161.276 139.147 160.583 139.816 159.67 139.816Z"
|
||||
fill="#2C3338"
|
||||
/>
|
||||
<rect
|
||||
x="195.5"
|
||||
y="132"
|
||||
width="43"
|
||||
height="14"
|
||||
rx="7"
|
||||
fill="#B8E6BF"
|
||||
/>
|
||||
<path
|
||||
d="M209.219 142H209.922V139.988H211.344C212.402 139.988 213.152 139.242 213.152 138.172V138.164C213.152 137.094 212.402 136.363 211.344 136.363H209.219V142ZM211.164 136.988C211.969 136.988 212.434 137.43 212.434 138.172V138.18C212.434 138.922 211.969 139.363 211.164 139.363H209.922V136.988H211.164ZM215.219 142.074C215.785 142.074 216.227 141.828 216.492 141.379H216.555V142H217.234V139.117C217.234 138.242 216.66 137.715 215.633 137.715C214.734 137.715 214.094 138.16 213.984 138.82L213.98 138.844H214.66L214.664 138.832C214.773 138.504 215.105 138.316 215.609 138.316C216.238 138.316 216.555 138.598 216.555 139.117V139.5L215.348 139.574C214.367 139.633 213.812 140.066 213.812 140.816V140.824C213.812 141.59 214.418 142.074 215.219 142.074ZM214.508 140.809V140.801C214.508 140.383 214.789 140.156 215.43 140.117L216.555 140.047V140.43C216.555 141.031 216.051 141.484 215.359 141.484C214.871 141.484 214.508 141.234 214.508 140.809ZM218.836 136.977C219.094 136.977 219.305 136.766 219.305 136.508C219.305 136.25 219.094 136.039 218.836 136.039C218.578 136.039 218.367 136.25 218.367 136.508C218.367 136.766 218.578 136.977 218.836 136.977ZM218.492 142H219.172V137.789H218.492V142ZM222.008 142.074C222.594 142.074 223.062 141.797 223.32 141.328H223.383V142H224.062V136.117H223.383V138.453H223.32C223.09 138.004 222.586 137.715 222.008 137.715C220.938 137.715 220.242 138.57 220.242 139.891V139.898C220.242 141.211 220.941 142.074 222.008 142.074ZM222.164 141.473C221.395 141.473 220.938 140.879 220.938 139.898V139.891C220.938 138.91 221.395 138.316 222.164 138.316C222.93 138.316 223.398 138.918 223.398 139.891V139.898C223.398 140.871 222.93 141.473 222.164 141.473Z"
|
||||
fill="#00450C"
|
||||
/>
|
||||
<rect
|
||||
x="192"
|
||||
y="173"
|
||||
width="50"
|
||||
height="10"
|
||||
rx="5"
|
||||
fill="#B8E6BF"
|
||||
/>
|
||||
<rect x="49" y="174" width="50" height="8" rx="2" fill="#DCDCDE" />
|
||||
<rect
|
||||
x="132"
|
||||
y="170"
|
||||
width="22.7796"
|
||||
height="16"
|
||||
rx="4"
|
||||
fill="#F6F7F7"
|
||||
/>
|
||||
<path
|
||||
d="M143.007 182.856C143.727 182.856 144.369 182.747 144.935 182.528C145.504 182.305 145.951 181.981 146.274 181.558C146.603 181.129 146.767 180.612 146.767 180.006V179.992C146.767 179.24 146.525 178.659 146.042 178.249C145.563 177.839 144.857 177.529 143.923 177.319L142.904 177.094C142.353 176.966 141.954 176.809 141.708 176.622C141.462 176.435 141.339 176.201 141.339 175.918V175.904C141.339 175.695 141.403 175.508 141.53 175.344C141.658 175.18 141.847 175.05 142.098 174.954C142.348 174.858 142.658 174.811 143.027 174.811C143.355 174.811 143.647 174.861 143.902 174.961C144.158 175.061 144.365 175.209 144.524 175.405C144.684 175.597 144.78 175.836 144.812 176.123L144.818 176.137L146.63 176.13L146.637 176.123C146.614 175.544 146.448 175.043 146.138 174.619C145.832 174.191 145.411 173.86 144.873 173.628C144.34 173.396 143.715 173.279 143 173.279C142.316 173.279 141.706 173.391 141.168 173.614C140.63 173.833 140.206 174.15 139.896 174.564C139.587 174.979 139.432 175.476 139.432 176.055V176.068C139.432 176.802 139.669 177.381 140.143 177.805C140.617 178.229 141.3 178.541 142.193 178.741L143.212 178.974C143.832 179.11 144.26 179.27 144.497 179.452C144.739 179.63 144.859 179.878 144.859 180.197V180.211C144.859 180.439 144.791 180.637 144.654 180.806C144.522 180.974 144.322 181.104 144.053 181.195C143.784 181.282 143.444 181.325 143.034 181.325C142.642 181.325 142.312 181.275 142.043 181.175C141.774 181.075 141.562 180.931 141.407 180.744C141.257 180.553 141.159 180.327 141.113 180.067V180.061H139.288L139.281 180.067C139.304 180.664 139.477 181.17 139.801 181.585C140.129 182 140.569 182.316 141.12 182.535C141.676 182.749 142.305 182.856 143.007 182.856ZM142.651 183.971H143.438V172.145H142.651V183.971Z"
|
||||
fill="#C3C4C7"
|
||||
/>
|
||||
<rect
|
||||
x="192"
|
||||
y="214"
|
||||
width="50"
|
||||
height="10"
|
||||
rx="5"
|
||||
fill="#B8E6BF"
|
||||
/>
|
||||
<rect x="49" y="215" width="50" height="8" rx="2" fill="#DCDCDE" />
|
||||
<rect
|
||||
x="132"
|
||||
y="211"
|
||||
width="22.7796"
|
||||
height="16"
|
||||
rx="4"
|
||||
fill="#F6F7F7"
|
||||
/>
|
||||
<path
|
||||
d="M145.379 223.856C145.643 223.856 145.903 223.847 146.158 223.829C146.413 223.806 146.63 223.774 146.808 223.733V222.072C146.639 222.104 146.427 222.129 146.172 222.147C145.917 222.161 145.677 222.168 145.454 222.168C144.944 222.168 144.483 222.106 144.073 221.983C143.668 221.856 143.319 221.664 143.027 221.409C142.74 221.149 142.519 220.826 142.364 220.438C142.209 220.051 142.132 219.595 142.132 219.071V219.064C142.132 218.545 142.207 218.091 142.357 217.704C142.512 217.317 142.733 216.995 143.021 216.74C143.312 216.48 143.659 216.287 144.06 216.159C144.461 216.027 144.91 215.961 145.406 215.961C145.648 215.961 145.892 215.972 146.138 215.995C146.384 216.018 146.598 216.048 146.78 216.084V214.437C146.603 214.386 146.379 214.348 146.11 214.32C145.841 214.293 145.582 214.279 145.331 214.279C144.565 214.279 143.864 214.38 143.226 214.58C142.592 214.781 142.043 215.081 141.578 215.482C141.113 215.883 140.753 216.382 140.498 216.979C140.247 217.576 140.122 218.269 140.122 219.058V219.064C140.122 219.857 140.247 220.555 140.498 221.156C140.753 221.753 141.113 222.252 141.578 222.653C142.048 223.05 142.604 223.351 143.246 223.556C143.889 223.756 144.6 223.856 145.379 223.856ZM138.96 220.425H146.042V219.639H138.96V220.425ZM138.96 218.531H146.042V217.745H138.96V218.531Z"
|
||||
fill="#C3C4C7"
|
||||
/>
|
||||
<g clipPath="url(#clip1_212_42381)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M30.7434 45.9644H63.492C63.9849 45.9641 64.4731 46.0616 64.9281 46.2513C65.3831 46.4409 65.796 46.719 66.1429 47.0693C66.8472 47.7805 67.2421 48.7411 67.2418 49.7421V62.3446C67.2429 63.3456 66.8487 64.3066 66.1449 65.0185C65.7984 65.3691 65.3857 65.6475 64.9308 65.8376C64.476 66.0277 63.9879 66.1257 63.4949 66.1259H51.7494L53.3562 70.1093L46.2622 66.1259H30.7434C28.677 66.1239 27.002 64.4334 27 62.3476V49.7421C27.002 47.6573 28.677 45.9663 30.7434 45.9644Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M133.383 51.6586C132.28 52.7719 131.729 54.1855 131.729 55.8994C131.729 57.7437 132.276 59.2315 133.37 60.3628C134.464 61.4941 135.892 62.0592 137.653 62.0592C138.236 62.0479 138.814 61.9591 139.373 61.7953V59.0697C138.886 59.228 138.38 59.3147 137.868 59.3276C136.991 59.3276 136.29 59.0284 135.764 58.4299C135.238 57.8308 134.975 57.0167 134.976 55.9865C134.976 55.0295 135.237 54.2433 135.759 53.6279C135.994 53.3329 136.294 53.096 136.636 52.9354C136.977 52.7747 137.351 52.6946 137.728 52.7012C138.287 52.7062 138.844 52.7904 139.382 52.9502V50.2131C138.792 50.0591 138.185 49.9838 137.575 49.989C135.881 49.989 134.482 50.5457 133.377 51.6601L133.383 51.6586ZM79.487 51.5391C80.3429 50.5054 81.5339 49.989 83.0606 49.989C84.6858 49.9865 85.9286 50.5044 86.7875 51.5426C87.6465 52.5802 88.0762 54.0611 88.0762 55.9855C88.0787 57.9095 87.6554 59.4028 86.8075 60.4654C85.9595 61.5279 84.7525 62.0592 83.1875 62.0592C81.5678 62.0592 80.3324 61.5284 79.482 60.4659C78.6315 59.4028 78.2068 57.8692 78.2068 55.864C78.2043 54.0143 78.631 52.5728 79.487 51.5391ZM69.9248 55.9019C69.9248 54.1875 70.4765 52.7739 71.5794 51.6611C72.6833 50.5467 74.081 49.9895 75.7729 49.9895C76.3824 49.9845 76.9904 50.0592 77.5809 50.2136V52.9517C77.0439 52.7917 76.4871 52.7077 75.9268 52.7022C75.5496 52.6956 75.1759 52.7757 74.8346 52.9364C74.4932 53.0971 74.1933 53.334 73.958 53.6289C73.4367 54.2443 73.1758 55.031 73.1758 55.988C73.1768 57.0177 73.4397 57.8323 73.9645 58.4308C74.4898 59.0299 75.1904 59.3291 76.0672 59.3291C76.5794 59.3161 77.087 59.2292 77.5744 59.0712V61.7958C77.013 61.9606 76.4321 62.0501 75.8471 62.0617C74.0895 62.0617 72.6629 61.4961 71.5675 60.3653C70.472 59.234 69.9248 57.7462 69.9248 55.9019ZM84.3706 58.7505C84.2353 58.9748 84.0424 59.1587 83.8119 59.2831C83.5814 59.4076 83.3218 59.468 83.0601 59.4581C82.8116 59.4654 82.5661 59.4024 82.3519 59.2764C82.1376 59.1503 81.9634 58.9663 81.8491 58.7455C81.5713 58.2705 81.4324 57.3225 81.4324 55.9014C81.4324 53.6956 81.9836 52.5922 83.0865 52.5922C84.2511 52.5922 84.8337 53.7125 84.8337 55.9522C84.8292 57.3394 84.6748 58.2705 84.3706 58.7455V58.7505ZM95.676 52.8869L96.2685 50.3127L100.194 50.3162L101.721 61.7869H98.7084L97.8948 53.8982L96.0171 61.7754H93.9592L91.9904 53.8694L91.2076 61.7749H88.3261L89.7721 50.3042H93.6181C94.1653 52.7789 94.597 54.9065 94.9137 56.6881L95.2443 54.909C95.3783 54.2219 95.5207 53.5457 95.676 52.8874V52.8869ZM110.049 50.3127L109.457 52.8869C109.3 53.5579 109.156 54.2319 109.025 54.9085L108.694 56.6881C108.378 54.9065 107.946 52.7789 107.399 50.3042H103.552L102.106 61.7749H104.988L105.771 53.8694L107.739 61.7749H109.797L111.675 53.8977L112.489 61.7869H115.501L113.975 50.3162L110.049 50.3127ZM122.102 57.2458H119.403V59.3281H122.534V61.7779H116.358V50.3077H122.514V52.7475H119.403V54.8622H122.102V57.2463V57.2458ZM131.102 55.4328C131.96 54.0486 131.623 52.2242 130.329 51.2528C129.499 50.6224 128.367 50.3072 126.935 50.3072H123.393V61.7784H126.435V56.5552H126.485L128.944 61.7784H132.159L129.729 56.6055C130.299 56.3694 130.779 55.9589 131.102 55.4328ZM126.435 52.525V55.2461C127.782 55.2247 128.455 54.8214 128.455 54.0362C128.454 53.5034 128.298 53.123 127.987 52.8939C127.676 52.6649 127.158 52.5419 126.435 52.525ZM143.258 57.2403V59.3266L146.385 59.3281V61.7779H140.209V50.3077H146.365V52.7475H143.251V54.8622H145.96V57.2413H143.258V57.2403Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M29.27 49.1734C29.3902 49.0174 29.544 48.8902 29.7198 48.8014C29.8957 48.7125 30.0893 48.6642 30.2863 48.6601C31.1118 48.6003 31.5859 48.9977 31.7083 49.8526C32.2192 53.3182 32.7644 56.2594 33.3445 58.6759L36.9102 51.7497C37.2358 51.1253 37.6406 50.7932 38.1336 50.7534C38.8471 50.7021 39.2937 51.1666 39.472 52.1471C39.8063 54.0866 40.3221 55.9904 41.0126 57.8334C41.4388 53.6174 42.1533 50.5716 43.1566 48.6964C43.2514 48.4875 43.4015 48.3085 43.5908 48.1787C43.78 48.049 44.0011 47.9735 44.2302 47.9605C44.415 47.9457 44.6009 47.9674 44.7774 48.0245C44.9538 48.0816 45.1172 48.1729 45.2584 48.2931C45.5522 48.5212 45.7339 48.8697 45.7543 49.2466C45.7768 49.5208 45.7203 49.7957 45.5915 50.0388C44.9571 51.2418 44.4333 53.242 44.02 56.0393C43.6167 58.7396 43.4673 60.8508 43.5729 62.3739C43.6098 62.7475 43.5446 63.124 43.3842 63.4634C43.3055 63.6299 43.1835 63.7721 43.031 63.8753C42.8785 63.9785 42.7011 64.0388 42.5173 64.05C42.0836 64.0798 41.6544 63.8742 41.2307 63.4335C39.719 61.8486 38.521 59.492 37.6371 56.363C36.5865 58.4906 35.8023 60.0885 35.2854 61.156C34.3319 63.0387 33.5138 64.0017 32.8307 64.045C32.386 64.0773 32.0066 63.6974 31.6919 62.9052C30.8624 60.7303 29.9706 56.5253 29.0166 50.2913C28.9804 50.0975 28.9843 49.8984 29.028 49.7061C29.0717 49.5139 29.1542 49.3326 29.2705 49.1734H29.27Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M61.8059 50.0669C62.9153 50.2839 63.8728 51.0049 64.4175 52.0322C64.9453 52.9434 65.2092 54.0547 65.2092 55.3663C65.2236 57.0516 64.7851 58.7098 63.9395 60.1678C62.9656 61.8637 61.6884 62.7117 60.1085 62.7117C59.8108 62.7102 59.5141 62.6767 59.2237 62.6116C58.1143 62.3945 57.1563 61.6735 56.6121 60.6458C56.0843 59.7186 55.8204 58.5993 55.8204 57.2878C55.8029 55.6102 56.2418 53.9595 57.0901 52.5122C58.0794 50.8162 59.3561 49.9683 60.9211 49.9683C61.2187 49.9692 61.5154 50.0022 61.8059 50.0669ZM61.1138 59.2466C61.7203 58.6839 62.135 57.8459 62.3596 56.7336V56.7386C62.4403 56.3293 62.4801 55.913 62.4786 55.4952C62.4743 54.9669 62.3771 54.4434 62.1913 53.9487C61.9518 53.3009 61.6331 52.9354 61.2348 52.8532C60.6448 52.7198 60.0781 53.0678 59.5339 53.8979C59.1191 54.5074 58.8264 55.1916 58.672 55.9125C58.5913 56.3223 58.5515 56.7391 58.5525 57.1573C58.5575 57.6851 58.655 58.2074 58.8403 58.6989C59.0793 59.3422 59.3989 59.7077 59.7983 59.7943C60.1976 59.8815 60.6363 59.6992 61.1138 59.2466ZM51.7483 50.0669C52.8577 50.2849 53.8152 51.0054 54.3604 52.0322H54.3589C54.8857 52.9434 55.1492 54.0547 55.1492 55.3663C55.1639 57.0515 54.7258 58.7098 53.8804 60.1678C52.9065 61.8637 51.6293 62.7117 50.0489 62.7117C49.7507 62.7102 49.4536 62.6766 49.1626 62.6116C48.0532 62.3935 47.0952 61.673 46.5505 60.6458C46.0237 59.7186 45.7603 58.5993 45.7603 57.2878C45.7428 55.6102 46.1816 53.9595 47.03 52.5122C48.0184 50.8162 49.2955 49.9683 50.862 49.9683C51.1601 49.9693 51.4573 50.0023 51.7483 50.0669ZM51.0562 59.2466C51.6637 58.6839 52.0789 57.8459 52.302 56.7336V56.7386C52.3832 56.3293 52.423 55.913 52.4215 55.4952C52.4162 54.9669 52.3188 54.4435 52.1337 53.9487C51.8947 53.3009 51.5755 52.9354 51.1772 52.8532C50.5872 52.7198 50.02 53.0678 49.4763 53.8979C49.0613 54.5074 48.7685 55.1915 48.6139 55.9125C48.5327 56.3218 48.4924 56.7391 48.4934 57.1573C48.4989 57.6851 48.597 58.2079 48.7822 58.6989C49.0207 59.3467 49.3404 59.7112 49.7387 59.7943C50.137 59.8775 50.5782 59.6947 51.0562 59.2466Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M87.4281 74.958V71.5477H89.8634C91.9263 71.5477 93.0726 70.1436 93.0726 68.482C93.0726 66.806 91.9408 65.4019 89.8634 65.4019H85.3936V74.957H87.4281V74.958ZM89.5771 69.7577H87.4281V67.1934H89.5771C90.3793 67.1934 90.9952 67.6804 90.9952 68.4825C90.9952 69.2702 90.3793 69.7572 89.5771 69.7572V69.7577ZM99.8697 74.958V70.4882C99.8697 68.4965 98.4228 67.8666 96.8329 67.8666C95.7439 67.8666 94.655 68.1962 93.81 68.9551L94.526 70.2302C95.0991 69.7004 95.7868 69.4136 96.5177 69.4136C97.4344 69.4136 98.0364 69.8717 98.0364 70.5738V71.4482C97.5778 70.9034 96.7756 70.6027 95.844 70.6027C94.7411 70.6027 93.452 71.2047 93.452 72.8379C93.452 74.3849 94.7411 75.1298 95.844 75.1298C96.7467 75.1298 97.5633 74.8002 98.0364 74.2271V74.958H99.8697ZM96.575 73.8975C95.8584 73.8975 95.2714 73.5255 95.2714 72.8668C95.2714 72.2075 95.8584 71.8206 96.575 71.8206C97.162 71.8206 97.7351 72.0352 98.0364 72.4365V73.296C97.7351 73.6973 97.162 73.898 96.575 73.898V73.8975ZM101.288 77.6513C101.502 77.723 101.975 77.7658 102.176 77.7658C103.365 77.737 104.282 77.3934 104.798 76.0898L108.05 68.0384H106.101L104.282 72.8523L102.477 68.0389H100.528L103.336 75.0447L103.078 75.6462C102.907 76.0186 102.591 76.1476 102.119 76.1476C101.947 76.1476 101.703 76.1048 101.546 76.0331L101.288 77.6513ZM119.134 74.958V69.9584C119.134 68.5398 118.375 67.8666 117.099 67.8666C116.039 67.8666 115.122 68.497 114.721 69.1129C114.478 68.3391 113.819 67.8666 112.801 67.8666C111.741 67.8666 110.839 68.5253 110.538 68.9267V68.0384H108.719V74.9585H110.538V70.288C110.81 69.9155 111.34 69.4858 111.971 69.4858C112.716 69.4858 113.002 69.9439 113.002 70.5887V74.9585H114.836V70.288C115.094 69.9155 115.624 69.4858 116.268 69.4858C117.013 69.4858 117.3 69.9439 117.3 70.5887V74.9585H119.134V74.958ZM124.041 75.1298C125.116 75.1298 126.204 74.8002 126.892 74.1698L126.076 72.9668C125.631 73.3965 124.829 73.64 124.242 73.64C123.067 73.64 122.379 72.938 122.25 72.0925H127.394V71.6628C127.394 69.4136 126.004 67.8666 123.926 67.8666C121.835 67.8666 120.345 69.4853 120.345 71.4915C120.345 73.7117 121.935 75.1298 124.041 75.1298ZM125.645 70.8322H122.236C122.308 70.1446 122.795 69.3564 123.926 69.3564C125.13 69.3564 125.588 70.173 125.645 70.8322ZM135.069 74.958V70.0729C135.069 68.726 134.338 67.8666 132.805 67.8666C131.687 67.8666 130.828 68.4108 130.384 68.9267V68.0384H128.564V74.9585H130.384V70.288C130.699 69.8872 131.243 69.4858 131.96 69.4858C132.733 69.4858 133.235 69.8155 133.235 70.7755V74.958H135.069ZM139.038 75.1298C139.797 75.1298 140.284 74.9292 140.557 74.6857L140.17 73.2965C140.07 73.411 139.812 73.5106 139.539 73.5106C139.139 73.5106 138.909 73.1819 138.909 72.7373V69.6287H140.313V68.0384H138.909V66.1473H137.09V68.0384H135.944V69.6287H137.09V73.2243C137.09 74.4711 137.763 75.1298 139.038 75.1298ZM143.907 75.1298C145.827 75.1298 146.916 74.1987 146.916 72.924C146.916 70.1302 142.804 70.9896 142.804 69.9723C142.804 69.5854 143.234 69.2991 143.893 69.2991C144.738 69.2991 145.527 69.6716 145.942 70.1013L146.672 68.8116C145.985 68.2674 145.053 67.8666 143.893 67.8666C142.059 67.8666 141.057 68.8838 141.057 70.044C141.057 72.7662 145.154 71.8351 145.154 72.9668C145.154 73.3965 144.781 73.6973 143.993 73.6973C143.134 73.6973 142.117 73.2243 141.601 72.7373L140.813 74.0553C141.544 74.729 142.704 75.1298 143.907 75.1298Z"
|
||||
fill="#7F54B3"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_212_42381">
|
||||
<rect width="293" height="275" fill="white" />
|
||||
</clipPath>
|
||||
<clipPath id="clip1_212_42381">
|
||||
<rect
|
||||
width="120"
|
||||
height="39.7959"
|
||||
fill="white"
|
||||
transform="translate(27 42)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -3,15 +3,13 @@
|
|||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import interpolateComponents from '@automattic/interpolate-components';
|
||||
import { Link, Pill } from '@woocommerce/components';
|
||||
import { Link } from '@woocommerce/components';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
import {
|
||||
WCPayCard,
|
||||
WCPayCardHeader,
|
||||
WCPayCardFooter,
|
||||
WCPayCardBody,
|
||||
SetupRequired,
|
||||
WCPayBenefitCard,
|
||||
} from '@woocommerce/onboarding';
|
||||
import { useDispatch } from '@wordpress/data';
|
||||
|
||||
|
|
@ -41,7 +39,6 @@ const TosPrompt = () =>
|
|||
|
||||
export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => {
|
||||
const {
|
||||
description,
|
||||
id,
|
||||
needsSetup,
|
||||
installed,
|
||||
|
|
@ -62,27 +59,14 @@ export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<WCPayCard>
|
||||
<WCPayCardHeader>
|
||||
{ installed && needsSetup ? (
|
||||
<SetupRequired />
|
||||
) : (
|
||||
<Pill>{ __( 'Recommended', 'woocommerce' ) }</Pill>
|
||||
) }
|
||||
</WCPayCardHeader>
|
||||
|
||||
<WCPayCardBody
|
||||
description={ description }
|
||||
onLinkClick={ () => {
|
||||
recordEvent( 'tasklist_payment_learn_more' );
|
||||
} }
|
||||
/>
|
||||
|
||||
<WCPayCardFooter>
|
||||
<>
|
||||
<Text lineHeight="1.5em">
|
||||
<TosPrompt />
|
||||
</Text>
|
||||
<>
|
||||
<WCPayCard>
|
||||
<WCPayCardBody
|
||||
heading={ 'Accept payments and manage your business.' }
|
||||
onLinkClick={ () => {
|
||||
recordEvent( 'tasklist_payment_learn_more' );
|
||||
} }
|
||||
>
|
||||
<Action
|
||||
id={ id }
|
||||
hasSetup={ true }
|
||||
|
|
@ -91,11 +75,17 @@ export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => {
|
|||
isRecommended={ true }
|
||||
isInstalled={ isInstalled }
|
||||
hasPlugins={ true }
|
||||
setupButtonText={ __( 'Get started', 'woocommerce' ) }
|
||||
setupButtonText={
|
||||
installed && needsSetup
|
||||
? __( 'Finish setup', 'woocommerce' )
|
||||
: __( 'Install', 'woocommerce' )
|
||||
}
|
||||
onSetupCallback={ onSetupCallback }
|
||||
/>
|
||||
</>
|
||||
</WCPayCardFooter>
|
||||
</WCPayCard>
|
||||
</WCPayCardBody>
|
||||
<WCPayCardFooter />
|
||||
</WCPayCard>
|
||||
<WCPayBenefitCard />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.components-card__footer {
|
||||
a.components-button {
|
||||
.gridicon {
|
||||
|
|
|
|||
Loading…
Reference in New Issue