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

Upgrade the WooPayments surfaces to the new designs (#46873) 

* Import colors.native scss variables

* Add changelog

* Refactor WCPay banner and cleanup

We introduce a new WCPayConnectCard onboarding component and
remove/cleanup all other WCPay surface components.

This component uses the new design, updated payment methods icons
and WCPay logo.

* Add changelog

* Upgrade the WCPay payments settings banner

* test: Fix WCPay payments settings banner tests

* Update the WCPay welcome page to use the WCPayConnectCard component

* Update the Payments task page to use the WCPayConnectCard component

* Fix copy for payments settings methods CTA buttons label

* Add changelog

* Further cleanup of no-longer-used WCPay surfaces

* Consolidate onboarding component icons for single sources

* Minor cleanup

* test: Fix WCPay payments settings banner test

* test: Fix payments tasks page tests
This commit is contained in:
Vlad Olaru 2024-04-24 21:41:40 +03:00 committed by GitHub
parent b0517d0652
commit 24808a0a8b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
73 changed files with 2236 additions and 3647 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/js/internal-style-build/abstracts/_colors.scss
View File

@ -1,4 +1,5 @@
@import '@automattic/color-studio/dist/color-variables.scss';
@import '@wordpress/base-styles/colors.native.scss';
@import '@wordpress/base-styles/colors.scss';
$transparent: rgba(255, 255, 255, 0);

4
packages/js/internal-style-build/changelog/import-colors-native-scss-variables Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
Import the new colors native scss variables.

4
packages/js/onboarding/changelog/update-46869-new-designs-for-woopayments-surfaces Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Added a new WCPayConnectCard component and removed previous WCPay banners and cards

41
packages/js/onboarding/src/components/WCPayAcceptedMethods.tsx
View File

@ -1,41 +0,0 @@
/**
* External dependencies
*/
import { createElement, Fragment } from '@wordpress/element';
import { Text } from '@woocommerce/experimental';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import Visa from '../images/cards/visa.js';
import MasterCard from '../images/cards/mastercard.js';
import Maestro from '../images/cards/maestro.js';
import Amex from '../images/cards/amex.js';
import ApplePay from '../images/cards/applepay.js';
import CB from '../images/cards/cb.js';
import DinersClub from '../images/cards/diners.js';
import Discover from '../images/cards/discover.js';
import JCB from '../images/cards/jcb.js';
import UnionPay from '../images/cards/unionpay.js';
export const WCPayAcceptedMethods: React.VFC = () => (
<>
<Text as="h3" variant="label" weight="600" size="12" lineHeight="16px">
{ __( 'Accepted payment methods', 'woocommerce' ) }
</Text>
<div className="woocommerce-task-payment-wcpay__accepted">
<Visa />
<MasterCard />
<Maestro />
<Amex />
<DinersClub />
<CB />
<Discover />
<UnionPay />
<JCB />
<ApplePay />
</div>
</>
);

32
packages/js/onboarding/src/components/WCPayBanner/Icons/amex.js
View File

@ -1,32 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const Amex = () => (
/* eslint-disable */
<svg
width="52"
height="35"
viewBox="0 0 52 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1.18945"
y="0.5"
width="50"
height="34"
rx="3.5"
fill="#006FCF"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.1205 25.2823V18.0771H19.3189L20.1985 19.1441L21.1072 18.0771H50.8653V24.7854C50.8653 24.7854 50.0871 25.2751 49.187 25.2823H32.7093L31.7176 24.1465V25.2823H28.4679V23.3435C28.4679 23.3435 28.0239 23.6141 27.0642 23.6141H25.9581V25.2823H21.0376L20.1593 24.1924L19.2675 25.2823H11.1205ZM1.56836 12.6465L3.41294 8.63574H6.60294L7.64976 10.8824V8.63574H11.6152L12.2384 10.2596L12.8425 8.63574H30.6434V9.4521C30.6434 9.4521 31.5792 8.63574 33.1171 8.63574L38.8928 8.65457L39.9215 10.8718V8.63574H43.24L44.1534 9.90939V8.63574H47.5023V15.841H44.1534L43.2781 14.5632V15.841H38.4025L37.9121 14.7052H36.6014L36.1191 15.841H32.8126C31.4893 15.841 30.6434 15.0413 30.6434 15.0413V15.841H25.658L24.6685 14.7052V15.841H6.13036L5.64039 14.7052H4.33383L3.84732 15.841H1.56836V12.6465ZM1.5779 14.9189L4.06583 9.52391H5.95199L8.43755 14.9189H6.7821L6.32542 13.8386H3.65672L3.19767 14.9189H1.5779ZM5.79982 12.6674L4.98636 10.7795L4.17053 12.6674H5.79982ZM8.60869 14.9182V9.52317L10.9105 9.53115L12.2493 13.0095L13.556 9.52317H15.8394V14.9182H14.3933V10.9429L12.8603 14.9182H11.592L10.0548 10.9429V14.9182H8.60869ZM16.8289 14.9182V9.52317H21.5479V10.73H18.2902V11.6528H21.4717V12.7886H18.2902V13.7469H21.5479V14.9182H16.8289ZM22.3851 14.9189V9.52391H25.6033C26.6696 9.52391 27.625 10.1389 27.625 11.2742C27.625 12.2447 26.8195 12.8698 26.0385 12.9313L27.9413 14.9189H26.1741L24.4402 13.0023H23.8313V14.9189H22.3851ZM25.4843 10.7306H23.8313V11.8664H25.5057C25.7956 11.8664 26.1694 11.6569 26.1694 11.2985C26.1694 11.0199 25.8809 10.7306 25.4843 10.7306ZM29.692 14.9182H28.2154V9.52317H29.692V14.9182ZM33.1931 14.9182H32.8744C31.3323 14.9182 30.396 13.7851 30.396 12.2429C30.396 10.6626 31.3218 9.52317 33.2692 9.52317H34.8676V10.8009H33.2108C32.4202 10.8009 31.8611 11.3763 31.8611 12.2562C31.8611 13.301 32.5004 13.7398 33.4215 13.7398H33.802L33.1931 14.9182ZM33.8521 14.9189L36.34 9.52391H38.2262L40.7117 14.9189H39.0563L38.5996 13.8386H35.9309L35.4719 14.9189H33.8521ZM38.074 12.6674L37.2605 10.7795L36.4447 12.6674H38.074ZM40.8805 14.9182V9.52317H42.7191L45.0667 12.9128V9.52317H46.5128V14.9182H44.7337L42.3267 11.4398V14.9182H40.8805ZM12.1099 24.3594V18.9643H16.8289V20.1711H13.5713V21.0939H16.7528V22.2297H13.5713V23.1881H16.8289V24.3594H12.1099ZM35.2329 24.3594V18.9643H39.9519V20.1711H36.6943V21.0939H39.8606V22.2297H36.6943V23.1881H39.9519V24.3594H35.2329ZM17.0121 24.3594L19.3097 21.6951L16.9574 18.9643H18.7793L20.1803 20.6525L21.586 18.9643H23.3366L21.0151 21.6618L23.317 24.3594H21.4953L20.1351 22.6978L18.8079 24.3594H17.0121ZM23.4887 24.3603V18.9653H26.6831C27.9938 18.9653 28.7595 19.7531 28.7595 20.7799C28.7595 22.0193 27.7832 22.6566 26.4952 22.6566H24.9729V24.3603H23.4887ZM26.5761 20.1853H24.973V21.4276H26.5714C26.9937 21.4276 27.2897 21.1665 27.2897 20.8064C27.2897 20.4232 26.9922 20.1853 26.5761 20.1853ZM29.3875 24.3594V18.9643H32.6056C33.672 18.9643 34.6274 19.5793 34.6274 20.7146C34.6274 21.6851 33.8218 22.3102 33.0409 22.3717L34.9437 24.3594H33.1765L31.4426 22.4427H30.8337V24.3594H29.3875ZM32.4867 20.171H30.8337V21.3068H32.5082C32.798 21.3068 33.1718 21.0974 33.1718 20.7389C33.1718 20.4603 32.8833 20.171 32.4867 20.171ZM40.6217 24.3594V23.1881H43.5159C43.9441 23.1881 44.1295 22.9722 44.1295 22.7355C44.1295 22.5087 43.9447 22.2794 43.5159 22.2794H42.208C41.0712 22.2794 40.4381 21.6334 40.4381 20.6636C40.4381 19.7985 41.0178 18.9643 42.7072 18.9643H45.5233L44.9144 20.1782H42.4788C42.0132 20.1782 41.8699 20.4061 41.8699 20.6237C41.8699 20.8473 42.047 21.0939 42.4027 21.0939H43.7727C45.04 21.0939 45.5899 21.7644 45.5899 22.6424C45.5899 23.5863 44.9772 24.3594 43.7038 24.3594H40.6217ZM45.7176 24.3594V23.1881H48.6118C49.04 23.1881 49.2254 22.9722 49.2254 22.7355C49.2254 22.5087 49.0406 22.2794 48.6118 22.2794H47.3039C46.1671 22.2794 45.534 21.6334 45.534 20.6636C45.534 19.7985 46.1138 18.9643 47.8031 18.9643H50.6192L50.0103 20.1782H47.5747C47.1092 20.1782 46.9658 20.4061 46.9658 20.6237C46.9658 20.8473 47.1429 21.0939 47.4986 21.0939H48.8687C50.1359 21.0939 50.6858 21.7644 50.6858 22.6424C50.6858 23.5863 50.0731 24.3594 48.7997 24.3594H45.7176Z"
fill="white"
/>
</svg>
/* eslint-enable */
);

32
packages/js/onboarding/src/components/WCPayBanner/Icons/applepay.js
View File

@ -1,32 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const ApplePay = () => (
/* eslint-disable */
<svg
width="52"
height="35"
viewBox="0 0 52 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.878906"
y="0.5"
width="50"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.8352 13.0607C15.4642 13.5024 14.8707 13.8507 14.2771 13.8009C14.2029 13.2038 14.4935 12.5693 14.8336 12.1774C15.2045 11.7233 15.8537 11.3999 16.3792 11.375C16.4411 11.997 16.1999 12.6066 15.8352 13.0607ZM16.373 13.9192C15.8501 13.8889 15.373 14.0774 14.9876 14.2297C14.7396 14.3277 14.5296 14.4106 14.3698 14.4106C14.1905 14.4106 13.9718 14.3232 13.7263 14.2251C13.4046 14.0965 13.0367 13.9495 12.651 13.9565C11.7669 13.969 10.9446 14.4728 10.4933 15.2753C9.56588 16.8801 10.2522 19.2563 11.1486 20.5626C11.5876 21.2095 12.1131 21.9186 12.8056 21.8937C13.1102 21.8822 13.3294 21.7886 13.5562 21.6918C13.8173 21.5803 14.0885 21.4645 14.512 21.4645C14.9208 21.4645 15.1802 21.5773 15.4292 21.6856C15.6659 21.7885 15.8933 21.8874 16.2308 21.8813C16.948 21.8689 17.3993 21.2344 17.8383 20.5875C18.312 19.8931 18.5202 19.2155 18.5518 19.1127L18.5555 19.1008C18.5547 19.1 18.5488 19.0973 18.5385 19.0926C18.3802 19.0196 17.1698 18.4621 17.1582 16.9672C17.1465 15.7124 18.1182 15.0767 18.2712 14.9766L18.2712 14.9766C18.2805 14.9705 18.2868 14.9664 18.2896 14.9642C17.6713 14.0436 16.7068 13.9441 16.373 13.9192ZM21.3377 21.8128V12.1153H24.9546C26.8217 12.1153 28.1263 13.4091 28.1263 15.3001C28.1263 17.1911 26.797 18.4974 24.9051 18.4974H22.8339V21.8128H21.3377ZM22.8339 13.3841H24.5589C25.8572 13.3841 26.5991 14.0808 26.5991 15.3062C26.5991 16.5317 25.8572 17.2346 24.5527 17.2346H22.8339V13.3841ZM33.0661 20.6496C32.6704 21.4085 31.7986 21.8874 30.8589 21.8874C29.4678 21.8874 28.4971 21.0539 28.4971 19.7974C28.4971 18.5533 29.4368 17.838 31.1742 17.7322L33.0413 17.6203V17.0853C33.0413 16.2953 32.5282 15.8661 31.6131 15.8661C30.8589 15.8661 30.3086 16.258 30.1973 16.8552H28.8495C28.8928 15.5986 30.0675 14.6842 31.6564 14.6842C33.369 14.6842 34.4819 15.5862 34.4819 16.9858V21.8128H33.097V20.6496H33.0661ZM31.2609 20.7368C30.4633 20.7368 29.9563 20.3511 29.9563 19.7602C29.9563 19.1506 30.4448 18.796 31.3784 18.74L33.0415 18.6343V19.1817C33.0415 20.0898 32.2748 20.7368 31.2609 20.7368ZM39.0756 22.1922C38.4759 23.8903 37.7897 24.4502 36.3306 24.4502C36.2193 24.4502 35.8483 24.4377 35.7617 24.4129V23.2496C35.8545 23.2621 36.0832 23.2745 36.2007 23.2745C36.8623 23.2745 37.2332 22.9946 37.462 22.2668L37.598 21.8376L35.0631 14.7775H36.6273L38.3894 20.5065H38.4203L40.1823 14.7775H41.7033L39.0756 22.1922Z"
fill="black"
/>
</svg>
/* eslint-enable */
);

24
packages/js/onboarding/src/components/WCPayBanner/Icons/cb.js
View File

@ -1,24 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const CB = () => (
/* eslint-disable */
<svg width="64" height="40" viewBox="0 0 39 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.09985" y="0.723633" width="37.4" height="23" rx="1.5" fill="url(#paint0_linear_685_110690)" />
<rect x="1.09985" y="0.723633" width="37.4" height="23" rx="1.5" stroke="#DDDDDD" />
<path fillRule="evenodd" clipRule="evenodd"
d="M13.307 11.7158H20.0383C19.9783 10.2608 19.6393 8.76069 18.6111 7.79714C17.3863 6.64937 15.241 6.22363 13.3241 6.22363C11.3289 6.22363 9.1224 6.6906 7.89114 7.92209C6.82939 8.98291 6.59985 10.6897 6.59985 12.2233C6.59985 13.8297 7.04892 15.6982 8.20072 16.7744C9.4255 17.9196 11.4101 18.2236 13.3241 18.2236C15.1833 18.2236 17.1974 17.8803 18.4151 16.7931C19.6293 15.7072 20.0489 13.878 20.0489 12.2233V12.2156H13.307V11.7158ZM20.4897 12.2158V17.9553H29.8536V17.9476C31.2238 17.8729 32.3138 16.6375 32.3138 15.1207C32.3138 13.6032 31.2238 12.2886 29.8536 12.2133V12.2158H20.4897ZM29.7471 6.46388C31.0825 6.46388 32.1425 7.62259 32.1425 9.08467C32.1425 10.4688 31.169 11.5992 29.9307 11.7158H20.4897V6.45551H29.4516C29.5068 6.44876 29.571 6.45351 29.6339 6.45814C29.673 6.46103 29.7116 6.46388 29.7471 6.46388Z"
fill="#FEFEFE" />
<defs>
<linearGradient id="paint0_linear_685_110690" x1="11.0155" y1="-2.81556" x2="3.21751" y2="23.5991"
gradientUnits="userSpaceOnUse">
<stop stopColor="#222E72" />
<stop offset="0.591647" stopColor="#40CBFF" />
<stop offset="1" stopColor="#3CB792" />
</linearGradient>
</defs>
</svg>
/* eslint-enable */
);

52
packages/js/onboarding/src/components/WCPayBanner/Icons/discover.js
View File

@ -1,52 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const Discover = () => (
/* eslint-disable */
<svg
width="52"
height="35"
viewBox="0 0 52 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.878906"
y="0.5"
width="50"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17.1461 17.7823C17.1461 19.9191 18.8322 21.576 21.0021 21.576C21.6154 21.576 22.141 21.456 22.7888 21.1524V19.4832C22.2192 20.0506 21.7145 20.2795 21.0685 20.2795C19.6332 20.2795 18.6146 19.2439 18.6146 17.7717C18.6146 16.376 19.6654 15.2751 21.0021 15.2751C21.6818 15.2751 22.1963 15.5163 22.7888 16.0929V14.4246C22.1633 14.1089 21.649 13.978 21.0357 13.978C18.8768 13.978 17.1461 15.6685 17.1461 17.7823ZM13.4892 16.0168C13.4892 16.4097 13.7401 16.6173 14.5953 16.9321C16.2163 17.5222 16.6967 18.0449 16.6967 19.2001C16.6967 20.6072 15.6577 21.5872 14.177 21.5872C13.0926 21.5872 12.304 21.1622 11.6475 20.2031L12.5682 19.3209C12.8962 19.9523 13.4437 20.2907 14.1234 20.2907C14.7593 20.2907 15.2298 19.8542 15.2298 19.2653C15.2298 18.96 15.0873 18.6979 14.8025 18.5128C14.6594 18.4252 14.3754 18.2949 13.8174 18.0988C12.479 17.6197 12.0201 17.1068 12.0201 16.1053C12.0201 14.9155 13.006 14.0224 14.2987 14.0224C15.0997 14.0224 15.8327 14.2948 16.4455 14.8282L15.6998 15.7997C15.3286 15.3857 14.9775 15.211 14.5507 15.211C13.9366 15.211 13.4892 15.559 13.4892 16.0168ZM9.68583 21.4123H11.1109V14.1424H9.68583V21.4123ZM6.77288 19.6035C6.32524 20.006 5.74353 20.1815 4.82283 20.1815H4.44039V15.374H4.82283C5.74353 15.374 6.30238 15.538 6.77288 15.9621C7.26569 16.3986 7.56205 17.0755 7.56205 17.7717C7.56205 18.4697 7.26569 19.1671 6.77288 19.6035ZM5.10834 14.1424H3.0166V21.4121H5.09733C6.20374 21.4121 7.0025 21.1525 7.70389 20.5728C8.53737 19.8867 9.03017 18.8523 9.03017 17.7824C9.03017 15.6369 7.41938 14.1424 5.10834 14.1424ZM32.1394 14.1424L34.0875 19.0255L36.061 14.1424H37.6057L34.4496 21.5988H33.6828L30.5826 14.1424H32.1394ZM38.2501 21.4122H42.2913V20.1815H39.6741V18.2191H42.1951V16.9878H39.6741V15.3742H42.2913V14.1424H38.2501V21.4122ZM44.6585 17.4893H45.0748C45.9851 17.4893 46.4674 17.0958 46.4674 16.365C46.4674 15.6575 45.9851 15.2876 45.0974 15.2876H44.6585V17.4893ZM45.3485 14.1422C46.9918 14.1422 47.9339 14.9275 47.9339 16.2886C47.9339 17.4016 47.3429 18.1325 46.2695 18.3496L48.5695 21.4121H46.817L44.8447 18.4917H44.6587V21.4121H43.2353V14.1422H45.3485Z"
fill="#1D1D1B"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.415 19.8859C31.5716 18.0862 31.0433 15.6953 29.235 14.5445C27.4267 13.3937 25.0236 13.9191 23.867 15.7188C22.7107 17.518 23.2391 19.9096 25.0474 21.0604C26.8557 22.2112 29.2587 21.6851 30.415 19.8859Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="32.5088"
y1="16.6279"
x2="25.9795"
y2="12.4317"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F6A000" />
<stop offset="0.623918" stopColor="#E47E02" />
<stop offset="1" stopColor="#D36002" />
</linearGradient>
</defs>
</svg>
/* eslint-enable */
);

52
packages/js/onboarding/src/components/WCPayBanner/Icons/giropay.js
View File

@ -1,52 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const Giropay = () => (
/* eslint-disable */
<svg
width="64"
height="40"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 4C0 1.79086 1.79086 0 4 0H60C62.2091 0 64 1.79086 64 4V36C64 38.2091 62.2091 40 60 40H4C1.79086 40 0 38.2091 0 36V4Z"
fill="white"
/>
<path
d="M12 11C12 8.79086 13.7909 7 16 7H48.8571C51.0663 7 52.8571 8.79086 52.8571 11V29C52.8571 31.2091 51.0663 33 48.8571 33H16C13.7909 33 12 31.2091 12 29V11Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M48.8571 9H16C14.8954 9 14 9.89543 14 11V29C14 30.1046 14.8954 31 16 31H48.8571C49.9617 31 50.8571 30.1046 50.8571 29V11C50.8571 9.89543 49.9617 9 48.8571 9ZM16 7C13.7909 7 12 8.79086 12 11V29C12 31.2091 13.7909 33 16 33H48.8571C51.0663 33 52.8571 31.2091 52.8571 29V11C52.8571 8.79086 51.0663 7 48.8571 7H16Z"
fill="#0F3365"
/>
<path
d="M32.4285 7H48.857C51.0662 7 52.857 8.79086 52.857 11V29C52.857 31.2091 51.0662 33 48.857 33H32.4285V7Z"
fill="#0F3365"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M35.2142 28.1058H39.4694V22.1896H39.5169C40.3211 23.4859 41.9291 23.966 43.4183 23.966C47.083 23.966 49.0452 21.2899 49.0452 18.0698C49.0452 15.4361 47.1788 12.5715 43.7737 12.5715C41.8349 12.5715 40.0373 13.2615 39.1865 14.7878H39.139V12.8223H35.2142V28.1058ZM44.648 18.1539C44.648 19.8896 43.6784 21.0808 42.0716 21.0808C40.6524 21.0808 39.4691 19.8896 39.4691 18.2999C39.4691 16.6696 40.5103 15.4567 42.0716 15.4567C43.7259 15.4567 44.648 16.7105 44.648 18.1539Z"
fill="#FFFFFE"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M29.6351 12.8223H25.7804V14.7871H25.7341C24.8353 13.4496 23.369 12.5715 21.549 12.5715C17.7192 12.5715 15.9929 14.9962 15.9929 18.2372C15.9929 21.4584 18.0972 23.7145 21.4785 23.7145C23.1807 23.7145 24.5991 23.1307 25.615 21.8537H25.6629V22.4404C25.6629 24.573 24.3395 25.5971 21.8802 25.5971C20.1068 25.5971 19.0193 25.2629 17.7192 24.6984L17.5059 27.6676C18.4993 27.98 20.1781 28.3572 22.2111 28.3572C27.1762 28.3572 29.6351 26.9139 29.6351 22.4404V12.8223ZM20.3904 18.1742C20.3904 16.6902 21.218 15.4567 22.8022 15.4567C24.7169 15.4567 25.521 16.8146 25.521 18.0278C25.521 19.7012 24.3148 20.83 22.8022 20.83C21.5255 20.83 20.3904 19.8672 20.3904 18.1742Z"
fill="#D8232A"
/>
<path
d="M4 1H60V-1H4V1ZM63 4V36H65V4H63ZM60 39H4V41H60V39ZM1 36V4H-1V36H1ZM4 39C2.34315 39 1 37.6569 1 36H-1C-1 38.7614 1.23858 41 4 41V39ZM63 36C63 37.6569 61.6569 39 60 39V41C62.7614 41 65 38.7614 65 36H63ZM60 1C61.6569 1 63 2.34315 63 4H65C65 1.23858 62.7614 -1 60 -1V1ZM4 -1C1.23858 -1 -1 1.23858 -1 4H1C1 2.34315 2.34315 1 4 1V-1Z"
fill="#DDDDDD"
/>
</svg>
/* eslint-enable */
);

68
packages/js/onboarding/src/components/WCPayBanner/Icons/gpay.js
View File

@ -1,68 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const GooglePay = () => (
/* eslint-disable */
<svg
width="84"
height="58"
viewBox="0 0 84 58"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.5"
y="0.5"
width="83"
height="57"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M40.4322 34.9714V28.4303V28.429H43.9665C45.4236 28.4299 46.6482 27.9715 47.6403 27.0538C48.6429 26.1828 49.2035 24.9306 49.175 23.6253C49.1948 22.3273 48.6353 21.0844 47.6403 20.2162C46.6569 19.2935 45.3343 18.7901 43.9665 18.8178H38.293V34.9714H40.4322ZM40.4322 26.4454V20.8065V20.8052H44.0196C44.8192 20.7834 45.59 21.0956 46.1362 21.6624C46.6859 22.1807 46.996 22.8927 46.996 23.6363C46.996 24.3799 46.6859 25.0919 46.1362 25.6102C45.5833 26.1651 44.8149 26.4683 44.0196 26.4454H40.4322Z"
fill="#5F6368"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M57.8487 24.7879C56.9337 23.9682 55.6856 23.5583 54.1045 23.5583C52.0733 23.5583 50.5396 24.2801 49.5032 25.7236L51.3873 26.8746C52.0835 25.8968 53.0291 25.4079 54.2241 25.4079C54.9859 25.3992 55.7231 25.6693 56.2888 26.1644C56.8529 26.6168 57.1773 27.2912 57.1724 28.0011V28.4754C56.3504 28.0243 55.3043 27.7987 54.034 27.7987C52.5459 27.8005 51.3563 28.139 50.4652 28.8144C49.5741 29.4898 49.1285 30.3993 49.1285 31.543C49.1091 32.5844 49.5748 33.5787 50.3961 34.2496C51.2411 34.9714 52.2912 35.3323 53.5464 35.3323C55.0168 35.3323 56.1949 34.7007 57.0807 33.4376H57.1738V34.9714H59.2199V28.1596C59.2208 26.7315 58.7638 25.6076 57.8487 24.7879ZM52.0464 32.9414C51.5983 32.6281 51.334 32.1239 51.3369 31.5881C51.3369 30.9862 51.6279 30.4848 52.2138 30.0723C52.794 29.6659 53.5186 29.4627 54.3876 29.4627C55.5808 29.4627 56.5108 29.7205 57.1778 30.236C57.1778 31.1073 56.8235 31.8665 56.1149 32.5135C55.4766 33.1327 54.6113 33.4813 53.7086 33.4827C53.1068 33.4937 52.5195 33.3024 52.0464 32.9414Z"
fill="#5F6368"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M70.9654 23.9192L63.8223 39.8434H61.6141L64.2648 34.2716L59.5679 23.9192H61.8931L65.2879 31.8588H65.3344L68.6362 23.9192H70.9654Z"
fill="#5F6368"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.7877 27.0203C31.7885 26.3879 31.7333 25.7566 31.6229 25.1333H22.6011V28.7074H27.7684C27.5547 29.8609 26.8645 30.8797 25.8577 31.5275V33.8475H28.9416C30.7473 32.2325 31.7877 29.8442 31.7877 27.0203Z"
fill="#4285F4"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22.6012 36.0889C25.1828 36.0889 27.3566 35.2666 28.9417 33.8488L25.8578 31.5288C24.9995 32.0933 23.894 32.4156 22.6012 32.4156C20.1059 32.4156 17.988 30.7838 17.2306 28.585H14.0537V30.9759C15.6776 34.1104 18.9848 36.0887 22.6012 36.0889Z"
fill="#34A853"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17.2307 28.585C16.8303 27.4328 16.8303 26.185 17.2307 25.0328V22.6419H14.0538C12.6956 25.2637 12.6956 28.3541 14.0538 30.9759L17.2307 28.585Z"
fill="#FBBC04"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22.6012 21.2022C23.9655 21.1806 25.2837 21.6806 26.271 22.5942L29.0015 19.9456C27.2701 18.368 24.9764 17.502 22.6012 17.5289C18.9848 17.529 15.6776 19.5074 14.0537 22.6419L17.2306 25.0328C17.988 22.834 20.1059 21.2022 22.6012 21.2022Z"
fill="#EA4335"
/>
</svg>
/* eslint-enable */
);

44
packages/js/onboarding/src/components/WCPayBanner/Icons/jcb.js
View File

File diff suppressed because one or more lines are too long

72
packages/js/onboarding/src/components/WCPayBanner/Icons/maestro.js
View File

@ -1,72 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const Maestro = () => (
/* eslint-disable */
<svg
width="51"
height="35"
viewBox="0 0 51 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.5"
y="0.5"
width="49.6897"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
d="M29.9708 22.8244H21.3047V7.35352H29.9708V22.8244Z"
fill="#6C6BBD"
/>
<path
d="M21.8549 15.0891C21.8549 11.9507 23.3341 9.15521 25.6375 7.35365C23.9531 6.03626 21.8272 5.24995 19.5168 5.24995C14.0471 5.24995 9.61328 9.65501 9.61328 15.0891C9.61328 20.5232 14.0471 24.9282 19.5168 24.9282C21.8272 24.9282 23.9531 24.1419 25.6375 22.8245C23.3341 21.023 21.8549 18.2274 21.8549 15.0891Z"
fill="#EB001B"
/>
<path
d="M41.6626 15.0891C41.6626 20.5232 37.2288 24.9282 31.7591 24.9282C29.4487 24.9282 27.3228 24.1419 25.6377 22.8245C27.9418 21.023 29.421 18.2274 29.421 15.0891C29.421 11.9507 27.9418 9.15521 25.6377 7.35365C27.3228 6.03626 29.4487 5.24995 31.7591 5.24995C37.2288 5.24995 41.6626 9.65501 41.6626 15.0891Z"
fill="#0099DF"
/>
<path
d="M32.9036 27.1956C33.0188 27.1956 33.1845 27.2175 33.311 27.2669L33.1347 27.8024C33.0138 27.753 32.8929 27.7367 32.777 27.7367C32.403 27.7367 32.216 27.9769 32.216 28.4085V29.8735H31.6436V27.2613H32.2103V27.5784C32.3589 27.3489 32.5736 27.1956 32.9036 27.1956Z"
fill="#231F20"
/>
<path
d="M30.7887 27.7807H29.8536V28.9611C29.8536 29.2232 29.9468 29.3984 30.2333 29.3984C30.382 29.3984 30.569 29.3489 30.739 29.2507L30.904 29.7368C30.7226 29.8625 30.4367 29.9395 30.1893 29.9395C29.5123 29.9395 29.2762 29.5785 29.2762 28.9717V27.7807H28.7422V27.2615H29.2762V26.469H29.8536V27.2615H30.7887V27.7807Z"
fill="#231F20"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24.1754 27.1958C24.9128 27.1958 25.4191 27.7532 25.4247 28.5676C25.4247 28.6433 25.4192 28.7135 25.4135 28.7842L25.4134 28.7859H23.4607C23.5432 29.2557 23.8788 29.4252 24.2472 29.4252C24.511 29.4252 24.7919 29.327 25.0116 29.1519L25.2925 29.5729C24.9732 29.8406 24.6105 29.9388 24.2144 29.9388C23.4273 29.9388 22.8662 29.3977 22.8662 28.5676C22.8662 27.7532 23.4052 27.1958 24.1754 27.1958ZM24.1648 27.7036C23.7574 27.7036 23.5269 27.9607 23.4658 28.3379H24.8304C24.77 27.9332 24.5332 27.7036 24.1648 27.7036Z"
fill="#231F20"
/>
<path
d="M27.9386 27.9283C27.7793 27.8295 27.455 27.7038 27.1193 27.7038C26.8057 27.7038 26.6187 27.8189 26.6187 28.0103C26.6187 28.1848 26.8164 28.2342 27.0639 28.2668L27.3334 28.3049C27.9058 28.3875 28.2522 28.6277 28.2522 29.0868C28.2522 29.5841 27.812 29.9395 27.0532 29.9395C26.6237 29.9395 26.2277 29.83 25.9141 29.6004L26.1836 29.1575C26.3763 29.3052 26.6628 29.4309 27.0589 29.4309C27.4493 29.4309 27.6584 29.3164 27.6584 29.1137C27.6584 28.9667 27.5098 28.8842 27.1962 28.841L26.9266 28.8028C26.3379 28.7203 26.0186 28.4582 26.0186 28.0322C26.0186 27.513 26.4481 27.1958 27.1137 27.1958C27.5318 27.1958 27.9115 27.289 28.1861 27.4692L27.9386 27.9283Z"
fill="#231F20"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M35.561 27.3015C35.3872 27.2308 35.1982 27.1958 34.9942 27.1958C34.7902 27.1958 34.6013 27.2308 34.4275 27.3015C34.2537 27.3716 34.1044 27.4685 33.9785 27.5918C33.8526 27.715 33.7537 27.8608 33.6819 28.0284C33.6101 28.1967 33.5742 28.3793 33.5742 28.5764C33.5742 28.7734 33.6101 28.9561 33.6819 29.1243C33.7537 29.292 33.8526 29.4384 33.9785 29.5616C34.1044 29.6848 34.2537 29.7812 34.4275 29.8519C34.6013 29.9219 34.7902 29.9569 34.9942 29.9569C35.1982 29.9569 35.3872 29.9219 35.561 29.8519C35.7348 29.7812 35.8853 29.6848 36.0118 29.5616C36.139 29.4384 36.2379 29.292 36.3097 29.1243C36.3815 28.9561 36.4174 28.7734 36.4174 28.5764C36.4174 28.3793 36.3815 28.1967 36.3097 28.0284C36.2379 27.8608 36.139 27.715 36.0118 27.5918C35.8853 27.4685 35.7348 27.3716 35.561 27.3015ZM34.666 27.7969C34.7674 27.7563 34.8763 27.7356 34.9941 27.7356C35.1118 27.7356 35.2214 27.7563 35.3221 27.7969C35.4235 27.8382 35.5117 27.8958 35.5854 27.9696C35.6603 28.0434 35.7182 28.1322 35.761 28.2354C35.8032 28.3386 35.824 28.4525 35.824 28.5763C35.824 28.7008 35.8032 28.8141 35.761 28.9173C35.7182 29.0205 35.6603 29.1093 35.5854 29.1831C35.5117 29.2569 35.4235 29.3145 35.3221 29.3558C35.2214 29.3971 35.1118 29.4171 34.9941 29.4171C34.8763 29.4171 34.7674 29.3971 34.666 29.3558C34.5652 29.3145 34.4777 29.2569 34.404 29.1831C34.3303 29.1093 34.2724 29.0205 34.2302 28.9173C34.188 28.8141 34.1672 28.7008 34.1672 28.5763C34.1672 28.4525 34.188 28.3386 34.2302 28.2354C34.2724 28.1322 34.3303 28.0434 34.404 27.9696C34.4777 27.8958 34.5652 27.8382 34.666 27.7969Z"
fill="#231F20"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M22.2524 27.2615V28.5676V29.8737H21.6806V29.5566C21.4986 29.7918 21.224 29.9394 20.85 29.9394C20.1126 29.9394 19.5352 29.3652 19.5352 28.5676C19.5352 27.7694 20.1126 27.1958 20.85 27.1958C21.224 27.1958 21.4986 27.3434 21.6806 27.5786V27.2615H22.2524ZM20.9211 27.7312C20.4262 27.7312 20.1233 28.1084 20.1233 28.5675C20.1233 29.0267 20.4262 29.4033 20.9211 29.4033C21.394 29.4033 21.7133 29.0429 21.7133 28.5675C21.7133 28.0921 21.394 27.7312 20.9211 27.7312Z"
fill="#231F20"
/>
<path
d="M19.0293 29.8735V28.234C19.0293 27.6166 18.6332 27.2012 17.9953 27.1956C17.6597 27.19 17.3127 27.2938 17.0709 27.6604C16.8896 27.3707 16.603 27.1956 16.2013 27.1956C15.9211 27.1956 15.6459 27.2775 15.4312 27.5834V27.2613H14.8594V29.8735H15.4368V28.4254C15.4368 27.9719 15.69 27.7311 16.0804 27.7311C16.4601 27.7311 16.6528 27.9769 16.6528 28.4198V29.8735H17.2302V28.4254C17.2302 27.9719 17.4947 27.7311 17.8738 27.7311C18.2649 27.7311 18.4519 27.9769 18.4519 28.4198V29.8735H19.0293V29.8735Z"
fill="#231F20"
/>
</svg>
/* eslint-enable */
);

44
packages/js/onboarding/src/components/WCPayBanner/Icons/mastercard.js
View File

@ -1,44 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const MasterCard = () => (
/* eslint-disable */
<svg
width="51"
height="35"
viewBox="0 0 51 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.5"
y="0.5"
width="50"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.6846 27.0292V28.3215V29.6137H18.1154V29.2999C17.9349 29.5327 17.661 29.6787 17.2886 29.6787C16.5546 29.6787 15.9791 29.1112 15.9791 28.3215C15.9791 27.5324 16.5546 26.9642 17.2886 26.9642C17.661 26.9642 17.9349 27.1103 18.1154 27.343V27.0292H18.6846ZM17.3594 27.494C16.8667 27.494 16.5652 27.8672 16.5652 28.3215C16.5652 28.7757 16.8667 29.1489 17.3594 29.1489C17.8302 29.1489 18.148 28.7918 18.148 28.3215C18.148 27.8511 17.8302 27.494 17.3594 27.494ZM37.9186 28.3215C37.9186 27.8672 38.2201 27.494 38.7128 27.494C39.1842 27.494 39.5014 27.8511 39.5014 28.3215C39.5014 28.7918 39.1842 29.1489 38.7128 29.1489C38.2201 29.1489 37.9186 28.7757 37.9186 28.3215ZM40.0386 25.9913V28.3215V29.6137H39.4688V29.2999C39.2882 29.5327 39.0143 29.6787 38.642 29.6787C37.9079 29.6787 37.3325 29.1112 37.3325 28.3215C37.3325 27.5324 37.9079 26.9642 38.642 26.9642C39.0143 26.9642 39.2882 27.1103 39.4688 27.343V25.9913H40.0386ZM25.7496 27.4674C26.1163 27.4674 26.352 27.6945 26.4122 28.0943H25.0538C25.1146 27.7211 25.3441 27.4674 25.7496 27.4674ZM24.4571 28.3215C24.4571 27.5157 24.9937 26.9642 25.7609 26.9642C26.4943 26.9642 26.9983 27.5157 27.0039 28.3215C27.0039 28.397 26.9983 28.4675 26.9926 28.5375L25.0488 28.5375C25.1309 29.0029 25.465 29.1706 25.8317 29.1706C26.0944 29.1706 26.374 29.0728 26.5933 28.9001L26.8723 29.3167C26.5545 29.5815 26.1934 29.6787 25.7991 29.6787C25.0156 29.6787 24.4571 29.1434 24.4571 28.3215ZM32.6337 28.3215C32.6337 27.8672 32.9353 27.494 33.4279 27.494C33.8987 27.494 34.2165 27.8511 34.2165 28.3215C34.2165 28.7918 33.8987 29.1489 33.4279 29.1489C32.9353 29.1489 32.6337 28.7757 32.6337 28.3215ZM34.7529 27.0292V28.3215V29.6137H34.1837V29.2999C34.0026 29.5327 33.7293 29.6787 33.3569 29.6787C32.6229 29.6787 32.0475 29.1112 32.0475 28.3215C32.0475 27.5324 32.6229 26.9642 33.3569 26.9642C33.7293 26.9642 34.0026 27.1103 34.1837 27.343V27.0292H34.7529ZM29.4191 28.3215C29.4191 29.1056 29.972 29.6787 30.8157 29.6787C31.21 29.6787 31.4726 29.5921 31.7572 29.3705L31.4839 28.9162C31.2701 29.0679 31.0457 29.1489 30.7988 29.1489C30.3443 29.1434 30.0102 28.8191 30.0102 28.3215C30.0102 27.8239 30.3443 27.4996 30.7988 27.494C31.0457 27.494 31.2701 27.5751 31.4839 27.7267L31.7572 27.2724C31.4726 27.0509 31.21 26.9642 30.8157 26.9642C29.972 26.9642 29.4191 27.5373 29.4191 28.3215ZM36.0674 27.3431C36.2153 27.1159 36.4291 26.9643 36.7575 26.9643C36.8729 26.9643 37.0371 26.986 37.1631 27.0349L36.9876 27.5646C36.8672 27.5157 36.7469 27.4997 36.6315 27.4997C36.2592 27.4997 36.073 27.7373 36.073 28.165V29.6138H35.5032V27.0293H36.0674V27.3431ZM21.4996 27.2347C21.2257 27.0564 20.8483 26.9642 20.4321 26.9642C19.7689 26.9642 19.342 27.278 19.342 27.7917C19.342 28.2132 19.6599 28.4731 20.2453 28.5542L20.5142 28.5919C20.8264 28.6352 20.9737 28.7163 20.9737 28.8624C20.9737 29.0623 20.7656 29.1762 20.377 29.1762C19.9827 29.1762 19.6981 29.0518 19.5063 28.9057L19.238 29.3433C19.5502 29.5704 19.9444 29.6787 20.3713 29.6787C21.1273 29.6787 21.5654 29.3272 21.5654 28.8352C21.5654 28.3809 21.2207 28.1432 20.6509 28.0621L20.3826 28.0238C20.1363 27.9916 19.9388 27.9433 19.9388 27.77C19.9388 27.5806 20.125 27.4674 20.4371 27.4674C20.7712 27.4674 21.0947 27.5918 21.2533 27.689L21.4996 27.2347ZM28.1542 27.3431C28.3015 27.1159 28.5152 26.9643 28.8437 26.9643C28.959 26.9643 29.1233 26.986 29.2493 27.0349L29.0738 27.5646C28.9534 27.5157 28.833 27.4997 28.7177 27.4997C28.3454 27.4997 28.1592 27.7373 28.1592 28.165V29.6138H27.59V27.0293L28.1542 27.0293V27.3431ZM23.9862 27.0292H23.0553V26.2451H22.4799V27.0292H21.949V27.5429H22.4799V28.7219C22.4799 29.3216 22.7156 29.6787 23.3888 29.6787C23.6358 29.6787 23.9204 29.6032 24.1009 29.4788L23.9367 28.9973C23.7668 29.0945 23.5806 29.1434 23.4327 29.1434C23.1481 29.1434 23.0553 28.9701 23.0553 28.7108V27.5429H23.9862V27.0292ZM15.4758 27.9917V29.6138H14.9003V28.1755C14.9003 27.7373 14.7142 27.4941 14.3255 27.4941C13.9475 27.4941 13.6849 27.7324 13.6849 28.1811V29.6138H13.1095V28.1755C13.1095 27.7373 12.9183 27.4941 12.5403 27.4941C12.151 27.4941 11.899 27.7324 11.899 28.1811V29.6138H11.3242V27.0293H11.894V27.348C12.1078 27.0454 12.3811 26.9643 12.6606 26.9643C13.0606 26.9643 13.3451 27.1376 13.5257 27.4242C13.767 27.0615 14.1118 26.9587 14.4459 26.9643C15.0815 26.9699 15.4758 27.3808 15.4758 27.9917Z"
fill="#231F20"
/>
<path
d="M29.9381 22.6376H21.3115V7.33105H29.9381V22.6376Z"
fill="#FF5F00"
/>
<path
d="M21.8586 14.9846C21.8586 11.8796 23.331 9.11372 25.624 7.33129C23.9472 6.02789 21.831 5.24994 19.5311 5.24994C14.0864 5.24994 9.67285 9.60822 9.67285 14.9846C9.67285 20.361 14.0864 24.7192 19.5311 24.7192C21.831 24.7192 23.9472 23.9413 25.624 22.6379C23.331 20.8555 21.8586 18.0896 21.8586 14.9846Z"
fill="#EB001B"
/>
<path
d="M41.5758 14.9846C41.5758 20.361 37.1622 24.7192 31.7175 24.7192C29.4177 24.7192 27.3014 23.9413 25.624 22.6379C27.9176 20.8555 29.3901 18.0896 29.3901 14.9846C29.3901 11.8796 27.9176 9.11372 25.624 7.33129C27.3014 6.02789 29.4177 5.24994 31.7175 5.24994C37.1622 5.24994 41.5758 9.60822 41.5758 14.9846Z"
fill="#F79E1B"
/>
</svg>
/* eslint-enable */
);

116
packages/js/onboarding/src/components/WCPayBanner/Icons/unionpay.js
View File

@ -1,116 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const UnionPay = () => (
/* eslint-disable */
<svg
width="52"
height="35"
viewBox="0 0 52 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.878906"
y="0.5"
width="50"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M44.0545 5.25735L34.3353 5.25488C34.3341 5.25488 34.3328 5.25488 34.3328 5.25488C34.3253 5.25488 34.3179 5.2562 34.3106 5.2562C32.9754 5.29641 31.3124 6.34915 31.0096 7.64726L26.4132 27.6401C26.1104 28.9503 26.9343 30.0165 28.2599 30.0361H38.4703C39.7756 29.9726 41.044 28.932 41.3417 27.6486L45.9382 7.65564C46.2459 6.33208 45.402 5.25735 44.0545 5.25735Z"
fill="#01798A"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M26.4134 27.6401L31.0097 7.64729C31.3126 6.34917 32.9755 5.29643 34.3107 5.25622L30.4464 5.25376L23.484 5.25244C22.1451 5.27936 20.4605 6.33949 20.1577 7.64729L15.5601 27.6401C15.2561 28.9503 16.0813 30.0165 17.4059 30.0361H28.26C26.9345 30.0165 26.1105 28.9503 26.4134 27.6401"
fill="#024381"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15.5602 27.64L20.1578 7.64714C20.4606 6.33934 22.1452 5.27922 23.4841 5.2523L14.5649 5.25C13.2185 5.25 11.4923 6.32227 11.1846 7.64714L6.58694 27.64C6.55896 27.762 6.54344 27.8815 6.53418 27.9986V28.3695C6.62418 29.3246 7.36619 30.0201 8.43278 30.036H17.406C16.0814 30.0163 15.2562 28.9502 15.5602 27.64Z"
fill="#DD0228"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M23.6716 19.8205H23.8404C23.9955 19.8205 24.0999 19.7693 24.1488 19.668L24.5874 19.0227H25.762L25.5171 19.4472H26.9254L26.7467 20.0975H25.0709C24.8779 20.3829 24.6403 20.5171 24.3547 20.5012H23.4818L23.6716 19.8205H23.6716ZM23.4788 20.7527H26.5643L26.3676 21.4591H25.1268L24.9374 22.1409H26.1449L25.9482 22.8473H24.7407L24.4602 23.8548C24.3908 24.0232 24.4821 24.099 24.7327 24.0818H25.7168L25.5345 24.7382H23.6451C23.287 24.7382 23.1641 24.5368 23.2765 24.1331L23.6351 22.8473H22.8633L23.0593 22.1409H23.8313L24.0205 21.4591H23.2827L23.4788 20.7527H23.4788ZM28.4035 19.018L28.355 19.4315C28.355 19.4315 28.937 19.002 29.4656 19.002H31.4189L30.6719 21.6601C30.61 21.964 30.3443 22.1151 29.8752 22.1151H27.6612L27.1426 23.9817C27.1128 24.0817 27.155 24.133 27.2667 24.133H27.7023L27.5422 24.7124H26.4347C26.0096 24.7124 25.8328 24.5867 25.903 24.3343L27.3684 19.018H28.4035H28.4035ZM30.0576 19.7693H28.3141L28.1056 20.4866C28.1056 20.4866 28.3959 20.2805 28.8811 20.2731C29.365 20.2657 29.9173 20.2731 29.9173 20.2731L30.0576 19.7693ZM29.4261 21.4333C29.555 21.4504 29.6271 21.4003 29.6358 21.282L29.7425 20.9039H27.9964L27.85 21.4333H29.4261ZM28.2483 22.2921H29.2547L29.236 22.7203H29.504C29.6394 22.7203 29.7065 22.6776 29.7065 22.5935L29.7858 22.3166H30.6223L30.5106 22.7203C30.4161 23.057 30.1656 23.2327 29.7586 23.2499H29.2225L29.22 23.9817C29.2101 24.0989 29.318 24.1587 29.54 24.1587H30.0439L29.8813 24.7381H28.6727C28.3339 24.754 28.1678 24.5953 28.1713 24.2587L28.2483 22.2921V22.2921Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.0529 15.4764C15.9164 16.1339 15.6 16.639 15.1091 16.9976C14.6227 17.3502 13.9954 17.527 13.2273 17.527C12.5044 17.527 11.9745 17.3465 11.6364 16.9841C11.4018 16.7267 11.2852 16.3998 11.2852 16.0045C11.2852 15.8411 11.3051 15.6654 11.3448 15.4764L12.1631 11.5972H13.3991L12.5919 15.4325C12.5671 15.5386 12.5571 15.6374 12.5584 15.7265C12.5571 15.9229 12.6068 16.0839 12.7073 16.2095C12.8537 16.3962 13.0914 16.4889 13.4221 16.4889C13.8024 16.4889 14.1158 16.3974 14.359 16.2132C14.6022 16.0302 14.761 15.7704 14.8324 15.4325L15.6422 11.5972H16.8719L16.0529 15.4764Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21.2436 13.9502H22.2116L21.4534 17.4123H20.4873L21.2436 13.9502ZM21.5482 12.689H22.5248L22.3424 13.5293H21.3659L21.5482 12.689Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M23.0688 17.1487C22.8156 16.9109 22.6878 16.59 22.6865 16.1826C22.6865 16.113 22.6908 16.0338 22.7002 15.9471C22.7095 15.8592 22.7214 15.7739 22.738 15.6946C22.8528 15.1323 23.0973 14.6858 23.4739 14.3564C23.8499 14.0258 24.3036 13.8599 24.8347 13.8599C25.2696 13.8599 25.6145 13.9794 25.8672 14.2185C26.1196 14.4589 26.2462 14.7833 26.2462 15.1957C26.2462 15.2664 26.2407 15.3481 26.2313 15.436C26.2201 15.525 26.2066 15.6104 26.1909 15.6946C26.0787 16.2484 25.8349 16.69 25.4583 17.0134C25.0816 17.3391 24.6293 17.5012 24.1019 17.5012C23.6651 17.5012 23.3213 17.3841 23.0688 17.1487M24.9136 16.4631C25.0843 16.2814 25.2065 16.0056 25.2809 15.6385C25.2921 15.5812 25.302 15.5214 25.3082 15.4616C25.3143 15.403 25.3168 15.3482 25.3168 15.2981C25.3168 15.0846 25.2616 14.9188 25.1506 14.8016C25.0402 14.6833 24.8832 14.6248 24.6804 14.6248C24.4122 14.6248 24.1939 14.7174 24.0227 14.9029C23.8501 15.0884 23.7279 15.3689 23.6509 15.7422C23.6404 15.7995 23.6317 15.8569 23.6237 15.913C23.6175 15.9703 23.6157 16.024 23.6168 16.0728C23.6168 16.285 23.6721 16.4485 23.7831 16.5644C23.8935 16.6803 24.0498 16.7376 24.2553 16.7376C24.5246 16.7376 24.743 16.6461 24.9136 16.4631Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M32.5262 19.8496L32.7596 19.0421H33.9397L33.8888 19.3385C33.8888 19.3385 34.4918 19.0421 34.9261 19.0421C35.3606 19.0421 36.3854 19.0421 36.3854 19.0421L36.1535 19.8496H35.9239L34.8231 23.6582H35.0527L34.8343 24.4146H34.6047L34.5092 24.7427H33.3664L33.4617 24.4146H31.207L31.4268 23.6582H31.6527L32.7544 19.8496H32.5262H32.5262ZM33.7993 19.8498L33.4989 20.8805C33.4989 20.8805 34.0128 20.6866 34.4558 20.6318C34.5536 20.2718 34.6815 19.8498 34.6815 19.8498H33.7993V19.8498ZM33.3598 21.3637L33.0585 22.4433C33.0585 22.4433 33.628 22.1676 34.0188 22.1444C34.1317 21.7271 34.2447 21.3637 34.2447 21.3637H33.3598V21.3637ZM33.5808 23.6583L33.8067 22.8751H32.9258L32.6987 23.6583H33.5808ZM36.4352 18.9922H37.5447L37.5918 19.3946C37.5844 19.4971 37.6463 19.546 37.7779 19.546H37.9739L37.7756 20.2279H36.9601C36.6487 20.2437 36.4886 20.1267 36.4738 19.8741L36.4352 18.9922ZM36.1102 20.4548H39.7039L39.493 21.1868H38.3488L38.1526 21.8673H39.2957L39.0835 22.5981H37.8104L37.5224 23.0264H38.1455L38.2894 23.8839C38.3066 23.9693 38.3836 24.0108 38.5151 24.0108H38.7086L38.5053 24.717H37.8202C37.4653 24.7342 37.2818 24.6171 37.2667 24.3646L37.1016 23.5814L36.5346 24.4146C36.4005 24.65 36.1945 24.7599 35.9167 24.7427H34.8705L35.074 24.0363H35.4004C35.5345 24.0363 35.646 23.9778 35.7465 23.8595L36.634 22.5981H35.4898L35.7018 21.8673H36.9428L37.1402 21.1868H35.898L36.1102 20.4548Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17.1915 13.9492H18.0645L17.9647 14.4493L18.0899 14.3066C18.3729 14.009 18.7166 13.8613 19.1224 13.8613C19.4898 13.8613 19.7547 13.9663 19.921 14.1773C20.0847 14.3884 20.1294 14.6799 20.0519 15.0544L19.571 17.4137H18.6738L19.1081 15.2752C19.1529 15.0544 19.1405 14.8897 19.0715 14.7836C19.0033 14.6774 18.873 14.625 18.685 14.625C18.4542 14.625 18.26 14.6957 18.1017 14.8361C17.9429 14.9776 17.8381 15.174 17.7865 15.424L17.3863 17.4137H16.4873L17.1915 13.9492Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M27.2021 13.9492H28.0758L27.9767 14.4493L28.1006 14.3066C28.3837 14.009 28.7287 13.8613 29.1332 13.8613C29.5005 13.8613 29.766 13.9663 29.931 14.1773C30.0937 14.3884 30.1408 14.6799 30.0614 15.0544L29.5823 17.4137H28.6839L29.1184 15.2752C29.1629 15.0544 29.1506 14.8897 29.0823 14.7836C29.0115 14.6774 28.8836 14.625 28.6964 14.625C28.4655 14.625 28.272 14.6957 28.1119 14.8361C27.953 14.9776 27.8476 15.174 27.798 15.424L27.396 17.4137H26.498L27.2021 13.9492"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M31.5212 11.8018H34.0577C34.5454 11.8018 34.9225 11.9104 35.1818 12.1238C35.44 12.3398 35.5692 12.6497 35.5692 13.0534V13.0656C35.5692 13.1424 35.564 13.229 35.5567 13.3229C35.5441 13.4157 35.5279 13.5095 35.5071 13.6072C35.3954 14.1415 35.1359 14.571 34.7352 14.8967C34.333 15.2211 33.8567 15.3846 33.3082 15.3846H31.9479L31.5274 17.4133H30.3496L31.5212 11.8018M32.1554 14.4087H33.2835C33.5776 14.4087 33.8108 14.3415 33.9809 14.2086C34.1497 14.0744 34.2614 13.8695 34.3234 13.5914C34.3332 13.54 34.3394 13.4937 34.3469 13.451C34.3508 13.4108 34.3556 13.3704 34.3556 13.3315C34.3556 13.1326 34.2838 12.9887 34.1397 12.8984C33.9958 12.8068 33.7701 12.763 33.4572 12.763H32.4991L32.1554 14.4087"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M40.8406 18.0833C40.4683 18.8615 40.1135 19.3152 39.9051 19.5263C39.6964 19.735 39.2833 20.2205 38.2881 20.1839L38.3737 19.5898C39.2112 19.3361 39.6642 18.1929 39.9223 17.6867L39.6146 13.9587L40.2624 13.9502H40.8059L40.8643 16.2888L41.8829 13.9502H42.9143L40.8406 18.0833Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M37.9561 14.232L37.5464 14.509C37.1183 14.1796 36.7274 13.9759 35.9731 14.3199C34.9454 14.7883 34.0868 18.381 36.9161 17.1976L37.0774 17.3855L38.1905 17.4135L38.9215 14.1491L37.9561 14.232M37.3233 16.0168C37.1445 16.5353 36.7451 16.8781 36.4324 16.7805C36.1196 16.6853 36.008 16.1851 36.1891 15.6655C36.3678 15.1458 36.7698 14.8042 37.08 14.9018C37.3927 14.997 37.5056 15.4971 37.3233 16.0168Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M34.3328 5.26107L30.4463 5.25342L34.3106 5.26981C34.318 5.26981 34.3253 5.26107 34.3328 5.26107"
fill="#E02F41"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.4467 5.27406L23.5378 5.25C23.5204 5.25 23.5024 5.25765 23.4844 5.26531L30.4467 5.27406"
fill="#2E4F7D"
/>
</svg>
/* eslint-enable */
);

46
packages/js/onboarding/src/components/WCPayBanner/Icons/visa.js
View File

@ -1,46 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const Visa = () => (
/* eslint-disable */
<svg
width="51"
height="35"
viewBox="0 0 51 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.5"
y="0.5"
width="50"
height="34"
rx="3.5"
fill="white"
stroke="#F3F3F3"
/>
<path
d="M22.6435 24.004H19.248L21.3718 11.7534H24.7671L22.6435 24.004Z"
fill="#15195A"
/>
<path
d="M34.952 12.0528C34.2823 11.8049 33.22 11.5312 31.9066 11.5312C28.5534 11.5312 26.1922 13.1993 26.1777 15.5842C26.1499 17.3437 27.8683 18.321 29.1536 18.9077C30.4672 19.5072 30.9138 19.8985 30.9138 20.4329C30.9004 21.2536 29.8522 21.6319 28.8747 21.6319C27.5191 21.6319 26.7927 21.4369 25.6889 20.9803L25.2417 20.7845L24.7666 23.5345C25.563 23.873 27.0302 24.1733 28.5534 24.1865C32.1162 24.1865 34.4356 22.5442 34.4631 20.0028C34.4767 18.6082 33.5693 17.5396 31.613 16.6665C30.4254 16.1059 29.6981 15.728 29.6981 15.1544C29.7121 14.6331 30.3133 14.099 31.6539 14.099C32.7577 14.0729 33.5687 14.3204 34.1831 14.5681L34.4902 14.6982L34.952 12.0528Z"
fill="#15195A"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M41.0301 11.7534H43.6565L46.3957 24.0039H43.2519C43.2519 24.0039 42.9442 22.5963 42.8467 22.1662H38.4873C38.3612 22.4919 37.7747 24.0039 37.7747 24.0039H34.2119L39.2554 12.7699C39.6049 11.9748 40.2202 11.7534 41.0301 11.7534ZM40.8208 16.2365C40.8208 16.2365 39.7448 18.9603 39.4652 19.6641H42.2875C42.1478 19.0516 41.5048 16.1192 41.5048 16.1192L41.2676 15.0636C41.1676 15.3355 41.0231 15.7092 40.9256 15.9612C40.8596 16.1321 40.8151 16.2471 40.8208 16.2365Z"
fill="#15195A"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.53636 11.7534H9.99929C10.7398 11.7792 11.3406 12.0008 11.5361 12.7832L12.7233 18.4113C12.7234 18.4118 12.7236 18.4124 12.7238 18.4129L13.0871 20.1072L16.4124 11.7534H20.0028L14.6657 23.991H11.0752L8.04881 13.3464C7.00461 12.7769 5.81289 12.3188 4.48047 12.0009L4.53636 11.7534Z"
fill="#15195A"
/>
</svg>
/* eslint-enable */
);

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

@ -1,48 +0,0 @@
/**
* 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 */
);

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

