Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update WCPay banners for WooPay (#39596) 

* Update WCPay banners for WooPay

* Fix unit tests

* Always checks for WooPay eligibility

* Use existing method to determine WooPay eligibility

* Create is_woopay_eligible method
This commit is contained in:
Alefe Souza 2023-08-07 23:17:59 -03:00 committed by GitHub
parent 144bf08293
commit 428feb58a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 451 additions and 741 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/onboarding/changelog/add-update-wcpay-banners-for-woopay Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Update WCPay banners for WooPay in eligible countries.

260
packages/js/onboarding/src/components/WCPayBanner/Icons/diners.js
View File

@ -1,260 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const DinersClub = () => (
/* eslint-disable */
<svg
width="51"
height="35"
viewBox="0 0 51 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1.18945"
y="0.5"
width="49"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.30356 21.1794C8.30356 20.493 7.95026 20.5381 7.6123 20.5309V20.3325C7.90535 20.347 8.20582 20.347 8.49964 20.347C8.8153 20.347 9.24386 20.3325 9.80068 20.3325C11.7479 20.3325 12.8085 21.6523 12.8085 23.0038C12.8085 23.7601 12.3724 25.6602 9.71022 25.6602C9.32704 25.6602 8.97313 25.6451 8.61983 25.6451C8.28172 25.6451 7.95026 25.6521 7.6123 25.6602V25.4616C8.06302 25.4154 8.28172 25.4004 8.30356 24.8815V21.1794ZM9.04049 24.759C9.04049 25.3469 9.4545 25.4153 9.82282 25.4153C11.4476 25.4153 11.9807 24.1715 11.9807 23.0344C11.9807 21.6071 11.0785 20.5769 9.62735 20.5769C9.31835 20.5769 9.17617 20.5992 9.04049 20.6074V24.759Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M13.0713 25.4613H13.2138C13.4243 25.4613 13.5748 25.4613 13.5748 25.2088V23.1406C13.5748 22.8053 13.4622 22.7589 13.1836 22.6067V22.4849C13.537 22.377 13.9585 22.233 13.9882 22.2101C14.0412 22.1794 14.0856 22.1712 14.1239 22.1712C14.1608 22.1712 14.1762 22.2171 14.1762 22.2788V25.2088C14.1762 25.4613 14.342 25.4613 14.5528 25.4613H14.6801V25.6599C14.4244 25.6599 14.1608 25.6448 13.8909 25.6448C13.6202 25.6448 13.3493 25.6518 13.0713 25.6599V25.4613ZM13.8758 20.9962C13.6799 20.9962 13.5074 20.813 13.5074 20.6146C13.5074 20.4235 13.6881 20.2476 13.8758 20.2476C14.071 20.2476 14.2445 20.4084 14.2445 20.6146C14.2445 20.8211 14.0786 20.9962 13.8758 20.9962Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.3957 23.1866C15.3957 22.9048 15.3126 22.8285 14.9598 22.6833V22.5383C15.2826 22.4316 15.5907 22.3319 15.952 22.1714C15.9748 22.1714 15.9966 22.1866 15.9966 22.2476V22.7439C16.426 22.4316 16.7944 22.1714 17.299 22.1714C17.9373 22.1714 18.1628 22.6447 18.1628 23.2401V25.209C18.1628 25.4614 18.3287 25.4614 18.5391 25.4614H18.6747V25.66C18.4107 25.66 18.1478 25.6449 17.8774 25.6449C17.6065 25.6449 17.3356 25.652 17.0649 25.66V25.4614H17.2005C17.4112 25.4614 17.561 25.4614 17.561 25.209V23.233C17.561 22.7974 17.299 22.5839 16.8699 22.5839C16.629 22.5839 16.2455 22.782 15.9966 22.9507V25.209C15.9966 25.4614 16.1628 25.4614 16.3735 25.4614H16.5085V25.66C16.2455 25.66 15.9822 25.6449 15.711 25.6449C15.4409 25.6449 15.1698 25.652 14.8994 25.66V25.4614H15.0351C15.2454 25.4614 15.3957 25.4614 15.3957 25.209V23.1866Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M19.2463 23.5536C19.2309 23.6223 19.2309 23.7366 19.2463 23.9963C19.2906 24.7212 19.7503 25.3162 20.3512 25.3162C20.7654 25.3162 21.0889 25.0871 21.3666 24.8053L21.4716 24.9122C21.1256 25.3777 20.6972 25.7748 20.0811 25.7748C18.8851 25.7748 18.6445 24.5987 18.6445 24.1106C18.6445 22.6144 19.6369 22.1714 20.1627 22.1714C20.7725 22.1714 21.4272 22.5606 21.4342 23.3699C21.4342 23.4163 21.4342 23.4616 21.4272 23.5075L21.3592 23.5536H19.2463ZM20.5777 23.309C20.7653 23.309 20.7873 23.2097 20.7873 23.1177C20.7873 22.7291 20.5544 22.4161 20.1331 22.4161C19.6748 22.4161 19.3588 22.759 19.2687 23.309H20.5777Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21.6074 25.4614H21.8106C22.0203 25.4614 22.1709 25.4614 22.1709 25.209V23.0646C22.1709 22.8285 21.8929 22.782 21.78 22.721V22.6069C22.3289 22.3701 22.6298 22.1714 22.6986 22.1714C22.7426 22.1714 22.7652 22.1943 22.7652 22.2711V22.9581H22.781C22.9684 22.6605 23.2848 22.1714 23.7433 22.1714C23.9312 22.1714 24.1715 22.3011 24.1715 22.576C24.1715 22.782 24.0294 22.9661 23.8189 22.9661C23.585 22.9661 23.585 22.782 23.3215 22.782C23.1939 22.782 22.7728 22.9581 22.7728 23.4163V25.209C22.7728 25.4614 22.923 25.4614 23.1337 25.4614H23.5543V25.66C23.1408 25.652 22.8261 25.6449 22.5023 25.6449C22.194 25.6449 21.878 25.652 21.6074 25.66V25.4614Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24.5026 24.5985C24.6006 25.1022 24.9008 25.5303 25.4508 25.5303C25.8937 25.5303 26.059 25.2552 26.059 24.9882C26.059 24.0871 24.4202 24.3775 24.4202 23.1488C24.4202 22.7208 24.7587 22.1714 25.586 22.1714C25.8262 22.1714 26.1495 22.2406 26.4425 22.3934L26.4953 23.1712H26.3225C26.2473 22.6906 25.9845 22.416 25.5027 22.416C25.2019 22.416 24.9164 22.5913 24.9164 22.9195C24.9164 23.8131 26.6606 23.5378 26.6606 24.7362C26.6606 25.2396 26.2625 25.7746 25.3673 25.7746C25.0668 25.7746 24.7127 25.6675 24.4504 25.5149L24.3672 24.637L24.5026 24.5985Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M33.4502 21.7134H33.2626C33.1195 20.8213 32.4953 20.4621 31.6537 20.4621C30.7879 20.4621 29.5325 21.0494 29.5325 22.8812C29.5325 24.4236 30.6158 25.5305 31.7736 25.5305C32.5173 25.5305 33.1353 25.0112 33.2854 24.2093L33.4584 24.2549L33.2854 25.3696C32.9696 25.5683 32.1196 25.7748 31.6227 25.7748C29.8638 25.7748 28.751 24.622 28.751 22.9048C28.751 21.3396 30.1271 20.2173 31.601 20.2173C32.2099 20.2173 32.7963 20.4163 33.3754 20.6226L33.4502 21.7134Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M33.7217 25.461H33.864C34.0753 25.461 34.2254 25.461 34.2254 25.2086V20.9583C34.2254 20.4617 34.1128 20.4466 33.8267 20.3625V20.2402C34.1273 20.1411 34.4434 20.004 34.6017 19.9117C34.6834 19.8666 34.7441 19.8276 34.7662 19.8276C34.8122 19.8276 34.8271 19.874 34.8271 19.9353V25.2086C34.8271 25.461 34.9927 25.461 35.203 25.461H35.3303V25.6596C35.0754 25.6596 34.8122 25.6445 34.5413 25.6445C34.2707 25.6445 34.0003 25.6516 33.7217 25.6596V25.461Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M38.5497 25.2394C38.5497 25.3773 38.632 25.3846 38.7594 25.3846C38.8502 25.3846 38.9625 25.3773 39.061 25.3773V25.538C38.7374 25.5682 38.1205 25.7285 37.9774 25.7744L37.9399 25.7512V25.1329C37.4892 25.5067 37.1429 25.7744 36.6082 25.7744C36.2023 25.7744 35.7815 25.5067 35.7815 24.8664V22.9118C35.7815 22.7131 35.7516 22.5223 35.3311 22.4847V22.3393C35.6019 22.3317 36.2023 22.2861 36.3003 22.2861C36.3838 22.2861 36.3838 22.3393 36.3838 22.5075V24.4765C36.3838 24.7057 36.3838 25.3614 37.0379 25.3614C37.2931 25.3614 37.6316 25.1635 37.9472 24.8967V22.843C37.9472 22.6905 37.5865 22.6065 37.3162 22.5306V22.3933C37.9923 22.3468 38.4139 22.2861 38.489 22.2861C38.5497 22.2861 38.5497 22.3393 38.5497 22.4235V25.2394Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M40.0461 22.7206C40.3468 22.4617 40.753 22.171 41.1666 22.171C42.0391 22.171 42.5655 22.9427 42.5655 23.7745C42.5655 24.774 41.8433 25.7744 40.7674 25.7744C40.2116 25.7744 39.9182 25.5906 39.7223 25.5066L39.4974 25.6822L39.3397 25.5986C39.4069 25.1484 39.4449 24.7057 39.4449 24.2398V20.9583C39.4449 20.4617 39.3317 20.4466 39.0459 20.3625V20.2402C39.347 20.1411 39.6625 20.004 39.8203 19.9117C39.9033 19.8666 39.9633 19.8276 39.9862 19.8276C40.031 19.8276 40.0461 19.8742 40.0461 19.9353V22.7206ZM40.0461 24.7968C40.0461 25.0867 40.317 25.5756 40.8207 25.5756C41.6252 25.5756 41.9634 24.774 41.9634 24.0944C41.9634 23.2703 41.3475 22.5835 40.7611 22.5835C40.4816 22.5835 40.249 22.767 40.0461 22.9427V24.7968Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.6628 29.4042L11.671 29.3961V27.8391C11.671 27.4982 11.4374 27.4484 11.3148 27.4484H11.2246V27.3237C11.4173 27.3237 11.6055 27.3402 11.7976 27.3402C11.9653 27.3402 12.1338 27.3237 12.3009 27.3237V27.4484H12.2401C12.0677 27.4484 11.8753 27.4816 11.8753 27.9758V29.8655C11.8753 30.0111 11.8793 30.1563 11.8995 30.2852H11.744L9.63706 27.9008V29.6124C9.63706 29.974 9.7063 30.098 10.0213 30.098H10.091V30.2228C9.91508 30.2228 9.73929 30.2066 9.56334 30.2066C9.37964 30.2066 9.19115 30.2228 9.00684 30.2228V30.098H9.0643C9.3465 30.098 9.43246 29.9027 9.43246 29.5715V27.8216C9.43246 27.5893 9.24366 27.4484 9.06027 27.4484H9.00684V27.3237C9.16203 27.3237 9.32187 27.3402 9.47707 27.3402C9.6002 27.3402 9.71884 27.3237 9.84151 27.3237L11.6628 29.4042Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.899 30.3027L11.7305 30.2969L9.65398 27.9477V29.6124C9.65893 29.9735 9.71299 30.0761 10.0211 30.0801H10.1087V30.2406H10.0906C9.91356 30.2406 9.73746 30.2239 9.56291 30.2239C9.37968 30.2239 9.19165 30.2406 9.00625 30.2406H8.98828V30.0801H9.06387C9.33429 30.0785 9.41158 29.9021 9.41453 29.5714V27.8223C9.41375 27.6011 9.23501 27.4665 9.05999 27.4665H8.98828V27.3057H9.00625C9.16268 27.3057 9.32283 27.3219 9.47632 27.3219C9.59837 27.3219 9.71655 27.3057 9.85455 27.3121L11.6528 29.3667V27.8391C11.6508 27.5092 11.4336 27.4692 11.3145 27.4665H11.2062V27.3057H11.2244C11.4177 27.3057 11.606 27.3219 11.7971 27.3219C11.9636 27.3219 12.1314 27.3057 12.3005 27.3057H12.3185V27.4665H12.2396C12.0707 27.4709 11.8973 27.486 11.8924 27.9758V29.8655C11.8924 30.0109 11.8969 30.1559 11.9165 30.2819L11.9203 30.3027H11.899ZM11.7436 30.2666H11.879C11.8607 30.1416 11.8574 30.0037 11.8574 29.8655V27.9759C11.8574 27.4774 12.0633 27.4304 12.2395 27.4301H12.2826V27.3417C12.1214 27.343 11.9598 27.3581 11.797 27.3581C11.6096 27.3581 11.4275 27.343 11.2425 27.3417L11.2421 27.4301H11.3144C11.4402 27.4304 11.6882 27.4871 11.6882 27.8391L11.6827 29.4092L11.6747 29.4172L11.6607 29.4305L9.84099 27.3417C9.71941 27.3417 9.60107 27.3581 9.47624 27.3581C9.32631 27.3581 9.17266 27.343 9.02428 27.3417L9.02351 27.4301H9.0599C9.25181 27.4304 9.44929 27.5791 9.44929 27.8223V29.5714C9.44929 29.9037 9.35806 30.116 9.06378 30.1171L9.02428 30.116V30.2051C9.20147 30.2037 9.38408 30.1884 9.56282 30.1884C9.7335 30.1884 9.90387 30.2037 10.0727 30.2051V30.1171H10.021C9.69896 30.116 9.61919 29.9735 9.61888 29.6124V27.8544L11.7436 30.2666ZM11.6623 29.4042L11.6752 29.3922L11.6623 29.4042ZM11.6528 29.3961V29.3945L11.6495 29.3918L11.6528 29.3961Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.9145 27.5313C12.6072 27.5313 12.5953 27.6064 12.534 27.9092H12.4111C12.4272 27.7928 12.4475 27.6767 12.4602 27.5562C12.4766 27.4394 12.4849 27.3236 12.4849 27.2035H12.5829C12.6159 27.3281 12.7181 27.3236 12.8292 27.3236H14.9396C15.0507 27.3236 15.1528 27.3195 15.1611 27.1948L15.2588 27.2118C15.2431 27.3236 15.2263 27.4358 15.2144 27.5482C15.2063 27.6603 15.2063 27.7721 15.2063 27.8842L15.0834 27.9304C15.075 27.777 15.0547 27.5313 14.7806 27.5313H14.1094V29.7408C14.1094 30.0612 14.2529 30.0978 14.449 30.0978H14.527V30.2227C14.3673 30.2227 14.0808 30.2066 13.8602 30.2066C13.6144 30.2066 13.3277 30.2227 13.1681 30.2227V30.0978H13.2461C13.4716 30.0978 13.5856 30.0774 13.5856 29.7495V27.5313H12.9145Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M14.5273 30.2405C14.366 30.2405 14.0798 30.224 13.8602 30.224C13.6147 30.224 13.3285 30.2405 13.168 30.2405H13.1505V30.08H13.2461C13.4716 30.0746 13.5622 30.0717 13.5673 29.7495V27.5491H12.9144V27.5128H13.6028V29.7495C13.6028 30.083 13.4703 30.1166 13.2461 30.1169H13.1855V30.2047C13.3469 30.2035 13.6226 30.1883 13.8602 30.1883C14.0731 30.1883 14.3465 30.2035 14.5087 30.2047V30.1169H14.4489C14.251 30.1166 14.0917 30.0673 14.0917 29.7409V27.5128H14.7805C15.055 27.5139 15.0914 27.7506 15.0999 27.9052L15.1885 27.872C15.1885 27.7635 15.1889 27.6549 15.1962 27.5458C15.2083 27.4384 15.2232 27.3329 15.2385 27.2265L15.1764 27.216C15.1573 27.3369 15.0419 27.3433 14.9394 27.3417H12.8077C12.7114 27.3419 12.6065 27.3372 12.5697 27.2213H12.5021C12.5015 27.3361 12.4938 27.4475 12.4783 27.5582C12.4661 27.6723 12.4473 27.7819 12.4324 27.892H12.5198C12.5735 27.6022 12.6085 27.5087 12.9144 27.5128V27.5491C12.6113 27.5552 12.618 27.6066 12.5512 27.9135L12.5483 27.9276H12.3906L12.3928 27.9061C12.4095 27.7902 12.4303 27.6736 12.4422 27.553C12.4592 27.4378 12.467 27.3225 12.467 27.2035V27.1851H12.5969L12.6 27.1982C12.6276 27.3029 12.7033 27.3037 12.8077 27.3056H14.9394C15.0534 27.3037 15.1364 27.3021 15.1434 27.1935L15.1448 27.1738L15.1634 27.1776L15.2791 27.1962L15.2761 27.2145C15.2599 27.326 15.2439 27.4378 15.2315 27.5491C15.2239 27.6604 15.2239 27.772 15.2239 27.8843V27.8968L15.212 27.9017L15.0672 27.9555L15.0663 27.9314C15.055 27.7752 15.0392 27.5491 14.7805 27.5491H14.1274V29.7409C14.1314 30.054 14.2537 30.0761 14.4489 30.08H14.5446V30.2405H14.5273Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.3896 30.098H15.4473C15.5941 30.098 15.7501 30.0775 15.7501 29.8614V27.6856C15.7501 27.4691 15.5941 27.4486 15.4473 27.4486H15.3896V27.3237C15.6384 27.3237 16.0649 27.3402 16.408 27.3402C16.7523 27.3402 17.1773 27.3237 17.4555 27.3237C17.4484 27.5023 17.4523 27.7771 17.4643 27.9595L17.341 27.9925C17.3214 27.7224 17.2723 27.507 16.8425 27.507H16.2744V28.5944H16.7604C17.0059 28.5944 17.0593 28.4537 17.0836 28.2293H17.2063C17.1981 28.3915 17.1938 28.5534 17.1938 28.7152C17.1938 28.8733 17.1981 29.031 17.2063 29.1885L17.0836 29.2134C17.0593 28.9645 17.0471 28.8026 16.7644 28.8026H16.2744V29.7697C16.2744 30.0401 16.5107 30.0401 16.7728 30.0401C17.2639 30.0401 17.4806 30.0066 17.6034 29.5338L17.7176 29.5624C17.6644 29.7829 17.6157 30.0024 17.579 30.2228C17.3167 30.2228 16.8462 30.2068 16.4786 30.2068C16.1096 30.2068 15.6231 30.2228 15.3896 30.2228V30.098Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17.5784 30.2406C17.3159 30.2406 16.845 30.2233 16.478 30.2233C16.1093 30.2233 15.623 30.2406 15.3893 30.2406H15.3721V30.0801H15.4469C15.595 30.0776 15.7297 30.0644 15.7316 29.8614V27.6856C15.7297 27.4827 15.595 27.4692 15.4469 27.4665H15.3721V27.3057H15.3893C15.6392 27.3057 16.0649 27.3219 16.4078 27.3219C16.7518 27.3219 17.1766 27.3057 17.4553 27.3057H17.4734L17.4728 27.3248C17.4701 27.3869 17.4684 27.4608 17.4684 27.539C17.4684 27.6825 17.4728 27.8399 17.4808 27.9581L17.4816 27.9729L17.4678 27.9771L17.3239 28.0153L17.3233 27.9939C17.2992 27.7245 17.2635 27.5284 16.8422 27.5243H16.2907L16.2904 28.5762H16.76C16.9959 28.5737 17.038 28.4514 17.0659 28.2274L17.0668 28.2107H17.2242L17.2239 28.2297C17.216 28.392 17.2112 28.5534 17.2112 28.7152C17.2112 28.8722 17.216 29.0299 17.2239 29.1878L17.2242 29.2029L17.2093 29.2063L17.0668 29.2351L17.0659 29.2156C17.0376 28.962 17.0357 28.823 16.7642 28.8201H16.2907V29.7698C16.2913 30.0222 16.5057 30.0208 16.7724 30.0222C17.2651 30.0192 17.4624 29.9947 17.5857 29.5289L17.5899 29.5121L17.6071 29.5149L17.7383 29.5495L17.7345 29.5666C17.6814 29.7864 17.6326 30.006 17.5956 30.2258L17.5925 30.2406H17.5784ZM17.5634 30.2048C17.5992 29.9948 17.6458 29.785 17.696 29.576L17.6155 29.5554C17.4929 30.0199 17.2555 30.0614 16.7726 30.0583C16.5147 30.0583 16.257 30.0583 16.2556 29.7698V28.7846H16.7644C17.0501 28.7816 17.0789 28.9564 17.0994 29.1927L17.1877 29.1743C17.1798 29.0212 17.1757 28.8674 17.1757 28.7152C17.1757 28.5593 17.1798 28.4037 17.1877 28.2469H17.0994C17.0763 28.4639 17.0095 28.6153 16.7602 28.6126H16.2556V27.4884H16.8424C17.2679 27.4849 17.3384 27.7085 17.357 27.9698L17.4451 27.9454C17.438 27.8283 17.4332 27.6777 17.4332 27.539C17.4332 27.4679 17.435 27.4005 17.4373 27.3417C17.1593 27.343 16.7444 27.3581 16.408 27.3581C16.0717 27.3581 15.6579 27.343 15.4074 27.3417V27.4301H15.4471C15.5927 27.4304 15.7667 27.456 15.7677 27.6857V29.8614C15.7667 30.0907 15.5927 30.116 15.4471 30.1171H15.4074V30.2048C15.6456 30.204 16.1186 30.1884 16.4781 30.1884C16.8393 30.1884 17.2996 30.204 17.5634 30.2048Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.27 27.7636C18.27 27.4608 18.1062 27.4484 17.9792 27.4484H17.9053V27.3237C18.0363 27.3237 18.29 27.3402 18.5398 27.3402C18.7849 27.3402 18.9816 27.3237 19.1984 27.3237C19.7132 27.3237 20.1725 27.4647 20.1725 28.0549C20.1725 28.4284 19.9268 28.6565 19.6037 28.7861L20.3031 29.8487C20.418 30.0244 20.4991 30.0736 20.7002 30.098V30.2228C20.5648 30.2228 20.4339 30.2068 20.2993 30.2068C20.1725 30.2068 20.041 30.2228 19.9148 30.2228C19.5994 29.8035 19.3291 29.3552 19.0634 28.8768H18.7937V29.7661C18.7937 30.0859 18.9407 30.098 19.1282 30.098H19.2024V30.2228C18.9687 30.2228 18.7324 30.2068 18.4986 30.2068C18.3022 30.2068 18.1099 30.2228 17.9053 30.2228V30.098H17.9792C18.1311 30.098 18.27 30.0277 18.27 29.8743V27.7636ZM18.7938 28.7271H18.9938C19.4035 28.7271 19.624 28.5697 19.624 28.0794C19.624 27.7101 19.3908 27.4733 19.0262 27.4733C18.9033 27.4733 18.851 27.4861 18.7938 27.4901V28.7271Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M20.6994 30.2406C20.5622 30.2406 20.4321 30.2239 20.2975 30.2239C20.1728 30.2239 20.0419 30.2406 19.8994 30.2337C19.5855 29.8155 19.3165 29.3697 19.0522 28.8955H18.8105V29.7653C18.8149 30.078 18.9384 30.0757 19.1275 30.0801H19.2193V30.2406H19.2012C18.9674 30.2406 18.7296 30.2239 18.4977 30.2239C18.3023 30.2239 18.1101 30.2406 17.9045 30.2406H17.8867V30.0801H17.9784C18.1256 30.079 18.2499 30.0139 18.2505 29.8743V27.7636C18.2474 27.4692 18.1054 27.4706 17.9784 27.4665H17.8867V27.3057H17.9045C18.037 27.3057 18.2896 27.3219 18.5391 27.3219C18.7833 27.3219 18.9796 27.3057 19.1977 27.3057C19.7136 27.3068 20.1883 27.4509 20.1895 28.0543C20.1895 28.4291 19.9455 28.6633 19.6299 28.794L20.317 29.8388C20.4315 30.0111 20.5027 30.0541 20.7018 30.0801L20.7166 30.0824V30.2406H20.6994ZM18.7927 28.8589H19.0723L19.0774 28.8682C19.3438 29.3453 19.6127 29.7938 19.9139 30.2051C20.0385 30.2051 20.17 30.1884 20.2974 30.1884C20.428 30.1884 20.5544 30.2029 20.6814 30.2048V30.1136C20.4896 30.0899 20.3995 30.0311 20.2878 29.8589L19.5755 28.7778L19.5956 28.7695C19.9161 28.6414 20.1535 28.4195 20.1537 28.0543C20.1535 27.4782 19.712 27.3445 19.1976 27.3417C18.9821 27.3417 18.7854 27.3585 18.539 27.3585C18.2986 27.3585 18.0558 27.343 17.9219 27.3417V27.4301H17.9783C18.1053 27.4304 18.2861 27.4518 18.2861 27.7637V29.8743C18.2861 30.041 18.1323 30.1168 17.9783 30.1171H17.9219V30.2048C18.1186 30.204 18.3054 30.1884 18.4977 30.1884C18.7261 30.1884 18.9572 30.204 19.1835 30.2048V30.1171H19.1274C18.9411 30.1168 18.7746 30.0933 18.7746 29.7654V28.8589H18.7927ZM18.7926 28.7449H18.7745V27.4733L18.7901 27.472C18.8462 27.4674 18.9013 27.456 19.0251 27.456C19.3978 27.456 19.6405 27.7017 19.6408 28.0804C19.6397 28.5762 19.4055 28.7448 18.9927 28.7449H18.7926ZM18.993 28.7094C19.398 28.7053 19.6021 28.5628 19.6061 28.0803C19.6037 27.7174 19.3817 27.4923 19.0253 27.4908C18.9149 27.4908 18.8627 27.5011 18.8105 27.5063V28.7094H18.993Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M23.4779 29.4042L23.485 29.3961V27.8391C23.485 27.4982 23.2526 27.4484 23.1297 27.4484H23.0401V27.3237C23.2324 27.3237 23.42 27.3402 23.6128 27.3402C23.781 27.3402 23.9475 27.3237 24.1165 27.3237V27.4484H24.0549C23.8829 27.4484 23.6907 27.4816 23.6907 27.9758V29.8655C23.6907 30.0111 23.6948 30.1563 23.7149 30.2852H23.56L21.453 27.9008V29.6124C21.453 29.974 21.522 30.098 21.8371 30.098H21.9068V30.2228C21.731 30.2228 21.5547 30.2066 21.3789 30.2066C21.1941 30.2066 21.0063 30.2228 20.8223 30.2228V30.098H20.8791C21.1616 30.098 21.248 29.9027 21.248 29.5715V27.8216C21.248 27.5893 21.0595 27.4484 20.8755 27.4484H20.8223V27.3237C20.9772 27.3237 21.1379 27.3402 21.2931 27.3402C21.4147 27.3402 21.534 27.3237 21.6569 27.3237L23.4779 29.4042Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M23.7146 30.3027L23.5466 30.2969L21.4697 27.948V29.6122C21.4745 29.974 21.5284 30.0761 21.8369 30.0801H21.9237V30.2406H21.9059C21.729 30.2406 21.5534 30.2233 21.378 30.2233C21.1954 30.2233 21.0063 30.2406 20.822 30.2406H20.8037V30.0801H20.879C21.1493 30.079 21.2267 29.9021 21.2293 29.5704V27.8216C21.2289 27.6003 21.0504 27.4665 20.8754 27.4665H20.8037V27.3057H20.822C20.9783 27.3057 21.1384 27.3219 21.2928 27.3219C21.413 27.3219 21.5315 27.3057 21.6687 27.311L23.4676 29.3667V27.8391C23.4665 27.5092 23.2486 27.4684 23.1296 27.4665H23.0217V27.3057H23.0395C23.2328 27.3057 23.4214 27.3219 23.6127 27.3219C23.7794 27.3219 23.9469 27.3057 24.1156 27.3057H24.1337V27.4665H24.0547C23.8859 27.4706 23.712 27.486 23.708 27.9758V29.8655C23.708 30.0109 23.7115 30.1549 23.7324 30.2822L23.7344 30.3027H23.7146ZM23.5596 30.2666H23.6937C23.6757 30.1424 23.6722 30.0037 23.6722 29.8655V27.9759C23.6725 27.4774 23.8794 27.4312 24.0546 27.4301H24.0976V27.3417C23.9365 27.343 23.7748 27.3581 23.6125 27.3581C23.4245 27.3581 23.2422 27.343 23.0571 27.3417V27.4301H23.1294C23.2555 27.4312 23.5033 27.4871 23.5033 27.8391L23.4974 29.4092L23.49 29.4172L23.4772 29.4309L21.6566 27.3417C21.5349 27.3417 21.4163 27.3581 21.2927 27.3581C21.1409 27.3581 20.988 27.343 20.8393 27.3417V27.4301H20.8752C21.0678 27.4312 21.2646 27.5785 21.2646 27.8217V29.5705C21.2646 29.9037 21.1722 30.116 20.8788 30.1171L20.8393 30.1168V30.2049C21.016 30.2037 21.1983 30.1884 21.3778 30.1884C21.5495 30.1884 21.7195 30.2037 21.8887 30.2049V30.1171H21.8368C21.5148 30.1168 21.4345 29.974 21.4336 29.6123V27.855L23.5596 30.2666ZM23.4775 29.4042L23.4908 29.3922L23.4775 29.4042ZM23.4674 29.3961V29.395L23.4645 29.3918L23.4674 29.3961Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24.7741 29.6286C24.7329 29.7693 24.6835 29.8784 24.6835 29.9521C24.6835 30.0771 24.8559 30.0977 24.9905 30.0977H25.0362V30.2224C24.8718 30.2134 24.7049 30.2064 24.5402 30.2064C24.3929 30.2064 24.2464 30.2134 24.0986 30.2224V30.0977H24.1236C24.2828 30.0977 24.4183 30.002 24.479 29.8275L25.1337 27.9218C25.1872 27.7677 25.2609 27.5602 25.2858 27.4062C25.4159 27.3607 25.5803 27.2782 25.6577 27.2277C25.6704 27.2235 25.678 27.2192 25.6904 27.2192C25.7028 27.2192 25.7104 27.2192 25.7194 27.2323C25.7314 27.2651 25.7434 27.3026 25.7561 27.3357L26.5093 29.5082C26.5584 29.6531 26.607 29.8067 26.6594 29.932C26.7092 30.0485 26.7952 30.0977 26.9307 30.0977H26.9552V30.2224C26.7709 30.2134 26.5862 30.2064 26.3908 30.2064C26.1902 30.2064 25.985 30.2134 25.7763 30.2224V30.0977H25.8214C25.915 30.0977 26.0756 30.0812 26.0756 29.9773C26.0756 29.9237 26.0386 29.8114 25.9929 29.678L25.8335 29.1964H24.9048L24.7741 29.6286ZM25.3715 27.7887H25.363L24.9827 28.9642H25.7472L25.3715 27.7887Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M26.954 30.2404C26.7702 30.2324 26.5857 30.2231 26.3909 30.2231C26.1903 30.2231 25.9861 30.2324 25.7774 30.2404L25.7585 30.2414V30.0791H25.8215C25.9163 30.0791 26.0569 30.0576 26.0572 29.9776C26.0582 29.9302 26.0215 29.8164 25.9764 29.6844L25.8206 29.2145H24.9181L24.7907 29.6342C24.7495 29.7754 24.6998 29.8851 24.7006 29.9527C24.702 30.0541 24.8547 30.0791 24.9905 30.0791H25.0534V30.2414L25.0348 30.2404C24.8713 30.2324 24.7043 30.2231 24.5406 30.2231C24.3945 30.2231 24.2466 30.2324 24.1001 30.2404L24.0811 30.2414V30.0791H24.1235C24.2756 30.0788 24.4026 29.9906 24.4618 29.8219L25.1171 27.9156C25.1699 27.7619 25.2442 27.5553 25.2796 27.3893C25.408 27.3451 25.5726 27.2613 25.6511 27.2112C25.6626 27.2071 25.6739 27.2017 25.6903 27.2017C25.7004 27.2011 25.7224 27.2038 25.7357 27.2255C25.7473 27.2596 25.7603 27.2969 25.7727 27.3303L26.5261 29.5025C26.5742 29.6479 26.6232 29.8013 26.6768 29.9244C26.7242 30.0351 26.7993 30.0788 26.9308 30.0791H26.9721V30.2414L26.954 30.2404ZM25.7943 30.2036C25.9968 30.1963 26.1955 30.1883 26.391 30.1883C26.5807 30.1883 26.7591 30.1963 26.9369 30.2036V30.1166H26.9309C26.7906 30.1176 26.6941 30.0616 26.6439 29.9391C26.5906 29.8137 26.5409 29.6595 26.4926 29.5141L25.7392 27.3417C25.7268 27.3086 25.7152 27.2715 25.7045 27.2419C25.7005 27.2378 25.7014 27.2378 25.6981 27.2378H25.6904C25.6822 27.2378 25.6772 27.2403 25.6667 27.243C25.588 27.2949 25.424 27.3768 25.3023 27.4092C25.2773 27.5666 25.2036 27.7741 25.1505 27.928L24.4958 29.8338C24.4335 30.0143 24.2896 30.1169 24.1236 30.1166H24.1168V30.2036C24.2571 30.1963 24.3987 30.1883 24.5407 30.1883C24.699 30.1883 24.8604 30.1963 25.017 30.2036V30.1166H24.9906C24.857 30.1147 24.6708 30.1 24.6661 29.9528C24.6665 29.8704 24.7166 29.7642 24.7568 29.6238L24.7741 29.629L24.7568 29.6233L24.8915 29.1795H25.8456L26.0095 29.6727C26.0555 29.8063 26.0926 29.917 26.0926 29.9777C26.0866 30.1048 25.9144 30.1143 25.8216 30.1166H25.7943V30.2036ZM24.958 28.9822L25.3497 27.7704H25.3717V27.7888L25.3674 27.7901L25.3717 27.7888V27.7704H25.384L25.7729 28.9822H24.958ZM25.0067 28.946H25.723L25.3669 27.8331L25.0067 28.946ZM25.3539 27.7943L25.3634 27.7913L25.3539 27.7943Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M27.1347 27.5313C26.8279 27.5313 26.8155 27.6064 26.7538 27.9092H26.6309C26.647 27.7928 26.6679 27.6767 26.6806 27.5562C26.6965 27.4394 26.7044 27.3236 26.7044 27.2035H26.8034C26.8355 27.3281 26.938 27.3236 27.0484 27.3236H29.1601C29.2701 27.3236 29.3723 27.3195 29.3804 27.1948L29.4783 27.2118C29.4631 27.3236 29.4468 27.4358 29.434 27.5482C29.425 27.6603 29.425 27.7721 29.425 27.8842L29.3028 27.9304C29.2955 27.777 29.2749 27.5313 29.0001 27.5313H28.3292V29.7408C28.3292 30.0612 28.4726 30.0978 28.6687 30.0978H28.7469V30.2227C28.5871 30.2227 28.3011 30.2066 28.0797 30.2066C27.8346 30.2066 27.5475 30.2227 27.3879 30.2227V30.0978H27.4658C27.6914 30.0978 27.8055 30.0774 27.8055 29.7495V27.5313H27.1347Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M28.748 30.2405C28.5872 30.2405 28.3003 30.224 28.0804 30.224C27.836 30.224 27.5495 30.2405 27.3892 30.2405H27.371V30.08H27.4669C27.6926 30.0746 27.783 30.0717 27.7885 29.7495L27.7881 27.5491H27.1358V27.5128H27.8242V29.7495C27.8242 30.083 27.6917 30.1158 27.4669 30.1166H27.4067V30.205C27.5684 30.2035 27.8433 30.1883 28.0804 30.1883C28.2943 30.1883 28.5681 30.2035 28.7297 30.205V30.1166H28.6696C28.4724 30.1158 28.313 30.0677 28.3127 29.7409V27.5128H29.0012C29.2761 27.5139 29.3119 27.7506 29.3198 27.9052L29.4087 27.872C29.4087 27.7635 29.4093 27.6549 29.4177 27.5463C29.4287 27.4392 29.4442 27.3329 29.459 27.227L29.3972 27.216C29.3785 27.3369 29.263 27.3436 29.1612 27.3417H27.0286C26.9321 27.3428 26.8277 27.3372 26.7905 27.221H26.7236C26.7227 27.3359 26.7146 27.4475 26.6985 27.5582C26.6874 27.6728 26.6677 27.7827 26.6521 27.892H26.74C26.7938 27.6022 26.8293 27.5082 27.1358 27.5128V27.5491C26.8323 27.5544 26.839 27.6066 26.7723 27.9135L26.7693 27.9276H26.6113L26.6138 27.907C26.631 27.7902 26.6511 27.6736 26.6631 27.554C26.6798 27.4378 26.6874 27.3225 26.6874 27.2035V27.1851H26.8173L26.8207 27.1982C26.8494 27.3029 26.9239 27.3037 27.0286 27.3056H29.1612C29.2744 27.3037 29.357 27.3021 29.3643 27.1938L29.3649 27.1738L29.3839 27.1776L29.5001 27.1962L29.4973 27.2145C29.4804 27.326 29.4649 27.4378 29.4525 27.5491C29.4442 27.6604 29.4442 27.7722 29.4442 27.8843V27.8968L29.4322 27.9017L29.2874 27.9555L29.2868 27.9314C29.2761 27.7752 29.2599 27.5491 29.0012 27.5491H28.3479V29.7409C28.3521 30.054 28.4746 30.0761 28.6696 30.08H28.765V30.2405H28.748Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M29.6299 30.098H29.6872C29.8346 30.098 29.9895 30.0775 29.9895 29.8614V27.6856C29.9895 27.4691 29.8346 27.4486 29.6872 27.4486H29.6299V27.3237C29.7896 27.3237 30.0346 27.3402 30.2349 27.3402C30.4399 27.3402 30.6856 27.3237 30.8783 27.3237V27.4486H30.8208C30.6729 27.4486 30.5174 27.4691 30.5174 27.6856V29.8614C30.5174 30.0775 30.6729 30.098 30.8208 30.098H30.8783V30.2228C30.6817 30.2228 30.4359 30.2068 30.2316 30.2068C30.0307 30.2068 29.7896 30.2228 29.6299 30.2228V30.098Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.8792 30.2406C30.6814 30.2406 30.4367 30.2233 30.2325 30.2233C30.0322 30.2233 29.7906 30.2406 29.6308 30.2406H29.6133V30.0801H29.6882C29.8357 30.0776 29.9717 30.0644 29.9726 29.8614V27.6856C29.9717 27.4827 29.8357 27.4692 29.6882 27.4665H29.6133V27.3057H29.6308C29.7906 27.3057 30.0367 27.3219 30.2358 27.3219C30.4397 27.3219 30.6852 27.3057 30.8792 27.3057H30.8962V27.4665H30.8218C30.6721 27.4692 30.5375 27.4827 30.5361 27.6856V29.8614C30.5375 30.0644 30.6721 30.0776 30.8218 30.0801H30.8962V30.2406H30.8792ZM30.8605 30.2048V30.1168H30.8218C30.6749 30.1168 30.5013 30.0907 30.5013 29.8614V27.6857C30.5013 27.456 30.6749 27.4304 30.8218 27.4301H30.8605V27.3417C30.6718 27.343 30.4349 27.3581 30.2357 27.3581C30.0415 27.3581 29.8073 27.343 29.6485 27.3417V27.4301H29.6882C29.8334 27.4304 30.0078 27.456 30.0083 27.6857V29.8614C30.0078 30.0907 29.8334 30.1168 29.6882 30.1168H29.6485V30.2048C29.8062 30.2029 30.0376 30.1884 30.2324 30.1884C30.4308 30.1884 30.6675 30.2037 30.8605 30.2048Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M32.5103 27.2612C33.3826 27.2612 34.0779 27.81 34.0779 28.6947C34.0779 29.65 33.4026 30.285 32.5314 30.285C31.6636 30.285 31.001 29.6868 31.001 28.7937C31.001 27.9303 31.6595 27.2612 32.5103 27.2612ZM32.5722 30.1022C33.3663 30.1022 33.5048 29.3915 33.5048 28.7859C33.5048 28.179 33.1823 27.4442 32.5027 27.4442C31.7868 27.4442 31.5738 28.0922 31.5738 28.6482C31.5738 29.3915 31.9096 30.1022 32.5722 30.1022Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.9824 28.7937C30.9841 27.9203 31.6503 27.2446 32.5099 27.2432V27.2795C31.6687 27.2795 31.018 27.9394 31.0171 28.7937C31.0188 29.6767 31.6718 30.266 32.5313 30.2663C33.3937 30.266 34.0592 29.6401 34.0603 28.694C34.0595 27.8204 33.3752 27.2803 32.5099 27.2795V27.2432C33.3884 27.2441 34.0936 27.7983 34.0951 28.694C34.0942 29.6593 33.4109 30.3009 32.5313 30.3024C31.656 30.3009 30.9841 29.6967 30.9824 28.7937ZM31.5555 28.6481C31.5567 28.0892 31.7715 27.4255 32.5021 27.4255C33.1969 27.4271 33.5209 28.1755 33.5223 28.7858C33.5209 29.3914 33.3806 30.1191 32.572 30.1191V30.0839C33.35 30.0833 33.4852 29.3914 33.4864 28.7858C33.4864 28.1842 33.1672 27.4632 32.5021 27.4621C31.8002 27.4629 31.5928 28.0949 31.5909 28.6481C31.5912 29.3879 31.9239 30.0828 32.572 30.0839V30.1191C31.8928 30.1185 31.5567 29.3958 31.5555 28.6481Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M36.8353 29.4042L36.8439 29.3961V27.8391C36.8439 27.4982 36.6098 27.4484 36.4872 27.4484H36.3981V27.3237C36.5899 27.3237 36.7785 27.3402 36.9703 27.3402C37.1385 27.3402 37.3062 27.3237 37.4741 27.3237V27.4484H37.4126C37.2411 27.4484 37.048 27.4816 37.048 27.9758V29.8655C37.048 30.0111 37.0523 30.1563 37.0731 30.2852H36.9174L34.8098 27.9008V29.6124C34.8098 29.974 34.8796 30.098 35.194 30.098H35.2642V30.2228C35.0881 30.2228 34.9124 30.2066 34.7365 30.2066C34.5522 30.2066 34.3638 30.2228 34.1797 30.2228V30.098H34.2371C34.52 30.098 34.6053 29.9027 34.6053 29.5715V27.8216C34.6053 27.5893 34.4177 27.4484 34.2327 27.4484H34.1797V27.3237C34.3352 27.3237 34.4946 27.3402 34.6504 27.3402C34.7729 27.3402 34.8909 27.3237 35.0142 27.3237L36.8353 29.4042Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M37.0729 30.3027L36.9036 30.2969L34.827 27.948V29.6124C34.8318 29.974 34.8859 30.0757 35.1932 30.0793H35.2813V30.2406H35.264C35.0868 30.2406 34.9111 30.2239 34.7361 30.2239C34.5527 30.2239 34.3644 30.2406 34.1788 30.2406H34.1621V30.0793H34.2366C34.5063 30.0785 34.584 29.9021 34.5873 29.5714V27.8216C34.5871 27.6003 34.4082 27.4665 34.2324 27.4665H34.1621V27.3057H34.1788C34.3357 27.3057 34.4953 27.3219 34.6498 27.3219C34.7713 27.3219 34.8888 27.3057 35.0276 27.3121L36.8255 29.3667V27.8391C36.8241 27.5092 36.6062 27.4692 36.4868 27.4665H36.379V27.3057H36.3977C36.5899 27.3057 36.7787 27.3219 36.9694 27.3219C37.1368 27.3219 37.3038 27.3057 37.4739 27.3057H37.4911V27.4665H37.4121C37.2434 27.4709 37.0693 27.4866 37.0659 27.9758V29.8655C37.0659 30.0109 37.0691 30.1559 37.089 30.2822L37.0925 30.3027H37.0729ZM36.9171 30.2666H37.0512C37.0339 30.1416 37.0298 30.0037 37.0298 29.8655V27.9759C37.0298 27.4766 37.2365 27.4312 37.4121 27.4301H37.4564V27.3417C37.2939 27.343 37.133 27.3581 36.9694 27.3581C36.7831 27.3581 36.6002 27.343 36.4149 27.3417V27.4301H36.4868C36.6132 27.4312 36.8602 27.4879 36.8602 27.8391L36.8559 29.4092L36.848 29.4172L36.835 29.4309L35.014 27.3417C34.8929 27.3417 34.7738 27.3581 34.6499 27.3581C34.499 27.3581 34.3454 27.343 34.1965 27.3417V27.4301H34.2325C34.4248 27.4312 34.6225 27.5785 34.6225 27.8217V29.5714C34.6225 29.9037 34.5311 30.116 34.2366 30.1171L34.1965 30.1168V30.2049C34.3742 30.2037 34.5563 30.1884 34.7361 30.1884C34.9068 30.1884 35.0764 30.2037 35.246 30.2049V30.1171H35.1932C34.8721 30.1168 34.7916 29.974 34.7916 29.6124V27.8544L36.9171 30.2666ZM36.8351 29.4042L36.8481 29.3922L36.8351 29.4042ZM36.8256 29.3961V29.395L36.8224 29.3918L36.8256 29.3961Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M38.1311 29.6286C38.091 29.7693 38.0416 29.8784 38.0416 29.9521C38.0416 30.0771 38.214 30.0977 38.3481 30.0977H38.3938V30.2224C38.2299 30.2134 38.062 30.2064 37.8981 30.2064C37.7508 30.2064 37.6037 30.2134 37.457 30.2224V30.0977H37.4803C37.6407 30.0977 37.7762 30.002 37.836 29.8275L38.4921 27.9218C38.5449 27.7677 38.619 27.5602 38.6425 27.4062C38.774 27.3607 38.9373 27.2782 39.0161 27.2277C39.0276 27.2235 39.0358 27.2192 39.0485 27.2192C39.0604 27.2192 39.0681 27.2192 39.0765 27.2323C39.0889 27.2651 39.1011 27.3026 39.1135 27.3357L39.8664 29.5082C39.9152 29.6531 39.9646 29.8067 40.0181 29.932C40.0672 30.0485 40.153 30.0977 40.2879 30.0977H40.3131V30.2224C40.1286 30.2134 39.9443 30.2064 39.7478 30.2064C39.5477 30.2064 39.3428 30.2134 39.1338 30.2224V30.0977H39.1792C39.2728 30.0977 39.4332 30.0812 39.4332 29.9773C39.4332 29.9237 39.3965 29.8114 39.3508 29.678L39.1913 29.1964H38.2626L38.1311 29.6286ZM38.7292 27.7887H38.721L38.3395 28.9642H39.1059L38.7292 27.7887Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M40.3115 30.2407C40.127 30.2333 39.9433 30.224 39.7482 30.224C39.5485 30.224 39.3435 30.2333 39.135 30.2407L39.1169 30.2416V30.0802H39.1791C39.2742 30.0802 39.4152 30.0578 39.4153 29.9778C39.4164 29.9305 39.3794 29.8172 39.3334 29.6846L39.1782 29.2147H38.2749L38.1485 29.6345C38.1073 29.7768 38.059 29.8854 38.0595 29.9527C38.0595 30.0544 38.213 30.0802 38.3482 30.0802H38.4107V30.2416L38.3923 30.2407C38.2289 30.2333 38.0613 30.224 37.8984 30.224C37.7517 30.224 37.6049 30.2333 37.4573 30.2407L37.4395 30.2416V30.0802H37.4805C37.6331 30.0794 37.7607 29.9907 37.8206 29.8222L38.475 27.9159C38.5275 27.7621 38.6014 27.5556 38.6373 27.3902C38.7659 27.3449 38.9302 27.2616 39.0098 27.2114C39.0204 27.2073 39.0318 27.2023 39.0486 27.2023C39.0591 27.2014 39.0806 27.204 39.0932 27.2267C39.1056 27.2594 39.1176 27.2971 39.131 27.3306L39.8834 29.5027C39.9326 29.6482 39.9814 29.8016 40.0346 29.9255C40.0827 30.0354 40.1568 30.0791 40.2876 30.0802H40.3299V30.2416L40.3115 30.2407ZM39.1516 30.204C39.354 30.1964 39.5531 30.1884 39.7482 30.1884C39.9384 30.1884 40.1164 30.1964 40.295 30.2037L40.2945 30.1167H40.2877C40.1491 30.117 40.0526 30.0617 40.0015 29.9392C39.9476 29.8138 39.8989 29.6596 39.8498 29.5146L39.0969 27.3418C39.0849 27.3087 39.0718 27.2716 39.0622 27.2428C39.0588 27.2379 39.0591 27.2379 39.0567 27.2379H39.0486C39.0398 27.2379 39.0353 27.2407 39.0255 27.2436C38.9455 27.2944 38.7817 27.3777 38.6609 27.4093C38.6355 27.5666 38.5612 27.7738 38.5085 27.9281L37.8532 29.8339C37.7909 30.0144 37.648 30.117 37.4806 30.1167H37.4745V30.2037C37.6155 30.1964 37.7561 30.1884 37.8984 30.1884C38.0569 30.1884 38.2187 30.1964 38.3759 30.2037V30.1167H38.3482C38.2152 30.1148 38.0287 30.1005 38.0234 29.9526C38.0245 29.8705 38.0749 29.7646 38.115 29.6239L38.1314 29.6291L38.115 29.6234L38.2496 29.1796H39.2033L39.3677 29.6728C39.4127 29.8064 39.4501 29.9171 39.4501 29.9777C39.4442 30.1049 39.2721 30.1144 39.1792 30.1167H39.1516V30.204ZM38.3155 28.9823L38.7084 27.7707H38.7296V27.7891L38.725 27.7904L38.7296 27.7891V27.7707H38.742L39.1289 28.9823H38.3155ZM38.3649 28.9463H39.0808L38.7249 27.834L38.3649 28.9463ZM38.7127 27.7946L38.7207 27.7916L38.7127 27.7946Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M41.3443 29.8155C41.3443 29.9824 41.458 30.0316 41.5893 30.0489C41.7568 30.0614 41.9411 30.0614 42.1299 30.0401C42.3015 30.0192 42.4488 29.9202 42.5222 29.8155C42.5873 29.7243 42.6241 29.608 42.6492 29.5168H42.7676C42.7225 29.7535 42.6653 29.9864 42.6162 30.2228C42.2569 30.2228 41.8957 30.2068 41.5362 30.2068C41.1758 30.2068 40.816 30.2228 40.4561 30.2228V30.098H40.5127C40.6603 30.098 40.8205 30.0775 40.8205 29.82V27.6856C40.8205 27.4691 40.6603 27.4484 40.5127 27.4484H40.4561V27.3237C40.6726 27.3237 40.8857 27.3402 41.1022 27.3402C41.3113 27.3402 41.5155 27.3237 41.7247 27.3237V27.4484H41.6219C41.4664 27.4484 41.3443 27.4528 41.3443 27.6729V29.8155Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M42.6158 30.2406C42.2549 30.2406 41.8945 30.2239 41.5356 30.2239C41.1757 30.2239 40.8156 30.2406 40.4547 30.2406H40.4375V30.0801H40.5122C40.6601 30.0765 40.8006 30.0659 40.8023 29.8201V27.6849C40.8006 27.4827 40.6607 27.4692 40.5122 27.4665H40.4375V27.3057H40.4547C40.6726 27.3057 40.8856 27.3219 41.1013 27.3219C41.3097 27.3219 41.5135 27.3057 41.7241 27.3057H41.7405V27.4665H41.6213C41.4625 27.4706 41.364 27.4633 41.3605 27.6729V29.8155C41.3615 29.9708 41.4618 30.0123 41.5897 30.0309C41.6617 30.0359 41.7379 30.0386 41.8166 30.0386C41.9167 30.0386 42.0206 30.0339 42.1264 30.0225C42.293 30.0024 42.4364 29.9046 42.5072 29.8056C42.5704 29.7168 42.606 29.603 42.6308 29.5126L42.6342 29.4989H42.7885L42.7849 29.5207C42.7386 29.7581 42.6823 29.9898 42.6327 30.2266L42.6294 30.2406H42.6158ZM42.6009 30.2048C42.6483 29.9792 42.7017 29.7586 42.746 29.5346H42.6616C42.6365 29.625 42.6 29.7365 42.5358 29.8269C42.4593 29.9344 42.3078 30.0359 42.1303 30.0583C42.0233 30.0693 41.9169 30.0749 41.8167 30.0749C41.7374 30.0749 41.6609 30.0713 41.5864 30.066C41.4533 30.0512 41.3246 29.9932 41.3248 29.8155V27.6729C41.3248 27.442 41.4687 27.4301 41.6214 27.4301H41.7056V27.3417C41.5041 27.343 41.3051 27.3585 41.1014 27.3585C40.89 27.3585 40.6826 27.343 40.4732 27.3417V27.4301H40.5123C40.6582 27.4301 40.8367 27.456 40.8367 27.6849V29.8201C40.8367 30.0889 40.6589 30.1168 40.5123 30.1168H40.4732V30.2048C40.8267 30.204 41.1804 30.1884 41.5357 30.1884C41.8915 30.1884 42.2467 30.204 42.6009 30.2048Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17.1602 12.6614C17.1602 8.77664 20.2628 5.62744 24.09 5.62744C27.9174 5.62744 31.0201 8.77664 31.0201 12.6614C31.0201 16.5462 27.9174 19.6956 24.09 19.6956C20.2628 19.6956 17.1602 16.5462 17.1602 12.6614Z"
fill="#FFFFFE"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M28.2807 12.5227C28.2779 10.7214 27.1686 9.18519 25.6055 8.5768V16.4683C27.1686 15.8592 28.2779 14.3243 28.2807 12.5227ZM22.6238 16.4669V8.57771C21.0621 9.18799 19.9545 10.722 19.9503 12.5229C19.9545 14.3232 21.0621 15.8571 22.6238 16.4669ZM24.1156 5.85259C20.4863 5.85401 17.546 8.83908 17.5454 12.5228C17.546 16.206 20.4863 19.1906 24.1156 19.1913C27.7449 19.1906 30.6858 16.206 30.6867 12.5228C30.6858 8.83908 27.7449 5.85401 24.1156 5.85259ZM24.0995 19.8207C20.1281 19.8399 16.8594 16.5742 16.8594 12.5989C16.8594 8.25425 20.1281 5.24921 24.0995 5.25H25.9606C29.8851 5.24921 33.4668 8.25284 33.4668 12.5989C33.4668 16.5728 29.8851 19.8207 25.9606 19.8207H24.0995Z"
fill="#0069AA"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.60352 30.098H7.66098C7.80812 30.098 7.96362 30.0775 7.96362 29.8614V27.6856C7.96362 27.4691 7.80812 27.4486 7.66098 27.4486H7.60352V27.3237C7.76305 27.3237 8.00854 27.3402 8.20958 27.3402C8.41403 27.3402 8.65921 27.3237 8.85158 27.3237V27.4486H8.79381C8.64729 27.4486 8.49147 27.4691 8.49147 27.6856V29.8614C8.49147 30.0775 8.64729 30.098 8.79381 30.098H8.85158V30.2228C8.65534 30.2228 8.40923 30.2068 8.2054 30.2068C8.00451 30.2068 7.76305 30.2228 7.60352 30.2228V30.098Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.85181 30.2406C8.65387 30.2406 8.409 30.2239 8.20532 30.2239C8.00506 30.2239 7.76437 30.2406 7.60375 30.2406H7.58594V30.0801H7.6609C7.80944 30.0765 7.9445 30.0644 7.94574 29.8614V27.6856C7.9445 27.4824 7.80944 27.4692 7.6609 27.4665H7.58594V27.3057H7.60375C7.76437 27.3057 8.0097 27.3219 8.20981 27.3219C8.41333 27.3219 8.65836 27.3057 8.85181 27.3057H8.87009V27.4665H8.79482C8.64613 27.4692 8.51029 27.4824 8.50952 27.6856V29.8614C8.51029 30.0644 8.64613 30.0765 8.79482 30.0801H8.87009V30.2406H8.85181ZM8.83398 30.2051L8.83413 30.1168H8.79464C8.64827 30.1168 8.47433 30.0907 8.4734 29.8614V27.6857C8.47433 27.456 8.64827 27.4304 8.79464 27.4304H8.83398V27.3417C8.64517 27.3419 8.40804 27.3585 8.20963 27.3585C8.01525 27.3585 7.77998 27.343 7.62154 27.3417V27.4304H7.66072C7.80662 27.4304 7.98087 27.456 7.98087 27.6857V29.8614C7.98087 30.0907 7.80662 30.1168 7.66072 30.1168H7.62154V30.2051C7.77998 30.2037 8.01107 30.1884 8.20514 30.1884C8.40448 30.1884 8.64099 30.204 8.83398 30.2051Z"
fill="#1A1919"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M42.7169 27.2061C42.9638 27.2061 43.1479 27.3985 43.1479 27.6444C43.1479 27.8901 42.9638 28.0804 42.7169 28.0804C42.4706 28.0804 42.2861 27.8901 42.2861 27.6444C42.2861 27.3985 42.4706 27.2061 42.7169 27.2061ZM42.7168 27.9992C42.9101 27.9992 43.0577 27.8324 43.0577 27.6443C43.0577 27.456 42.9118 27.288 42.7168 27.288C42.5229 27.288 42.3754 27.456 42.3754 27.6443C42.3754 27.8324 42.5229 27.9992 42.7168 27.9992ZM42.5025 27.8751V27.8538C42.5551 27.8461 42.565 27.8475 42.565 27.8149V27.4907C42.565 27.4451 42.5606 27.4294 42.5042 27.4319V27.4096H42.7247C42.8005 27.4096 42.8703 27.4464 42.8703 27.5259C42.8703 27.5908 42.8282 27.6391 42.7684 27.6578L42.8393 27.7581C42.8723 27.8034 42.91 27.8461 42.9341 27.8612V27.8751H42.8503C42.8101 27.8751 42.7745 27.7892 42.6955 27.674H42.6478V27.8189C42.6478 27.8475 42.6577 27.8461 42.7106 27.8538V27.8751H42.5025ZM42.6481 27.6444H42.6989C42.7545 27.6444 42.7802 27.6018 42.7802 27.5328C42.7802 27.4633 42.7406 27.4386 42.6961 27.4386H42.6481V27.6444Z"
fill="#1A1919"
/>
</svg>
/* eslint-enable */
);

2
packages/js/onboarding/src/components/WCPayBanner/Icons/index.js
View File

@ -1,7 +1,6 @@
export * from './amex';
export * from './applepay';
export * from './cb';
export * from './diners';
export * from './discover';
export * from './giropay';
export * from './gpay';
@ -11,3 +10,4 @@ export * from './mastercard';
export * from './sofort';
export * from './unionpay';
export * from './visa';
export * from './woopay';

48
packages/js/onboarding/src/components/WCPayBanner/Icons/woopay.js Normal file
View File

@ -0,0 +1,48 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const WooPay = () => (
/* eslint-disable */
<svg
width="64"
height="40"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.5" y="0.5" width="63" height="39" rx="3.5" fill="#7F54B3" />
<g clipPath="url(#clip0_1424_5139)">
<path
d="M38.0384 16.1863H40.6738C41.604 16.1863 42.3496 16.4077 42.9106 16.8507C43.4716 17.2936 43.7521 17.8768 43.7521 18.6002C43.7521 19.3606 43.4642 19.9585 42.8958 20.3867C42.3274 20.8148 41.5375 21.0363 40.5262 21.0363H40.1571V24.0112H38.0237V16.1863H38.0384ZM40.1645 17.6848V19.5303C40.6443 19.523 40.9986 19.4491 41.2201 19.3015C41.449 19.1539 41.5597 18.925 41.5597 18.615C41.5597 18.2754 41.449 18.0392 41.2275 17.9063C41.0134 17.766 40.6591 17.6922 40.1645 17.6848Z"
fill="white"
/>
<path
d="M50.3739 24.0039H48.1593L47.7975 22.6972H45.546L45.1769 24.0039H43.0066L45.4943 16.1789H47.8861L50.3739 24.0039ZM47.3915 21.2947C47.0741 20.1283 46.8305 19.021 46.6755 17.9727H46.6459C46.4762 19.0579 46.2399 20.1652 45.9373 21.2947H47.3915Z"
fill="white"
/>
<path
d="M49.0967 16.1863H51.4885C52.02 17.3083 52.4038 18.1794 52.6401 18.7848H52.6696C52.9058 18.1573 53.2897 17.2936 53.8064 16.1863H56.2499L53.7326 20.4679V24.0039H51.577V20.4679L49.0967 16.1863Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M33.0704 13.071H10.3559C8.91636 13.071 7.75 14.2374 7.75 15.6695V24.336C7.75 25.7682 8.91636 26.9345 10.3485 26.9345H21.1115L26.0353 29.6733L24.9206 26.9345H33.0704C34.5025 26.9345 35.6689 25.7682 35.6689 24.336V15.6695C35.6689 14.2374 34.5025 13.071 33.0704 13.071ZM9.87596 15.0716C9.59544 15.079 9.33707 15.2118 9.1599 15.4259C8.99012 15.6474 8.92368 15.9279 8.98274 16.2084C9.6545 20.49 10.282 23.3764 10.8652 24.8675C11.0792 25.4138 11.345 25.6722 11.655 25.65C12.1275 25.6131 12.7033 24.9561 13.3751 23.6643C13.5241 23.3661 13.7058 23.0039 13.9191 22.5789L13.9199 22.5772L13.9204 22.5763L13.9207 22.5757L13.9208 22.5755C14.2247 21.9699 14.5925 21.2368 15.0212 20.3793C15.6413 22.5274 16.4829 24.1441 17.5459 25.2293C17.8486 25.5319 18.1439 25.6722 18.4465 25.65C18.7049 25.6353 18.9411 25.4729 19.0518 25.2366C19.1626 25.0078 19.2142 24.7494 19.1847 24.4911C19.1109 23.4502 19.2216 21.9959 19.5021 20.143C19.79 18.2237 20.1591 16.8506 20.6021 16.0239C20.6907 15.8615 20.7276 15.6695 20.7128 15.4776C20.698 15.2192 20.5725 14.9756 20.3658 14.8206C20.1665 14.6508 19.9082 14.5696 19.6498 14.5917C19.325 14.6065 19.0371 14.7984 18.8968 15.0937C18.1955 16.3856 17.6935 18.4821 17.3909 21.3758C16.911 20.1135 16.5493 18.8069 16.3131 17.4781C16.1876 16.799 15.8776 16.4815 15.3756 16.5185C15.0286 16.5406 14.7481 16.7694 14.5193 17.1976L12.0168 21.9516C11.6107 20.2907 11.2269 18.268 10.8725 15.891C10.784 15.3078 10.4518 15.0347 9.87596 15.0716ZM26.53 17.2197C26.1461 16.5332 25.4817 16.046 24.7066 15.8984C24.4999 15.8541 24.2932 15.8319 24.0865 15.8319C22.994 15.8319 22.1008 16.4003 21.4068 17.5372C20.8163 18.5042 20.5062 19.6189 20.521 20.7484C20.521 21.6268 20.7056 22.3798 21.0673 23.0073C21.4511 23.6938 22.1155 24.181 22.8906 24.3287C23.0973 24.3729 23.304 24.3951 23.5107 24.3951C24.6106 24.3951 25.5039 23.8267 26.1904 22.6898C26.781 21.7154 27.091 20.6007 27.0763 19.4565C27.0763 18.578 26.8917 17.8325 26.53 17.2197ZM25.0905 20.3866C24.9355 21.1322 24.6476 21.6933 24.2194 22.0771C23.8872 22.3798 23.5772 22.4979 23.2966 22.4462C23.0161 22.3946 22.7947 22.1436 22.6249 21.708C22.4994 21.3758 22.4256 21.0289 22.4256 20.6672C22.4256 20.3866 22.4551 20.1061 22.5068 19.833C22.6175 19.3458 22.8168 18.8881 23.1121 18.4747C23.4886 17.921 23.8872 17.6848 24.3006 17.7734C24.5811 17.8325 24.8026 18.0761 24.9724 18.5116C25.0979 18.8438 25.1717 19.1908 25.1717 19.5451C25.1717 19.8256 25.1495 20.1061 25.0905 20.3866ZM31.8524 15.8984C32.6275 16.046 33.2919 16.5332 33.6757 17.2197C34.0374 17.8325 34.222 18.578 34.222 19.4565C34.2367 20.6007 33.9267 21.7154 33.3361 22.6898C32.6496 23.8267 31.7564 24.3951 30.6565 24.3951C30.4498 24.3951 30.2431 24.3729 30.0364 24.3287C29.2613 24.181 28.5969 23.6938 28.213 23.0073C27.8513 22.3798 27.6667 21.6268 27.6667 20.7484C27.652 19.6189 27.962 18.5042 28.5526 17.5372C29.2465 16.4003 30.1397 15.8319 31.2323 15.8319C31.439 15.8319 31.6457 15.8541 31.8524 15.8984ZM31.3651 22.0771C31.7933 21.6933 32.0812 21.1322 32.2362 20.3866C32.2953 20.1061 32.3174 19.8256 32.3174 19.5451C32.3174 19.1908 32.2436 18.8438 32.1181 18.5116C31.9483 18.0761 31.7269 17.8325 31.4463 17.7734C31.0329 17.6848 30.6343 17.921 30.2578 18.4747C29.9626 18.8881 29.7632 19.3458 29.6525 19.833C29.6008 20.1061 29.5713 20.3866 29.5713 20.6672C29.5713 21.0289 29.6451 21.3758 29.7706 21.708C29.9404 22.1436 30.1619 22.3946 30.4424 22.4462C30.7229 22.4979 31.0329 22.3798 31.3651 22.0771Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_1424_5139">
<rect
width="48.5"
height="30.9953"
fill="white"
transform="translate(7.75 4.50232)"
/>
</clipPath>
</defs>
</svg>
/* eslint-enable */
);

8
packages/js/onboarding/src/components/WCPayBanner/PaymentMethodsIcons.tsx
View File

@ -12,27 +12,29 @@ import {
Visa,
MasterCard,
Amex,
WooPay,
ApplePay,
Giropay,
GooglePay,
CB,
DinersClub,
Discover,
UnionPay,
JCB,
Sofort,
} from './Icons';
export const PaymentMethodsIcons = () => (
export const PaymentMethodsIcons: React.VFC< {
isWooPayEligible: boolean;
} > = ( { isWooPayEligible = false } ) => (
<div className="woocommerce-recommended-payments-banner__footer_icon_container">
<Visa />
<MasterCard />
<Amex />
{ isWooPayEligible && <WooPay /> }
<ApplePay />
<GooglePay />
<CB />
<Giropay />
<DinersClub />
<Discover />
<UnionPay />
<JCB />

2
packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.scss
View File

@ -24,7 +24,7 @@
}
.woocommerce-recommended-payments__header-heading {
color: $studio-gray-60;
color: #757575;
}
.woocommerce-recommended-payments-banner__image_container {

99
packages/js/onboarding/src/components/WCPayBanner/WCPayBanner.tsx
View File

@ -17,20 +17,56 @@ import { Link } from '@woocommerce/components';
import { PaymentMethodsIcons } from './PaymentMethodsIcons';
import { WCPayBannerImage } from './WCPayBannerImage';
export const WCPayBannerFooter: React.VFC = () => (
export const WCPayBannerFooter: React.VFC< {
isWooPayEligible: boolean;
} > = ( { isWooPayEligible } ) => (
<CardFooter className="woocommerce-recommended-payments-banner__footer">
<div>
<Text variant="caption" as="p" size="12" lineHeight="16px">
{ __( 'Accepted payment methods include:', 'woocommerce' ) }
{ __(
'WooPayments is pre-integrated with popular payment options:',
'woocommerce'
) }
</Text>
</div>
<PaymentMethodsIcons />
<PaymentMethodsIcons isWooPayEligible={ isWooPayEligible } />
</CardFooter>
);
export const WCPayBannerText: React.VFC< {
actionButton: React.ReactNode;
} > = ( { actionButton } ) => {
isWooPayEligible: boolean;
} > = ( { actionButton, isWooPayEligible } ) => {
const links = {
tosLink: (
<Link
href="https://wordpress.com/tos/"
type="external"
target="_blank"
>
<></>
</Link>
),
privacyLink: (
<Link
href="https://automattic.com/privacy/"
type="external"
target="_blank"
>
<></>
</Link>
),
woopayMerchantTerms: (
<Link
href="https://wordpress.com/tos/#more-woopay-specifically"
type="external"
target="_blank"
>
<></>
</Link>
),
};
return (
<div className="woocommerce-recommended-payments-banner__text_container">
<Text
@ -42,7 +78,7 @@ export const WCPayBannerText: React.VFC< {
padding="0 20px 0 0"
>
{ __(
'Accept payments and manage your business.',
'Payments made simple, designed exclusively for WooCommerce stores.',
'woocommerce'
) }
</Text>
@ -53,32 +89,21 @@ export const WCPayBannerText: React.VFC< {
size="12"
lineHeight="16px"
>
{ createInterpolateElement(
__(
'By using WooPayments you agree to be bound by our <tosLink>Terms of Service</tosLink> and acknowledge that you have read our <privacyLink>Privacy Policy</privacyLink> ',
'woocommerce'
),
{
tosLink: (
<Link
href="https://wordpress.com/tos/"
type="external"
target="_blank"
>
<></>
</Link>
),
privacyLink: (
<Link
href="https://automattic.com/privacy/"
type="external"
target="_blank"
>
<></>
</Link>
),
}
) }
{ isWooPayEligible
? createInterpolateElement(
__(
'By using WooPayments you agree to the <tosLink>Terms of Service</tosLink> (including WooPay <woopayMerchantTerms>merchant terms</woopayMerchantTerms>) and acknowledge that you have read our <privacyLink>Privacy Policy</privacyLink>.',
'woocommerce'
),
links
)
: createInterpolateElement(
__(
'By using WooPayments you agree to the <tosLink>Terms of Service</tosLink> and acknowledge that you have read our <privacyLink>Privacy Policy</privacyLink>.',
'woocommerce'
),
links
) }
</Text>
{ actionButton }
</div>
@ -89,16 +114,21 @@ export const WCPayBannerBody: React.VFC< {
textPosition: 'left' | 'right';
actionButton: React.ReactNode;
bannerImage?: React.ReactNode;
isWooPayEligible: boolean;
} > = ( {
actionButton,
textPosition,
bannerImage = <WCPayBannerImage />,
isWooPayEligible,
} ) => {
return (
<CardBody className="woocommerce-recommended-payments-banner__body">
{ textPosition === 'left' ? (
<>
<WCPayBannerText actionButton={ actionButton } />
<WCPayBannerText
actionButton={ actionButton }
isWooPayEligible={ isWooPayEligible }
/>
<div className="woocommerce-recommended-payments-banner__image_container">
{ bannerImage }
</div>
@ -108,7 +138,10 @@ export const WCPayBannerBody: React.VFC< {
<div className="woocommerce-recommended-payments-banner__image_container">
{ bannerImage }
</div>
<WCPayBannerText actionButton={ actionButton } />
<WCPayBannerText
actionButton={ actionButton }
isWooPayEligible={ isWooPayEligible }
/>
</>
) }
</CardBody>

240
packages/js/onboarding/src/components/WCPayBanner/WCPayBannerImageCut.tsx
View File

@ -5,109 +5,159 @@ import { createElement } from '@wordpress/element';
export const WCPayBannerImageCut = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="293"
height="275"
width="310"
height="282"
viewBox="0 0 310 282"
fill="none"
viewBox="0 0 293 269"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#a)">
<g filter="url(#filter0_d_5851_4204)">
<path
fill="#F6F7F7"
d="M0 10A10 10 0 0 1 10 0h715a10 10 0 0 1 10 10v322H0V10Z"
/>
<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 width="730" height="304" x="3" y="28" fill="#fff" />
<line x1="27" x2="320" y1="87.5" y2="87.5" stroke="#DCDCDE" />
<line x1="49" x2="306" y1="149.5" y2="149.5" stroke="#DCDCDE" />
<line x1="49" x2="306" y1="190.5" y2="190.5" stroke="#DCDCDE" />
<rect
width="372"
height="127"
x="27.5"
y="108.5"
stroke="#DCDCDE"
rx="9.5"
d="M16 30C16 24.4772 20.4772 20 26 20H309V48H16V30Z"
fill="#F2EDFF"
/>
<path
fill="#2C3338"
d="M49.9 135h2.42c2.09 0 3.32-1.3 3.32-3.52v-.01c0-2.21-1.23-3.52-3.32-3.52H49.9V135Zm.88-.8v-5.45h1.48c1.56 0 2.48 1.01 2.48 2.73s-.91 2.73-2.48 2.73h-1.48Zm8.43.9c1.24 0 1.99-.71 2.17-1.42v-.04h-.84l-.02.04c-.14.32-.58.66-1.3.66-.93 0-1.53-.64-1.56-1.73h3.8v-.33c0-1.57-.88-2.64-2.3-2.64-1.44 0-2.37 1.12-2.37 2.74 0 1.66.91 2.71 2.42 2.71Zm-.06-4.7c.77 0 1.35.5 1.44 1.53h-2.91c.09-1 .69-1.53 1.47-1.53Zm3.62 6.36h.85v-2.59h.08c.29.56.92.92 1.64.92 1.34 0 2.2-1.07 2.2-2.72 0-1.65-.87-2.73-2.2-2.73a1.8 1.8 0 0 0-1.64.94h-.08v-.84h-.85v7.02Zm2.37-2.42c-.95 0-1.54-.75-1.54-1.97s.59-1.97 1.54-1.97c.96 0 1.54.74 1.54 1.96v.01c0 1.23-.58 1.97-1.54 1.97Zm5.9.75c1.5 0 2.42-1.03 2.42-2.72 0-1.7-.92-2.73-2.42-2.73s-2.43 1.03-2.43 2.72v.01c0 1.69.93 2.72 2.43 2.72Zm0-.75c-1 0-1.56-.73-1.56-1.97 0-1.25.56-1.97 1.56-1.97s1.55.72 1.55 1.96v.01c0 1.24-.56 1.97-1.55 1.97Zm5.55.75c1.2 0 2.1-.65 2.1-1.58v-.01c0-.76-.47-1.19-1.46-1.43l-.81-.19c-.62-.15-.89-.38-.89-.73v-.01c0-.47.46-.79 1.09-.79.63 0 1.04.29 1.15.7h.84c-.12-.86-.88-1.4-1.99-1.4-1.12 0-1.96.65-1.96 1.53 0 .76.45 1.19 1.43 1.42l.82.2c.65.15.92.4.92.76 0 .49-.5.82-1.21.82-.68 0-1.1-.28-1.24-.72h-.87c.1.87.9 1.43 2.08 1.43Zm3.87-6.37a.59.59 0 1 0-.59-.59c0 .33.27.6.6.6Zm-.42 6.28h.84v-5.26h-.84V135Zm4.32.04c.16 0 .32-.02.49-.05v-.72a3.7 3.7 0 0 1-.4.02c-.54 0-.75-.25-.75-.87v-2.98h1.15v-.7H83.7v-1.37h-.88v1.37h-.83v.7h.83v3.2c0 1 .45 1.4 1.54 1.4ZM125.87 135.7h.58v-.81c1.15-.1 2.11-.75 2.11-1.93 0-1.03-.7-1.54-1.96-1.85l-.15-.03v-2.24c.66.08 1.13.49 1.2 1.14v.01h.84v-.01c-.04-1.07-.91-1.8-2.04-1.9v-.83h-.58v.82c-1.16.1-1.99.82-1.99 1.87 0 .96.66 1.5 1.87 1.8l.12.03v2.35c-.85-.1-1.23-.58-1.32-1.19h-.85c.04 1.14 1 1.84 2.17 1.95v.83Zm-1.14-5.81v-.01c0-.47.4-.94 1.14-1.04v2.1c-.84-.2-1.14-.58-1.14-1.05Zm1.75 2.02c.97.24 1.23.58 1.23 1.11v.01c0 .56-.35 1.02-1.26 1.1v-2.22h.03Zm6 3.2c1.41 0 2.45-.86 2.45-2.04 0-1-.7-1.65-1.72-1.74v-.02c.87-.18 1.49-.78 1.49-1.65 0-1.08-.88-1.82-2.23-1.82-1.32 0-2.22.76-2.34 1.91v.05h.84v-.05c.08-.71.67-1.15 1.5-1.15.86 0 1.34.42 1.34 1.16v.01c0 .7-.58 1.22-1.42 1.22h-.84v.74h.88c.98 0 1.6.49 1.6 1.35v.01c0 .75-.63 1.26-1.55 1.26-.94 0-1.57-.47-1.64-1.17v-.05h-.85v.06c.1 1.12 1.04 1.93 2.5 1.93Zm6.19.06c1.43 0 2.45-1 2.45-2.42 0-1.37-.95-2.36-2.28-2.36-.63 0-1.19.26-1.5.73h-.08l.24-2.38h3.23v-.79h-3.92l-.37 4.05h.76c.09-.16.2-.3.32-.42.3-.29.7-.43 1.17-.43.92 0 1.57.67 1.57 1.6v.02c0 .95-.64 1.62-1.58 1.62-.83 0-1.44-.54-1.52-1.21v-.04h-.85v.05c.1 1.13 1.04 1.98 2.36 1.98Zm3.87-.17h4.56v-.8h-3.34v-.07l1.6-1.65c1.27-1.32 1.62-1.9 1.62-2.7v-.02c0-1.14-.94-1.97-2.17-1.97-1.35 0-2.32.9-2.32 2.15h.85c0-.83.56-1.38 1.4-1.38.84 0 1.34.55 1.34 1.3 0 .62-.26.98-1.16 1.96l-2.38 2.58v.6Zm6.58.05a.64.64 0 0 0 0-1.27.64.64 0 0 0-.63.63c0 .35.29.64.63.64Zm4.19-7.26a2.37 2.37 0 0 0-2.47 2.42v.01c0 1.36.99 2.36 2.31 2.36.95 0 1.62-.51 1.88-1.09h.09v.17c-.06 1.47-.58 2.72-1.86 2.72-.71 0-1.2-.37-1.42-.96l-.02-.05h-.88v.06c.25 1.04 1.13 1.74 2.3 1.74 1.72 0 2.72-1.41 2.72-3.81v-.01c0-2.65-1.36-3.56-2.65-3.56Zm0 4.03c-.92 0-1.58-.68-1.58-1.61v-.02c0-.9.7-1.63 1.59-1.63.9 0 1.59.74 1.59 1.66 0 .93-.7 1.6-1.6 1.6Zm6.37-4.03a2.37 2.37 0 0 0-2.47 2.42v.01c0 1.36.98 2.36 2.3 2.36.96 0 1.63-.51 1.88-1.09h.1v.17c-.06 1.47-.59 2.72-1.86 2.72-.72 0-1.21-.37-1.42-.96l-.02-.05h-.89l.02.06c.24 1.04 1.12 1.74 2.3 1.74 1.7 0 2.7-1.41 2.7-3.81v-.01c0-2.65-1.36-3.56-2.64-3.56Zm-.01 4.03c-.91 0-1.58-.68-1.58-1.61v-.02c0-.9.71-1.63 1.6-1.63.89 0 1.59.74 1.59 1.66 0 .93-.7 1.6-1.61 1.6Z"
/>
<rect
width="43"
height="14"
x="195.5"
y="124"
fill="#B8E6BF"
rx="7"
/>
<path
fill="#00450C"
d="M209.22 134h.7v-2.01h1.42c1.06 0 1.81-.75 1.81-1.82 0-1.08-.75-1.8-1.8-1.8h-2.13V134Zm1.94-5.01c.8 0 1.27.44 1.27 1.18v.01c0 .74-.46 1.18-1.27 1.18h-1.24V129h1.24Zm4.06 5.08c.56 0 1-.24 1.27-.7h.06v.63h.68v-2.88c0-.88-.57-1.4-1.6-1.4-.9 0-1.54.44-1.65 1.1v.02h.68c.11-.34.44-.52.95-.52.63 0 .94.28.94.8v.38l-1.2.07c-.98.06-1.54.5-1.54 1.25 0 .77.6 1.25 1.4 1.25Zm-.71-1.26c0-.43.28-.65.92-.7l1.13-.06v.38c0 .6-.5 1.05-1.2 1.05-.49 0-.85-.25-.85-.67Zm4.33-3.83c.25 0 .47-.21.47-.47a.47.47 0 0 0-.47-.47.47.47 0 0 0-.47.47c0 .26.2.47.47.47Zm-.35 5.02h.68v-4.21h-.68V134Zm3.52.07c.58 0 1.05-.27 1.31-.74h.06v.67h.68v-5.88h-.68v2.33h-.06a1.45 1.45 0 0 0-1.31-.73c-1.07 0-1.77.85-1.77 2.17 0 1.32.7 2.18 1.77 2.18Zm.15-.6c-.76 0-1.22-.6-1.22-1.57 0-.99.46-1.58 1.22-1.58.77 0 1.24.6 1.24 1.57 0 .98-.47 1.58-1.24 1.58Z"
/>
<rect
width="50"
height="10"
x="192"
y="165"
fill="#B8E6BF"
rx="5"
/>
<rect width="50" height="8" x="49" y="166" fill="#DCDCDE" rx="2" />
<rect
width="22.78"
height="16"
x="132"
y="162"
fill="#F6F7F7"
rx="4"
/>
<path
fill="#C3C4C7"
d="M143 174.86c.73 0 1.37-.11 1.94-.33a3.03 3.03 0 0 0 1.33-.97c.33-.43.5-.95.5-1.55v-.02c0-.75-.25-1.33-.73-1.74a4.89 4.89 0 0 0-2.12-.93l-1.02-.23a3.26 3.26 0 0 1-1.2-.47.85.85 0 0 1-.36-.7v-.02c0-.2.06-.4.19-.56.13-.16.32-.29.57-.39.25-.1.56-.14.93-.14.32 0 .62.05.87.15.26.1.47.25.62.44.16.2.26.44.3.72v.02l1.81-.01a2.66 2.66 0 0 0-.5-1.51c-.3-.43-.72-.76-1.26-1a4.66 4.66 0 0 0-1.87-.34c-.68 0-1.3.11-1.83.33-.54.22-.96.54-1.27.95-.31.42-.47.92-.47 1.5 0 .74.24 1.32.71 1.75.48.42 1.16.73 2.05.93l1.02.23c.62.14 1.05.3 1.29.48s.36.43.36.75v.01c0 .23-.07.43-.2.6-.14.16-.34.3-.6.38-.28.1-.62.13-1.03.13-.39 0-.72-.04-.99-.14s-.48-.25-.63-.44a1.5 1.5 0 0 1-.3-.67h-1.82c.01.6.19 1.1.51 1.52.33.41.77.73 1.32.94.56.22 1.19.33 1.89.33Zm-.35 1.11h.79v-11.82h-.79v11.82Z"
/>
<rect
width="50"
height="10"
x="192"
y="206"
fill="#B8E6BF"
rx="5"
/>
<rect width="50" height="8" x="49" y="207" fill="#DCDCDE" rx="2" />
<rect
width="22.78"
height="16"
x="132"
y="203"
fill="#F6F7F7"
rx="4"
/>
<path
fill="#C3C4C7"
d="m145.38 215.86.78-.03c.25-.02.47-.06.65-.1v-1.66a5.65 5.65 0 0 1-1.36.1 4.8 4.8 0 0 1-1.38-.19 2.58 2.58 0 0 1-1.7-1.55 3.67 3.67 0 0 1-.24-1.36c0-.53.08-.98.23-1.37.15-.38.37-.7.66-.96.3-.26.64-.45 1.04-.58.4-.13.85-.2 1.35-.2a7.86 7.86 0 0 1 1.37.12v-1.64a7.8 7.8 0 0 0-3.55.14c-.64.2-1.19.5-1.65.9-.47.4-.83.9-1.08 1.5-.25.6-.38 1.29-.38 2.08 0 .8.13 1.5.38 2.1.25.6.61 1.1 1.08 1.5.47.39 1.02.7 1.67.9.64.2 1.35.3 2.13.3Zm-6.42-3.44h7.08v-.78h-7.08v.79Zm0-1.89h7.08v-.78h-7.08v.78Z"
/>
<path
fill="#7F54B3"
fillRule="evenodd"
d="M33.24 50.42H62.2a3.32 3.32 0 0 1 3.31 3.31v11.05a3.32 3.32 0 0 1-3.3 3.3H51.8l1.43 3.5-6.28-3.5H33.23a3.32 3.32 0 0 1-3.3-3.3V53.73c0-1.82 1.48-3.3 3.31-3.3Z"
clipRule="evenodd"
/>
<path
fill="#fff"
d="M31.72 53.42c.23-.27.55-.44.91-.45.74-.05 1.16.3 1.27 1.04.45 3.03.94 5.61 1.46 7.73l3.19-6.06c.3-.55.65-.84 1.1-.87.63-.04 1.03.36 1.19 1.23.3 1.7.76 3.36 1.37 4.96.39-3.68 1.02-6.36 1.92-8 .18-.38.54-.62.96-.64.33-.03.66.07.91.29.26.2.42.5.44.84.02.24-.03.49-.14.7-.56 1.05-1.03 2.8-1.4 5.24-.36 2.36-.5 4.22-.4 5.54.03.33-.03.66-.17.95-.14.3-.45.51-.78.53-.38.03-.76-.15-1.14-.53-1.36-1.39-2.43-3.45-3.22-6.19l-2.1 4.2c-.85 1.64-1.59 2.47-2.2 2.52-.39.03-.72-.3-1-1-.74-1.9-1.54-5.57-2.4-11.03-.07-.35.01-.72.23-1ZM62.96 55.7a3.4 3.4 0 0 0-2.32-1.68 3.77 3.77 0 0 0-.8-.08c-1.38 0-2.52.72-3.4 2.17a7.67 7.67 0 0 0-1.13 4.1c0 1.11.23 2.07.7 2.87a3.4 3.4 0 0 0 2.32 1.69c.26.05.52.08.79.08 1.4 0 2.54-.72 3.41-2.17a7.74 7.74 0 0 0 1.13-4.12c0-1.11-.24-2.06-.7-2.85Zm-1.83 4.04c-.2.95-.57 1.67-1.11 2.16-.42.38-.82.53-1.18.47-.35-.08-.64-.39-.85-.94a3.74 3.74 0 0 1-.26-1.33 4.78 4.78 0 0 1 .87-2.8c.49-.7 1-1 1.52-.89.36.08.64.39.86.94.16.43.25.87.25 1.32 0 .36-.03.72-.1 1.07ZM53.86 55.7a3.4 3.4 0 0 0-2.33-1.68 3.76 3.76 0 0 0-.79-.08c-1.39 0-2.53.72-3.41 2.17a7.67 7.67 0 0 0-1.13 4.1c0 1.11.23 2.07.7 2.87a3.4 3.4 0 0 0 2.32 1.69c.26.05.52.08.79.08 1.4 0 2.54-.72 3.41-2.17a7.84 7.84 0 0 0 1.14-4.12c0-1.12-.23-2.07-.7-2.86Zm-1.84 4.04a3.8 3.8 0 0 1-1.1 2.16c-.43.38-.83.53-1.18.47-.36-.08-.64-.39-.86-.94a3.74 3.74 0 0 1-.25-1.33c0-.36.03-.71.1-1.06.14-.62.4-1.2.77-1.73.48-.7.99-1 1.51-.9.36.08.64.39.86.94.16.43.26.87.26 1.32 0 .36-.04.72-.1 1.07Z"
/>
<path
fill="#000"
d="M68.52 54.4h3.36c1.19 0 2.14.27 2.85.84a2.7 2.7 0 0 1 1.07 2.23 2.7 2.7 0 0 1-1.09 2.27c-.72.55-1.73.83-3.02.83h-.47v3.8H68.5v-9.98h.02Zm2.71 1.9v2.35c.61 0 1.07-.1 1.35-.29.29-.19.43-.48.43-.87 0-.44-.14-.74-.42-.9a2.64 2.64 0 0 0-1.36-.29ZM84.24 64.36h-2.82l-.46-1.66h-2.87l-.47 1.66h-2.77l3.17-9.97h3.05l3.17 9.97Zm-3.8-3.46c-.4-1.48-.71-2.9-.91-4.23h-.04c-.21 1.38-.52 2.8-.9 4.23h1.85ZM82.62 54.4h3.04a55.3 55.3 0 0 1 1.47 3.3h.04c.3-.8.79-1.9 1.45-3.3h3.11l-3.2 5.45v4.5h-2.75v-4.5l-3.16-5.46ZM92.58 54.4h3.43c.5 2.15.88 3.99 1.16 5.54l.3-1.54c.11-.6.24-1.19.38-1.76l.53-2.24h3.5l1.36 9.97h-2.7l-.72-6.86-1.67 6.86H96.3l-1.75-6.86-.7 6.86h-2.57l1.29-9.98ZM104.06 54.4h5.5v2.1h-2.78v1.84h2.4v2.07h-2.4v1.82h2.79v2.12h-5.51V54.4ZM110.58 54.4h2.73l3.46 5.74-.1-1.07v-4.68h2.72v9.97h-2.78l-3.38-5.66.07 1.24v4.42h-2.71V54.4h-.01ZM120.1 54.4h6.49v2.27h-1.87v7.7h-2.75v-7.7h-1.85v-2.28h-.01ZM127.7 64.18v-2.33c.86.42 1.58.63 2.17.63.34 0 .61-.07.81-.23.2-.16.3-.37.3-.62 0-.2-.08-.39-.24-.57a4.05 4.05 0 0 0-.82-.63 9 9 0 0 1-2.04-1.66 2.65 2.65 0 0 1-.63-1.73c0-.86.33-1.56.98-2.1a3.8 3.8 0 0 1 2.53-.82c.76 0 1.52.14 2.27.41v2.23a5.08 5.08 0 0 0-1.96-.55c-.34 0-.6.06-.8.2-.19.14-.28.33-.28.57 0 .41.45.88 1.35 1.4.54.32 1.08.75 1.64 1.32a2.68 2.68 0 0 1-.26 4.08c-.72.56-1.63.85-2.74.85-.77-.01-1.53-.16-2.28-.45Z"
d="M16 48H309V260H26C20.4771 260 16 255.523 16 250V48Z"
fill="white"
/>
</g>
<path
d="M43.5 119C43.5 113.753 47.7533 109.5 53 109.5H309.5V236.5H53C47.7533 236.5 43.5 232.247 43.5 227V119Z"
fill="white"
stroke="#DCDCDE"
/>
<path
d="M65.8545 134V126.954H68.6279C70.7227 126.954 71.9336 128.219 71.9336 130.426V130.436C71.9336 132.711 70.7373 134 68.6279 134H65.8545ZM67.3291 132.784H68.3936C69.6973 132.784 70.4297 131.964 70.4297 130.46V130.45C70.4297 129 69.6729 128.17 68.3936 128.17H67.3291V132.784ZM75.5566 134.112C73.9209 134.112 72.9297 133.043 72.9297 131.319V131.314C72.9297 129.605 73.9307 128.507 75.498 128.507C77.0654 128.507 78.042 129.581 78.042 131.207V131.651H74.3408C74.3555 132.535 74.8291 133.048 75.5859 133.048C76.2109 133.048 76.5576 132.716 76.6553 132.511L76.6699 132.481H77.998L77.9883 132.53C77.8223 133.204 77.1289 134.112 75.5566 134.112ZM75.5225 129.576C74.9023 129.576 74.4434 129.996 74.3555 130.758H76.6748C76.5869 129.977 76.1426 129.576 75.5225 129.576ZM79.209 135.782V128.624H80.6348V129.454H80.7227C81.001 128.878 81.5723 128.536 82.334 128.536C83.6768 128.536 84.5166 129.591 84.5166 131.305V131.314C84.5166 133.043 83.6963 134.083 82.334 134.083C81.5967 134.083 80.9961 133.727 80.7227 133.141H80.6348V135.782H79.209ZM81.8457 132.901C82.5977 132.901 83.0664 132.301 83.0664 131.314V131.305C83.0664 130.318 82.6025 129.718 81.8457 129.718C81.0938 129.718 80.6201 130.318 80.6201 131.305V131.314C80.6201 132.301 81.0986 132.901 81.8457 132.901ZM88.0713 134.112C86.416 134.112 85.4199 133.062 85.4199 131.314V131.305C85.4199 129.571 86.4307 128.507 88.0713 128.507C89.7119 128.507 90.7227 129.566 90.7227 131.305V131.314C90.7227 133.067 89.7266 134.112 88.0713 134.112ZM88.0713 132.994C88.8281 132.994 89.2627 132.374 89.2627 131.314V131.305C89.2627 130.255 88.8232 129.625 88.0713 129.625C87.3145 129.625 86.8799 130.255 86.8799 131.305V131.314C86.8799 132.374 87.3096 132.994 88.0713 132.994ZM94.0234 134.112C92.5635 134.112 91.7334 133.458 91.6309 132.535L91.626 132.516H93.0273L93.0371 132.535C93.1494 132.867 93.4766 133.106 94.0381 133.106C94.585 133.106 94.9561 132.872 94.9561 132.516V132.506C94.9561 132.218 94.7412 132.037 94.1943 131.915L93.2959 131.725C92.2705 131.505 91.7627 131.002 91.7627 130.196V130.191C91.7627 129.181 92.6611 128.507 94.0039 128.507C95.415 128.507 96.1963 129.21 96.2549 130.074V130.094H94.9316L94.9268 130.069C94.8486 129.781 94.5312 129.513 93.999 129.513C93.5059 129.513 93.1543 129.742 93.1543 130.104V130.108C93.1543 130.396 93.3545 130.562 93.9111 130.685L94.8047 130.875C95.8789 131.104 96.3818 131.554 96.3818 132.35V132.354C96.3818 133.419 95.4004 134.112 94.0234 134.112ZM98.2764 127.799C97.8369 127.799 97.4707 127.447 97.4707 127.008C97.4707 126.563 97.8369 126.212 98.2764 126.212C98.7158 126.212 99.0771 126.563 99.0771 127.008C99.0771 127.447 98.7158 127.799 98.2764 127.799ZM97.5586 134V128.624H98.9844V134H97.5586ZM102.651 134.02C101.343 134.02 100.815 133.595 100.815 132.55V129.698H99.9854V128.624H100.815V127.34H102.256V128.624H103.364V129.698H102.256V132.223C102.256 132.706 102.461 132.921 102.944 132.921C103.13 132.921 103.228 132.911 103.364 132.896V133.956C103.188 133.99 102.925 134.02 102.651 134.02Z"
fill="#2C3338"
/>
<path
d="M142.11 134.693V133.893C140.738 133.814 139.742 133.121 139.703 131.905L139.708 131.9H141.012V131.905C141.095 132.403 141.441 132.726 142.11 132.789V131.036L141.783 130.958C140.509 130.67 139.811 130.099 139.811 129.049V129.039C139.811 127.877 140.768 127.145 142.11 127.066V126.246H142.672V127.066C144.024 127.169 144.908 127.94 144.957 129.088L144.952 129.093L143.658 129.098L143.653 129.088C143.585 128.565 143.219 128.253 142.672 128.17V129.869L143.019 129.942C144.352 130.245 145.05 130.782 145.05 131.852V131.861C145.05 133.077 144.059 133.795 142.672 133.888V134.693H142.11ZM141.173 128.941C141.173 129.317 141.451 129.562 142.11 129.737V128.165C141.495 128.233 141.173 128.536 141.173 128.932V128.941ZM143.688 131.998C143.688 131.573 143.429 131.354 142.672 131.163V132.794C143.351 132.73 143.688 132.447 143.688 132.008V131.998ZM149.063 134.156C147.472 134.156 146.422 133.302 146.324 132.042L146.319 131.979H147.73L147.735 132.032C147.799 132.579 148.302 132.97 149.063 132.97C149.815 132.97 150.309 132.55 150.309 131.954V131.944C150.309 131.271 149.806 130.899 148.951 130.899H148.146V129.85H148.932C149.674 129.85 150.152 129.459 150.152 128.888V128.878C150.152 128.292 149.747 127.931 149.054 127.931C148.36 127.931 147.896 128.307 147.838 128.893L147.833 128.937H146.476L146.48 128.878C146.583 127.618 147.574 126.798 149.054 126.798C150.567 126.798 151.544 127.56 151.544 128.683V128.692C151.544 129.571 150.899 130.143 150.074 130.313V130.343C151.124 130.44 151.808 131.046 151.808 132.003V132.013C151.808 133.292 150.709 134.156 149.063 134.156ZM155.792 134.181C154.283 134.181 153.287 133.282 153.204 132.105L153.199 132.037H154.537L154.547 132.071C154.649 132.589 155.133 133.004 155.797 133.004C156.554 133.004 157.081 132.472 157.081 131.715V131.705C157.081 130.953 156.549 130.431 155.802 130.431C155.445 130.431 155.143 130.533 154.908 130.733C154.776 130.841 154.659 130.973 154.581 131.124H153.316L153.644 126.954H158.048V128.126H154.791L154.615 130.133H154.703C154.986 129.659 155.533 129.366 156.207 129.366C157.521 129.366 158.468 130.333 158.468 131.676V131.686C158.468 133.17 157.374 134.181 155.792 134.181ZM159.762 134V133.009L162.032 130.768C163.023 129.806 163.292 129.449 163.292 128.956V128.941C163.292 128.341 162.882 127.921 162.208 127.921C161.52 127.921 161.046 128.38 161.046 129.049V129.073H159.684L159.679 129.054C159.679 127.701 160.733 126.773 162.276 126.773C163.727 126.773 164.742 127.604 164.742 128.819V128.834C164.742 129.635 164.327 130.299 163.043 131.485L161.739 132.701V132.813H164.845V134H159.762ZM167.145 134.122C166.646 134.122 166.285 133.756 166.285 133.272C166.285 132.789 166.646 132.428 167.145 132.428C167.647 132.428 168.004 132.789 168.004 133.272C168.004 133.756 167.647 134.122 167.145 134.122ZM171.783 126.769C173.414 126.769 174.693 127.931 174.693 130.406V130.416C174.693 132.774 173.58 134.176 171.773 134.176C170.411 134.176 169.4 133.37 169.181 132.267L169.171 132.223H170.616L170.631 132.267C170.802 132.706 171.202 133.004 171.769 133.004C172.789 133.004 173.238 132.003 173.292 130.719C173.292 130.67 173.292 130.616 173.292 130.562H173.194C172.94 131.104 172.354 131.593 171.378 131.593C170.006 131.593 169.083 130.616 169.083 129.283V129.273C169.083 127.833 170.196 126.769 171.783 126.769ZM171.783 130.504C172.511 130.504 173.072 129.986 173.072 129.259V129.249C173.072 128.512 172.511 127.94 171.793 127.94C171.08 127.94 170.509 128.502 170.509 129.22V129.229C170.509 129.972 171.046 130.504 171.783 130.504ZM178.619 126.769C180.25 126.769 181.529 127.931 181.529 130.406V130.416C181.529 132.774 180.416 134.176 178.609 134.176C177.247 134.176 176.236 133.37 176.017 132.267L176.007 132.223H177.452L177.467 132.267C177.638 132.706 178.038 133.004 178.604 133.004C179.625 133.004 180.074 132.003 180.128 130.719C180.128 130.67 180.128 130.616 180.128 130.562H180.03C179.776 131.104 179.19 131.593 178.214 131.593C176.842 131.593 175.919 130.616 175.919 129.283V129.273C175.919 127.833 177.032 126.769 178.619 126.769ZM178.619 130.504C179.347 130.504 179.908 129.986 179.908 129.259V129.249C179.908 128.512 179.347 127.94 178.629 127.94C177.916 127.94 177.345 128.502 177.345 129.22V129.229C177.345 129.972 177.882 130.504 178.619 130.504Z"
fill="#2C3338"
/>
<rect x="211.5" y="123" width="44" height="14" rx="7" fill="#B8E6BF" />
<path
d="M225.184 133V127.363H227.508C228.695 127.363 229.488 128.129 229.488 129.289V129.297C229.488 130.457 228.695 131.223 227.508 131.223H226.363V133H225.184ZM227.219 128.297H226.363V130.301H227.219C227.895 130.301 228.293 129.941 228.293 129.301V129.293C228.293 128.652 227.895 128.297 227.219 128.297ZM231.477 133.066C230.656 133.066 230.074 132.559 230.074 131.777V131.77C230.074 130.996 230.672 130.543 231.742 130.48L232.781 130.418V130.062C232.781 129.691 232.527 129.48 232.059 129.48C231.648 129.48 231.387 129.625 231.297 129.879L231.289 129.895H230.234L230.238 129.859C230.328 129.105 231.039 128.605 232.121 128.605C233.262 128.605 233.906 129.145 233.906 130.062V133H232.781V132.43H232.711C232.492 132.828 232.039 133.066 231.477 133.066ZM231.188 131.707C231.188 132.035 231.465 132.234 231.859 132.234C232.387 132.234 232.781 131.887 232.781 131.434V131.117L231.914 131.172C231.426 131.203 231.188 131.387 231.188 131.699V131.707ZM235.605 128.039C235.254 128.039 234.961 127.758 234.961 127.406C234.961 127.051 235.254 126.77 235.605 126.77C235.957 126.77 236.246 127.051 236.246 127.406C236.246 127.758 235.957 128.039 235.605 128.039ZM235.031 133V128.699H236.172V133H235.031ZM238.855 133.066C237.781 133.066 237.109 132.227 237.109 130.852V130.844C237.109 129.461 237.766 128.629 238.855 128.629C239.445 128.629 239.926 128.918 240.141 129.387H240.211V127.055H241.352V133H240.211V132.332H240.141C239.918 132.797 239.461 133.066 238.855 133.066ZM239.242 132.121C239.848 132.121 240.223 131.645 240.223 130.855V130.848C240.223 130.059 239.844 129.574 239.242 129.574C238.641 129.574 238.27 130.059 238.27 130.844V130.852C238.27 131.645 238.641 132.121 239.242 132.121Z"
fill="#00450C"
/>
<rect x="208" y="165" width="50" height="8" rx="4" fill="#B8E6BF" />
<rect x="65" y="165" width="50" height="8" rx="4" fill="#DCDCDE" />
<rect
x="148"
y="161"
width="22.7796"
height="16"
rx="4"
fill="#F2EDFF"
/>
<path
d="M159.007 173.856C158.305 173.856 157.676 173.749 157.12 173.535C156.569 173.316 156.129 173 155.801 172.585C155.477 172.17 155.304 171.664 155.281 171.067L155.288 171.061H157.113V171.067C157.159 171.327 157.257 171.553 157.407 171.744C157.562 171.931 157.774 172.075 158.043 172.175C158.312 172.275 158.642 172.325 159.034 172.325C159.444 172.325 159.784 172.282 160.053 172.195C160.322 172.104 160.522 171.974 160.654 171.806C160.791 171.637 160.859 171.439 160.859 171.211V171.197C160.859 170.878 160.739 170.63 160.497 170.452C160.26 170.27 159.832 170.11 159.212 169.974L158.193 169.741C157.601 169.609 157.1 169.427 156.689 169.194C156.279 168.962 155.967 168.673 155.753 168.326C155.539 167.975 155.432 167.556 155.432 167.068V167.055C155.432 166.476 155.587 165.979 155.896 165.564C156.206 165.15 156.63 164.833 157.168 164.614C157.706 164.391 158.316 164.279 159 164.279C159.715 164.279 160.34 164.396 160.873 164.628C161.411 164.86 161.832 165.191 162.138 165.619C162.448 166.043 162.614 166.544 162.637 167.123L162.63 167.13L160.818 167.137L160.812 167.123C160.78 166.836 160.684 166.597 160.524 166.405C160.365 166.209 160.158 166.061 159.902 165.961C159.647 165.861 159.355 165.811 159.027 165.811C158.658 165.811 158.348 165.858 158.098 165.954C157.847 166.05 157.658 166.18 157.53 166.344C157.403 166.508 157.339 166.695 157.339 166.904V166.918C157.339 167.105 157.394 167.271 157.503 167.417C157.612 167.563 157.781 167.69 158.009 167.8C158.237 167.909 158.535 168.007 158.904 168.094L159.923 168.319C160.857 168.529 161.563 168.839 162.042 169.249C162.525 169.659 162.767 170.24 162.767 170.992V171.006C162.767 171.612 162.603 172.129 162.274 172.558C161.951 172.981 161.504 173.305 160.935 173.528C160.369 173.747 159.727 173.856 159.007 173.856ZM158.651 174.971V163.145H159.438V174.971H158.651Z"
fill="#674399"
/>
<rect x="65" y="206" width="50" height="8" rx="4" fill="#DCDCDE" />
<rect x="208" y="206" width="50" height="8" rx="4" fill="#B8E6BF" />
<rect
x="148"
y="202"
width="22.7796"
height="16"
rx="4"
fill="#F2EDFF"
/>
<path
d="M161.379 214.856C160.6 214.856 159.889 214.756 159.246 214.556C158.604 214.351 158.048 214.05 157.578 213.653C157.113 213.252 156.753 212.753 156.498 212.156C156.247 211.555 156.122 210.857 156.122 210.064V210.058C156.122 209.269 156.247 208.576 156.498 207.979C156.753 207.382 157.113 206.883 157.578 206.482C158.043 206.081 158.592 205.781 159.226 205.58C159.864 205.38 160.565 205.279 161.331 205.279C161.582 205.279 161.841 205.293 162.11 205.32C162.379 205.348 162.603 205.386 162.78 205.437V207.084C162.598 207.048 162.384 207.018 162.138 206.995C161.892 206.972 161.648 206.961 161.406 206.961C160.91 206.961 160.461 207.027 160.06 207.159C159.659 207.287 159.312 207.48 159.021 207.74C158.733 207.995 158.512 208.317 158.357 208.704C158.207 209.091 158.132 209.545 158.132 210.064V210.071C158.132 210.595 158.209 211.051 158.364 211.438C158.519 211.826 158.74 212.149 159.027 212.409C159.319 212.664 159.668 212.856 160.073 212.983C160.483 213.106 160.944 213.168 161.454 213.168C161.677 213.168 161.917 213.161 162.172 213.147C162.427 213.129 162.639 213.104 162.808 213.072V214.733C162.63 214.774 162.413 214.806 162.158 214.829C161.903 214.847 161.643 214.856 161.379 214.856ZM154.96 211.425V210.639H162.042V211.425H154.96ZM154.96 209.531V208.745H162.042V209.531H154.96Z"
fill="#674399"
/>
<path d="M65 148.5H309" stroke="#DCDCDE" />
<path d="M65 189.5H309" stroke="#DCDCDE" />
<path
d="M84.1484 75.0801H87.5495C88.7499 75.0801 89.7121 75.3659 90.4362 75.9375C91.1602 76.5091 91.5222 77.2617 91.5222 78.1954C91.5222 79.1766 91.1507 79.9483 90.4171 80.5008C89.6835 81.0534 88.6642 81.3392 87.359 81.3392H86.8827V85.1785H84.1294V75.0801H84.1484ZM86.8922 77.014V79.3957C87.5114 79.3862 87.9687 79.2909 88.2545 79.1004C88.5499 78.9099 88.6928 78.6145 88.6928 78.2144C88.6928 77.7762 88.5499 77.4713 88.264 77.2998C87.9878 77.1188 87.5305 77.0235 86.8922 77.014Z"
fill="black"
/>
<path
d="M100.068 85.1785H97.2098L96.743 83.4923H93.8373L93.361 85.1785H90.5601L93.7706 75.0801H96.8573L100.068 85.1785ZM96.219 81.6727C95.8094 80.1674 95.495 78.7384 95.2949 77.3856H95.2568C95.0377 78.786 94.7328 80.215 94.3422 81.6727H96.219Z"
fill="black"
/>
<path
d="M98.4194 75.0801H101.506C102.192 76.5282 102.687 77.6523 102.992 78.4335H103.03C103.335 77.6237 103.831 76.5091 104.498 75.0801H107.651L104.402 80.6057V85.169H101.62V80.6057L98.4194 75.0801Z"
fill="black"
/>
<path
d="M108.508 75.0801H111.986C112.481 77.2617 112.872 79.129 113.157 80.7009L113.453 79.1385C113.577 78.5288 113.7 77.9381 113.843 77.357L114.377 75.0896H117.921L119.302 85.1881H116.578L115.844 78.243L114.148 85.1881H112.29L110.509 78.2335L109.804 85.1881H107.203L108.508 75.0801Z"
fill="black"
/>
<path
d="M120.131 75.0801H125.695V77.2236H122.885V79.0814H125.323V81.1773H122.885V83.0159H125.714V85.169H120.131V75.0801Z"
fill="black"
/>
<path
d="M126.733 75.0801H129.506L133.002 80.901L132.907 79.8149V75.0801H135.66V85.1785H132.84L129.42 79.4434L129.496 80.7009V85.1785H126.743V75.0801H126.733Z"
fill="black"
/>
<path
d="M136.384 75.0801H142.948V77.3856H141.052V85.1785H138.271V77.3856H136.394V75.0801H136.384Z"
fill="black"
/>
<path
d="M144.072 84.9879V82.6348C144.939 83.054 145.673 83.2731 146.273 83.2731C146.616 83.2731 146.892 83.1969 147.092 83.0349C147.292 82.873 147.387 82.6634 147.387 82.4061C147.387 82.2061 147.311 82.0155 147.149 81.8345C146.987 81.6535 146.711 81.4439 146.32 81.1962C145.368 80.5865 144.682 80.0244 144.253 79.51C143.824 78.986 143.615 78.4049 143.615 77.7666C143.615 76.8901 143.948 76.1851 144.606 75.6325C145.263 75.08 146.12 74.8037 147.168 74.8037C147.94 74.8037 148.712 74.9466 149.474 75.2229V77.4808C148.654 77.1092 147.997 76.9187 147.483 76.9187C147.14 76.9187 146.873 76.9854 146.682 77.1283C146.482 77.2712 146.387 77.4617 146.387 77.6999C146.387 78.1191 146.844 78.5954 147.759 79.1289C148.302 79.4433 148.855 79.8815 149.417 80.4531C149.979 81.0247 150.255 81.6726 150.255 82.4252C150.255 83.3017 149.893 84.0162 149.159 84.5878C148.426 85.1594 147.502 85.4452 146.378 85.4452C145.596 85.4357 144.834 85.2832 144.072 84.9879Z"
fill="black"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M48.4225 71.0597H77.7367C79.5849 71.0597 81.0901 72.5649 81.0901 74.4131V85.5977C81.0901 87.4459 79.5849 88.9511 77.7367 88.9511H67.219L68.6576 92.4856L62.3032 88.9511H48.413C46.5648 88.9511 45.0596 87.4459 45.0596 85.5977V74.4131C45.0596 72.5649 46.5648 71.0597 48.4225 71.0597Z"
fill="#7F54B3"
/>
<path
d="M46.8795 74.0987C47.1081 73.8224 47.4415 73.651 47.8036 73.6414C48.5467 73.5938 48.9754 73.9463 49.0897 74.6989C49.547 77.7666 50.0424 80.3769 50.5664 82.5205L53.796 76.3852C54.0913 75.8326 54.4533 75.5373 54.9011 75.5087C55.5489 75.4611 55.949 75.8707 56.111 76.7472C56.4158 78.462 56.8827 80.1483 57.5019 81.7774C57.8925 78.0428 58.5403 75.3372 59.4454 73.67C59.6264 73.2889 59.9979 73.0412 60.4171 73.0222C60.7506 72.9936 61.084 73.0984 61.3412 73.3175C61.608 73.5176 61.7699 73.832 61.789 74.1654C61.808 74.4131 61.7604 74.6608 61.6461 74.8704C61.0745 75.9374 60.5981 77.7094 60.2266 80.1864C59.8646 82.5776 59.7217 84.4544 59.8169 85.7977C59.855 86.1311 59.7883 86.4646 59.6454 86.7599C59.5025 87.0648 59.1977 87.2744 58.8642 87.2934C58.4736 87.322 58.0926 87.141 57.702 86.7504C56.3301 85.3499 55.244 83.2636 54.4438 80.4912C53.5006 82.3776 52.7861 83.7971 52.3193 84.7307C51.4524 86.3979 50.7093 87.2458 50.0995 87.2934C49.6994 87.322 49.3564 86.9886 49.0802 86.2836C48.3275 84.3591 47.5178 80.6341 46.6508 75.1086C46.5746 74.7466 46.6603 74.3845 46.8795 74.0987Z"
fill="white"
/>
<path
d="M69.296 76.4139C68.8006 75.5279 67.9432 74.8991 66.9429 74.7085C66.6762 74.6514 66.4094 74.6228 66.1426 74.6228C64.7327 74.6228 63.5799 75.3564 62.6844 76.8235C61.9223 78.0715 61.5221 79.5101 61.5412 80.9677C61.5412 82.1014 61.7794 83.0731 62.2462 83.8829C62.7416 84.7689 63.599 85.3977 64.5993 85.5882C64.8661 85.6454 65.1328 85.6739 65.3996 85.6739C66.8191 85.6739 67.9718 84.9404 68.8578 83.4732C69.6199 82.2157 70.0201 80.7771 70.001 79.3005C70.001 78.1668 69.7629 77.2046 69.296 76.4139ZM67.4383 80.5009C67.2382 81.4631 66.8667 82.1871 66.3141 82.6825C65.8854 83.0731 65.4853 83.2255 65.1233 83.1589C64.7613 83.0922 64.4754 82.7683 64.2563 82.2062C64.0944 81.7775 63.9991 81.3297 63.9991 80.8629C63.9991 80.5009 64.0372 80.1388 64.1039 79.7864C64.2468 79.1576 64.504 78.5669 64.8851 78.0334C65.371 77.3189 65.8854 77.014 66.4189 77.1284C66.7809 77.2046 67.0667 77.519 67.2859 78.081C67.4478 78.5098 67.5431 78.9575 67.5431 79.4148C67.5431 79.7768 67.5145 80.1388 67.4383 80.5009Z"
fill="white"
/>
<path
d="M78.5182 76.4139C78.0228 75.5279 77.1654 74.8991 76.1651 74.7085C75.8983 74.6514 75.6316 74.6228 75.3648 74.6228C73.9548 74.6228 72.8021 75.3564 71.9066 76.8235C71.1444 78.0715 70.7443 79.5101 70.7633 80.9677C70.7633 82.1014 71.0015 83.0731 71.4683 83.8829C71.9637 84.7689 72.8211 85.3977 73.8215 85.5882C74.0882 85.6454 74.355 85.6739 74.6217 85.6739C76.0412 85.6739 77.194 84.9404 78.08 83.4732C78.8421 82.2157 79.2422 80.7771 79.2232 79.3005C79.2232 78.1668 78.985 77.2046 78.5182 76.4139ZM76.6605 80.5009C76.4604 81.4631 76.0889 82.1871 75.5363 82.6825C75.1076 83.0731 74.7075 83.2255 74.3454 83.1589C73.9834 83.0922 73.6976 82.7683 73.4785 82.2062C73.3165 81.7775 73.2213 81.3297 73.2213 80.8629C73.2213 80.5009 73.2594 80.1388 73.3261 79.7864C73.469 79.1576 73.7262 78.5669 74.1073 78.0334C74.5931 77.3189 75.1076 77.014 75.6411 77.1284C76.0031 77.2046 76.2889 77.519 76.508 78.081C76.67 78.5098 76.7653 78.9575 76.7653 79.4148C76.7653 79.7768 76.7367 80.1388 76.6605 80.5009Z"
fill="white"
/>
<circle cx="34.2526" cy="34.2526" r="2.25264" fill="#DFD1FB" />
<circle cx="42.758" cy="34.2526" r="2.25264" fill="#DFD1FB" />
<circle cx="51.2634" cy="34.2526" r="2.25264" fill="#DFD1FB" />
<defs>
<clipPath id="a">
<rect width="293" height="275" fill="#fff" />
</clipPath>
<filter
id="filter0_d_5851_4204"
x="0"
y="4"
width="325"
height="272"
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="8" />
<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.08 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_5851_4204"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_5851_4204"
result="shape"
/>
</filter>
</defs>
</svg>
);

20
packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.scss
View File

@ -1,24 +1,32 @@
.woocommerce-wcpay-benefits {
background-color: #fff;
border: 1px solid $table-border;
border-radius: 2px;
padding: 40px 30px 30px;
padding: 36px 24px;
width: 680px;
height: 344px;
min-height: 200px;
.woocommerce-wcpay-benefits-benefit {
flex-direction: column;
justify-content: start;
margin-left: 0;
width: 186px;
align-items: start;
gap: $gap;
.woocommerce-wcpay-benefits-benefit-icon-container {
width: 48px;
height: 48px;
background-color: #F2EDFF;
border-radius: 12px;
justify-content: center;
}
}
p {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
font-size: 13px;
line-height: 16px;
color: $studio-gray-90;
}
}

32
packages/js/onboarding/src/components/WCPayBenefits/WCPayBenefits.tsx
View File

@ -13,22 +13,29 @@ import {
PaymentCardIcon,
InternationalMarketIcon,
EarnManageIcon,
WooPayIcon,
} from './icons';
export const WCPayBenefits: React.VFC = () => {
export const WCPayBenefits: React.VFC< {
isWooPayEligible: boolean;
} > = ( { isWooPayEligible = false } ) => {
return (
<Flex className="woocommerce-wcpay-benefits" align="top">
<Flex className="woocommerce-wcpay-benefits-benefit">
<PaymentCardIcon />
<Flex className="woocommerce-wcpay-benefits-benefit-icon-container">
<PaymentCardIcon />
</Flex>
<Text as="p">
{ __(
'Offer your customers their preferred way to pay including debit and credit card payments, Apple Pay, Sofort, SEPA, iDeal and many more.',
'Offer your customers card payments, Sofort, iDeal, and the ability to sell in-person with Woo mobile app.',
'woocommerce'
) }
</Text>
</Flex>
<Flex className="woocommerce-wcpay-benefits-benefit">
<InternationalMarketIcon />
<Flex className="woocommerce-wcpay-benefits-benefit-icon-container">
<InternationalMarketIcon />
</Flex>
<Text as="p">
{ __(
'Sell to international markets and accept more than 135 currencies with local payment methods.',
@ -37,7 +44,9 @@ export const WCPayBenefits: React.VFC = () => {
</Text>
</Flex>
<Flex className="woocommerce-wcpay-benefits-benefit">
<EarnManageIcon />
<Flex className="woocommerce-wcpay-benefits-benefit-icon-container">
<EarnManageIcon />
</Flex>
<Text as="p">
{ __(
'Earn and manage recurring revenue and get automatic deposits into your nominated bank account.',
@ -45,6 +54,19 @@ export const WCPayBenefits: React.VFC = () => {
) }
</Text>
</Flex>
{ isWooPayEligible && (
<Flex className="woocommerce-wcpay-benefits-benefit">
<Flex className="woocommerce-wcpay-benefits-benefit-icon-container">
<WooPayIcon />
</Flex>
<Text as="p">
{ __(
'Boost conversions with WooPay, a new express checkout feature included in WooPayments.',
'woocommerce'
) }
</Text>
</Flex>
) }
</Flex>
);
};

89
packages/js/onboarding/src/components/WCPayBenefits/icons/International-market.js
View File

@ -5,97 +5,30 @@ import { createElement } from '@wordpress/element';
export const InternationalMarketIcon = () => (
<svg
width="130"
height="130"
viewBox="10 22 130 130"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="48" y="42" width="76" height="80" rx="12" fill="#DCDCDE" />
<g filter="url(#filter0_d_13479_4649)">
<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_13479_4649"
style={ { 'mask-type': 'alpha' } }
id="mask0_5908_1702"
style={ { maskType: 'luminance' } }
maskUnits="userSpaceOnUse"
x="102"
y="32"
width="20"
x="2"
y="2"
width="21"
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"
d="M2.3335 12C2.3335 6.477 6.8105 2 12.3335 2C17.8565 2 22.3335 6.477 22.3335 12C22.3335 17.523 17.8565 22 12.3335 22C6.8105 22 2.3335 17.523 2.3335 12ZM15.3335 17L14.3335 18L12.3335 20C15.5725 20 18.3625 18.061 19.6195 15.286L19.3335 15H17.3335L16.3335 14V12L18.3335 10H20.0695C19.7675 8.834 19.2155 7.767 18.4635 6.87L15.3335 10L14.3335 9V7L15.3335 6V4.589C14.4065 4.212 13.3945 4 12.3335 4C11.2725 4 10.2605 4.212 9.3335 4.589V5L10.3335 6H12.3335V8L9.3335 11H7.3335V13H5.3335L4.3335 12C4.3335 16.072 7.3935 19.436 11.3335 19.931V18L9.3335 16V13H12.3335L13.3335 14V15H15.3335V17Z"
fill="white"
/>
</mask>
<g mask="url(#mask0_13479_4649)">
<rect x="100" y="30" width="24" height="24" fill="white" />
<g mask="url(#mask0_5908_1702)">
<rect x="0.333496" width="24" height="24" fill="#674399" />
</g>
<rect x="41" y="42" width="19" height="13" rx="2" fill="#F7EDF7" />
<path
d="M50.251 52.6934H50.8125V51.8877C52.1992 51.7949 53.1904 51.0771 53.1904 49.8613V49.8516C53.1904 48.7822 52.4922 48.2451 51.1592 47.9424L50.8125 47.8691V46.1699C51.3594 46.2529 51.7256 46.5654 51.7939 47.0879L51.7988 47.0977L53.0928 47.0928L53.0977 47.0879C53.0488 45.9404 52.165 45.1689 50.8125 45.0664V44.2461H50.251V45.0664C48.9082 45.1445 47.9512 45.877 47.9512 47.0391V47.0488C47.9512 48.0986 48.6494 48.6699 49.9238 48.958L50.251 49.0361V50.7891C49.582 50.7256 49.2354 50.4033 49.1523 49.9053V49.9004H47.8486L47.8438 49.9053C47.8828 51.1211 48.8789 51.8145 50.251 51.8926V52.6934ZM49.3135 46.9414V46.9316C49.3135 46.5361 49.6357 46.2334 50.251 46.165V47.7373C49.5918 47.5615 49.3135 47.3174 49.3135 46.9414ZM51.8281 49.998V50.0078C51.8281 50.4473 51.4912 50.7305 50.8125 50.7939V49.1631C51.5693 49.3535 51.8281 49.5732 51.8281 49.998Z"
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.7852 72.8535H53.2002V71.6768H49.7236V71.623C50.2461 71.3154 50.5146 70.8564 50.5146 70.251C50.5146 70.0996 50.5 69.958 50.4707 69.8213H52.4238V69.0986H50.251C50.1582 68.8301 50.0801 68.5664 50.0801 68.2734C50.0801 67.5898 50.6025 67.2041 51.5254 67.2041C52.043 67.2041 52.5801 67.3066 52.8926 67.4434V66.3154C52.5361 66.1641 51.9307 66.0566 51.3154 66.0566C49.6602 66.0566 48.6396 66.833 48.6396 68.0977C48.6396 68.459 48.7373 68.7812 48.8447 69.0986H47.7852V69.8213H49.0693C49.1084 69.9824 49.1328 70.1436 49.1328 70.3145C49.1328 71.0762 48.6445 71.5791 47.7852 71.75V72.8535Z"
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="M48.1172 92.7012H49.7822V93.8535H51.2178V92.7012H52.8779V92.1396H51.2178V91.4414H52.8779V90.8799H51.4912L53.5908 87.1006H52.0576L50.5439 90.123H50.4805L48.9619 87.1006H47.4092L49.5039 90.8799H48.1172V91.4414H49.7822V92.1396H48.1172V92.7012Z"
fill="#674399"
/>
<rect x="70" y="89" width="18" height="4" rx="2" fill="#533582" />
<defs>
<filter
id="filter0_d_13479_4649"
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_13479_4649"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_13479_4649"
result="shape"
/>
</filter>
</defs>
</svg>
);

166
packages/js/onboarding/src/components/WCPayBenefits/icons/earn-manage.js
View File

@ -5,176 +5,30 @@ import { createElement } from '@wordpress/element';
export const EarnManageIcon = () => (
<svg
width="130"
height="130"
viewBox="10 28 130 130"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_d_13479_4682)">
<rect
x="46.666"
y="47"
width="78"
height="77"
rx="12"
fill="#DCDCDE"
/>
</g>
<rect x="57.666" y="97" width="23" height="4" rx="2" fill="white" />
<rect
x="57.666"
y="107"
width="17.7727"
height="4"
rx="2"
fill="white"
/>
<g filter="url(#filter1_d_13479_4682)">
<rect
x="32.666"
y="32"
width="69"
height="52"
rx="12"
fill="white"
/>
</g>
<path
d="M44.666 59.7224C44.666 58.403 45.7356 57.3335 47.0549 57.3335C48.3743 57.3335 49.4438 58.403 49.4438 59.7224V62.1113C49.4438 63.4306 48.3743 64.5002 47.0549 64.5002C45.7356 64.5002 44.666 63.4306 44.666 62.1113V59.7224Z"
fill="#674399"
/>
<rect
x="54.2217"
y="53.75"
width="4.77778"
height="10.75"
rx="2.38889"
fill="#AF7DD1"
/>
<rect
x="63.7764"
y="50.1665"
width="4.77778"
height="14.3333"
rx="2.38889"
fill="#674399"
/>
<rect
x="73.333"
y="46.5835"
width="4.77778"
height="17.9167"
rx="2.38889"
fill="#AF7DD1"
/>
<rect
x="82.8887"
y="43"
width="4.77778"
height="21.5"
rx="2.38889"
fill="#674399"
/>
<path
d="M44.666 70.5C44.666 69.1193 45.7853 68 47.166 68C48.5467 68 49.666 69.1193 49.666 70.5C49.666 71.8807 48.5467 73 47.166 73C45.7853 73 44.666 71.8807 44.666 70.5Z"
fill="#F6F7F7"
/>
<rect x="54.2217" y="68" width="5" height="5" rx="2.5" fill="#F6F7F7" />
<rect x="63.7764" y="68" width="5" height="5" rx="2.5" fill="#F6F7F7" />
<rect x="73.333" y="68" width="5" height="5" rx="2.5" fill="#F6F7F7" />
<rect x="82.8887" y="68" width="5" height="5" rx="2.5" fill="#F6F7F7" />
<rect x="92.666" y="92" width="40" height="40" rx="20" fill="#9A69C7" />
<mask
id="mask0_13479_4682"
style={ { 'mask-type': 'alpha' } }
id="mask0_5908_1139"
style={ { maskType: 'luminance' } }
maskUnits="userSpaceOnUse"
x="103"
y="102"
x="3"
y="2"
width="19"
height="19"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M121.666 106V119C121.666 120.104 120.77 121 119.666 121H105.666C104.562 121 103.666 120.104 103.666 119V106C103.666 104.896 104.562 104 105.666 104H106.666V102H108.666V104H116.666V102H118.666V104H119.666C120.77 104 121.666 104.896 121.666 106ZM111.164 118.001L107.459 114.296L108.874 112.881L111.168 115.175L116.461 109.882L117.876 111.297L111.164 118.001ZM105.666 108H119.666V119H105.666V108Z"
d="M21.6665 6V19C21.6665 20.104 20.7705 21 19.6665 21H5.6665C4.5625 21 3.6665 20.104 3.6665 19V6C3.6665 4.896 4.5625 4 5.6665 4H6.6665V2H8.6665V4H16.6665V2H18.6665V4H19.6665C20.7705 4 21.6665 4.896 21.6665 6ZM11.1645 18.001L7.4595 14.296L8.8745 12.881L11.1685 15.175L16.4615 9.882L17.8765 11.297L11.1645 18.001ZM5.6665 8H19.6665V19H5.6665V8Z"
fill="white"
/>
</mask>
<g mask="url(#mask0_13479_4682)">
<rect x="100.666" y="100" width="24" height="24" fill="white" />
<g mask="url(#mask0_5908_1139)">
<rect x="0.666504" width="24" height="24" fill="#674399" />
</g>
<defs>
<filter
id="filter0_d_13479_4682"
x="14.666"
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_13479_4682"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_13479_4682"
result="shape"
/>
</filter>
<filter
id="filter1_d_13479_4682"
x="0.666016"
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_13479_4682"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_13479_4682"
result="shape"
/>
</filter>
</defs>
</svg>
);

1
packages/js/onboarding/src/components/WCPayBenefits/icons/index.ts
View File

@ -1,3 +1,4 @@
export * from './payment-card';
export * from './International-market';
export * from './earn-manage';
export * from './woopay';

107
packages/js/onboarding/src/components/WCPayBenefits/icons/payment-card.js
View File

@ -5,115 +5,30 @@ import { createElement } from '@wordpress/element';
export const PaymentCardIcon = () => (
<svg
width="130"
height="130"
viewBox="0 10 130 130"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="16.333" y="16" width="76" height="76" rx="12" fill="#DCDCDE" />
<g filter="url(#filter0_d_13479_4614)">
<rect
x="32.333"
y="32"
width="76"
height="84"
rx="12"
fill="white"
/>
</g>
<rect x="26.333" y="26" width="40" height="40" rx="20" fill="#9A69C7" />
<mask
id="mask0_13479_4614"
style={ { 'mask-type': 'alpha' } }
id="mask0_5908_1374"
style={ { maskType: 'luminance' } }
maskUnits="userSpaceOnUse"
x="36"
y="38"
width="21"
x="2"
y="4"
width="20"
height="16"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M54.333 38H38.333C37.228 38 36.333 38.895 36.333 40V52C36.333 53.105 37.228 54 38.333 54H54.333C55.438 54 56.333 53.105 56.333 52V40C56.333 38.895 55.438 38 54.333 38ZM54.333 40V42H38.333V40H54.333ZM38.333 46V52H54.333V46H38.333ZM40.333 48H47.333V50H40.333V48ZM52.333 48H49.333V50H52.333V48Z"
d="M20 4H4C2.895 4 2 4.895 2 6V18C2 19.105 2.895 20 4 20H20C21.105 20 22 19.105 22 18V6C22 4.895 21.105 4 20 4ZM20 6V8H4V6H20ZM4 12V18H20V12H4ZM6 14H13V16H6V14ZM18 14H15V16H18V14Z"
fill="white"
/>
</mask>
<g mask="url(#mask0_13479_4614)">
<rect x="34.333" y="34" width="24" height="24" fill="white" />
<g mask="url(#mask0_5908_1374)">
<rect width="24" height="24" fill="#674399" />
</g>
<mask
id="mask1_13479_4614"
style={ { 'mask-type': 'alpha' } }
maskUnits="userSpaceOnUse"
x="74"
y="47"
width="16"
height="18"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M88.4573 55.5279C88.2882 56.2904 87.6115 56.8329 86.8307 56.8329H78.1673V58.4996H86.5007C87.4215 58.4996 88.1673 59.2454 88.1673 60.1663H78.1673C77.2465 60.1663 76.5007 59.4204 76.5007 58.4996V56.8329V50.1663V49.3329H74.834V47.6663H76.5007C77.4215 47.6663 78.1673 48.4121 78.1673 49.3329V50.1663H89.834L88.4573 55.5279ZM79.8341 62.6663C79.8341 63.5829 79.0841 64.3329 78.1675 64.3329C77.2508 64.3329 76.5091 63.5829 76.5091 62.6663C76.5091 61.7496 77.2508 60.9996 78.1675 60.9996C79.0841 60.9996 79.8341 61.7496 79.8341 62.6663ZM86.5003 60.9996C85.5836 60.9996 84.842 61.7496 84.842 62.6663C84.842 63.5829 85.5836 64.3329 86.5003 64.3329C87.417 64.3329 88.167 63.5829 88.167 62.6663C88.167 61.7496 87.417 60.9996 86.5003 60.9996Z"
fill="white"
/>
</mask>
<g mask="url(#mask1_13479_4614)">
<rect x="72.333" y="46" width="20" height="20" fill="#A7AAAD" />
</g>
<rect
x="45.333"
y="92"
width="36.8966"
height="11.0345"
rx="5.51724"
fill="#674399"
/>
<rect
x="46.334"
y="73"
width="48.9989"
height="4.13793"
rx="2.06897"
fill="#DCDCDE"
/>
<rect x="46.333" y="81" width="49" height="4" rx="2" fill="#DCDCDE" />
<defs>
<filter
id="filter0_d_13479_4614"
x="0.333008"
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_13479_4614"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_13479_4614"
result="shape"
/>
</filter>
</defs>
</svg>
);

34
packages/js/onboarding/src/components/WCPayBenefits/icons/woopay.js Normal file
View File

@ -0,0 +1,34 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const WooPayIcon = () => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="mask0_5908_3242"
style={ { maskType: 'luminance' } }
maskUnits="userSpaceOnUse"
x="3"
y="4"
width="18"
height="18"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.192 4H5.79578C4.24399 4 2.98777 5.26853 3.00009 6.80801V16.168C3.00009 17.7198 4.2563 18.9761 5.8081 18.9761H11.1676L16.4757 21.9319L15.2687 18.9761H18.192C19.7438 18.9761 21 17.7198 21 16.168V6.80801C21 5.25622 19.7438 4 18.192 4ZM7.53039 7.19611C7.2535 7.21589 7.04582 7.31478 6.90738 7.50268C6.76893 7.68068 6.71948 7.90813 6.74915 8.16525C7.33261 11.8737 7.87651 14.3756 8.38086 15.6711C8.57864 16.1458 8.80609 16.3732 9.0731 16.3535C9.48844 16.3238 9.9829 15.7502 10.5664 14.6327C10.8729 13.9998 11.3476 13.0505 11.9904 11.7847C12.5244 13.6537 13.2562 15.058 14.1759 15.9974C14.433 16.2645 14.7 16.3831 14.9571 16.3633C15.1846 16.3436 15.3626 16.2249 15.4813 16.0073C15.5801 15.8194 15.6197 15.6019 15.5999 15.3547C15.5406 14.4547 15.6296 13.1988 15.8768 11.5869C16.1339 9.92551 16.4504 8.72893 16.8361 8.01691C16.9152 7.86857 16.9448 7.72024 16.935 7.54223C16.9152 7.31478 16.8163 7.12689 16.6284 6.97855C16.4405 6.83021 16.2328 6.76099 16.0054 6.78077C15.7186 6.80055 15.501 6.939 15.3527 7.21589C14.7396 8.33336 14.3045 10.1431 14.0473 12.6549C13.6715 11.7056 13.3551 10.5881 13.1079 9.27283C12.9991 8.68937 12.7321 8.41248 12.297 8.44214C12.0003 8.46192 11.7531 8.65971 11.5553 9.03549L9.38955 13.1593C9.03354 11.7253 8.69731 9.97496 8.39075 7.90813C8.32152 7.3939 8.03474 7.15656 7.53039 7.19611Z"
fill="white"
/>
</mask>
<g mask="url(#mask0_5908_3242)">
<rect width="24" height="24" fill="#674399" />
</g>
</svg>
);

8
plugins/woocommerce-admin/client/payments-welcome/banner.tsx
View File

@ -28,6 +28,8 @@ const Banner: React.FC< Props > = ( { isSubmitted, handleSetup } ) => {
const [ isNoThanksClicked, setNoThanksClicked ] = useState( false );
const [ isExitSurveyModalOpen, setExitSurveyModalOpen ] = useState( false );
const isWooPayEligible = getAdminSetting( 'isWooPayEligible' );
const handleNoThanks = () => {
setNoThanksClicked( true );
setExitSurveyModalOpen( true );
@ -64,7 +66,11 @@ const Banner: React.FC< Props > = ( { isSubmitted, handleSetup } ) => {
>
{ strings.noThanks }
</Button>
<p>{ strings.TosAndPp }</p>
<p>
{ isWooPayEligible
? strings.TosAndPpWooPay
: strings.TosAndPp }
</p>
<p>{ strings.termsAndConditions( tc_url ) }</p>
</CardBody>
<CardDivider />

32
plugins/woocommerce-admin/client/payments-welcome/strings.tsx
View File

@ -41,6 +41,38 @@ export default {
),
}
),
TosAndPpWooPay: createInterpolateElement(
__(
'By using WooPayments you agree to our <a1>Terms of Service</a2> (including WooPay <a3>merchant terms</a3>) and acknowledge that you have read our <a2>Privacy Policy</a2>. Discount will be applied to payments processed via WooPayments upon completion of installation, setup, and connection. ',
'woocommerce'
),
{
a1: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href="https://wordpress.com/tos"
target="_blank"
rel="noopener noreferrer"
/>
),
a2: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href="https://automattic.com/privacy/"
target="_blank"
rel="noopener noreferrer"
/>
),
a3: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href="https://wordpress.com/tos/#more-woopay-specifically"
target="_blank"
rel="noopener noreferrer"
/>
),
}
),
termsAndConditions: ( url: string ) =>
createInterpolateElement(
__(

4
plugins/woocommerce-admin/client/payments/payment-settings-banner.tsx
View File

@ -27,6 +27,7 @@ const WCPaySettingBanner = () => {
'admin.php?wcpay-connect=1&_wpnonce=' +
getAdminSetting( 'wcpay_welcome_page_connect_nonce' )
);
const isWooPayEligible = getAdminSetting( 'isWooPayEligible' );
return (
<WCPayBanner>
@ -41,8 +42,9 @@ const WCPaySettingBanner = () => {
{ __( 'Get started', 'woocommerce' ) }
</Button>
}
isWooPayEligible={ isWooPayEligible }
/>
<WCPayBannerFooter />
<WCPayBannerFooter isWooPayEligible={ isWooPayEligible } />
</WCPayBanner>
);
};

7
plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js
View File

@ -18,6 +18,7 @@ import { useDispatch } from '@wordpress/data';
import { Action } from '../Action';
import { connectWcpay } from './utils';
import './suggestion.scss';
import { getAdminSetting } from '~/utils/admin-settings';
export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => {
const {
@ -27,6 +28,7 @@ export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => {
enabled: isEnabled,
installed: isInstalled,
} = paymentGateway;
const isWooPayEligible = getAdminSetting( 'isWooPayEligible' );
const { createNotice } = useDispatch( 'core/notices' );
// When the WC Pay is installed and onSetupCallback is null
@ -62,10 +64,11 @@ export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => {
/>
}
bannerImage={ <WCPayBannerImageCut /> }
isWooPayEligible={ isWooPayEligible }
/>
<WCPayBannerFooter />
<WCPayBenefits isWooPayEligible={ isWooPayEligible } />
<WCPayBannerFooter isWooPayEligible={ isWooPayEligible } />
</WCPayBanner>
<WCPayBenefits />
</div>
);
};

4
plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/WCPay/suggestion.scss
View File

@ -4,7 +4,7 @@
margin-bottom: 24px;
.woocommerce-recommended-payments-banner__body {
padding: 30px 0 0 40px;
padding: 30px 0 0 24px;
justify-content: space-between;
}
@ -16,7 +16,7 @@
.woocommerce-recommended-payments-banner__footer {
flex-direction: column;
align-items: flex-start;
padding: 20px 38.2px 30px 40px;
padding: 20px 38.2px 30px 24px;
}
.woocommerce-recommended-payments-banner__footer_icon_container {

4
plugins/woocommerce/changelog/add-update-wcpay-banners-for-woopay Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Update WCPay banners for WooPay in eligible countries.

9
plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/WooCommercePayments.php
View File

@ -6,7 +6,7 @@ use Automattic\WooCommerce\Internal\Admin\Onboarding\OnboardingProfile;
use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Task;
use Automattic\WooCommerce\Admin\PluginsHelper;
use Automattic\WooCommerce\Admin\Features\PaymentGatewaySuggestions\Init as Suggestions;
use Automattic\WooCommerce\Admin\Features\OnboardingTasks\TaskList;
use Automattic\WooCommerce\Internal\Admin\WCPayPromotion\Init as WCPayPromotionInit;
/**
* WooCommercePayments Task
@ -73,6 +73,13 @@ class WooCommercePayments extends Task {
* @return string
*/
public function get_additional_info() {
if ( WCPayPromotionInit::is_woopay_eligible() ) {
return __(
'By using WooPayments you agree to be bound by our <a href="https://wordpress.com/tos/" target="_blank">Terms of Service</a> (including WooPay <a href="https://wordpress.com/tos/#more-woopay-specifically" target="_blank">merchant terms</a>) and acknowledge that you have read our <a href="https://automattic.com/privacy/" target="_blank">Privacy Policy</a>',
'woocommerce'
);
}
return __(
'By using WooPayments you agree to be bound by our <a href="https://wordpress.com/tos/" target="_blank">Terms of Service</a> and acknowledge that you have read our <a href="https://automattic.com/privacy/" target="_blank">Privacy Policy</a>',
'woocommerce'

3
plugins/woocommerce/src/Internal/Admin/Settings.php
View File

@ -9,6 +9,7 @@ use Automattic\WooCommerce\Admin\API\Plugins;
use Automattic\WooCommerce\Admin\PageController;
use Automattic\WooCommerce\Admin\API\Reports\Orders\DataStore as OrdersDataStore;
use Automattic\WooCommerce\Admin\PluginsHelper;
use Automattic\WooCommerce\Internal\Admin\WCPayPromotion\Init as WCPayPromotionInit;
use Automattic\WooCommerce\Utilities\FeaturesUtil;
use WC_Marketplace_Suggestions;
@ -236,6 +237,8 @@ class Settings {
$settings['features'] = $this->get_features();
$settings['isWooPayEligible'] = WCPayPromotionInit::is_woopay_eligible();
return $settings;
}

9
plugins/woocommerce/src/Internal/Admin/WCPayPromotion/Init.php
View File

@ -141,6 +141,15 @@ class Init {
}
/**
* Get merchant WooPay eligibility.
*/
public static function is_woopay_eligible() {
$wcpay_promotion = self::get_wc_pay_promotion_spec();
return $wcpay_promotion && 'woocommerce_payments:woopay' === $wcpay_promotion->id;
}
/**
* Delete the specs transient.
*/