@ -1,71 +0,0 @@
.woocommerce-recommended-payments-banner {
margin: 0 15px 10px 0;
animation: isLoaded;
min-width: 550px; // for smaller screens
animation-duration: 250ms;
&.components-card {
box-shadow: none;
border: 1px solid $table-border;
border-radius: 2px;
}
.woocommerce-recommended-payments-banner__body {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 0;
padding: 30px 0 0 0;
}
.woocommerce-recommended-payments__header-title {
color: $studio-gray-90;
line-height: 32px;
}
.woocommerce-recommended-payments__header-heading {
color: #757575;
}
.woocommerce-recommended-payments-banner__image_container {
display: flex;
padding-left: 15px;
min-width: 200px; // for smaller screens
}
.woocommerce-recommended-payments-banner__text_container {
margin-inline: 24px;
a {
margin-top: 0;
}
* {
margin-block: 1rem;
}
}
.woocommerce-recommended-payments-banner__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 20px 15px 30px;
p {
color: #757575;
font-style: normal;
font-weight: 400;
}
}
.woocommerce-recommended-payments-banner__footer_icon_container {
display: flex;
align-items: center;
}
.woocommerce-recommended-payments-banner__footer_icon_container > svg {
height: 28px;
width: 51px;
}
}

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

@ -1,108 +0,0 @@
/**
* External dependencies
*/
import {
createElement,
createInterpolateElement,
Fragment,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Card, CardFooter, CardBody } from '@wordpress/components';
import { Text } from '@woocommerce/experimental';
/**
* Internal dependencies
*/
import { PaymentMethodsIcons } from './PaymentMethodsIcons';
import { WCPayBannerImage } from './WCPayBannerImage';
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">
{ __(
'WooPayments is pre-integrated with popular payment options:',
'woocommerce'
) }
</Text>
</div>
<PaymentMethodsIcons isWooPayEligible={ isWooPayEligible } />
</CardFooter>
);
export const WCPayBannerText: React.VFC< {
actionButton: React.ReactNode;
isWooPayEligible: boolean;
} > = ( { actionButton } ) => {
return (
<div className="woocommerce-recommended-payments-banner__text_container">
<Text
className="woocommerce-recommended-payments__header-title"
variant="title.small"
as="p"
size="24"
lineHeight="28px"
padding="0 20px 0 0"
>
{ createInterpolateElement(
__(
'Payments made simple, designed exclusively<br/>for WooCommerce stores.',
'woocommerce'
),
{
br: <br />,
}
) }
</Text>
{ actionButton }
</div>
);
};
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 }
isWooPayEligible={ isWooPayEligible }
/>
<div className="woocommerce-recommended-payments-banner__image_container">
{ bannerImage }
</div>
</>
) : (
<>
<div className="woocommerce-recommended-payments-banner__image_container">
{ bannerImage }
</div>
<WCPayBannerText
actionButton={ actionButton }
isWooPayEligible={ isWooPayEligible }
/>
</>
) }
</CardBody>
);
};
export const WCPayBanner: React.FC = ( { children } ) => {
return (
<Card size="medium" className="woocommerce-recommended-payments-banner">
{ children }
</Card>
);
};

142
packages/js/onboarding/src/components/WCPayBanner/WCPayBannerImage.tsx
View File

@ -1,142 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const WCPayBannerImage = () => (
<svg
width="294"
height="275"
viewBox="0 0 294 275"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_255_63852)">
<path
d="M0.5 10C0.5 4.47716 4.97715 0 10.5 0H725.5C731.023 0 735.5 4.47715 735.5 10V332H0.5V10Z"
fill="#F6F7F7"
/>
<circle cx="17.5" cy="14" r="5" fill="#D94F4F" />
<circle cx="35.5" cy="14" r="5" fill="#F0B849" />
<circle cx="53.5" cy="14" r="5" fill="#4AB866" />
<rect x="3.5" y="28" width="287" height="304" fill="white" />
<line x1="27.5" y1="95.5" x2="270.5" y2="95.5" stroke="#DCDCDE" />
<line x1="49.5" y1="157.5" x2="253.5" y2="157.5" stroke="#DCDCDE" />
<line x1="49.5" y1="198.5" x2="253.5" y2="198.5" stroke="#DCDCDE" />
<rect
x="28"
y="116.5"
width="242"
height="127"
rx="9.5"
stroke="#DCDCDE"
/>
<path
d="M50.3984 135.954V143H52.8154C54.9102 143 56.1406 141.696 56.1406 139.475C56.1406 137.258 54.9053 135.954 52.8154 135.954H50.3984ZM51.2773 136.745H52.7568C54.3193 136.745 55.2422 137.761 55.2422 139.484C55.2422 141.203 54.3291 142.209 52.7568 142.209H51.2773V136.745ZM61.043 141.638C60.8232 142.102 60.3643 142.351 59.6855 142.351C58.792 142.351 58.2109 141.691 58.167 140.651V140.612H61.9512V140.29C61.9512 138.654 61.0869 137.644 59.666 137.644C58.2207 137.644 57.293 138.718 57.293 140.373C57.293 142.038 58.2061 143.093 59.666 143.093C60.8184 143.093 61.6387 142.536 61.8828 141.638H61.043ZM59.6562 138.386C60.4912 138.386 61.0479 139.001 61.0674 139.934H58.167C58.2305 139.001 58.8164 138.386 59.6562 138.386ZM65.833 137.644C65.1152 137.644 64.4854 138.01 64.1484 138.615H64.0703V137.736H63.2695V144.758H64.1094V142.209H64.1875C64.4756 142.766 65.0811 143.093 65.833 143.093C67.1709 143.093 68.0449 142.014 68.0449 140.368C68.0449 138.713 67.1758 137.644 65.833 137.644ZM65.6328 142.336C64.6855 142.336 64.085 141.574 64.085 140.368C64.085 139.157 64.6855 138.4 65.6377 138.4C66.5996 138.4 67.1758 139.138 67.1758 140.368C67.1758 141.599 66.5996 142.336 65.6328 142.336ZM71.5264 143.093C73.0254 143.093 73.9531 142.058 73.9531 140.368C73.9531 138.674 73.0254 137.644 71.5264 137.644C70.0273 137.644 69.0996 138.674 69.0996 140.368C69.0996 142.058 70.0273 143.093 71.5264 143.093ZM71.5264 142.336C70.5303 142.336 69.9688 141.613 69.9688 140.368C69.9688 139.118 70.5303 138.4 71.5264 138.4C72.5225 138.4 73.084 139.118 73.084 140.368C73.084 141.613 72.5225 142.336 71.5264 142.336ZM75.1494 139.177C75.1494 139.938 75.5986 140.363 76.585 140.603L77.4883 140.822C78.0498 140.959 78.3232 141.203 78.3232 141.564C78.3232 142.048 77.8154 142.385 77.1074 142.385C76.4336 142.385 76.0137 142.102 75.8721 141.657H75.0078C75.1006 142.531 75.9062 143.093 77.0781 143.093C78.2744 143.093 79.1875 142.443 79.1875 141.501C79.1875 140.744 78.709 140.314 77.7178 140.075L76.9072 139.88C76.2871 139.729 75.9941 139.504 75.9941 139.143C75.9941 138.674 76.4824 138.356 77.1074 138.356C77.7422 138.356 78.1523 138.635 78.2646 139.055H79.0947C78.9824 138.19 78.2158 137.644 77.1123 137.644C75.9941 137.644 75.1494 138.303 75.1494 139.177ZM80.9453 136.721C81.2676 136.721 81.5312 136.457 81.5312 136.135C81.5312 135.812 81.2676 135.549 80.9453 135.549C80.623 135.549 80.3594 135.812 80.3594 136.135C80.3594 136.457 80.623 136.721 80.9453 136.721ZM80.5254 143H81.3652V137.736H80.5254V143ZM83.3184 136.374V137.736H82.4688V138.439H83.3184V141.633C83.3184 142.639 83.7529 143.039 84.8369 143.039C85.0029 143.039 85.1641 143.02 85.3301 142.99V142.282C85.1738 142.297 85.0908 142.302 84.9395 142.302C84.3926 142.302 84.1582 142.038 84.1582 141.418V138.439H85.3301V137.736H84.1582V136.374H83.3184Z"
fill="#2C3338"
/>
<path
d="M126.459 143.708H127.045V142.863C128.197 142.775 129.154 142.136 129.154 140.959C129.154 139.934 128.451 139.416 127.196 139.113L127.045 139.079V136.857C127.704 136.94 128.173 137.326 128.236 137.985H129.086C129.052 136.906 128.173 136.193 127.045 136.091V135.246H126.459V136.096C125.302 136.198 124.477 136.892 124.477 137.941C124.477 138.903 125.131 139.445 126.347 139.738L126.459 139.768V142.097C125.614 142.004 125.238 141.54 125.15 140.93H124.301C124.335 142.067 125.297 142.756 126.459 142.858V143.708ZM125.326 137.883C125.326 137.409 125.717 136.96 126.459 136.862V138.938C125.619 138.732 125.326 138.361 125.326 137.883ZM127.074 139.914C128.041 140.148 128.305 140.49 128.305 141.027C128.305 141.589 127.953 142.033 127.045 142.102V139.909L127.074 139.914ZM132.25 139.753H133.124C134.115 139.753 134.726 140.261 134.726 141.076C134.726 141.867 134.066 142.399 133.139 142.399C132.23 142.399 131.596 141.926 131.518 141.184H130.668C130.731 142.38 131.718 143.166 133.148 143.166C134.55 143.166 135.629 142.282 135.629 141.101C135.629 140.119 135.023 139.499 134.11 139.353V139.274C134.833 139.064 135.36 138.503 135.365 137.653C135.37 136.667 134.569 135.788 133.178 135.788C131.752 135.788 130.878 136.633 130.79 137.78H131.645C131.718 136.989 132.27 136.555 133.119 136.555C133.969 136.555 134.472 137.092 134.472 137.751C134.472 138.483 133.896 139.001 133.085 139.001H132.25V139.753ZM139.384 143.166C140.824 143.166 141.806 142.17 141.806 140.72C141.806 139.323 140.829 138.396 139.647 138.396C138.944 138.396 138.422 138.61 138.08 139.035H138.002L138.222 136.74H141.444V135.954H137.533L137.128 139.982H137.953C138.231 139.46 138.759 139.152 139.428 139.152C140.316 139.152 140.927 139.792 140.927 140.744C140.927 141.73 140.316 142.395 139.394 142.395C138.563 142.395 137.958 141.892 137.88 141.14H137.016C137.094 142.346 138.051 143.166 139.384 143.166ZM143.188 137.941H144.037C144.037 137.106 144.599 136.555 145.443 136.555C146.273 136.555 146.776 137.111 146.776 137.858C146.776 138.479 146.513 138.845 145.614 139.816L143.231 142.395V143H147.792V142.209H144.452V142.131L146.054 140.476C147.323 139.162 147.675 138.576 147.675 137.766C147.675 136.623 146.732 135.788 145.502 135.788C144.154 135.788 143.188 136.687 143.188 137.941ZM149.828 143.049C150.18 143.049 150.463 142.761 150.463 142.414C150.463 142.062 150.18 141.779 149.828 141.779C149.481 141.779 149.193 142.062 149.193 142.414C149.193 142.761 149.481 143.049 149.828 143.049ZM153.959 143.161C155.683 143.161 156.669 141.774 156.669 139.353C156.669 136.955 155.536 135.788 154.018 135.788C152.572 135.788 151.547 136.799 151.547 138.215C151.547 139.582 152.519 140.573 153.861 140.573C154.701 140.573 155.39 140.173 155.736 139.489H155.814C155.766 141.364 155.116 142.38 153.969 142.38C153.275 142.38 152.738 141.994 152.553 141.359H151.649C151.869 142.468 152.763 143.161 153.959 143.161ZM154.018 139.812C153.085 139.812 152.436 139.147 152.436 138.186C152.436 137.263 153.124 136.56 154.027 136.56C154.931 136.56 155.619 137.272 155.619 138.215C155.619 139.147 154.95 139.812 154.018 139.812ZM160.336 143.161C162.06 143.161 163.046 141.774 163.046 139.353C163.046 136.955 161.913 135.788 160.395 135.788C158.949 135.788 157.924 136.799 157.924 138.215C157.924 139.582 158.896 140.573 160.238 140.573C161.078 140.573 161.767 140.173 162.113 139.489H162.191C162.143 141.364 161.493 142.38 160.346 142.38C159.652 142.38 159.115 141.994 158.93 141.359H158.026C158.246 142.468 159.14 143.161 160.336 143.161ZM160.395 139.812C159.462 139.812 158.812 139.147 158.812 138.186C158.812 137.263 159.501 136.56 160.404 136.56C161.308 136.56 161.996 137.272 161.996 138.215C161.996 139.147 161.327 139.812 160.395 139.812Z"
fill="#2C3338"
/>
<rect
x="196"
y="132"
width="43"
height="14"
rx="7"
fill="#B8E6BF"
/>
<path
d="M209.719 136.363V142H210.422V139.988H211.84C212.898 139.988 213.652 139.242 213.652 138.188C213.652 137.113 212.914 136.363 211.848 136.363H209.719ZM210.422 136.988H211.664C212.48 136.988 212.93 137.414 212.93 138.188C212.93 138.934 212.465 139.363 211.664 139.363H210.422V136.988ZM215.734 142.074C216.297 142.074 216.758 141.828 217.031 141.379H217.094V142H217.734V139.117C217.734 138.242 217.16 137.715 216.133 137.715C215.234 137.715 214.57 138.16 214.48 138.836H215.16C215.254 138.504 215.605 138.312 216.109 138.312C216.738 138.312 217.062 138.598 217.062 139.117V139.5L215.848 139.574C214.867 139.633 214.312 140.066 214.312 140.82C214.312 141.59 214.918 142.074 215.734 142.074ZM215.859 141.484C215.371 141.484 215.008 141.234 215.008 140.805C215.008 140.383 215.289 140.16 215.93 140.117L217.062 140.043V140.43C217.062 141.031 216.551 141.484 215.859 141.484ZM219.328 136.977C219.586 136.977 219.797 136.766 219.797 136.508C219.797 136.25 219.586 136.039 219.328 136.039C219.07 136.039 218.859 136.25 218.859 136.508C218.859 136.766 219.07 136.977 219.328 136.977ZM218.992 142H219.664V137.789H218.992V142ZM222.504 142.074C223.086 142.074 223.586 141.797 223.852 141.328H223.914V142H224.555V136.117H223.883V138.453H223.824C223.586 137.992 223.09 137.715 222.504 137.715C221.434 137.715 220.734 138.574 220.734 139.895C220.734 141.219 221.426 142.074 222.504 142.074ZM222.66 138.32C223.422 138.32 223.898 138.93 223.898 139.895C223.898 140.867 223.426 141.469 222.66 141.469C221.891 141.469 221.43 140.879 221.43 139.895C221.43 138.914 221.895 138.32 222.66 138.32Z"
fill="#00450C"
/>
<rect
x="192.5"
y="173"
width="50"
height="10"
rx="5"
fill="#B8E6BF"
/>
<rect
x="49.5"
y="174"
width="50"
height="8"
rx="2"
fill="#DCDCDE"
/>
<rect
x="132.5"
y="170"
width="22.7796"
height="16"
rx="4"
fill="#F6F7F7"
/>
<path
d="M143.507 182.856C144.227 182.856 144.869 182.747 145.435 182.528C146.004 182.305 146.451 181.981 146.774 181.558C147.103 181.129 147.267 180.612 147.267 180.006V179.992C147.267 179.24 147.025 178.659 146.542 178.249C146.063 177.839 145.357 177.529 144.423 177.319L143.404 177.094C142.853 176.966 142.454 176.809 142.208 176.622C141.962 176.435 141.839 176.201 141.839 175.918V175.904C141.839 175.695 141.903 175.508 142.03 175.344C142.158 175.18 142.347 175.05 142.598 174.954C142.848 174.858 143.158 174.811 143.527 174.811C143.855 174.811 144.147 174.861 144.402 174.961C144.658 175.061 144.865 175.209 145.024 175.405C145.184 175.597 145.28 175.836 145.312 176.123L145.318 176.137L147.13 176.13L147.137 176.123C147.114 175.544 146.948 175.043 146.638 174.619C146.332 174.191 145.911 173.86 145.373 173.628C144.84 173.396 144.215 173.279 143.5 173.279C142.816 173.279 142.206 173.391 141.668 173.614C141.13 173.833 140.706 174.15 140.396 174.564C140.087 174.979 139.932 175.476 139.932 176.055V176.068C139.932 176.802 140.169 177.381 140.643 177.805C141.117 178.229 141.8 178.541 142.693 178.741L143.712 178.974C144.332 179.11 144.76 179.27 144.997 179.452C145.239 179.63 145.359 179.878 145.359 180.197V180.211C145.359 180.439 145.291 180.637 145.154 180.806C145.022 180.974 144.822 181.104 144.553 181.195C144.284 181.282 143.944 181.325 143.534 181.325C143.142 181.325 142.812 181.275 142.543 181.175C142.274 181.075 142.062 180.931 141.907 180.744C141.757 180.553 141.659 180.327 141.613 180.067V180.061H139.788L139.781 180.067C139.804 180.664 139.977 181.17 140.301 181.585C140.629 182 141.069 182.316 141.62 182.535C142.176 182.749 142.805 182.856 143.507 182.856ZM143.151 183.971H143.938V172.145H143.151V183.971Z"
fill="#C3C4C7"
/>
<rect
x="192.5"
y="214"
width="50"
height="10"
rx="5"
fill="#B8E6BF"
/>
<rect
x="49.5"
y="215"
width="50"
height="8"
rx="2"
fill="#DCDCDE"
/>
<rect
x="132.5"
y="211"
width="22.7796"
height="16"
rx="4"
fill="#F6F7F7"
/>
<path
d="M145.879 223.856C146.143 223.856 146.403 223.847 146.658 223.829C146.913 223.806 147.13 223.774 147.308 223.733V222.072C147.139 222.104 146.927 222.129 146.672 222.147C146.417 222.161 146.177 222.168 145.954 222.168C145.444 222.168 144.983 222.106 144.573 221.983C144.168 221.856 143.819 221.664 143.527 221.409C143.24 221.149 143.019 220.826 142.864 220.438C142.709 220.051 142.632 219.595 142.632 219.071V219.064C142.632 218.545 142.707 218.091 142.857 217.704C143.012 217.317 143.233 216.995 143.521 216.74C143.812 216.48 144.159 216.287 144.56 216.159C144.961 216.027 145.41 215.961 145.906 215.961C146.148 215.961 146.392 215.972 146.638 215.995C146.884 216.018 147.098 216.048 147.28 216.084V214.437C147.103 214.386 146.879 214.348 146.61 214.32C146.341 214.293 146.082 214.279 145.831 214.279C145.065 214.279 144.364 214.38 143.726 214.58C143.092 214.781 142.543 215.081 142.078 215.482C141.613 215.883 141.253 216.382 140.998 216.979C140.747 217.576 140.622 218.269 140.622 219.058V219.064C140.622 219.857 140.747 220.555 140.998 221.156C141.253 221.753 141.613 222.252 142.078 222.653C142.548 223.05 143.104 223.351 143.746 223.556C144.389 223.756 145.1 223.856 145.879 223.856ZM139.46 220.425H146.542V219.639H139.46V220.425ZM139.46 218.531H146.542V217.745H139.46V218.531Z"
fill="#C3C4C7"
/>
<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"
/>
</g>
<defs>
<clipPath id="clip0_255_63852">
<path
d="M0.5 0H283.5C289.023 0 293.5 4.47715 293.5 10V275H0.5V0Z"
fill="white"
/>
</clipPath>
<clipPath id="clip1_255_63852">
<rect
width="120"
height="39.7959"
fill="white"
transform="translate(27.5 45)"
/>
</clipPath>
</defs>
</svg>
);

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

@ -1,163 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const WCPayBannerImageCut = () => (
<svg
width="310"
height="282"
viewBox="0 0 310 282"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_d_5851_4204)">
<path
d="M16 30C16 24.4772 20.4772 20 26 20H309V48H16V30Z"
fill="#F2EDFF"
/>
<path
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>
<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>
);

5
packages/js/onboarding/src/components/WCPayBanner/index.ts
View File

@ -1,5 +0,0 @@
export * from './Icons';
export * from './WCPayBannerImage';
export * from './WCPayBannerImageCut';
export * from './PaymentMethodsIcons';
export * from './WCPayBanner';

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

@ -1,32 +0,0 @@
.woocommerce-wcpay-benefits {
background-color: #fff;
border-radius: 2px;
padding: 36px 24px;
width: 680px;
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: 13px;
line-height: 16px;
color: $studio-gray-90;
}
}

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

@ -1,72 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Text } from '@woocommerce/experimental';
import { Flex } from '@wordpress/components';
/**
* Internal dependencies
*/
import {
PaymentCardIcon,
InternationalMarketIcon,
EarnManageIcon,
WooPayIcon,
} from './icons';
export const WCPayBenefits: React.VFC< {
isWooPayEligible: boolean;
} > = ( { isWooPayEligible = false } ) => {
return (
<Flex className="woocommerce-wcpay-benefits" align="top">
<Flex className="woocommerce-wcpay-benefits-benefit">
<Flex className="woocommerce-wcpay-benefits-benefit-icon-container">
<PaymentCardIcon />
</Flex>
<Text as="p">
{ __(
'Offer your customers card payments, iDeal, and the ability to sell in-person with Woo mobile app.',
'woocommerce'
) }
</Text>
</Flex>
<Flex className="woocommerce-wcpay-benefits-benefit">
<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.',
'woocommerce'
) }
</Text>
</Flex>
<Flex className="woocommerce-wcpay-benefits-benefit">
<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.',
'woocommerce'
) }
</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>
);
};

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

@ -1,34 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const InternationalMarketIcon = () => (
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="mask0_5908_1702"
style={ { maskType: 'luminance' } }
maskUnits="userSpaceOnUse"
x="2"
y="2"
width="21"
height="20"
>
<path
fillRule="evenodd"
clipRule="evenodd"
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_5908_1702)">
<rect x="0.333496" width="24" height="24" fill="#674399" />
</g>
</svg>
);

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

@ -1,34 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const EarnManageIcon = () => (
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="mask0_5908_1139"
style={ { maskType: 'luminance' } }
maskUnits="userSpaceOnUse"
x="3"
y="2"
width="19"
height="19"
>
<path
fillRule="evenodd"
clipRule="evenodd"
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_5908_1139)">
<rect x="0.666504" width="24" height="24" fill="#674399" />
</g>
</svg>
);

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

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

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

@ -1,34 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const PaymentCardIcon = () => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="mask0_5908_1374"
style={ { maskType: 'luminance' } }
maskUnits="userSpaceOnUse"
x="2"
y="4"
width="20"
height="16"
>
<path
fillRule="evenodd"
clipRule="evenodd"
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_5908_1374)">
<rect width="24" height="24" fill="#674399" />
</g>
</svg>
);

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

@ -1,34 +0,0 @@
/**
* 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>
);

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

@ -1 +0,0 @@
export * from './WCPayBenefits';

43
packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss
View File

@ -1,43 +0,0 @@
.woocommerce-task-payments .woocommerce-task-payment-wcpay {
.woocommerce-task-payment-wcpay__description {
font-size: 16px;
margin-bottom: $gap-large;
}
.components-card__header {
margin-bottom: $gap-small;
justify-content: flex-start;
padding: 25px;
.woocommerce-pill {
margin-left: $gap-small;
}
}
.components-card__footer {
flex-direction: column;
align-items: flex-start;
.components-button {
margin-top: $gap;
margin-left: 0;
}
}
.components-card__body {
h2 {
margin: 0 0 20px 0;
}
}
.woocommerce-task-payment-wcpay__accepted {
display: flex;
margin-top: $gap-small;
flex-wrap: wrap;
gap: $gap-small;
h3 {
color: #40464d;
}
}
}

74
packages/js/onboarding/src/components/WCPayCard/WCPayCard.tsx
View File

@ -1,74 +0,0 @@
/**
* External dependencies
*/
import { Card, CardBody, CardHeader, CardFooter } from '@wordpress/components';
import { Text } from '@woocommerce/experimental';
import { createElement } from '@wordpress/element';
import { Link } from '@woocommerce/components';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { WCPayAcceptedMethods } from '../WCPayAcceptedMethods';
import WCPayLogo from '../../images/wcpay-logo';
type WCPayCardHeaderProps = {
logoWidth?: number;
logoHeight?: number;
};
export const WCPayCardHeader: React.FC< WCPayCardHeaderProps > = ( {
logoWidth = 196,
logoHeight = 41,
children,
} ) => (
<CardHeader as="h2">
<WCPayLogo width={ logoWidth } height={ logoHeight } />
{ children }
</CardHeader>
);
type WCPayCardBodyProps = {
description: string;
heading: string;
onLinkClick?: () => void;
};
export const WCPayCardBody: React.VFC< WCPayCardBodyProps > = ( {
description,
heading,
onLinkClick = () => {},
} ) => (
<CardBody>
{ heading && <Text as="h2">{ heading }</Text> }
<Text
className="woocommerce-task-payment-wcpay__description"
as="p"
lineHeight="1.5em"
>
{ description }
<br />
<Link
target="_blank"
type="external"
rel="noreferrer"
href="https://woocommerce.com/payments/?utm_medium=product"
onClick={ onLinkClick }
>
{ __( 'Learn more', 'woocommerce' ) }
</Link>
</Text>
<WCPayAcceptedMethods />
</CardBody>
);
export const WCPayCardFooter: React.FC = ( { children } ) => (
<CardFooter>{ children }</CardFooter>
);
export const WCPayCard: React.FC = ( { children } ) => {
return <Card className="woocommerce-task-payment-wcpay">{ children }</Card>;
};

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

@ -1 +0,0 @@
export * from './WCPayCard';

36
packages/js/onboarding/src/components/WCPayBanner/PaymentMethodsIcons.tsx → packages/js/onboarding/src/components/WCPayConnectCard/PaymentMethodsIcons.tsx
View File

@ -12,33 +12,39 @@ import {
Visa,
MasterCard,
Amex,
WooPay,
ApplePay,
Giropay,
GooglePay,
CB,
Discover,
UnionPay,
JCB,
} from './Icons';
} from '../../images/cards';
import {
WooPay,
Ideal,
Klarna,
Affirm,
Clearpay,
Afterpay,
} from '../../images/payment-methods';
export const PaymentMethodsIcons: React.VFC< {
businessCountry?: string;
isWooPayEligible: boolean;
} > = ( { isWooPayEligible = false } ) => (
<div className="woocommerce-recommended-payments-banner__footer_icon_container">
} > = ( { businessCountry = '', isWooPayEligible = false } ) => (
<div className="wcpay-connect-card__payment-methods__icons-container">
<Visa />
<MasterCard />
<Amex />
{ isWooPayEligible && <WooPay /> }
<CB />
<Discover />
<Ideal />
<ApplePay />
<GooglePay />
<CB />
<Giropay />
<Discover />
<UnionPay />
<JCB />
<Text variant="caption" as="p" size="12" lineHeight="16px">
{ __( '& more.', 'woocommerce' ) }
{ isWooPayEligible && <WooPay /> }
<Klarna />
<Affirm />
{ businessCountry === 'GB' ? <Clearpay /> : <Afterpay /> }
<Text variant="caption" as="span" size="12" lineHeight="16px">
{ __( '& more', 'woocommerce' ) }
</Text>
</div>
);

32
packages/js/onboarding/src/components/WCPayConnectCard/TipBox.tsx Normal file
View File

@ -0,0 +1,32 @@
/**
* External dependencies
*/
import React from 'react';
import classNames from 'classnames';
import { createElement } from '@wordpress/element';
/**
* Internal dependencies
*/
import { Lightbulb } from '../../images/icons';
interface Props {
color: 'purple' | 'blue' | 'gray' | 'yellow';
className?: string;
}
const TipBox: React.FC< Props > = ( { color, className, children } ) => {
return (
<div
className={ classNames(
'wcpay-component-tip-box',
color,
className
) }
>
<Lightbulb />
<div className="wcpay-component-tip-box__content">{ children }</div>
</div>
);
};
export default TipBox;

303
packages/js/onboarding/src/components/WCPayConnectCard/WCPayConnectCard.scss Normal file
View File

@ -0,0 +1,303 @@
// WooCommerce/Body Large
@mixin wc-body-large {
font-size: 16px;
line-height: 24px;
}
// WooCommerce/Body Small
@mixin wc-body-small {
font-size: 14px;
line-height: 18px;
}
// WooCommerce/Others/Caption
@mixin wc-others-caption {
font-size: 12px;
line-height: 16px;
font-weight: 400;
}
// WordPress/Title Large
@mixin wp-title-large {
font-size: 32px;
line-height: 40px;
font-weight: 400;
}
// WordPress/Title Medium
@mixin wp-title-medium {
font-size: 24px;
line-height: 32px;
font-weight: 400;
}
// WordPress/Title Small
@mixin wp-title-small {
font-size: 20px;
line-height: 28px;
font-weight: 400;
}
// WordPress/Label
@mixin wp-label {
font-size: 13px;
line-height: 16px;
font-weight: 400;
}
// WordPress/Subtitle
@mixin wp-subtitle {
@include wc-body-large;
font-weight: 600;
}
// WordPress/Subtitle Small
@mixin wp-subtitle-small {
font-size: 14px;
line-height: 20px;
font-weight: 600;
}
// WordPress/Small Button
@mixin wp-small-button {
font-size: 11px;
line-height: 16px;
}
.wcpay-connect-card {
margin-bottom: $gap-large;
animation: isLoaded;
animation-duration: 250ms;
h2 {
@include wp-title-small;
color: $gray-90;
margin: 0;
}
svg {
width: auto;
height: auto;
}
&__heading {
padding: $gap-large $gap-large;
svg {
height: 22px;
margin-bottom: $gap-large;
}
@media screen and (min-width: $break-small) {
h2 {
margin-right: 7%;
@include wp-title-large;
}
}
}
&__content {
max-width: 680px;
padding: 0 $gap-large $gap-large;
}
&__payment-methods {
max-width: 680px;
padding: 0 $gap-large;
p {
@include wp-small-button;
color: $gray-700;
margin-top: 0;
}
&__icons-container {
border: 1px solid $gray-300;
border-bottom: none;
padding: $gap-small;
display: grid;
column-gap: $gap-smaller;
row-gap: $gap;
grid-template-columns: repeat( auto-fill, minmax(39px, 1fr) );
svg {
height: 24px;
outline: 1px solid rgba( 0, 0, 0, 0.25 );
outline-offset: -1px;
border-radius: 3px;
display: block;
&.no-outline {
outline: none;
border-radius: 0;
}
}
span {
@include wc-others-caption;
color: $gray-700;
display: none;
@media screen and (min-width: $break-small) {
display: initial;
white-space: nowrap;
align-self: end;
}
}
}
&__description {
padding: $gap-small;
display: flex;
flex-direction: column;
gap: 10px;
border: 1px solid $gray-300;
p {
font-size: 11px;
line-height: 16px;
color: $gray-900;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 0;
}
span {
@include wc-others-caption;
color: $gray-700;
}
&__divider {
border-top: 1px solid $gray-200;
@media screen and (min-width: $break-small) {
border-right: 1px solid $gray-200;
}
}
@media screen and (min-width: $break-small) {
flex-direction: row;
}
}
}
&__buttons {
padding: $gap-large;
button {
width: 100%;
justify-content: center;
@media screen and (min-width: $break-small) {
width: auto;
justify-content: left;
}
}
}
&__incentive {
background: #faf8ff;
border: 1px solid #ae7dd0;
border-radius: 2px;
padding: $gap-large;
margin-bottom: $gap-large;
&-pill {
display: inline-block;
padding: 0 $gap-small;
border: 1px solid #1d2327; // Gray 90
border-radius: 16px;
text-transform: uppercase;
font-size: 12px;
line-height: 22px;
font-weight: 600;
color: $gray-900;
margin-bottom: $gap-small;
}
p {
@include wc-others-caption;
color: #50575e;
&:last-child {
margin-bottom: 0;
}
}
@media screen and (min-width: $break-small) {
h2 {
margin-right: 10%;
}
p {
margin-right: 15%;
}
}
}
// Specific usages
.wcpay-payments-settings-banner & {
margin-top: $gap-large;
@media screen and (min-width: $break-small) {
margin-right: 15px;
}
}
.wcpay-component-tip-box {
display: grid;
grid-template-columns: 24px 1fr;
column-gap: $gap-smaller;
padding: $gap $gap-small;
margin: $gap 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&.purple {
fill: $studio-woocommerce-purple-50;
background-color: $studio-woocommerce-purple-0;
}
&.blue {
fill: #007cba; // Gutenberg/Blue - Missing from dependencies
background-color: #f0f6fc; // $wp-blue-0
}
&.gray {
fill: $gray-50;
background-color: $gray-0;
color: $gray-900;
.components-button.is-link {
color: #0063a1; // Gutenberg/Blue -10%
}
}
&.yellow {
fill: $gray-50;
background-color: #fef8ee;
color: $gray-900;
.components-button.is-link {
color: #0063a1; // Gutenberg/Blue -10%
}
}
&__content {
align-self: center;
}
a {
font-weight: 700;
color: $studio-woocommerce-purple-70;
}
.components-button.is-link {
font-size: inherit;
color: $studio-woocommerce-purple-50;
}
}
}

81
packages/js/onboarding/src/components/WCPayConnectCard/WCPayConnectCard.tsx Normal file
View File

@ -0,0 +1,81 @@
/**
* External dependencies
*/
import { Card } from '@wordpress/components';
import { createElement } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import classNames from 'classnames';
/**
* Internal dependencies
*/
import WCPayLogo from '../../images/wcpay-logo';
import { PaymentMethodsIcons } from './PaymentMethodsIcons';
import TipBox from './TipBox';
export const WCPayConnectCard: React.VFC< {
className?: string;
actionButton: React.ReactNode;
firstName?: string;
businessCountry?: string;
isWooPayEligible: boolean;
showNotice?: boolean;
} > = ( {
className = '',
actionButton,
firstName = '',
businessCountry = '',
isWooPayEligible,
showNotice = false,
} ) => {
return (
<Card className={ classNames( 'wcpay-connect-card', className ) }>
<div className="wcpay-connect-card__heading">
<WCPayLogo />
<h2>
{ sprintf(
/* translators: %1$s: first name of the merchant, if it exists, %2$s: WooPayments. */
__( 'Hi%1$s, Welcome to %2$s!', 'woocommerce' ),
firstName ? ` ${ firstName }` : '',
'WooPayments'
) }
</h2>
</div>
{ showNotice && (
<div className="wcpay-connect-card__content">
<TipBox color="yellow">
{ __(
'Payments made simple, with no monthly fees – designed exclusively for WooCommerce stores.',
'woocommerce'
) }
</TipBox>
</div>
) }
<div className="wcpay-connect-card__payment-methods">
<PaymentMethodsIcons
businessCountry={ businessCountry ?? '' }
isWooPayEligible={ isWooPayEligible }
/>
<div className="wcpay-connect-card__payment-methods__description">
<div>
<p>{ __( 'Deposits', 'woocommerce' ) }</p>
<span>
{ __( 'Automatic - Daily', 'woocommerce' ) }
</span>
</div>
<div className="wcpay-connect-card__payment-methods__description__divider"></div>
<div>
<p>{ __( 'Payments capture', 'woocommerce' ) }</p>
<span>{ __( 'Capture on order', 'woocommerce' ) }</span>
</div>
<div className="wcpay-connect-card__payment-methods__description__divider"></div>
<div>
<p>{ __( 'Recurring payments', 'woocommerce' ) }</p>
<span>{ __( 'Supported', 'woocommerce' ) }</span>
</div>
</div>
</div>
<div className="wcpay-connect-card__buttons">{ actionButton }</div>
</Card>
);
};

2
packages/js/onboarding/src/components/WCPayConnectCard/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './WCPayConnectCard';
export * from './PaymentMethodsIcons';

19
packages/js/onboarding/src/images/cards/amex.js
View File

@ -3,25 +3,20 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
<svg
width="64"
height="40"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
export const Amex = () => (
/* eslint-disable */
<svg viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_7623_49052)">
<rect width="64" height="40" rx="3" fill="white" />
<rect width="64" height="40" rx="3" fill="white"/>
<path
d="M56.5333 9.81335L57.8133 6.33335L64 6.38669V0.0533428L0 0V40L64 40.0533V33.7333L58.1467 33.68L56.1067 31.2934L53.9867 33.68H38.3067V20.9734H33.1333L39.6 6.33335H45.8933L47.4133 9.65334V6.33335H55.2267L56.5333 9.81335ZM52.12 12.12L52.1067 10.72L52.64 12.12L55.24 19.0667H57.8267L60.44 12.12L60.9467 10.7333V19.0667L64 19.12V8.45334L59.1467 8.4L57.0933 13.8134L56.5467 15.28L55.9867 13.8134L53.92 8.4H49.4V19.0667H52.12V12.12ZM46.2667 19.0667H49.4L44.7067 8.4H41.0667L36.3466 19.0667H39.44L40.2667 17.0134H45.44L46.2667 19.0667ZM42.32 12.0134L42.8533 10.68L43.3867 12.0134L44.4933 14.7066H41.2133L42.32 12.0134ZM40.4933 20.9866V31.6134H49.4V29.3066H43.2133V27.4534H49.28V25.16H43.2133V23.2934H49.4V20.9866H40.4933ZM59.3067 31.6134H62.84L57.8533 26.28L62.84 20.9866H59.36L56.1467 24.44L52.9467 20.9866H49.4L54.3733 26.32L49.4 31.6134H52.84L56.08 28.1467L59.3067 31.6134ZM60.6533 26.2666L64 29.3867V23.2934L60.6533 26.2666Z"
fill="#006FCF"
/>
fill="#006FCF"/>
</g>
<defs>
<clipPath id="clip0_7623_49052">
<rect width="64" height="40" rx="3" fill="white" />
<rect width="64" height="40" rx="3" fill="white"/>
</clipPath>
</defs>
</svg>
/* eslint-enable */
);

21
packages/js/onboarding/src/images/cards/applepay.js
View File

@ -3,20 +3,13 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
<svg
width="64"
height="40"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="64" height="40" fill="white" />
<path
fillRule="evenodd"
clipRule="evenodd"
export const ApplePay = () => (
/* eslint-disable */
<svg viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="40" fill="white"/>
<path fillRule="evenodd" clipRule="evenodd"
d="M18.92 13.32C18.42 13.92 17.6 14.41 16.79 14.34C16.69 13.52 17.09 12.64 17.55 12.1C18.05 11.48 18.95 11.03 19.67 11C19.75 11.86 19.42 12.7 18.92 13.32ZM19.66 14.5C19.0027 14.5012 18.3538 14.6481 17.76 14.93C17.4955 15.0585 17.2118 15.143 16.92 15.18C16.67 15.18 16.37 15.06 16.03 14.92C15.59 14.75 15.09 14.54 14.56 14.55C13.9502 14.5664 13.3555 14.7433 12.8358 15.0628C12.3161 15.3823 11.8899 15.8332 11.6 16.37C10.33 18.57 11.27 21.85 12.5 23.65C13.1 24.54 13.82 25.51 14.77 25.48C15.19 25.46 15.49 25.34 15.8 25.2C16.16 25.05 16.53 24.89 17.11 24.89C17.67 24.89 18.03 25.04 18.37 25.19C18.69 25.34 19 25.47 19.47 25.46C20.45 25.45 21.07 24.57 21.67 23.68C22.32 22.73 22.6 21.79 22.64 21.65V21.64L22.63 21.62C22.41 21.52 20.75 20.76 20.73 18.7C20.7357 18.1518 20.8788 17.6138 21.146 17.1351C21.4133 16.6565 21.7963 16.2525 22.26 15.96L22.29 15.94C21.9942 15.5116 21.6023 15.1583 21.1457 14.9083C20.689 14.6583 20.1803 14.5185 19.66 14.5ZM26.46 25.37V12.02H31.42C32.0003 11.994 32.5796 12.0899 33.1205 12.3013C33.6615 12.5128 34.1522 12.8352 34.5611 13.2478C34.9699 13.6604 35.2878 14.154 35.4943 14.697C35.7008 15.2399 35.7913 15.82 35.76 16.4C35.76 19 33.94 20.8 31.35 20.8H28.5V25.37H26.45H26.46ZM28.51 13.77H30.87C32.65 13.77 33.67 14.73 33.67 16.41C33.67 18.1 32.65 19.07 30.87 19.07H28.5V13.77H28.51ZM42.53 23.77C42.2261 24.3011 41.7838 24.7397 41.2502 25.0391C40.7165 25.3385 40.1116 25.4874 39.5 25.47C37.6 25.47 36.27 24.32 36.27 22.59C36.27 20.89 37.56 19.89 39.94 19.75L42.49 19.6V18.86C42.49 17.77 41.79 17.18 40.54 17.18C39.5 17.18 38.75 17.72 38.6 18.54H36.75C36.81 16.81 38.42 15.56 40.6 15.56C42.94 15.56 44.47 16.8 44.47 18.72V25.37H42.57V23.77H42.53ZM40.05 23.89C38.96 23.89 38.27 23.36 38.27 22.54C38.27 21.7 38.94 21.22 40.22 21.14L42.49 20.99V21.75C42.49 23 41.44 23.89 40.05 23.89ZM50.76 25.89C49.94 28.23 49 29 47 29C46.7392 29.0015 46.4785 28.9848 46.22 28.95V27.35L46.82 27.38C47.72 27.38 48.24 27 48.55 25.99L48.74 25.4L45.26 15.68H47.41L49.82 23.58H49.86L52.28 15.68H54.36L50.76 25.89Z"
fill="black"
/>
fill="black"/>
</svg>
/* eslint-enable */
);

48
packages/js/onboarding/src/images/cards/cb.js
View File

@ -3,42 +3,22 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
<svg
width="52"
height="35"
viewBox="0 0 52 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1.18945"
y="0.5"
width="49.6897"
height="34"
rx="2.5"
fill="url(#paint0_linear)"
stroke="#F1F1F1"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M19.7636 16.9816H26.6269C26.5657 15.4963 26.2201 13.9649 25.1717 12.9813C23.9229 11.8096 21.7355 11.375 19.781 11.375C17.7466 11.375 15.4968 11.8517 14.2414 13.1088C13.1588 14.1918 12.9248 15.9341 12.9248 17.4997C12.9248 19.1395 13.3827 21.0469 14.5571 22.1456C15.8059 23.3147 17.8294 23.625 19.781 23.625C21.6767 23.625 23.7302 23.2746 24.9718 22.1647C26.2099 21.0561 26.6377 19.1888 26.6377 17.4997V17.4918H19.7636V16.9816ZM27.0876 17.4921V23.3511H36.6352V23.3432C38.0322 23.267 39.1436 22.0059 39.1436 20.4575C39.1436 18.9084 38.0322 17.5664 36.6352 17.4895V17.4921H27.0876ZM36.5263 11.6203C37.8879 11.6203 38.9687 12.8032 38.9687 14.2957C38.9687 15.7087 37.9762 16.8626 36.7135 16.9816H27.0873V11.6118H36.2251C36.2813 11.6049 36.3468 11.6097 36.4108 11.6144C36.4508 11.6174 36.4901 11.6203 36.5263 11.6203Z"
fill="#FEFEFE"
/>
export const CB = () => (
/* eslint-disable */
<svg viewBox="0 0 39 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.09985" y="0.723633" width="37.4" height="23" rx="1.5" fill="url(#paint0_linear_685_110690)"/>
<rect x="1.09985" y="0.723633" width="37.4" height="23" rx="1.5" stroke="#DDDDDD"/>
<path fillRule="evenodd" clipRule="evenodd"
d="M13.307 11.7158H20.0383C19.9783 10.2608 19.6393 8.76069 18.6111 7.79714C17.3863 6.64937 15.241 6.22363 13.3241 6.22363C11.3289 6.22363 9.1224 6.6906 7.89114 7.92209C6.82939 8.98291 6.59985 10.6897 6.59985 12.2233C6.59985 13.8297 7.04892 15.6982 8.20072 16.7744C9.4255 17.9196 11.4101 18.2236 13.3241 18.2236C15.1833 18.2236 17.1974 17.8803 18.4151 16.7931C19.6293 15.7072 20.0489 13.878 20.0489 12.2233V12.2156H13.307V11.7158ZM20.4897 12.2158V17.9553H29.8536V17.9476C31.2238 17.8729 32.3138 16.6375 32.3138 15.1207C32.3138 13.6032 31.2238 12.2886 29.8536 12.2133V12.2158H20.4897ZM29.7471 6.46388C31.0825 6.46388 32.1425 7.62259 32.1425 9.08467C32.1425 10.4688 31.169 11.5992 29.9307 11.7158H20.4897V6.45551H29.4516C29.5068 6.44876 29.571 6.45351 29.6339 6.45814C29.673 6.46103 29.7116 6.46388 29.7471 6.46388Z"
fill="#FEFEFE"/>
<defs>
<linearGradient
id="paint0_linear"
x1="14.4385"
y1="-4.43215"
x2="2.09335"
y2="33.4202"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#222E72" />
<stop offset="0.591647" stopColor="#40CBFF" />
<stop offset="1" stopColor="#3CB792" />
<linearGradient id="paint0_linear_685_110690" x1="11.0155" y1="-2.81556" x2="3.21751" y2="23.5991"
gradientUnits="userSpaceOnUse">
<stop stopColor="#222E72"/>
<stop offset="0.591647" stopColor="#40CBFF"/>
<stop offset="1" stopColor="#3CB792"/>
</linearGradient>
</defs>
</svg>
/* eslint-enable */
);

4
packages/js/onboarding/src/images/cards/diners.js
View File

@ -3,7 +3,8 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
export const Diners = () => (
/* eslint-disable */
<svg
width="64"
height="40"
@ -46,4 +47,5 @@ export default () => (
fill="white"
/>
</svg>
/* eslint-enable */
);

1074
packages/js/onboarding/src/images/cards/discover.js
View File

File diff suppressed because it is too large Load Diff

27
packages/js/onboarding/src/images/cards/giropay.js Normal file
View File

@ -0,0 +1,27 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const Giropay = () => (
/* eslint-disable */
<svg viewBox="0 0 65 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="65" height="40" fill="white"/>
<path
d="M12 11C12 9.93913 12.4214 8.92172 13.1716 8.17157C13.9217 7.42143 14.9391 7 16 7H48.86C49.9209 7 50.9383 7.42143 51.6884 8.17157C52.4386 8.92172 52.86 9.93913 52.86 11V29C52.86 30.0609 52.4386 31.0783 51.6884 31.8284C50.9383 32.5786 49.9209 33 48.86 33H16C14.9391 33 13.9217 32.5786 13.1716 31.8284C12.4214 31.0783 12 30.0609 12 29V11Z"
fill="white"/>
<path
d="M48.86 9H16C15.4696 9 14.9609 9.21071 14.5858 9.58579C14.2107 9.96086 14 10.4696 14 11V29C14 29.5304 14.2107 30.0391 14.5858 30.4142C14.9609 30.7893 15.4696 31 16 31H48.86C49.3904 31 49.8991 30.7893 50.2742 30.4142C50.6493 30.0391 50.86 29.5304 50.86 29V11C50.86 10.4696 50.6493 9.96086 50.2742 9.58579C49.8991 9.21071 49.3904 9 48.86 9ZM16 7C14.9391 7 13.9217 7.42143 13.1716 8.17157C12.4214 8.92172 12 9.93913 12 11V29C12 30.0609 12.4214 31.0783 13.1716 31.8284C13.9217 32.5786 14.9391 33 16 33H48.86C49.9209 33 50.9383 32.5786 51.6884 31.8284C52.4386 31.0783 52.86 30.0609 52.86 29V11C52.86 9.93913 52.4386 8.92172 51.6884 8.17157C50.9383 7.42143 49.9209 7 48.86 7H16Z"
fill="#0F3365"/>
<path
d="M32.43 7H48.86C49.9209 7 50.9383 7.42143 51.6884 8.17157C52.4386 8.92172 52.86 9.93913 52.86 11V29C52.86 30.0609 52.4386 31.0783 51.6884 31.8284C50.9383 32.5786 49.9209 33 48.86 33H32.43V7Z"
fill="#0F3365"/>
<path
d="M35.21 28.1H39.47V22.2H39.52C40.32 23.5 41.92 23.98 43.42 23.98C47.08 23.98 49.05 21.3 49.05 18.08C49.05 15.45 47.18 12.58 43.77 12.58C41.83 12.58 40.04 13.28 39.19 14.8H39.14V12.83H35.2V28.12L35.21 28.1ZM44.65 18.15C44.65 19.89 43.68 21.08 42.07 21.08C40.65 21.08 39.47 19.89 39.47 18.3C39.47 16.67 40.51 15.46 42.07 15.46C43.73 15.46 44.65 16.71 44.65 18.16V18.15Z"
fill="#FFFFFE"/>
<path
d="M29.64 12.82H25.78V14.79H25.73C25.2754 14.0991 24.6543 13.5336 23.9238 13.1456C23.1934 12.7577 22.377 12.5597 21.55 12.57C17.72 12.57 15.99 15 15.99 18.24C15.99 21.46 18.09 23.71 21.48 23.71C23.18 23.71 24.6 23.13 25.62 21.85H25.66V22.44C25.66 24.57 24.34 25.6 21.88 25.6C20.4426 25.6238 19.019 25.3158 17.72 24.7L17.51 27.67C18.5 27.98 20.18 28.36 22.21 28.36C27.18 28.36 29.63 26.91 29.63 22.44V12.82H29.64ZM20.39 18.17C20.39 16.69 21.22 15.46 22.8 15.46C24.72 15.46 25.52 16.81 25.52 18.03C25.52 19.7 24.32 20.83 22.8 20.83C21.53 20.83 20.39 19.87 20.39 18.17Z"
fill="#D8232A"/>
</svg>
/* eslint-enable */
);

49
packages/js/onboarding/src/images/cards/googlepay.js
View File

@ -3,44 +3,25 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
<svg
width="64"
height="40"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="64" height="40" fill="white" />
<path
fillRule="evenodd"
clipRule="evenodd"
export const GooglePay = () => (
/* eslint-disable */
<svg viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="40" fill="white"/>
<path fillRule="evenodd" clipRule="evenodd"
d="M30.9 25.07V19.79H33.76C34.8522 19.8223 35.914 19.4277 36.72 18.69C37.118 18.3482 37.4356 17.9226 37.65 17.4438C37.8643 16.9649 37.9702 16.4446 37.96 15.92C37.9659 15.399 37.858 14.883 37.6438 14.408C37.4296 13.933 37.1143 13.5105 36.72 13.17C35.9175 12.4232 34.856 12.0179 33.76 12.04H29.18V25.07H30.9ZM30.9 18.19V13.64H33.8C34.45 13.63 35.07 13.88 35.51 14.34C35.7261 14.5446 35.8981 14.7912 36.0157 15.0646C36.1334 15.3379 36.194 15.6324 36.194 15.93C36.194 16.2276 36.1334 16.5221 36.0157 16.7954C35.8981 17.0688 35.7261 17.3153 35.51 17.52C35.06 17.97 34.44 18.22 33.8 18.19H30.9ZM44.97 16.86C44.23 16.19 43.22 15.86 41.94 15.86C40.3 15.86 39.07 16.45 38.23 17.61L39.75 18.54C40.0021 18.1647 40.3454 17.8595 40.7477 17.6531C41.15 17.4467 41.5981 17.3458 42.05 17.36C42.65 17.35 43.25 17.56 43.71 17.96C44.16 18.33 44.43 18.88 44.42 19.45V19.83C43.6359 19.4379 42.7661 19.2488 41.89 19.28C40.69 19.28 39.73 19.56 39.01 20.1C38.6643 20.3509 38.3851 20.6825 38.1969 21.0659C38.0087 21.4494 37.917 21.873 37.93 22.3C37.91 23.14 38.29 23.95 38.95 24.49C39.63 25.07 40.48 25.36 41.49 25.36C42.69 25.36 43.63 24.86 44.35 23.83H44.42V25.07H46.08V19.57C46.08 18.42 45.71 17.52 44.97 16.86ZM40.28 23.43C40.1036 23.3082 39.9596 23.1454 39.8603 22.9554C39.761 22.7655 39.7094 22.5543 39.71 22.34C39.71 21.86 39.94 21.45 40.41 21.12C40.89 20.79 41.47 20.62 42.17 20.62C43.14 20.62 43.89 20.83 44.43 21.25C44.43 21.95 44.14 22.57 43.57 23.09C43.0458 23.5932 42.3466 23.8729 41.62 23.87C41.14 23.87 40.66 23.72 40.28 23.43ZM55.56 16.16L49.8 29H48.02L50.16 24.5L46.36 16.16H48.24L50.99 22.56H51L53.67 16.16H55.55H55.56Z"
fill="#5F6368"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
fill="#5F6368"/>
<path fillRule="evenodd" clipRule="evenodd"
d="M23.92 18.66C23.92 18.15 23.88 17.64 23.79 17.13H16.5V20.02H20.68C20.5904 20.4842 20.4067 20.9251 20.1401 21.3155C19.8735 21.7059 19.5297 22.0376 19.13 22.29V24.16H21.63C22.3839 23.4607 22.9792 22.6079 23.376 21.6592C23.7727 20.7105 23.9616 19.6878 23.93 18.66H23.92Z"
fill="#4285F4"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
fill="#4285F4"/>
<path fillRule="evenodd" clipRule="evenodd"
d="M16.5 25.97C18.59 25.97 20.34 25.31 21.62 24.17L19.13 22.29C18.44 22.75 17.55 23.01 16.5 23.01C15.5459 23.0062 14.6166 22.7057 13.8408 22.1503C13.065 21.5949 12.4811 20.812 12.17 19.91H9.60001V21.85C10.2645 23.1012 11.2588 24.1465 12.4751 24.8728C13.6914 25.5991 15.0834 25.9785 16.5 25.97Z"
fill="#34A853"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
fill="#34A853"/>
<path fillRule="evenodd" clipRule="evenodd"
d="M12.17 19.92C11.8453 18.9909 11.8453 17.9791 12.17 17.05V15.12H9.6C9.05843 16.159 8.77563 17.3133 8.77563 18.485C8.77563 19.6567 9.05843 20.811 9.6 21.85L12.17 19.92Z"
fill="#FBBC04"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
fill="#FBBC04"/>
<path fillRule="evenodd" clipRule="evenodd"
d="M16.5 13.96C17.6 13.95 18.67 14.35 19.47 15.09L21.67 12.95C20.2545 11.6709 18.4077 10.9744 16.5 11C13.58 11 10.91 12.6 9.60001 15.12L12.17 17.05C12.4828 16.1499 13.0674 15.3692 13.8431 14.8156C14.6187 14.2621 15.5471 13.9631 16.5 13.96Z"
fill="#EA4335"
/>
fill="#EA4335"/>
</svg>
/* eslint-enable */
);

4
packages/js/onboarding/src/components/WCPayBanner/Icons/index.js → packages/js/onboarding/src/images/cards/index.js
View File

@ -1,12 +1,12 @@
export * from './amex';
export * from './applepay';
export * from './cb';
export * from './diners';
export * from './discover';
export * from './giropay';
export * from './gpay';
export * from './googlepay';
export * from './jcb';
export * from './maestro';
export * from './mastercard';
export * from './unionpay';
export * from './visa';
export * from './woopay';

69
packages/js/onboarding/src/images/cards/jcb.js
View File

File diff suppressed because one or more lines are too long

6
packages/js/onboarding/src/images/cards/maestro.js
View File

@ -3,10 +3,9 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
export const Maestro = () => (
/* eslint-disable */
<svg
width="51"
height="35"
viewBox="0 0 51 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -67,4 +66,5 @@ export default () => (
fill="#231F20"
/>
</svg>
/* eslint-enable */
);

32
packages/js/onboarding/src/images/cards/mastercard.js
View File

@ -3,38 +3,24 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
<svg
width="64"
height="40"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="64" height="40" fill="white" />
export const MasterCard = () => (
/* eslint-disable */
<svg viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="40" fill="white"/>
<g clipPath="url(#clip0_1_132)">
<path
d="M37.376 10.284H26.56V29.716H37.376V10.284Z"
fill="#FF5A00"
/>
<path d="M37.376 10.284H26.56V29.716H37.376V10.284Z" fill="#FF5A00"/>
<path
d="M27.28 20C27.28 16.052 29.136 12.548 31.984 10.284C29.888 8.636 27.244 7.64 24.36 7.64C17.528 7.64 12 13.168 12 20C12 26.832 17.528 32.36 24.36 32.36C27.244 32.36 29.888 31.364 31.984 29.716C29.132 27.484 27.28 23.948 27.28 20Z"
fill="#EB001B"
/>
fill="#EB001B"/>
<path
d="M51.968 20C51.968 26.832 46.44 32.36 39.608 32.36C36.724 32.36 34.08 31.364 31.984 29.716C34.868 27.448 36.688 23.948 36.688 20C36.688 16.052 34.832 12.548 31.984 10.284C34.076 8.636 36.72 7.64 39.604 7.64C46.44 7.64 51.968 13.204 51.968 20Z"
fill="#F79E1B"
/>
fill="#F79E1B"/>
</g>
<defs>
<clipPath id="clip0_1_132">
<rect
width="40"
height="24.72"
fill="white"
transform="translate(12 7.64)"
/>
<rect width="40" height="24.72" fill="white" transform="translate(12 7.64)"/>
</clipPath>
</defs>
</svg>
/* eslint-enable */
);

123
packages/js/onboarding/src/images/cards/unionpay.js
View File

File diff suppressed because one or more lines are too long

36
packages/js/onboarding/src/images/cards/visa.js
View File

@ -3,34 +3,20 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
<svg
width="64"
height="40"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="64" height="40" rx="3" fill="white" />
<path
d="M28.6564 27.2545H24.7949L27.2102 13.2538H31.0714L28.6564 27.2545Z"
fill="#1C34C3"
/>
export const Visa = () => (
/* eslint-disable */
<svg viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="40" rx="3" fill="white"/>
<path d="M28.6564 27.2545H24.7949L27.2102 13.2538H31.0714L28.6564 27.2545Z" fill="#1C34C3"/>
<path
d="M42.6537 13.5961C41.8921 13.3128 40.684 13 39.1903 13C35.3769 13 32.6916 14.9064 32.6751 17.6319C32.6435 19.6428 34.5977 20.7597 36.0594 21.4302C37.5534 22.1154 38.0612 22.5626 38.0612 23.1733C38.046 24.1112 36.854 24.5436 35.7422 24.5436C34.2006 24.5436 33.3745 24.3207 32.1191 23.7989L31.6107 23.5752L31.0703 26.718C31.976 27.1048 33.6446 27.4481 35.3769 27.4631C39.4287 27.4631 42.0665 25.5863 42.0977 22.6818C42.1131 21.088 41.0812 19.8667 38.8564 18.8688C37.5058 18.2282 36.6787 17.7962 36.6787 17.1408C36.6946 16.5449 37.3783 15.9346 38.9029 15.9346C40.1582 15.9047 41.0806 16.1876 41.7793 16.4707L42.1286 16.6194L42.6537 13.5961Z"
fill="#1C34C3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
fill="#1C34C3"/>
<path fillRule="evenodd" clipRule="evenodd"
d="M49.5665 13.2538H52.5534L55.6686 27.2543H52.0933C52.0933 27.2543 51.7434 25.6456 51.6325 25.1541H46.6747C46.5313 25.5263 45.8642 27.2543 45.8642 27.2543H41.8125L47.5482 14.4154C47.9456 13.5068 48.6454 13.2538 49.5665 13.2538ZM49.3285 18.3773C49.3285 18.3773 48.1049 21.4902 47.7869 22.2945H50.9965C50.8377 21.5945 50.1064 18.2432 50.1064 18.2432L49.8366 17.0368C49.7229 17.3475 49.5586 17.7746 49.4478 18.0626C49.3726 18.2579 49.322 18.3893 49.3285 18.3773Z"
fill="#1C34C3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
fill="#1C34C3"/>
<path fillRule="evenodd" clipRule="evenodd"
d="M8.06356 13.2538H14.2763C15.1184 13.2833 15.8017 13.5365 16.0241 14.4307L17.3743 20.8634C17.3744 20.8638 17.3745 20.8643 17.3747 20.8647L17.7879 22.8009L21.5696 13.2538H25.6528L19.5832 27.2396H15.4998L12.058 15.0743C10.8705 14.4234 9.51527 13.8999 8 13.5367L8.06356 13.2538Z"
fill="#1C34C3"
/>
fill="#1C34C3"/>
</svg>
/* eslint-enable */
);

1
packages/js/onboarding/src/images/icons/index.js Normal file
View File

@ -0,0 +1 @@
export * from './lightbulb';

21
packages/js/onboarding/src/images/icons/lightbulb.tsx Normal file
View File

@ -0,0 +1,21 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const Lightbulb = (): JSX.Element => (
/* eslint-disable */
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="-4 -4 24 24"
>
<path
fillRule="evenodd"
d="M8 1.33a4.67 4.67 0 0 0-2.67 8.5v1.5c0 .37.3.67.67.67h4c.37 0 .67-.3.67-.67v-1.5A4.66 4.66 0 0 0 8 1.33ZM6 14c0 .37.3.67.67.67h2.66c.37 0 .67-.3.67-.67v-.67H6V14Zm3.33-4.87.57-.4a3.33 3.33 0 1 0-3.8 0l.57.4v1.54h2.66V9.13Z"
clipRule="evenodd"
/>
</svg>
/* eslint-enable */
);

56
packages/js/onboarding/src/images/payment-methods/affirm.js
View File

@ -3,49 +3,37 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
export const Affirm = () => (
/* eslint-disable */
<svg
width="64"
height="40"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="64" height="40" fill="white" />
<path d="M53 10.6201H11V27.3789H53V10.6201Z" fill="white" />
<path fill="#fff" d="M0 0h64v40H0z"/>
<mask
id="a"
width={42}
height={18}
x={11}
y={10}
maskUnits="userSpaceOnUse"
style={{
maskType: "luminance",
}}
>
<path fill="#fff" d="M53 10.62H11V27.38h42V10.62Z"/>
</mask>
<g mask="url(#a)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M13.7539 25.935C13.2345 25.935 12.9699 25.6792 12.9699 25.2587C12.9699 24.4747 13.8441 24.2111 15.4387 24.0415C15.4387 25.0862 14.732 25.935 13.749 25.935H13.7539ZM14.44 20.0596C13.3002 20.0596 11.9899 20.5957 11.2783 21.1631L11.9281 22.5352C12.4985 22.0128 13.4207 21.5659 14.2528 21.5659C15.0437 21.5659 15.4808 21.8305 15.4808 22.3637C15.4808 22.7214 15.1917 22.9027 14.6448 22.9742C12.6004 23.2389 10.998 23.8034 10.998 25.3783C10.998 26.6269 11.887 27.3825 13.2757 27.3825C14.2675 27.3825 15.1495 26.8317 15.569 26.1084V27.1865H17.4174V22.6695C17.4174 20.8074 16.1247 20.0557 14.441 20.0557L14.44 20.0596Z"
fill="#101820"
d="M13.754 25.935c-.52 0-.784-.256-.784-.676 0-.784.874-1.048 2.469-1.218 0 1.045-.707 1.894-1.69 1.894h.005Zm.686-5.875c-1.14 0-2.45.536-3.162 1.103l.65 1.372c.57-.522 1.493-.97 2.325-.97.79 0 1.228.265 1.228.799 0 .357-.29.539-.836.61-2.045.265-3.647.83-3.647 2.404 0 1.249.889 2.005 2.278 2.005.992 0 1.873-.551 2.293-1.275v1.078h1.848V22.67c0-1.862-1.292-2.613-2.976-2.613l-.001.004ZM32.991 20.263v6.915h1.978v-3.332c0-1.583.958-2.048 1.626-2.048.3-.003.595.084.846.25l.361-1.828a2.24 2.24 0 0 0-.882-.16c-1.016 0-1.655.45-2.077 1.365v-1.162h-1.852ZM46.967 20.06c-1.045 0-1.828.617-2.234 1.213-.377-.77-1.176-1.213-2.137-1.213-1.044 0-1.769.58-2.103 1.248v-1.046h-1.907v6.916h1.98v-3.56c0-1.275.669-1.891 1.293-1.891.566 0 1.085.365 1.085 1.309v4.142h1.976v-3.56c0-1.293.653-1.891 1.306-1.891.524 0 1.078.38 1.078 1.295v4.156h1.976v-4.781c0-1.553-1.046-2.337-2.309-2.337M28.179 20.263h-1.792v-.702c0-.916.523-1.177.972-1.177.308.005.61.08.882.221l.61-1.395s-.618-.403-1.742-.403c-1.264 0-2.702.712-2.702 2.948v.508h-2.994v-.702c0-.916.522-1.177.973-1.177.307 0 .61.076.882.221l.61-1.395c-.364-.212-.95-.403-1.742-.403-1.264 0-2.701.712-2.701 2.948v.508H18.29v1.525h1.148v5.39h1.976v-5.39h2.997v5.39h1.976v-5.39h1.792v-1.525ZM31.332 20.263h-1.974v6.912h1.974v-6.912Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M32.9912 20.263V27.1782H34.969V23.8461C34.969 22.2633 35.9274 21.7978 36.5949 21.7978C36.8953 21.7954 37.1897 21.8824 37.4406 22.0477L37.8023 20.2199C37.522 20.1077 37.222 20.0534 36.9202 20.0601C35.9039 20.0601 35.2649 20.51 34.8435 21.4253V20.263H32.9912Z"
fill="#101820"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M46.9673 20.0596C45.9216 20.0596 45.1395 20.677 44.7328 21.2729C44.3555 20.5035 43.5568 20.0596 42.5963 20.0596C41.5516 20.0596 40.8273 20.6398 40.4931 21.3081V20.2624H38.5859V27.1777H40.5656V23.6171C40.5656 22.3431 41.235 21.7266 41.8593 21.7266C42.4248 21.7266 42.9442 22.0922 42.9442 23.036V27.1777H44.92V23.6171C44.92 22.3245 45.5727 21.7266 46.2264 21.7266C46.7497 21.7266 47.3045 22.1069 47.3045 23.0223V27.1777H49.2802V22.397C49.2802 20.8436 48.2345 20.0596 46.9712 20.0596"
fill="#101820"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M28.1787 20.2633H26.3872V19.5606C26.3872 18.6452 26.9096 18.3845 27.3594 18.3845C27.6666 18.3885 27.9686 18.464 28.2415 18.605L28.8511 17.2104C28.8511 17.2104 28.2326 16.8066 27.1085 16.8066C25.8452 16.8066 24.4075 17.5191 24.4075 19.7546V20.2633H21.4135V19.5606C21.4135 18.6452 21.9348 18.3845 22.3857 18.3845C22.6933 18.3845 22.9963 18.4602 23.2677 18.605L23.8773 17.2104C23.5137 16.9977 22.9286 16.8066 22.1358 16.8066C20.8725 16.8066 19.4347 17.5191 19.4347 19.7546V20.2633H18.29V21.7882H19.4377V27.1785H21.4135V21.7882H24.4114V27.1785H26.3872V21.7882H28.1787V20.2633Z"
fill="#101820"
/>
<path
d="M31.3322 20.2627H29.3584V27.175H31.3322V20.2627Z"
fill="#101820"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M29.4307 19.0877H31.3643C32.4923 15.5409 36.3194 12.4234 40.8708 12.4234C46.4061 12.4234 51.1897 16.6376 51.1897 23.198C51.2066 24.5447 51.0216 25.8862 50.6409 27.178H52.5177L52.5363 27.1133C52.8526 25.8345 53.0086 24.5213 53.0009 23.2039C53.0009 15.8879 47.6694 10.6221 40.8747 10.6221C35.5374 10.6221 30.7802 14.3266 29.4316 19.0897L29.4307 19.0877Z"
fill="#4A4AF4"
d="M29.43 19.088h1.934c1.128-3.547 4.955-6.665 9.507-6.665 5.535 0 10.319 4.215 10.319 10.775a13.48 13.48 0 0 1-.55 3.98h1.878l.018-.065c.317-1.279.473-2.592.465-3.91 0-7.315-5.332-12.58-12.126-12.58-5.338 0-10.095 3.704-11.443 8.467l-.001-.002Z"
/>
</g>
</svg>
/* eslint-enable */
);

25
packages/js/onboarding/src/images/payment-methods/afterpay.js
View File

@ -3,26 +3,21 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
export const Afterpay = () => (
/* eslint-disable */
<svg
width="64"
height="40"
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
data-name="Layer 1"
viewBox="0 0 38 24"
>
<path
fill="#B2FCE4"
d="M35,0H3A3,3,0,0,0,0,3V21a3,3,0,0,0,3,3H35a3,3,0,0,0,3-3V3A3,3,0,0,0,35,0Z"
d="M35 0H3a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h32a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3Z"
style={{
fill: "#b2fce4",
}}
/>
<path d="M36.12,10l-1.06-.61L34,8.75a1.07,1.07,0,0,0-1.6.93v.13a.23.23,0,0,0,.1.19l.5.28a.2.2,0,0,0,.28-.08.19.19,0,0,0,0-.1V9.78a.21.21,0,0,1,.2-.22l.12,0,1,.57,1,.56a.22.22,0,0,1,.07.3l-.07.07-1,.56-1,.57a.21.21,0,0,1-.29-.07.24.24,0,0,1,0-.12v-.16a1.07,1.07,0,0,0-1.6-.93l-1.08.62-1.06.61a1.08,1.08,0,0,0-.4,1.46,1,1,0,0,0,.4.4l1.06.61,1.08.61a1.07,1.07,0,0,0,1.6-.93v-.13a.23.23,0,0,0-.1-.19l-.5-.29a.2.2,0,0,0-.28.08.23.23,0,0,0,0,.11v.32a.21.21,0,0,1-.2.22.27.27,0,0,1-.12,0l-1-.57-1-.56A.22.22,0,0,1,30,13l.07-.07,1-.56,1-.57a.21.21,0,0,1,.29.07.24.24,0,0,1,0,.12v.16a1.07,1.07,0,0,0,1.6.93l1.08-.62,1.06-.61a1.06,1.06,0,0,0,.34-1.47A1,1,0,0,0,36.12,10Z" />
<path d="M29.14,10.18l-2.49,5.14h-1l.93-1.92-1.46-3.22h1.06l.94,2.15,1-2.15Z" />
<path d="M4.25,12a1,1,0,1,0-1,1.05h0a1,1,0,0,0,1-1V12m0,1.83v-.48a1.49,1.49,0,0,1-1.16.54,1.79,1.79,0,0,1-1.75-1.83V12a1.82,1.82,0,0,1,1.75-1.89h0a1.47,1.47,0,0,1,1.14.53v-.46h.89v3.65Z" />
<path d="M9.52,13c-.32,0-.4-.12-.4-.42V11h.57v-.79H9.12V9.29H8.2v.89H7V9.81c0-.3.12-.42.44-.42h.2V8.68H7.21c-.76,0-1.12.25-1.12,1v.49H5.58V11h.51v2.86H7V11H8.2v1.79c0,.75.28,1.07,1,1.07h.5V13Z" />
<path d="M12.82,11.67a.87.87,0,0,0-.91-.75.89.89,0,0,0-.92.75ZM11,12.24a.91.91,0,0,0,.94.85,1,1,0,0,0,.86-.47h.94a1.79,1.79,0,0,1-1.82,1.27A1.8,1.8,0,0,1,10,12.22V12a1.89,1.89,0,1,1,3.78,0h0a.89.89,0,0,1,0,.23Z" />
<path d="M19.66,12a1,1,0,1,0,0,.05V12m-2.89,3.32V10.18h.89v.47a1.49,1.49,0,0,1,1.16-.54,1.79,1.79,0,0,1,1.76,1.82V12a1.82,1.82,0,0,1-1.75,1.89h0a1.44,1.44,0,0,1-1.11-.49v1.92Z" />
<path d="M23.82,12a1,1,0,1,0-1.05,1.05h.05a1,1,0,0,0,1-1V12m0,1.83v-.48a1.46,1.46,0,0,1-1.15.54,1.79,1.79,0,0,1-1.76-1.82V12a1.82,1.82,0,0,1,1.75-1.89h0a1.45,1.45,0,0,1,1.13.53v-.46h.9v3.65Z" />
<path d="M15.15,10.54a.91.91,0,0,1,.79-.43.88.88,0,0,1,.39.08v.94a1.15,1.15,0,0,0-.65-.17.64.64,0,0,0-.5.71v2.16h-.93V10.18h.9Z" />
<path
d="m36.12 10-1.06-.61L34 8.75a1.07 1.07 0 0 0-1.6.93v.13a.23.23 0 0 0 .1.19l.5.28a.2.2 0 0 0 .28-.08.19.19 0 0 0 0-.1v-.32a.21.21 0 0 1 .2-.22h.12l1 .57 1 .56a.22.22 0 0 1 .07.3l-.07.07-1 .56-1 .57a.21.21 0 0 1-.29-.07.24.24 0 0 1 0-.12v-.16a1.07 1.07 0 0 0-1.6-.93l-1.08.62-1.06.61a1.08 1.08 0 0 0-.4 1.46 1 1 0 0 0 .4.4l1.06.61 1.08.61a1.07 1.07 0 0 0 1.6-.93v-.13a.23.23 0 0 0-.1-.19l-.5-.29a.2.2 0 0 0-.28.08.23.23 0 0 0 0 .11v.32a.21.21 0 0 1-.2.22.27.27 0 0 1-.12 0l-1-.57-1-.56A.22.22 0 0 1 30 13l.07-.07 1-.56 1-.57a.21.21 0 0 1 .29.07.24.24 0 0 1 0 .12v.16a1.07 1.07 0 0 0 1.6.93l1.08-.62 1.06-.61a1.06 1.06 0 0 0 .34-1.47 1 1 0 0 0-.32-.38Zm-6.98.18-2.49 5.14h-1l.93-1.92-1.46-3.22h1.06l.94 2.15 1-2.15ZM4.25 12a1 1 0 1 0-1 1.05 1 1 0 0 0 1-1V12m0 1.83v-.48a1.49 1.49 0 0 1-1.16.54 1.79 1.79 0 0 1-1.75-1.83V12a1.82 1.82 0 0 1 1.75-1.89 1.47 1.47 0 0 1 1.14.53v-.46h.89v3.65ZM9.52 13c-.32 0-.4-.12-.4-.42V11h.57v-.79h-.57v-.92H8.2v.89H7v-.37c0-.3.12-.42.44-.42h.2v-.71h-.43c-.76 0-1.12.25-1.12 1v.49h-.51V11h.51v2.86H7V11h1.2v1.79c0 .75.28 1.07 1 1.07h.5V13Zm3.3-1.33a.87.87 0 0 0-.91-.75.89.89 0 0 0-.92.75Zm-1.82.57a.91.91 0 0 0 .94.85 1 1 0 0 0 .86-.47h.94a1.79 1.79 0 0 1-1.82 1.27A1.8 1.8 0 0 1 10 12.22V12a1.89 1.89 0 1 1 3.78 0 .89.89 0 0 1 0 .23Zm8.66-.24a1 1 0 1 0 0 .05V12m-2.89 3.32v-5.14h.89v.47a1.49 1.49 0 0 1 1.16-.54 1.79 1.79 0 0 1 1.76 1.82V12a1.82 1.82 0 0 1-1.75 1.89 1.44 1.44 0 0 1-1.11-.49v1.92ZM23.82 12a1 1 0 1 0-1.05 1.05h.05a1 1 0 0 0 1-1V12m0 1.83v-.48a1.46 1.46 0 0 1-1.15.54 1.79 1.79 0 0 1-1.76-1.82V12a1.82 1.82 0 0 1 1.75-1.89 1.45 1.45 0 0 1 1.13.53v-.46h.9v3.65Zm-8.67-3.29a.91.91 0 0 1 .79-.43.88.88 0 0 1 .39.08v.94a1.15 1.15 0 0 0-.65-.17.64.64 0 0 0-.5.71v2.16h-.93v-3.65h.9Z"/>
</svg>
/* eslint-enable */
);

17
packages/js/onboarding/src/images/payment-methods/clearpay.js
View File

@ -3,18 +3,13 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
<svg
width="64"
height="40"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="#fff" d="M0 0h64v40H0z" />
export const Clearpay = () => (
/* eslint-disable */
<svg viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#fff" d="M0 0h64v40H0z"/>
<path
d="m48.47 17.208-3.827 7.897h-1.586l1.43-2.95-2.247-4.947h1.629l1.444 3.314 1.576-3.314h1.581ZM33.905 20.012c0-.906-.684-1.605-1.524-1.605s-1.525.675-1.525 1.605c0 .92.685 1.605 1.525 1.605.84 0 1.524-.699 1.524-1.605Zm-4.441 5.093v-7.897h1.378v.727a2.228 2.228 0 0 1 1.77-.83c1.515 0 2.704 1.245 2.704 2.893 0 1.647-1.213 2.902-2.737 2.902-.708 0-1.288-.278-1.695-.75v2.95h-1.42v.005ZM40.29 20.012c0-.944-.684-1.605-1.524-1.605s-1.524.675-1.524 1.605c0 .92.684 1.605 1.524 1.605s1.525-.666 1.525-1.605Zm.01 2.803v-.726a2.245 2.245 0 0 1-1.77.816c-1.538 0-2.704-1.232-2.704-2.893 0-1.647 1.213-2.903 2.737-2.903.718 0 1.322.316 1.737.807v-.708h1.379v5.607H40.3ZM26.976 17.756s.35-.652 1.213-.652c.368 0 .604.128.604.128v1.43s-.519-.321-.995-.255c-.477.066-.78.5-.78 1.086v3.322h-1.425v-5.607h1.379v.548h.004ZM59.175 16.892l-1.633-.934-1.657-.95c-1.095-.627-2.463.161-2.463 1.426v.213a.32.32 0 0 0 .165.283l.77.439a.319.319 0 0 0 .476-.279v-.505c0-.25.269-.406.486-.283l1.51.869 1.506.863a.324.324 0 0 1 0 .562l-1.506.864-1.51.868a.325.325 0 0 1-.486-.283v-.25c0-1.265-1.369-2.058-2.464-1.426l-1.657.949-1.633.934c-1.1.633-1.1 2.224 0 2.856l1.633.935 1.657.948c1.095.628 2.464-.16 2.464-1.425v-.212a.32.32 0 0 0-.165-.284l-.77-.439a.319.319 0 0 0-.476.279v.505c0 .25-.27.406-.487.283l-1.51-.868-1.506-.864a.324.324 0 0 1 0-.562l1.506-.863 1.51-.869a.325.325 0 0 1 .487.283v.25c0 1.265 1.368 2.058 2.463 1.426l1.657-.949 1.633-.934c1.1-.638 1.1-2.224 0-2.856ZM9.749 20.724C9.447 22.014 8.338 22.9 6.903 22.9 5.246 22.9 4 21.654 4 20.007c0-1.647 1.265-2.903 2.926-2.903 1.402 0 2.497.888 2.813 2.153H8.281a1.524 1.524 0 0 0-1.345-.84c-.83 0-1.525.684-1.525 1.59s.694 1.59 1.525 1.59a1.47 1.47 0 0 0 1.354-.873H9.75ZM10.405 22.81V14.9h1.411v7.91h-1.411ZM13.94 20.38c.1.83.694 1.298 1.444 1.298.595 0 1.053-.279 1.322-.727h1.444c-.335 1.19-1.402 1.95-2.803 1.95-1.695 0-2.88-1.19-2.88-2.88s1.256-2.912 2.913-2.912c1.67 0 2.879 1.232 2.879 2.912 0 .123-.01.246-.033.359H13.94Zm2.813-.878c-.099-.727-.694-1.166-1.388-1.166-.693 0-1.264.425-1.41 1.166h2.798ZM23.3 22.81v-.726c-.416.505-1.03.816-1.77.816-1.535 0-2.7-1.231-2.7-2.893 0-1.647 1.208-2.903 2.732-2.903.718 0 1.322.312 1.737.808v-.709h1.379v5.603h-1.379v.005Zm-.015-2.803c0-.94-.684-1.605-1.524-1.605s-1.525.67-1.525 1.605c0 .92.684 1.605 1.525 1.605.84 0 1.524-.66 1.524-1.605Z"
fill="#000"
/>
fill="#000"/>
</svg>
/* eslint-enable */
);

33
packages/js/onboarding/src/images/payment-methods/ideal.js
View File

@ -3,34 +3,37 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
export const Ideal = () => (
/* eslint-disable */
<svg
width="64"
height="40"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="64" height="40" fill="white" />
<path fill="#fff" d="M0 0h64v40H0z"/>
<mask
id="mask0_1_73"
id="a"
width={64}
height={40}
x={0}
y={0}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="64"
height="40"
style={{
maskType: 'luminance',
}}
>
<path d="M0.0249939 0H63.72V40H0.0249939V0Z" fill="white" />
<path fill="#fff" d="M.025 0H63.72v40H.025V0Z"/>
</mask>
<g mask="url(#mask0_1_73)">
<g mask="url(#a)">
<path
d="M34.398 6C38.272 6.07 41.544 7.194 43.874 9.272C45.2188 10.4824 46.2595 11.9925 46.912 13.68C47.632 15.502 48 17.63 48 20C48 24.96 46.606 28.662 43.86 31.01C41.6 32.938 38.416 33.94 34.398 33.994V34H16V6H34.398ZM34.05 7.86H17.852V32.14H34.05C42.19 32.14 46.148 28.17 46.148 20C46.148 15.878 44.968 12.736 42.644 10.664C40.588 8.83 37.616 7.86 34.05 7.86ZM25.99 19.15V27.93H20.7V19.15H25.99ZM23.392 11.766C23.7852 11.766 24.1745 11.8434 24.5378 11.9939C24.901 12.1444 25.2311 12.3649 25.5091 12.6429C25.7871 12.9209 26.0076 13.251 26.1581 13.6142C26.3086 13.9775 26.386 14.3668 26.386 14.76C26.386 15.1532 26.3086 15.5425 26.1581 15.9058C26.0076 16.269 25.7871 16.5991 25.5091 16.8771C25.2311 17.1551 24.901 17.3756 24.5378 17.5261C24.1745 17.6766 23.7852 17.754 23.392 17.754C22.5979 17.754 21.8364 17.4386 21.2749 16.8771C20.7134 16.3156 20.398 15.5541 20.398 14.76C20.398 13.9659 20.7134 13.2044 21.2749 12.6429C21.8364 12.0814 22.5979 11.766 23.392 11.766Z"
fill="black"
fill="#000"
d="M34.398 6c3.874.07 7.146 1.194 9.476 3.272a11.52 11.52 0 0 1 3.038 4.408C47.632 15.502 48 17.63 48 20c0 4.96-1.394 8.662-4.14 11.01-2.26 1.928-5.444 2.93-9.462 2.984V34H16V6h18.398Zm-.348 1.86H17.852v24.28H34.05c8.14 0 12.098-3.97 12.098-12.14 0-4.122-1.18-7.264-3.504-9.336C40.588 8.83 37.616 7.86 34.05 7.86Zm-8.06 11.29v8.78H20.7v-8.78h5.29Zm-2.598-7.384a2.994 2.994 0 1 1 0 5.987 2.994 2.994 0 0 1 0-5.987Z"
/>
<path
d="M33.796 28.152H28.416V11.48H33.796H33.576C38.064 11.48 42.838 13.254 42.838 19.836C42.838 26.794 38.064 28.148 33.578 28.148H33.796V28.152Z"
fill="#DB4093"
d="M33.796 28.152h-5.38V11.48h5.38-.22c4.488 0 9.262 1.774 9.262 8.356 0 6.958-4.774 8.312-9.26 8.312h.218v.004Z"
/>
</g>
</svg>
/* eslint-enable */
);

6
packages/js/onboarding/src/images/payment-methods/index.js Normal file
View File

@ -0,0 +1,6 @@
export * from './affirm';
export * from './afterpay';
export * from './clearpay';
export * from './ideal';
export * from './klarna';
export * from './woopay';

21
packages/js/onboarding/src/images/payment-methods/klarna.js
View File

@ -3,20 +3,13 @@
*/
import { createElement } from '@wordpress/element';
export default () => (
<svg
width="64"
height="40"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="64" height="40" fill="#FFB3C7" />
<path
fillRule="evenodd"
clipRule="evenodd"
export const Klarna = () => (
/* eslint-disable */
<svg viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="40" fill="#FFB3C7"/>
<path fillRule="evenodd" clipRule="evenodd"
d="M57.4626 23.0076C56.6136 23.0076 55.9253 23.7021 55.9253 24.5588C55.9253 25.4154 56.6136 26.1101 57.4626 26.1101C58.3116 26.1101 59 25.4155 59 24.5588C59 23.702 58.3116 23.0076 57.4626 23.0076ZM52.4048 21.8083C52.4048 20.6353 51.4112 19.6846 50.1855 19.6846C48.9599 19.6846 47.9662 20.6353 47.9662 21.8083C47.9662 22.9812 48.9597 23.9322 50.1855 23.9322C51.4113 23.9322 52.4048 22.9812 52.4048 21.8083ZM52.413 17.6807H54.8622V25.9355H52.413V25.4079C51.7211 25.8841 50.8858 26.164 49.985 26.164C47.601 26.164 45.6684 24.2139 45.6684 21.8082C45.6684 19.4025 47.601 17.4525 49.985 17.4525C50.8858 17.4525 51.7211 17.7324 52.413 18.2088V17.6807ZM32.8122 18.756V17.6808H30.3045V25.9355H32.8178V22.0815C32.8178 20.7812 34.2145 20.0823 35.1835 20.0823C35.1935 20.0823 35.2027 20.0833 35.2127 20.0834V17.6815C34.218 17.6815 33.3032 18.1111 32.8122 18.756ZM26.5656 21.8083C26.5656 20.6353 25.572 19.6847 24.3463 19.6847C23.1206 19.6847 22.1269 20.6354 22.1269 21.8083C22.1269 22.9813 23.1206 23.9322 24.3463 23.9322C25.572 23.9322 26.5656 22.9813 26.5656 21.8083ZM26.5737 17.6807H29.0231V25.9355H26.5737V25.408C25.8818 25.8841 25.0466 26.1641 24.1458 26.1641C21.7618 26.1641 19.8291 24.2139 19.8291 21.8082C19.8291 19.4026 21.7618 17.4526 24.1458 17.4526C25.0466 17.4526 25.8818 17.7325 26.5737 18.2088V17.6807ZM41.3162 17.4587C40.3378 17.4587 39.4117 17.7652 38.7927 18.6109V17.6812H36.3539V25.9356H38.8226V21.5977C38.8226 20.3424 39.6568 19.7277 40.6613 19.7277C41.7378 19.7277 42.3566 20.3766 42.3566 21.5806V25.9356H44.803V20.6863C44.803 18.7653 43.2894 17.4587 41.3162 17.4587ZM16.2614 25.9356H18.825V14.0022H16.2614V25.9356ZM5 25.9389H7.71458V14H5V25.9389ZM14.4947 14C14.4947 16.5847 13.4965 18.9891 11.7178 20.7762L15.4701 25.9393H12.1173L8.03934 20.3282L9.09178 19.5328C10.8371 18.2136 11.8382 16.197 11.8382 14L14.4947 14Z"
fill="#0A0B09"
/>
fill="#0A0B09"/>
</svg>
/* eslint-enable */
);

37
packages/js/onboarding/src/images/payment-methods/woo.js
View File

@ -1,37 +0,0 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export default () => (
<svg
width="64"
height="40"
viewBox="0 0 64 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M61 0H3C1.34315 0 0 1.34315 0 3V37C0 38.6569 1.34315 40 3 40H61C62.6569 40 64 38.6569 64 37V3C64 1.34315 62.6569 0 61 0Z"
fill="#674399"
/>
<path
d="M40.8254 15.7289C41.7593 15.7289 42.508 15.9512 43.0713 16.396C43.6346 16.8407 43.9163 17.4263 43.9163 18.1527C43.9163 18.9161 43.6272 19.5165 43.0565 19.9464C42.4857 20.3763 41.6926 20.5987 40.6771 20.5987H40.3065V23.5858H38.1644V15.7289H40.8254ZM40.314 17.2336V19.0866C40.7958 19.0792 41.1515 19.0051 41.3739 18.8568C41.6037 18.7086 41.7149 18.4788 41.7149 18.1675C41.7149 17.8266 41.6037 17.5893 41.3813 17.4559C41.1664 17.3151 40.8105 17.241 40.314 17.2336Z"
fill="white"
/>
<path
d="M50.565 23.5784H48.3414L47.9781 22.2664H45.7175L45.3468 23.5784H43.1676L45.6655 15.7215H48.0671L50.565 23.5784ZM47.5705 20.8582C47.2517 19.687 47.0072 18.5751 46.8515 17.5226H46.8219C46.6513 18.6122 46.4142 19.7241 46.1103 20.8582H47.5705Z"
fill="white"
/>
<path
d="M49.2827 15.7289H51.6842C52.2179 16.8555 52.6033 17.7302 52.8405 18.338H52.8701C53.1074 17.708 53.4928 16.8407 54.0116 15.7289H56.4651L53.9375 20.0279V23.5784H51.7732V20.0279L49.2827 15.7289Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M33.4238 12.9999H10.6165C9.17111 12.9999 8 14.171 8 15.6091V24.3109C8 25.7489 9.17111 26.92 10.6091 26.92H21.4161L26.36 29.6699L25.2407 26.92H33.4238C34.8618 26.92 36.0329 25.7489 36.0329 24.3109V15.6091C36.0329 14.171 34.8618 12.9999 33.4238 12.9999ZM10.1348 15.0087C9.85306 15.0161 9.59364 15.1495 9.41577 15.3644C9.24524 15.5868 9.17853 15.8685 9.2379 16.1501C9.91235 20.4492 10.5424 23.3474 11.128 24.8446C11.3429 25.3931 11.6097 25.6525 11.9211 25.6303C12.3954 25.5932 12.9736 24.9335 13.6481 23.6364C13.7981 23.3364 13.9809 22.9721 14.1956 22.5442L14.197 22.5413C14.5019 21.9336 14.8709 21.1982 15.301 20.338C15.9237 22.495 16.7687 24.1182 17.836 25.2078C18.1399 25.5117 18.4364 25.6525 18.7403 25.6303C18.9997 25.6155 19.2369 25.4524 19.348 25.2152C19.4593 24.9855 19.5112 24.726 19.4815 24.4666C19.4073 23.4214 19.5186 21.9613 19.8002 20.1008C20.0893 18.1737 20.4599 16.795 20.9047 15.9648C20.9936 15.8018 21.0307 15.6091 21.0158 15.4163C21.001 15.1569 20.875 14.9123 20.6674 14.7567C20.4673 14.5861 20.2079 14.5046 19.9484 14.5268C19.6223 14.5417 19.3333 14.7344 19.1924 15.0308C18.4882 16.328 17.9842 18.4331 17.6804 21.3386C17.1985 20.0712 16.8354 18.7592 16.5981 17.425C16.4721 16.7431 16.1608 16.4244 15.6568 16.4615C15.3084 16.4836 15.0268 16.7135 14.797 17.1433L12.2843 21.9168C11.8766 20.2491 11.4912 18.2181 11.1354 15.8314C11.0464 15.2458 10.7129 14.9716 10.1348 15.0087ZM26.8567 17.1656C26.4712 16.4762 25.8042 15.9871 25.0259 15.8388C24.8183 15.7943 24.6108 15.7721 24.4032 15.7721C23.3063 15.7721 22.4093 16.3428 21.7126 17.4843C21.1196 18.4553 20.8083 19.5745 20.8232 20.7086C20.8232 21.5906 21.0085 22.3467 21.3716 22.9767C21.7571 23.6661 22.4242 24.1552 23.2024 24.3035C23.41 24.348 23.6175 24.3702 23.8251 24.3702C24.9295 24.3702 25.8263 23.7995 26.5157 22.658C27.1087 21.6796 27.42 20.5604 27.4052 19.4115C27.4052 18.5294 27.2199 17.7808 26.8567 17.1656ZM25.4113 20.3454C25.2556 21.094 24.9665 21.6573 24.5367 22.0428C24.2031 22.3467 23.8918 22.4653 23.6101 22.4134C23.3284 22.3615 23.1061 22.1095 22.9356 21.6722C22.8096 21.3386 22.7355 20.9902 22.7355 20.6271C22.7355 20.3454 22.7651 20.0638 22.817 19.7895C22.9283 19.3003 23.1283 18.8407 23.4248 18.4257C23.8028 17.8697 24.2031 17.6326 24.6182 17.7215C24.8998 17.7808 25.1222 18.0254 25.2927 18.4627C25.4187 18.7963 25.4928 19.1447 25.4928 19.5004C25.4928 19.7821 25.4706 20.0638 25.4113 20.3454ZM32.2008 15.8388C32.979 15.9871 33.6461 16.4762 34.0316 17.1656C34.3948 17.7808 34.5801 18.5294 34.5801 19.4115C34.5949 20.5604 34.2836 21.6796 33.6907 22.658C33.0013 23.7995 32.1044 24.3702 31 24.3702C30.7925 24.3702 30.5849 24.348 30.3774 24.3035C29.5991 24.1552 28.932 23.6661 28.5466 22.9767C28.1834 22.3467 27.998 21.5906 27.998 20.7086C27.9833 19.5745 28.2946 18.4553 28.8876 17.4843C29.5843 16.3428 30.4812 15.7721 31.5782 15.7721C31.7857 15.7721 31.9932 15.7943 32.2008 15.8388ZM31.7116 22.0428C32.1415 21.6573 32.4306 21.094 32.5862 20.3454C32.6456 20.0638 32.6677 19.7821 32.6677 19.5004C32.6677 19.1447 32.5936 18.7963 32.4676 18.4627C32.2972 18.0254 32.0748 17.7808 31.7931 17.7215C31.378 17.6326 30.9778 17.8697 30.5998 18.4257C30.3032 18.8407 30.1031 19.3003 29.992 19.7895C29.9401 20.0638 29.9104 20.3454 29.9104 20.6271C29.9104 20.9902 29.9845 21.3386 30.1105 21.6722C30.2811 22.1095 30.5034 22.3615 30.7851 22.4134C31.0668 22.4653 31.378 22.3467 31.7116 22.0428Z"
fill="white"
/>
</svg>
);

26
packages/js/onboarding/src/images/payment-methods/woopay.js Normal file
View File

@ -0,0 +1,26 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
export const WooPay = () => (
/* eslint-disable */
<svg viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M61 0H3C1.34315 0 0 1.34315 0 3V37C0 38.6569 1.34315 40 3 40H61C62.6569 40 64 38.6569 64 37V3C64 1.34315 62.6569 0 61 0Z"
fill="#674399"/>
<path
d="M40.8254 15.7289C41.7593 15.7289 42.508 15.9512 43.0713 16.396C43.6346 16.8407 43.9163 17.4263 43.9163 18.1527C43.9163 18.9161 43.6272 19.5165 43.0565 19.9464C42.4857 20.3763 41.6926 20.5987 40.6771 20.5987H40.3065V23.5858H38.1644V15.7289H40.8254ZM40.314 17.2336V19.0866C40.7958 19.0792 41.1515 19.0051 41.3739 18.8568C41.6037 18.7086 41.7149 18.4788 41.7149 18.1675C41.7149 17.8266 41.6037 17.5893 41.3813 17.4559C41.1664 17.3151 40.8105 17.241 40.314 17.2336Z"
fill="white"/>
<path
d="M50.565 23.5784H48.3414L47.9781 22.2664H45.7175L45.3468 23.5784H43.1676L45.6655 15.7215H48.0671L50.565 23.5784ZM47.5705 20.8582C47.2517 19.687 47.0072 18.5751 46.8515 17.5226H46.8219C46.6513 18.6122 46.4142 19.7241 46.1103 20.8582H47.5705Z"
fill="white"/>
<path
d="M49.2827 15.7289H51.6842C52.2179 16.8555 52.6033 17.7302 52.8405 18.338H52.8701C53.1074 17.708 53.4928 16.8407 54.0116 15.7289H56.4651L53.9375 20.0279V23.5784H51.7732V20.0279L49.2827 15.7289Z"
fill="white"/>
<path fillRule="evenodd" clipRule="evenodd"
d="M33.4238 12.9999H10.6165C9.17111 12.9999 8 14.171 8 15.6091V24.3109C8 25.7489 9.17111 26.92 10.6091 26.92H21.4161L26.36 29.6699L25.2407 26.92H33.4238C34.8618 26.92 36.0329 25.7489 36.0329 24.3109V15.6091C36.0329 14.171 34.8618 12.9999 33.4238 12.9999ZM10.1348 15.0087C9.85306 15.0161 9.59364 15.1495 9.41577 15.3644C9.24524 15.5868 9.17853 15.8685 9.2379 16.1501C9.91235 20.4492 10.5424 23.3474 11.128 24.8446C11.3429 25.3931 11.6097 25.6525 11.9211 25.6303C12.3954 25.5932 12.9736 24.9335 13.6481 23.6364C13.7981 23.3364 13.9809 22.9721 14.1956 22.5442L14.197 22.5413C14.5019 21.9336 14.8709 21.1982 15.301 20.338C15.9237 22.495 16.7687 24.1182 17.836 25.2078C18.1399 25.5117 18.4364 25.6525 18.7403 25.6303C18.9997 25.6155 19.2369 25.4524 19.348 25.2152C19.4593 24.9855 19.5112 24.726 19.4815 24.4666C19.4073 23.4214 19.5186 21.9613 19.8002 20.1008C20.0893 18.1737 20.4599 16.795 20.9047 15.9648C20.9936 15.8018 21.0307 15.6091 21.0158 15.4163C21.001 15.1569 20.875 14.9123 20.6674 14.7567C20.4673 14.5861 20.2079 14.5046 19.9484 14.5268C19.6223 14.5417 19.3333 14.7344 19.1924 15.0308C18.4882 16.328 17.9842 18.4331 17.6804 21.3386C17.1985 20.0712 16.8354 18.7592 16.5981 17.425C16.4721 16.7431 16.1608 16.4244 15.6568 16.4615C15.3084 16.4836 15.0268 16.7135 14.797 17.1433L12.2843 21.9168C11.8766 20.2491 11.4912 18.2181 11.1354 15.8314C11.0464 15.2458 10.7129 14.9716 10.1348 15.0087ZM26.8567 17.1656C26.4712 16.4762 25.8042 15.9871 25.0259 15.8388C24.8183 15.7943 24.6108 15.7721 24.4032 15.7721C23.3063 15.7721 22.4093 16.3428 21.7126 17.4843C21.1196 18.4553 20.8083 19.5745 20.8232 20.7086C20.8232 21.5906 21.0085 22.3467 21.3716 22.9767C21.7571 23.6661 22.4242 24.1552 23.2024 24.3035C23.41 24.348 23.6175 24.3702 23.8251 24.3702C24.9295 24.3702 25.8263 23.7995 26.5157 22.658C27.1087 21.6796 27.42 20.5604 27.4052 19.4115C27.4052 18.5294 27.2199 17.7808 26.8567 17.1656ZM25.4113 20.3454C25.2556 21.094 24.9665 21.6573 24.5367 22.0428C24.2031 22.3467 23.8918 22.4653 23.6101 22.4134C23.3284 22.3615 23.1061 22.1095 22.9356 21.6722C22.8096 21.3386 22.7355 20.9902 22.7355 20.6271C22.7355 20.3454 22.7651 20.0638 22.817 19.7895C22.9283 19.3003 23.1283 18.8407 23.4248 18.4257C23.8028 17.8697 24.2031 17.6326 24.6182 17.7215C24.8998 17.7808 25.1222 18.0254 25.2927 18.4627C25.4187 18.7963 25.4928 19.1447 25.4928 19.5004C25.4928 19.7821 25.4706 20.0638 25.4113 20.3454ZM32.2008 15.8388C32.979 15.9871 33.6461 16.4762 34.0316 17.1656C34.3948 17.7808 34.5801 18.5294 34.5801 19.4115C34.5949 20.5604 34.2836 21.6796 33.6907 22.658C33.0013 23.7995 32.1044 24.3702 31 24.3702C30.7925 24.3702 30.5849 24.348 30.3774 24.3035C29.5991 24.1552 28.932 23.6661 28.5466 22.9767C28.1834 22.3467 27.998 21.5906 27.998 20.7086C27.9833 19.5745 28.2946 18.4553 28.8876 17.4843C29.5843 16.3428 30.4812 15.7721 31.5782 15.7721C31.7857 15.7721 31.9932 15.7943 32.2008 15.8388ZM31.7116 22.0428C32.1415 21.6573 32.4306 21.094 32.5862 20.3454C32.6456 20.0638 32.6677 19.7821 32.6677 19.5004C32.6677 19.1447 32.5936 18.7963 32.4676 18.4627C32.2972 18.0254 32.0748 17.7808 31.7931 17.7215C31.378 17.6326 30.9778 17.8697 30.5998 18.4257C30.3032 18.8407 30.1031 19.3003 29.992 19.7895C29.9401 20.0638 29.9104 20.3454 29.9104 20.6271C29.9104 20.9902 29.9845 21.3386 30.1105 21.6722C30.2811 22.1095 30.5034 22.3615 30.7851 22.4134C31.0668 22.4653 31.378 22.3467 31.7116 22.0428Z"
fill="white"/>
</svg>
/* eslint-enable */
);

59
packages/js/onboarding/src/images/wcpay-logo.tsx
View File

@ -3,62 +3,21 @@
*/
import { createElement } from '@wordpress/element';
export default ( { width = 196, height = 41 } ) => (
<svg
width={ width }
height={ height }
viewBox={ `0 0 ${ width } ${ height }` }
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>WooPayments</title>
export default () => (
<svg viewBox="0 0 2730 557" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill="#000"
d="M1014.35 104.33h88.26c31.15 0 56.12 7.42 74.91 22.25s28.18 34.36 28.18 58.59c0 25.46-9.64 45.49-28.67 59.83-19.04 14.34-45.49 21.75-79.36 21.75h-12.36v99.63h-71.45V104.33h.49Zm71.2 50.18v61.8c16.07-.24 27.94-2.71 35.36-7.65 7.66-4.95 11.37-12.61 11.37-23 0-11.37-3.71-19.28-11.13-23.73-7.17-4.7-19.03-7.17-35.6-7.42Zm341.91 211.87h-74.17l-12.11-43.76h-75.4l-12.36 43.76h-72.69l83.32-262.05h80.1l83.31 262.05Zm-99.88-90.97c-10.63-39.07-18.79-76.15-23.98-111.25h-.99a1064.89 1064.89 0 0 1-23.73 111.25h48.7Zm57.11-171.08h80.1c17.8 37.58 30.66 66.75 38.57 87.02h.99c7.91-21.01 20.76-49.94 38.07-87.02h81.83l-84.3 143.39v118.42h-72.19V247.72l-83.07-143.4Zm261.81 0h90.24c12.85 56.61 22.99 105.07 30.4 145.86l7.67-40.55c3.21-15.82 6.43-31.15 10.13-46.23l13.85-58.84h91.97l35.84 262.06h-70.7l-19.04-180.22-44 180.22h-48.21l-46.23-180.47-18.3 180.47h-67.49l33.87-262.3Zm301.61 0h144.38v55.62h-72.93v48.21h63.29v54.39h-63.29v47.71h73.42v55.88h-144.87V104.33Zm171.33 0h71.94l90.73 151.05-2.47-28.18V104.33h71.44v262.05h-73.17l-88.76-148.82 1.98 32.63v116.2h-71.45V104.32h-.24Zm250.43 0h170.34v59.83h-49.2v202.22h-72.19V164.16h-48.7v-59.83h-.25Zm199.51 257.1v-61.06c22.5 10.88 41.53 16.57 57.11 16.57 8.9 0 16.07-1.98 21.26-6.18 5.19-4.2 7.66-9.64 7.66-16.32 0-5.19-1.97-10.13-6.18-14.83-4.2-4.7-11.37-10.14-21.5-16.57-24.73-15.82-42.53-30.4-53.65-43.75-11.13-13.6-16.57-28.68-16.57-45.25 0-22.74 8.66-41.03 25.72-55.37 17.05-14.34 39.3-21.51 66.5-21.51 20.02 0 40.05 3.7 59.83 10.88v58.59c-21.27-9.64-38.32-14.59-51.67-14.59-8.9 0-15.83 1.73-20.77 5.44-5.19 3.7-7.66 8.65-7.66 14.83 0 10.88 11.86 23.24 35.6 37.09 14.09 8.16 28.43 19.53 43.01 34.36 14.59 14.83 21.76 31.65 21.76 51.18 0 22.74-9.4 41.28-28.43 56.12-19.04 14.83-43.02 22.25-72.19 22.25-20.27-.25-40.05-4.2-59.83-11.87Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.16119 0H60.1988C63.6186 0 66.387 2.74594 66.387 6.13799V26.598C66.387 29.99 63.6186 32.736 60.1988 32.736H40.8202L43.48 39.197L31.7823 32.736H6.18833C2.76858 32.736 0.000197874 29.99 0.000197874 26.598V6.13799C-0.0269431 2.77286 2.74143 0 6.16119 0Z"
fill="#7F54B3"
/>
<path
fillRule="evenodd"
d="M87.27 0h760.7C895.93 0 935 39.06 935 87.02v290.24c0 47.96-39.06 87.02-87.02 87.02H575.04L612.37 556l-164.9-91.72H87.02C39.06 464.28 0 425.22 0 377.26V87.02C0 39.06 39.06 0 87.27 0Z"
clipRule="evenodd"
d="M3.88666 5.40393C4.26664 4.89243 4.8366 4.62322 5.59655 4.56938C6.98073 4.46169 7.76782 5.1078 7.95781 6.50769C8.79918 12.1342 9.72197 16.8992 10.699 20.8028L16.6429 9.57669C17.1857 8.55369 17.8643 8.01527 18.6785 7.96143C19.8727 7.88066 20.6055 8.63445 20.904 10.2228C21.5826 13.8033 22.4511 16.8454 23.4824 19.4298C24.1881 12.5918 25.3823 7.6653 27.065 4.62322C27.4722 3.86943 28.0692 3.49254 28.8563 3.4387C29.4806 3.38486 30.0505 3.5733 30.5662 3.97712C31.0819 4.38093 31.3533 4.89243 31.4076 5.51161C31.4347 5.99619 31.3533 6.40001 31.1362 6.80383C30.0777 8.74214 29.2092 11.9996 28.5035 16.5223C27.825 20.9104 27.5807 24.3294 27.7436 26.7792C27.7978 27.4522 27.6893 28.0445 27.4179 28.556C27.0922 29.1483 26.6036 29.4713 25.9794 29.5252C25.2737 29.579 24.5409 29.256 23.8353 28.5291C21.3112 25.9716 19.3027 22.1488 17.8371 17.0607C16.073 20.5066 14.7702 23.091 13.9288 24.814C12.3275 27.8561 10.9705 29.4175 9.83053 29.4982C9.09773 29.5521 8.47349 28.9329 7.93067 27.6407C6.54648 24.114 5.05373 17.303 3.45241 7.20764C3.37099 6.5077 3.50669 5.88851 3.88666 5.40393ZM62.24 9.6307C61.263 7.93467 59.8245 6.91167 57.8975 6.50786C57.3818 6.40017 56.8933 6.34633 56.4319 6.34633C53.8263 6.34633 51.7094 7.69238 50.0537 10.3845C48.6424 12.6728 47.9368 15.2033 47.9368 17.9762C47.9368 20.0491 48.371 21.8259 49.2395 23.3066C50.2166 25.0026 51.6551 26.0256 53.5821 26.4294C54.0978 26.5371 54.5863 26.5909 55.0477 26.5909C57.6804 26.5909 59.7974 25.2449 61.4258 22.5528C62.8371 20.2376 63.5428 17.707 63.5428 14.9341C63.5428 12.8343 63.1086 11.0844 62.24 9.6307ZM58.8203 17.0878C58.4403 18.8646 57.7618 20.1837 56.7576 21.0721C55.9705 21.7721 55.2377 22.0682 54.5592 21.9336C53.9078 21.799 53.365 21.2337 52.9578 20.1837C52.6321 19.3492 52.4693 18.5146 52.4693 17.7339C52.4693 17.0609 52.5236 16.3879 52.6593 15.7687C52.9036 14.6649 53.365 13.5881 54.0978 12.5651C54.9934 11.246 55.9433 10.7075 56.9204 10.896C57.5718 11.0306 58.1146 11.5959 58.5217 12.6458C58.8474 13.4804 59.0103 14.315 59.0103 15.0957C59.0103 15.7956 58.9288 16.4686 58.8203 17.0878ZM40.8794 6.50786C42.7793 6.91167 44.2449 7.93467 45.222 9.6307C46.0905 11.0844 46.5247 12.8343 46.5247 14.9341C46.5247 17.707 45.8191 20.2376 44.4077 22.5528C42.7793 25.2449 40.6623 26.5909 38.0296 26.5909C37.5682 26.5909 37.0797 26.5371 36.564 26.4294C34.637 26.0256 33.1985 25.0026 32.2214 23.3066C31.3529 21.8259 30.9187 20.0491 30.9187 17.9762C30.9187 15.2033 31.6243 12.6728 33.0357 10.3845C34.6913 7.69238 36.8083 6.34633 39.4138 6.34633C39.8752 6.34633 40.3637 6.40017 40.8794 6.50786ZM39.7395 21.0721C40.7437 20.1837 41.4222 18.8646 41.8022 17.0878C41.9379 16.4686 41.9922 15.7956 41.9922 15.0957C41.9922 14.315 41.8293 13.4804 41.5036 12.6458C41.0965 11.5959 40.5537 11.0306 39.9023 10.896C38.9253 10.7075 37.9753 11.246 37.0797 12.5651C36.3469 13.5881 35.8855 14.6649 35.6412 15.7687C35.5055 16.3879 35.4512 17.0609 35.4512 17.7339C35.4512 18.5146 35.6141 19.3492 35.9398 20.1837C36.3469 21.2337 36.8897 21.799 37.5411 21.9336C38.2196 22.0682 38.9524 21.7721 39.7395 21.0721Z"
fill="white"
/>
<path
d="M143.023 29.9316V38.217H144.057V35.26H146.141C147.697 35.26 148.805 34.1633 148.805 32.613C148.805 31.0341 147.72 29.9316 146.153 29.9316H143.023ZM144.057 30.8503H145.883C147.083 30.8503 147.743 31.4762 147.743 32.613C147.743 33.7097 147.06 34.3413 145.883 34.3413H144.057V30.8503Z"
fill="black"
/>
<path
d="M151.866 38.3261C152.693 38.3261 153.37 37.9643 153.772 37.304H153.864V38.217H154.806V33.9796C154.806 32.6934 153.961 31.9183 152.451 31.9183C151.131 31.9183 150.155 32.5728 150.023 33.5662H151.022C151.159 33.0781 151.676 32.7968 152.417 32.7968C153.341 32.7968 153.818 33.2159 153.818 33.9796V34.5423L152.032 34.6514C150.591 34.7375 149.776 35.3748 149.776 36.483C149.776 37.6141 150.666 38.3261 151.866 38.3261ZM152.049 37.4591C151.332 37.4591 150.798 37.0916 150.798 36.46C150.798 35.8399 151.211 35.5126 152.153 35.4495L153.818 35.3404V35.9088C153.818 36.793 153.066 37.4591 152.049 37.4591Z"
fill="black"
/>
<path
d="M156.93 40.4563C158.027 40.4563 158.52 40.0314 159.049 38.5959L161.466 32.0274H160.415L158.721 37.1203H158.63L156.93 32.0274H155.862L158.153 38.2227L158.038 38.5902C157.78 39.3366 157.47 39.6065 156.901 39.6065C156.763 39.6065 156.608 39.6007 156.488 39.5778V40.4218C156.626 40.4448 156.798 40.4563 156.93 40.4563Z"
fill="black"
/>
<path
d="M162.787 38.217H163.774V34.3815C163.774 33.5087 164.4 32.8083 165.21 32.8083C165.99 32.8083 166.501 33.2791 166.501 34.014V38.217H167.489V34.238C167.489 33.4513 168.063 32.8083 168.924 32.8083C169.797 32.8083 170.228 33.2561 170.228 34.1691V38.217H171.215V33.9394C171.215 32.6417 170.509 31.9183 169.246 31.9183C168.39 31.9183 167.684 32.3489 167.351 33.0035H167.259C166.972 32.3604 166.387 31.9183 165.548 31.9183C164.722 31.9183 164.101 32.3145 163.82 33.0035H163.728V32.0274H162.787V38.217Z"
fill="black"
/>
<path
d="M177.118 36.615C176.86 37.1605 176.32 37.4533 175.522 37.4533C174.471 37.4533 173.788 36.6782 173.736 35.4552V35.4093H178.186V35.0303C178.186 33.1068 177.17 31.9183 175.499 31.9183C173.799 31.9183 172.708 33.1815 172.708 35.1279C172.708 37.0859 173.782 38.3261 175.499 38.3261C176.854 38.3261 177.818 37.6715 178.106 36.615H177.118ZM175.487 32.791C176.469 32.791 177.124 33.5145 177.147 34.6112H173.736C173.811 33.5145 174.5 32.791 175.487 32.791Z"
fill="black"
/>
<path
d="M179.736 38.217H180.724V34.5537C180.724 33.4686 181.361 32.8083 182.349 32.8083C183.336 32.8083 183.807 33.3365 183.807 34.4504V38.217H184.795V34.2092C184.795 32.7394 184.02 31.9183 182.63 31.9183C181.683 31.9183 181.08 32.3202 180.77 33.0035H180.678V32.0274H179.736V38.217Z"
fill="black"
/>
<path
d="M187.017 30.4254V32.0274H186.018V32.8542H187.017V36.6093C187.017 37.7921 187.528 38.2629 188.802 38.2629C188.998 38.2629 189.187 38.24 189.382 38.2055V37.3729C189.199 37.3902 189.101 37.3959 188.923 37.3959C188.28 37.3959 188.004 37.0859 188.004 36.3567V32.8542H189.382V32.0274H188.004V30.4254H187.017Z"
fill="black"
/>
<path
d="M190.617 33.7212C190.617 34.6169 191.145 35.1164 192.305 35.3978L193.367 35.6562C194.027 35.8169 194.349 36.104 194.349 36.5289C194.349 37.0973 193.752 37.4935 192.919 37.4935C192.127 37.4935 191.633 37.1605 191.467 36.638H190.45C190.559 37.6658 191.507 38.3261 192.885 38.3261C194.292 38.3261 195.365 37.5624 195.365 36.4543C195.365 35.5643 194.803 35.059 193.637 34.7777L192.684 34.548C191.955 34.37 191.61 34.1059 191.61 33.681C191.61 33.1298 192.184 32.7566 192.919 32.7566C193.666 32.7566 194.148 33.0839 194.28 33.5777H195.256C195.124 32.5614 194.223 31.9183 192.925 31.9183C191.61 31.9183 190.617 32.6934 190.617 33.7212Z"
fill="black"
/>
<path
d="M73.2688 9.52456C71.4503 11.3014 70.5547 13.5627 70.5547 16.3087C70.5547 19.2431 71.4503 21.639 73.2416 23.4427C75.0329 25.2464 77.3671 26.1618 80.2711 26.1618C81.1125 26.1618 82.0625 26.0272 83.0938 25.731V21.3698C82.1439 21.639 81.3296 21.7736 80.624 21.7736C79.1855 21.7736 78.0456 21.289 77.1771 20.3468C76.3086 19.3777 75.8743 18.0854 75.8743 16.4433C75.8743 14.9088 76.3086 13.6435 77.1499 12.6743C78.0185 11.6782 79.0769 11.1937 80.3797 11.1937C81.2211 11.1937 82.1167 11.3283 83.0938 11.5975V7.23628C82.1982 6.99399 81.1939 6.8863 80.1354 6.8863C77.3671 6.85938 75.0872 7.74778 73.2688 9.52456ZM92.1046 6.85938C89.6076 6.85938 87.6535 7.69393 86.2422 9.33611C84.8308 10.9783 84.1523 13.2935 84.1523 16.2548C84.1523 19.4584 84.858 21.9082 86.2422 23.6043C87.6263 25.3003 89.6619 26.1618 92.3217 26.1618C94.9001 26.1618 96.8814 25.3003 98.2656 23.6043C99.6498 21.9082 100.355 19.5123 100.355 16.4433C100.355 13.3743 99.6498 11.0052 98.2384 9.33611C96.8 7.69393 94.7644 6.85938 92.1046 6.85938ZM94.2487 20.8583C93.7602 21.6121 93.0274 21.989 92.1046 21.989C91.2361 21.989 90.5847 21.6121 90.1233 20.8583C89.6619 20.1045 89.4448 18.5969 89.4448 16.3087C89.4448 12.782 90.3404 11.0321 92.1589 11.0321C94.0587 11.0321 95.0358 12.8089 95.0358 16.3894C95.0087 18.597 94.7373 20.1045 94.2487 20.8583ZM113.763 7.37088L112.786 11.4898C112.542 12.5397 112.297 13.6166 112.08 14.7203L111.538 17.5739C111.022 14.7203 110.316 11.3283 109.421 7.37088H103.124L100.763 25.7041H105.485L106.761 13.0781L109.99 25.7041H113.356L116.45 13.1051L117.78 25.7041H122.72L120.223 7.37088H113.763ZM136.371 7.37088L135.394 11.4898C135.15 12.5397 134.906 13.6166 134.689 14.7203L134.146 17.5739C133.63 14.7203 132.925 11.3283 132.029 7.37088H125.732L123.371 25.7041H128.093L129.369 13.0781L132.599 25.7041H135.964L139.031 13.1051L140.361 25.7041H145.301L142.804 7.37088H136.371ZM151.733 18.4623H156.157V14.6665H151.733V11.3013H156.836V7.3978H146.739V25.731H156.863V21.8275H151.733V18.4623ZM170.922 15.5549C171.438 14.7203 171.709 13.8588 171.709 12.9705C171.709 11.2475 171.03 9.87453 169.673 8.87845C168.316 7.88237 166.444 7.37088 164.11 7.37088H158.301V25.7041H163.295V17.3586H163.377L167.421 25.7041H172.686L168.696 17.4393C169.646 17.0086 170.406 16.3894 170.922 15.5549ZM163.268 15.2587V10.8975C164.462 10.9245 165.304 11.1129 165.819 11.4898C166.335 11.8667 166.579 12.4589 166.579 13.3204C166.579 14.5857 165.467 15.2318 163.268 15.2587ZM174.64 9.52456C172.822 11.3014 171.926 13.5627 171.926 16.3087C171.926 19.2431 172.822 21.639 174.613 23.4427C176.404 25.2464 178.738 26.1618 181.643 26.1618C182.484 26.1618 183.434 26.0272 184.465 25.731V21.3698C183.515 21.639 182.701 21.7736 181.995 21.7736C180.557 21.7736 179.417 21.289 178.548 20.3468C177.68 19.3777 177.246 18.0854 177.246 16.4433C177.246 14.9088 177.68 13.6435 178.521 12.6743C179.39 11.6782 180.448 11.1937 181.751 11.1937C182.592 11.1937 183.488 11.3283 184.465 11.5975V7.23628C183.57 6.99399 182.565 6.8863 181.507 6.8863C178.766 6.85938 176.459 7.74778 174.64 9.52456ZM190.843 21.7736V18.4354H195.267V14.6396H190.843V11.2744H195.973V7.37088H185.877V25.7041H196V21.8005H190.843V21.7736Z"
fill="black"
fill="#fff"
d="M47.22 78.86A32.28 32.28 0 0 1 71.2 67c19.28-1.24 30.4 7.9 33.38 27.44 11.86 79.6 24.72 147.34 38.31 202.97L226.7 138.2c7.67-14.34 17.06-22 28.68-22.75 16.81-1.23 27.2 9.4 31.4 32.14a724.61 724.61 0 0 0 36.1 130.53C333 181.22 349.81 111 373.3 67.75a29.33 29.33 0 0 1 25.21-16.81 32.68 32.68 0 0 1 23.98 7.66 29.64 29.64 0 0 1 11.62 22c.5 6.43-.74 12.86-3.7 18.3-14.84 27.69-27.2 73.67-36.84 137.95-9.4 62.05-13.1 110.75-10.63 145.61a45.6 45.6 0 0 1-4.45 24.97 24.2 24.2 0 0 1-20.27 13.85c-10.14.74-20.03-3.96-30.17-14.1-35.6-36.34-63.78-90.48-84.55-162.42-24.47 48.95-43.01 85.79-55.13 110.01-22.5 43.27-41.78 65.27-57.6 66.5-10.38.75-19.28-7.9-26.45-26.2-19.53-49.94-40.55-146.6-63.04-290a31.9 31.9 0 0 1 5.93-26.2Zm581.72 60.08a89.18 89.18 0 0 0-61.07-44.25 98.89 98.89 0 0 0-20.76-2.23c-36.6 0-66.5 19.04-89.75 57.1a201.58 201.58 0 0 0-29.66 107.55c0 29.42 6.18 54.64 18.3 75.65a89.19 89.19 0 0 0 61.05 44.25 98.88 98.88 0 0 0 20.77 2.23c36.84 0 66.75-19.04 89.74-57.11a203.52 203.52 0 0 0 29.67-108.28c0-29.42-6.18-54.4-18.3-74.91ZM580.73 245c-5.2 24.97-14.84 43.76-29.17 56.61-11.13 10.14-21.51 14.1-30.9 12.36-9.4-1.73-16.82-10.13-22.5-24.72-4.2-11.13-6.68-22.75-6.68-34.86 0-9.4.99-18.79 2.72-27.93a125.56 125.56 0 0 1 20.27-45.5c12.61-18.54 25.96-26.45 39.8-23.48 9.4 1.98 16.82 10.14 22.5 24.72 4.2 11.13 6.68 22.75 6.68 34.61 0 9.4-.75 18.8-2.72 28.19Zm287.51-106.06a89.18 89.18 0 0 0-61.06-44.25 98.89 98.89 0 0 0-20.77-2.23c-36.58 0-66.5 19.04-89.74 57.1a201.59 201.59 0 0 0-29.66 107.55c0 29.42 6.18 54.64 18.29 75.65a89.19 89.19 0 0 0 61.06 44.25 98.88 98.88 0 0 0 20.77 2.23c36.84 0 66.75-19.04 89.74-57.11a203.52 203.52 0 0 0 29.67-108.28c0-29.42-6.18-54.4-18.3-74.91ZM820.04 245c-5.2 24.97-14.84 43.76-29.18 56.61-11.12 10.14-21.5 14.1-30.9 12.36-9.4-1.73-16.81-10.13-22.5-24.72-4.2-11.13-6.67-22.75-6.67-34.86 0-9.4.99-18.79 2.72-27.93a125.56 125.56 0 0 1 20.27-45.5c12.6-18.54 25.96-26.45 39.8-23.48 9.4 1.98 16.82 10.14 22.5 24.72 4.2 11.13 6.68 22.75 6.68 34.61 0 9.4-.75 18.8-2.72 28.19Z"
/>
</svg>
);

21
packages/js/onboarding/src/index.ts
View File

@ -1,22 +1,9 @@
export * from './components/WCPayCard';
export * from './components/WCPayBanner';
export * from './components/WCPayBenefits';
export * from './components/WCPayConnectCard';
export * from './components/RecommendedRibbon';
export * from './components/SetupRequired';
export * from './components/WCPayAcceptedMethods';
export { default as Visa } from './images/cards/visa';
export { default as MasterCard } from './images/cards/mastercard';
export { default as Amex } from './images/cards/amex';
export { default as ApplePay } from './images/cards/applepay';
export { default as GooglePay } from './images/cards/googlepay';
export { default as Discover } from './images/cards/discover';
export { default as Diners } from './images/cards/diners';
export { default as Klarna } from './images/payment-methods/klarna';
export { default as Affirm } from './images/payment-methods/affirm';
export { default as AfterPay } from './images/payment-methods/afterpay';
export { default as ClearPay } from './images/payment-methods/clearpay';
export { default as Ideal } from './images/payment-methods/ideal';
export { default as Woo } from './images/payment-methods/woo';
export * from './images/cards';
export * from './images/payment-methods';
export { WooPay as Woo } from './images/payment-methods/woopay';
export { default as WCPayLogo } from './images/wcpay-logo';
export { WooPaymentGatewaySetup } from './components/WooPaymentGatewaySetup';
export { WooPaymentGatewayConfigure } from './components/WooPaymentGatewayConfigure';

4
packages/js/onboarding/src/style.scss
View File

@ -1,5 +1,3 @@
@import 'components/WCPayCard/WCPayCard.scss';
@import 'components/WCPayBanner/WCPayBanner.scss';
@import 'components/WCPayBenefits/WCPayBenefits.scss';
@import 'components/WCPayConnectCard/WCPayConnectCard.scss';
@import 'components/RecommendedRibbon/RecommendedRibbon.scss';
@import 'components/Loader/Loader.scss';

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

@ -1,17 +1,16 @@
/**
* External dependencies
*/
import { Card, CardBody, Button, CardDivider } from '@wordpress/components';
import { Button } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { WCPayConnectCard } from '@woocommerce/onboarding';
/**
* Internal dependencies
*/
import { getAdminSetting } from '~/utils/admin-settings';
import sanitizeHTML from '~/lib/sanitize-html';
import WooPaymentsLogo from './woopayments.svg';
import ExitSurveyModal from './exit-survey-modal';
import PaymentMethods from './payment-methods';
import strings from './strings';
interface Props {
@ -29,6 +28,7 @@ const Banner: React.FC< Props > = ( { isSubmitted, handleSetup } ) => {
const [ isExitSurveyModalOpen, setExitSurveyModalOpen ] = useState( false );
const isWooPayEligible = getAdminSetting( 'isWooPayEligible' );
const wccomSettings = getAdminSetting( 'wccomHelper', {} );
const handleNoThanks = () => {
setNoThanksClicked( true );
@ -36,18 +36,17 @@ const Banner: React.FC< Props > = ( { isSubmitted, handleSetup } ) => {
};
return (
<Card className="__CLASS__">
<CardBody className="woopayments-welcome-page__header">
<img src={ WooPaymentsLogo } alt="WooPayments logo" />
<h1>{ strings.heading( first_name ) }</h1>
</CardBody>
<CardBody className="woopayments-welcome-page__offer">
<>
<WCPayConnectCard
actionButton={
<div className="woopayments-welcome-page__offer">
<div className="woopayments-welcome-page__offer-pill">
{ strings.limitedTimeOffer }
</div>
<h2
dangerouslySetInnerHTML={ sanitizeHTML(
description + '<span class="tos-asterix">*</span>'
description +
'<span class="tos-asterix">*</span>'
) }
/>
<Button
@ -60,30 +59,31 @@ const Banner: React.FC< Props > = ( { isSubmitted, handleSetup } ) => {
</Button>
<Button
variant="tertiary"
isBusy={ isNoThanksClicked && isExitSurveyModalOpen }
disabled={ isNoThanksClicked && isExitSurveyModalOpen }
isBusy={
isNoThanksClicked && isExitSurveyModalOpen
}
disabled={
isNoThanksClicked && isExitSurveyModalOpen
}
onClick={ handleNoThanks }
>
{ strings.noThanks }
</Button>
<p>
{ isWooPayEligible
? strings.TosAndPpWooPay
: strings.TosAndPp }
</p>
<p>{ strings.TosAndPp }</p>
<p>{ strings.termsAndConditions( tc_url ) }</p>
</CardBody>
<CardDivider />
<CardBody className="woopayments-welcome-page__payments">
<p>{ strings.paymentOptions }</p>
<PaymentMethods />
</CardBody>
</div>
}
firstName={ first_name }
businessCountry={ wccomSettings?.storeCountry ?? '' }
isWooPayEligible={ isWooPayEligible }
showNotice={ true }
/>
{ isExitSurveyModalOpen && (
<ExitSurveyModal
setExitSurveyModalOpen={ setExitSurveyModalOpen }
/>
) }
</Card>
</>
);
};

51
plugins/woocommerce-admin/client/payments-welcome/payment-methods.tsx
View File

@ -1,51 +0,0 @@
/**
* External dependencies
*/
import {
Visa,
MasterCard,
Amex,
ApplePay,
GooglePay,
CB,
Discover,
Ideal,
Klarna,
Affirm,
AfterPay,
ClearPay,
Woo,
} from '@woocommerce/onboarding';
/**
* Internal dependencies
*/
import strings from './strings';
import { getAdminSetting } from '~/utils/admin-settings';
const PaymentMethods: React.FC = () => {
const wccomSettings = getAdminSetting( 'wccomHelper', false );
return (
<div className="woopayments-welcome-page__payment-methods">
<Visa />
<MasterCard />
<Amex />
<CB />
<Discover />
<Ideal />
<ApplePay />
<GooglePay />
<Woo />
<Klarna />
<Affirm />
{ wccomSettings && wccomSettings.storeCountry === 'GB' ? (
<ClearPay />
) : (
<AfterPay />
) }
<span>{ strings.andMore }</span>
</div>
);
};
export default PaymentMethods;

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

@ -7,19 +7,10 @@ import { createInterpolateElement } from '@wordpress/element';
export default {
noThanks: __( 'No thanks', 'woocommerce' ),
heading: ( firstName?: string ) =>
sprintf(
/* translators: %s: first name of the merchant, if it exists. */
__(
'Hi%s, run your business and manage your payments all in one place, with no setup costs or monthly fees.',
'woocommerce'
),
firstName ? ` ${ firstName }` : ''
),
limitedTimeOffer: __( 'Limited time offer', 'woocommerce' ),
TosAndPp: createInterpolateElement(
__(
'By using WooPayments you agree to our <a1>Terms of Service</a2> 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. ',
'The discount will be applied to payments processed via WooPayments upon completion of installation, setup, and connection. ',
'woocommerce'
),
{
@ -41,38 +32,6 @@ 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(
__(
@ -90,7 +49,6 @@ export default {
'WooPayments is pre-integrated with all popular payment options',
'woocommerce'
),
andMore: __( '& more', 'woocommerce' ),
learnMore: __( 'Learn more', 'woocommerce' ),
survey: {
title: __( 'No thanks, I don’t want WooPayments', 'woocommerce' ),

54
plugins/woocommerce-admin/client/payments-welcome/style.scss
View File

@ -10,34 +10,10 @@
margin: 0 0 $gap-large 0;
}
h1,
h2 {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: $gray-900;
}
&__header {
padding: $gap-larger;
img {
width: 143px;
}
@media (min-width: #{ ($break-small) }) {
padding-right: $gap-larger + 217px;
background: url(./incentive.svg) no-repeat;
background-position: right $gap-larger center;
}
}
&__offer {
margin: $gap-large;
margin-top: $gap-smallest;
padding: $gap-large;
border: 1px solid #ae7dd0;
border-radius: 8px;
background-color: #faf8ff;
&-pill {
@ -57,8 +33,10 @@
}
.components-button.is-tertiary {
@media screen and (min-width: $break-small) {
margin-left: $gap-large;
}
}
p {
font-size: 12px;
@ -67,34 +45,6 @@
}
}
&__payments {
padding: $gap-large;
}
&__payment-methods {
display: grid;
column-gap: $gap-smaller;
row-gap: $gap;
grid-template-columns: repeat(auto-fill, minmax(39px, 1fr));
svg {
height: 24px;
width: auto;
outline: 1px solid rgba(0, 0, 0, 0.25);
outline-offset: -1px;
border-radius: 3px;
display: block;
margin: 0 $gap-smaller $gap-smaller 0;
}
span {
color: $gray-700;
font-size: 12px;
line-height: 16px;
white-space: nowrap;
align-self: center;
}
}
&__apms {
.components-card__header {
padding: $gap-small $gap-large;

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

@ -4,12 +4,8 @@
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { getAdminLink } from '@woocommerce/settings';
import {
WCPayBanner,
WCPayBannerBody,
WCPayBannerFooter,
} from '@woocommerce/onboarding';
import { recordEvent } from '@woocommerce/tracks';
import { WCPayConnectCard } from '@woocommerce/onboarding';
/**
* Internal dependencies
@ -29,23 +25,27 @@ const WCPaySettingBanner = () => {
);
const isWooPayEligible = getAdminSetting( 'isWooPayEligible' );
const wccomSettings = getAdminSetting( 'wccomHelper', {} );
const firstName = getAdminSetting( 'currentUserData' )?.first_name;
return (
<WCPayBanner>
<WCPayBannerBody
textPosition="right"
<div className="wcpay-payments-settings-banner">
<WCPayConnectCard
actionButton={
<Button
href={ WC_PAY_SETUP_URL }
isPrimary
variant={ 'primary' }
onClick={ recordTrack }
>
{ __( 'Get started', 'woocommerce' ) }
{ __( 'Finish setup', 'woocommerce' ) }
</Button>
}
firstName={ firstName }
businessCountry={ wccomSettings?.storeCountry ?? '' }
isWooPayEligible={ isWooPayEligible }
/>
<WCPayBannerFooter isWooPayEligible={ isWooPayEligible } />
</WCPayBanner>
</div>
);
};

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

@ -21,11 +21,11 @@ const paymentsBannerShouldBe = async ( status: 'hidden' | 'visible' ) => {
const { container } = render( <PaymentsBannerWrapper /> );
await waitFor( () => {
container.querySelector( '.woocommerce-recommended-payments-banner' );
container.querySelector( '.wcpay-payments-settings-banner' );
} );
const banner = expect(
container.querySelector( '.woocommerce-recommended-payments-banner' )
container.querySelector( '.wcpay-payments-settings-banner' )
);
return status === 'visible'
@ -82,7 +82,7 @@ describe( 'Payment Settings Banner', () => {
whenWcPay( { supported: true, activated: false, installed: true } );
const { getByText } = render( <PaymentsBannerWrapper /> );
fireEvent.click( getByText( 'Get started' ) );
fireEvent.click( getByText( 'Finish setup' ) );
expect( recordEvent ).toHaveBeenCalledWith(
'settings_payments_banner_connect_click'

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

@ -1,14 +1,7 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import {
WCPayBanner,
WCPayBannerFooter,
WCPayBannerBody,
WCPayBenefits,
WCPayBannerImageCut,
} from '@woocommerce/onboarding';
import { WCPayConnectCard } from '@woocommerce/onboarding';
import { useDispatch } from '@wordpress/data';
/**
@ -24,29 +17,30 @@ export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => {
const {
id,
needsSetup,
installed,
enabled: isEnabled,
installed: isInstalled,
} = paymentGateway;
const isWooPayEligible = getAdminSetting( 'isWooPayEligible' );
const { createNotice } = useDispatch( 'core/notices' );
// When the WC Pay is installed and onSetupCallback is null
// When WCPay is installed and onSetupCallback is null
// Overwrite onSetupCallback to redirect to the setup page
// when the user clicks on the "Finish setup" button.
// WC Pay doesn't need to be configured in WCA.
// WCPay doesn't need to be configured in WCA.
// It should be configured in its onboarding flow.
if ( installed && onSetupCallback === null ) {
if ( isInstalled && onSetupCallback === null ) {
onSetupCallback = () => {
connectWcpay( createNotice );
};
}
const wccomSettings = getAdminSetting( 'wccomHelper', false );
const firstName = getAdminSetting( 'currentUserData' )?.first_name;
return (
<div className="woocommerce-wcpay-suggestion">
<WCPayBanner>
<WCPayBannerBody
textPosition="left"
<div className="woocommerce-wcpay-suggestion woocommerce-task-payment-wcpay">
<WCPayConnectCard
actionButton={
<Action
id={ id }
@ -56,19 +50,14 @@ export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => {
isRecommended={ true }
isInstalled={ isInstalled }
hasPlugins={ true }
setupButtonText={ __(
'Get started',
'woocommerce'
) }
onSetupCallback={ onSetupCallback }
/>
}
bannerImage={ <WCPayBannerImageCut /> }
firstName={ firstName }
businessCountry={ wccomSettings?.storeCountry ?? '' }
isWooPayEligible={ isWooPayEligible }
showNotice={ true }
/>
<WCPayBenefits isWooPayEligible={ isWooPayEligible } />
<WCPayBannerFooter isWooPayEligible={ isWooPayEligible } />
</WCPayBanner>
</div>
);
};

8
plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/test/index.js
View File

@ -125,12 +125,8 @@ describe( 'PaymentGatewaySuggestions', () => {
] );
expect(
container
.querySelector(
'.woocommerce-recommended-payments-banner__footer'
)
.textContent.includes( 'WooPayments' )
).toBe( true );
container.querySelector( '.woocommerce-task-payment-wcpay' )
).toBeInTheDocument();
} );
test( 'should render all payment gateways except WCPay', () => {

4
plugins/woocommerce/changelog/update-46869-new-designs-for-woopayments-surfaces Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Update the WooPayments surfaces to up-to-date designs.

2
plugins/woocommerce/includes/admin/settings/class-wc-settings-payment-gateways.php
View File

@ -202,7 +202,7 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page {
$setup_url = admin_url( 'admin.php?page=wc-settings&tab=checkout&section=' . strtolower( $gateway->id ) );
}
/* Translators: %s Payment gateway name. */
echo '<a class="button alignright" aria-label="' . esc_attr( sprintf( __( 'Set up the "%s" payment method', 'woocommerce' ), $method_title ) ) . '" href="' . esc_url( $setup_url ) . '">' . esc_html__( 'Finish set up', 'woocommerce' ) . '</a>';
echo '<a class="button alignright" aria-label="' . esc_attr( sprintf( __( 'Set up the "%s" payment method', 'woocommerce' ), $method_title ) ) . '" href="' . esc_url( $setup_url ) . '">' . esc_html__( 'Finish setup', 'woocommerce' ) . '</a>';
}
break;
case 'status':