Merge pull request #32697 from woocommerce/add/wc-payment-gateways-banner
Added feature for payment gateways banner
This commit is contained in:
Ilyas Foo
GitHub
commit
8b9870b1d0
|
|
@ -44,7 +44,7 @@ export class WcSettings extends BasePage {
|
||||||
|
|
||||||
async paymentMethodIsEnabled( method = '' ): Promise< boolean > {
|
async paymentMethodIsEnabled( method = '' ): Promise< boolean > {
|
||||||
await this.navigate( 'checkout' );
|
await this.navigate( 'checkout' );
|
||||||
await waitForElementByText( 'h2', 'Payment methods' );
|
await waitForElementByText( 'th', 'Method' );
|
||||||
const className = await getAttribute(
|
const className = await getAttribute(
|
||||||
`tr[data-gateway_id=${ method }] .woocommerce-input-toggle`,
|
`tr[data-gateway_id=${ method }] .woocommerce-input-toggle`,
|
||||||
'className'
|
'className'
|
||||||
|
|
@ -58,7 +58,7 @@ export class WcSettings extends BasePage {
|
||||||
|
|
||||||
async cleanPaymentMethods(): Promise< void > {
|
async cleanPaymentMethods(): Promise< void > {
|
||||||
await this.navigate( 'checkout' );
|
await this.navigate( 'checkout' );
|
||||||
await waitForElementByText( 'h2', 'Payment methods' );
|
await waitForElementByText( 'th', 'Method' );
|
||||||
const paymentMethods = await page.$$( 'span.woocommerce-input-toggle' );
|
const paymentMethods = await page.$$( 'span.woocommerce-input-toggle' );
|
||||||
for ( const method of paymentMethods ) {
|
for ( const method of paymentMethods ) {
|
||||||
if (
|
if (
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
- Update `TaskType` & `TaskListType` types
|
- Update `TaskType` & `TaskListType` types
|
||||||
- Export `InstallPluginsResponse` type
|
- Export `InstallPluginsResponse` type
|
||||||
- Convert `use-user-preferences.js` to TS. #32695
|
- Convert `use-user-preferences.js` to TS. #32695
|
||||||
|
- Added PaymentGateway type to exports #32697
|
||||||
- Add `@types/wordpress__compose`, `@types/wordpress__data`, `redux` types and fix related type errors. #32735
|
- Add `@types/wordpress__compose`, `@types/wordpress__data`, `redux` types and fix related type errors. #32735
|
||||||
|
|
||||||
## Breaking change
|
## Breaking change
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ export { NAVIGATION_STORE_NAME } from './navigation';
|
||||||
export { OPTIONS_STORE_NAME } from './options';
|
export { OPTIONS_STORE_NAME } from './options';
|
||||||
export { ITEMS_STORE_NAME } from './items';
|
export { ITEMS_STORE_NAME } from './items';
|
||||||
export { PAYMENT_GATEWAYS_STORE_NAME } from './payment-gateways';
|
export { PAYMENT_GATEWAYS_STORE_NAME } from './payment-gateways';
|
||||||
|
export { PaymentGateway } from './payment-gateways/types';
|
||||||
|
|
||||||
// Export hooks
|
// Export hooks
|
||||||
export { withSettingsHydration } from './settings/with-settings-hydration';
|
export { withSettingsHydration } from './settings/with-settings-hydration';
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: feature
|
||||||
|
|
||||||
|
Added slotfill for payment gateway banner in settings page
|
||||||
|
Refactored payment methods icons in payments-welcome
|
||||||
|
Added experiment for showing payment banner in payment settings page #32697
|
||||||
|
|
@ -16,6 +16,7 @@ import { getAdminSetting } from '~/utils/admin-settings';
|
||||||
import { PageLayout, EmbedLayout, PrimaryLayout as NoticeArea } from './layout';
|
import { PageLayout, EmbedLayout, PrimaryLayout as NoticeArea } from './layout';
|
||||||
import { CustomerEffortScoreTracksContainer } from './customer-effort-score-tracks';
|
import { CustomerEffortScoreTracksContainer } from './customer-effort-score-tracks';
|
||||||
import { EmbeddedBodyLayout } from './embedded-body-layout';
|
import { EmbeddedBodyLayout } from './embedded-body-layout';
|
||||||
|
import { WcAdminPaymentsGatewaysBannerSlot } from './payments/payments-settings-banner-slotfill';
|
||||||
|
|
||||||
// Modify webpack pubilcPath at runtime based on location of WordPress Plugin.
|
// Modify webpack pubilcPath at runtime based on location of WordPress Plugin.
|
||||||
// eslint-disable-next-line no-undef,camelcase
|
// eslint-disable-next-line no-undef,camelcase
|
||||||
|
|
@ -65,6 +66,17 @@ if ( appRoot ) {
|
||||||
// Render notices just above the WP content div.
|
// Render notices just above the WP content div.
|
||||||
const wpBody = document.getElementById( 'wpbody-content' );
|
const wpBody = document.getElementById( 'wpbody-content' );
|
||||||
|
|
||||||
|
const isWcAdminSettingsPaymentPage = document.getElementById(
|
||||||
|
'wc_payment_gateways_banner_slotfill'
|
||||||
|
);
|
||||||
|
|
||||||
|
if ( isWcAdminSettingsPaymentPage ) {
|
||||||
|
render(
|
||||||
|
WcAdminPaymentsGatewaysBannerSlot(),
|
||||||
|
isWcAdminSettingsPaymentPage
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const wrap =
|
const wrap =
|
||||||
wpBody.querySelector( '.wrap.woocommerce' ) ||
|
wpBody.querySelector( '.wrap.woocommerce' ) ||
|
||||||
wpBody.querySelector( '.wrap' );
|
wpBody.querySelector( '.wrap' );
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export default () => (
|
export const Amex = () => (
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
<svg
|
<svg
|
||||||
width="52"
|
width="52"
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export default () => (
|
export const ApplePay = () => (
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
<svg
|
<svg
|
||||||
width="52"
|
width="52"
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export default () => (
|
export const CB = () => (
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
<svg
|
<svg
|
||||||
width="52"
|
width="52"
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export default () => (
|
export const DinersClub = () => (
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
<svg
|
<svg
|
||||||
width="51"
|
width="51"
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export default () => (
|
export const Discover = () => (
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
<svg
|
<svg
|
||||||
width="52"
|
width="52"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
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 */
|
||||||
|
);
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export default () => (
|
export const GooglePay = () => (
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
<svg
|
<svg
|
||||||
width="84"
|
width="84"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
export * from './amex';
|
||||||
|
export * from './applepay';
|
||||||
|
export * from './cb';
|
||||||
|
export * from './diners';
|
||||||
|
export * from './discover';
|
||||||
|
export * from './giropay';
|
||||||
|
export * from './gpay';
|
||||||
|
export * from './jcb';
|
||||||
|
export * from './maestro';
|
||||||
|
export * from './mastercard';
|
||||||
|
export * from './sofort';
|
||||||
|
export * from './unionpay';
|
||||||
|
export * from './visa';
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export default () => (
|
export const JCB = () => (
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
<svg
|
<svg
|
||||||
width="51"
|
width="51"
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export default () => (
|
export const Maestro = () => (
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
<svg
|
<svg
|
||||||
width="51"
|
width="51"
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export default () => (
|
export const MasterCard = () => (
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
<svg
|
<svg
|
||||||
width="51"
|
width="51"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
export const Sofort = () => (
|
||||||
|
<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="#EF809F"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M29.333 25.0919C29.8266 25.5762 29.836 26.368 29.3516 26.8617L29.2585 26.9641C28.7741 27.4578 27.9824 27.4671 27.4887 26.9828L24.6943 24.2163C23.9212 23.4432 23.8187 22.4931 24.3031 21.9901L24.3962 21.8877C24.7968 21.4685 25.4581 21.4313 25.9145 21.7852C26.1287 21.9529 26.4454 21.9156 26.6224 21.7014C26.7901 21.4871 26.7528 21.1705 26.5386 20.9935C25.6723 20.3135 24.4335 20.3973 23.6697 21.1798L23.5766 21.2822C22.673 22.2137 22.85 23.7878 23.9771 24.9149L26.7808 27.7093C27.6843 28.5755 29.1094 28.5569 29.985 27.6627L30.0874 27.5603C30.9444 26.6661 30.9258 25.2502 30.0409 24.3747C29.8453 24.1791 29.5286 24.1791 29.333 24.384C29.128 24.5796 29.128 24.8963 29.333 25.0919ZM27.6563 10.0861L28.802 19.4938C28.83 19.764 29.0815 19.9689 29.3609 19.9316C29.631 19.9037 29.836 19.6522 29.7987 19.3727L28.653 9.92776L28.6437 9.87187C28.4481 9.08944 28.9324 8.21387 29.5845 8.07415C29.9477 7.99964 30.3296 8.06484 30.637 8.26976C30.9444 8.47468 31.1586 8.79138 31.2331 9.15465L33.2265 17.6682C33.2917 17.9383 33.5618 18.106 33.8319 18.0408C34.102 17.9756 34.2697 17.7054 34.2045 17.4353L32.2205 8.94972C32.0994 8.33496 31.7268 7.7854 31.1959 7.43145C30.665 7.07749 30.0036 6.9564 29.3795 7.08681C28.15 7.34762 27.349 8.78206 27.6563 10.0861Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M38.1632 21.1332L40.4266 9.86258C40.6874 8.65168 39.9702 7.43147 38.7686 7.07752C37.4273 6.7422 36.0767 7.52462 35.732 8.84729L33.2264 17.426C33.1519 17.6961 33.3009 17.9756 33.5711 18.0501C33.8412 18.1246 34.1206 17.9756 34.1951 17.7055L36.7008 9.11741C36.915 8.32567 37.7161 7.85063 38.4985 8.04624C39.1691 8.25116 39.5883 8.94975 39.4393 9.65766L37.1758 20.9376C37.1199 21.2077 37.2969 21.4779 37.567 21.5338C37.8465 21.5803 38.1166 21.4033 38.1632 21.1332ZM32.4719 31.994C28.8858 31.994 25.8959 29.3673 25.8959 25.6322C25.8959 25.3527 25.6723 25.1292 25.3929 25.1292C25.1134 25.1292 24.8899 25.3527 24.8899 25.6322C24.8899 29.9541 28.3642 33 32.4719 33C32.7514 33 32.9749 32.7765 32.9749 32.497C32.9749 32.2176 32.7514 31.994 32.4719 31.994ZM30.7022 23.2104C30.6277 23.4898 30.4507 23.7413 30.2085 23.8997L30.0967 23.9649C29.5192 24.3561 28.7368 24.207 28.3456 23.6295L26.1473 20.3601C25.5512 19.4473 25.6257 18.4972 26.2032 18.0967L26.3057 18.0222C27.0509 17.5937 27.6749 17.9197 28.3176 18.8605L30.1526 21.599C30.311 21.8318 30.6183 21.8877 30.8512 21.7387C31.0841 21.5896 31.14 21.2729 30.9909 21.0401L29.156 18.3016C28.2431 16.9789 27.1254 16.3921 25.7748 17.1745L25.635 17.2677C24.5546 18.0035 24.4241 19.587 25.309 20.919L27.5073 24.1977C28.2152 25.2316 29.6124 25.5018 30.6463 24.8032L30.7581 24.7287C31.1958 24.4306 31.5125 23.9835 31.6616 23.4712C31.7361 23.2011 31.5777 22.9309 31.3076 22.8564C31.0468 22.7819 30.7767 22.9403 30.7022 23.2104Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M34.0273 24.8684C32.9841 25.4552 32.3321 26.545 32.2576 28.2123C32.2389 28.4918 32.4532 28.7246 32.7326 28.7433C33.012 28.7526 33.2449 28.5476 33.2635 28.2682C33.3381 26.7592 33.9249 25.9489 34.8656 25.5949C35.3686 25.4086 35.9182 25.3714 36.4026 25.4179L36.5236 25.4366C37.1663 25.5577 37.3713 24.5983 36.7286 24.4492L32.863 23.583C31.056 23.0893 30.7765 22.4187 31.1119 21.3009C31.2609 20.8165 31.5497 20.5651 32.0061 20.4626C32.3041 20.3974 32.6301 20.4067 32.9468 20.4626C33.04 20.4812 33.1052 20.4905 33.1331 20.4998L39.0013 21.8691L39.1131 21.9064C39.2062 21.9436 39.3087 22.0181 39.4112 22.1206C39.8024 22.5397 40.0259 23.3315 39.9141 24.6355C39.5323 29.1997 37.4085 32.0313 32.36 31.9847C32.0806 31.9847 31.857 32.2083 31.857 32.4784C31.857 32.7578 32.0806 32.9814 32.3507 32.9814C38.014 33.028 40.4917 29.7399 40.9108 24.71C41.0412 23.1452 40.7525 22.074 40.147 21.4313C39.8117 21.0774 39.4577 20.9097 39.1876 20.8724L33.3846 19.5218C33.3474 19.5125 33.2542 19.4846 33.1238 19.4659C32.686 19.3914 32.2296 19.3821 31.7825 19.4752C31.0001 19.6522 30.404 20.1459 30.1525 21.0028C29.6681 22.6143 30.1804 23.881 32.6208 24.5424L34.0273 24.8684Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export default () => (
|
export const UnionPay = () => (
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
<svg
|
<svg
|
||||||
width="52"
|
width="52"
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export default () => (
|
export const Visa = () => (
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
<svg
|
<svg
|
||||||
width="51"
|
width="51"
|
||||||
|
|
|
||||||
|
|
@ -19,16 +19,18 @@ import apiFetch from '@wordpress/api-fetch';
|
||||||
*/
|
*/
|
||||||
import strings from './strings';
|
import strings from './strings';
|
||||||
import Banner from './banner';
|
import Banner from './banner';
|
||||||
import Visa from './cards/visa';
|
import {
|
||||||
import MasterCard from './cards/mastercard';
|
Visa,
|
||||||
import Maestro from './cards/maestro';
|
MasterCard,
|
||||||
import Amex from './cards/amex';
|
Maestro,
|
||||||
import ApplePay from './cards/applepay';
|
Amex,
|
||||||
import CB from './cards/cb';
|
ApplePay,
|
||||||
import DinersClub from './cards/diners';
|
CB,
|
||||||
import Discover from './cards/discover';
|
DinersClub,
|
||||||
import JCB from './cards/jcb';
|
Discover,
|
||||||
import UnionPay from './cards/unionpay';
|
JCB,
|
||||||
|
UnionPay,
|
||||||
|
} from './cards';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
import FrequentlyAskedQuestions from './faq';
|
import FrequentlyAskedQuestions from './faq';
|
||||||
import ExitSurveyModal from './exit-survey-modal';
|
import ExitSurveyModal from './exit-survey-modal';
|
||||||
|
|
@ -68,7 +70,7 @@ const LearnMore = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const PaymentMethods = () => (
|
export const PaymentMethods = () => (
|
||||||
<div className="wcpay-connect-account-page-payment-methods">
|
<div className="wcpay-connect-account-page-payment-methods">
|
||||||
<Visa />
|
<Visa />
|
||||||
<MasterCard />
|
<MasterCard />
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,41 @@
|
||||||
|
.woocommerce-recommended-payments-banner {
|
||||||
|
margin: 0 15px 10px 0;
|
||||||
|
min-width: 750px;
|
||||||
|
animation: isLoaded;
|
||||||
|
animation-duration: 250ms;
|
||||||
|
|
||||||
|
.woocommerce-recommended-payments-banner__body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-recommended-payments-banner__text_container {
|
||||||
|
width: 40%;
|
||||||
|
margin-inline: 24px;
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin-block: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-recommended-payments-banner__footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-recommended-payments-banner__footer_icon_container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-recommended-payments-banner__footer_icon_container > svg {
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.woocommerce-recommended-payments-card {
|
.woocommerce-recommended-payments-card {
|
||||||
margin: 0 15px 10px 0;
|
margin: 0 15px 10px 0;
|
||||||
animation: isLoaded;
|
animation: isLoaded;
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@ import ExternalIcon from 'gridicons/dist/external';
|
||||||
import './payment-recommendations.scss';
|
import './payment-recommendations.scss';
|
||||||
import { createNoticesFromResponse } from '../lib/notices';
|
import { createNoticesFromResponse } from '../lib/notices';
|
||||||
import { getPluginSlug } from '~/utils';
|
import { getPluginSlug } from '~/utils';
|
||||||
|
import { isWcPaySupported } from './utils';
|
||||||
|
|
||||||
const SEE_MORE_LINK =
|
const SEE_MORE_LINK =
|
||||||
'https://woocommerce.com/product-category/woocommerce-extensions/payment-gateways/?utm_source=payments_recommendations';
|
'https://woocommerce.com/product-category/woocommerce-extensions/payment-gateways/?utm_source=payments_recommendations';
|
||||||
|
|
@ -80,23 +81,12 @@ const PaymentRecommendations: React.FC = () => {
|
||||||
},
|
},
|
||||||
[ isInstalled ]
|
[ isInstalled ]
|
||||||
);
|
);
|
||||||
const supportsWCPayments =
|
|
||||||
paymentGatewaySuggestions &&
|
|
||||||
paymentGatewaySuggestions.filter(
|
|
||||||
( paymentGatewaySuggestion: Plugin ) => {
|
|
||||||
return (
|
|
||||||
paymentGatewaySuggestion.id.indexOf(
|
|
||||||
'woocommerce_payments'
|
|
||||||
) === 0
|
|
||||||
);
|
|
||||||
}
|
|
||||||
).length === 1;
|
|
||||||
|
|
||||||
const triggeredPageViewRef = useRef( false );
|
const triggeredPageViewRef = useRef( false );
|
||||||
const shouldShowRecommendations =
|
const shouldShowRecommendations =
|
||||||
paymentGatewaySuggestions &&
|
paymentGatewaySuggestions &&
|
||||||
paymentGatewaySuggestions.length > 0 &&
|
paymentGatewaySuggestions.length > 0 &&
|
||||||
! supportsWCPayments &&
|
! isWcPaySupported( paymentGatewaySuggestions ) &&
|
||||||
! isDismissed;
|
! isDismissed;
|
||||||
|
|
||||||
useEffect( () => {
|
useEffect( () => {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,184 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import { Card, CardFooter, CardBody, Button } from '@wordpress/components';
|
||||||
|
import { Text } from '@woocommerce/experimental';
|
||||||
|
import { __ } from '@wordpress/i18n';
|
||||||
|
import {
|
||||||
|
ONBOARDING_STORE_NAME,
|
||||||
|
PAYMENT_GATEWAYS_STORE_NAME,
|
||||||
|
PaymentGateway,
|
||||||
|
WCDataSelector,
|
||||||
|
} from '@woocommerce/data';
|
||||||
|
import { useSelect } from '@wordpress/data';
|
||||||
|
import { useExperiment } from '@woocommerce/explat';
|
||||||
|
import { getAdminLink } from '@woocommerce/settings';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Internal dependencies
|
||||||
|
*/
|
||||||
|
import {
|
||||||
|
Visa,
|
||||||
|
MasterCard,
|
||||||
|
Amex,
|
||||||
|
ApplePay,
|
||||||
|
Giropay,
|
||||||
|
GooglePay,
|
||||||
|
CB,
|
||||||
|
DinersClub,
|
||||||
|
Discover,
|
||||||
|
UnionPay,
|
||||||
|
JCB,
|
||||||
|
Sofort,
|
||||||
|
} from '../payments-welcome/cards';
|
||||||
|
import WCPayBannerImage from './wcpay-banner-image';
|
||||||
|
import './payment-recommendations.scss';
|
||||||
|
import { isWcPaySupported } from './utils';
|
||||||
|
|
||||||
|
export const PaymentMethodsIcons = () => (
|
||||||
|
<div className="woocommerce-recommended-payments-banner__footer_icon_container">
|
||||||
|
<Visa />
|
||||||
|
<MasterCard />
|
||||||
|
<Amex />
|
||||||
|
<ApplePay />
|
||||||
|
<GooglePay />
|
||||||
|
<CB />
|
||||||
|
<Giropay />
|
||||||
|
<DinersClub />
|
||||||
|
<Discover />
|
||||||
|
<UnionPay />
|
||||||
|
<JCB />
|
||||||
|
<Sofort />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const WcPayBanner = () => {
|
||||||
|
const WC_PAY_SETUP_URL = getAdminLink(
|
||||||
|
'admin.php?page=wc-settings&tab=checkout§ion=woocommerce_payments'
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<Card size="medium" className="woocommerce-recommended-payments-banner">
|
||||||
|
<CardBody className="woocommerce-recommended-payments-banner__body">
|
||||||
|
<div className="woocommerce-recommended-payments-banner__image_container">
|
||||||
|
<WCPayBannerImage />
|
||||||
|
</div>
|
||||||
|
<div className="woocommerce-recommended-payments-banner__text_container">
|
||||||
|
<Text
|
||||||
|
variant="title.small"
|
||||||
|
as="p"
|
||||||
|
size="24"
|
||||||
|
lineHeight="28px"
|
||||||
|
padding="0 20px 0 0"
|
||||||
|
>
|
||||||
|
{ __(
|
||||||
|
'Accept Payments and manage your business.',
|
||||||
|
'woocommerce'
|
||||||
|
) }
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
className={
|
||||||
|
'woocommerce-recommended-payments__header-heading'
|
||||||
|
}
|
||||||
|
variant="caption"
|
||||||
|
as="p"
|
||||||
|
size="12"
|
||||||
|
lineHeight="16px"
|
||||||
|
>
|
||||||
|
{ __(
|
||||||
|
'By using WooCommerce Payments you agree to be bound by our Terms of Service and acknowledge that you have read our Privacy Policy',
|
||||||
|
'woocommerce'
|
||||||
|
) }
|
||||||
|
</Text>
|
||||||
|
<Button href={ WC_PAY_SETUP_URL } isPrimary>
|
||||||
|
{ __( 'Get started', 'woocommerce' ) }
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardBody>
|
||||||
|
<CardFooter className="woocommerce-recommended-payments-banner__footer">
|
||||||
|
<div>
|
||||||
|
<Text variant="caption" as="p" size="12" lineHeight="16px">
|
||||||
|
{ __(
|
||||||
|
'Accepted payment methods include:',
|
||||||
|
'woocommerce'
|
||||||
|
) }
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<PaymentMethodsIcons />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text variant="caption" as="p" size="12" lineHeight="16px">
|
||||||
|
{ __( '& more.', 'woocommerce' ) }
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const DefaultPaymentMethodsHeaderText = () => (
|
||||||
|
<>
|
||||||
|
<h2>Payment Methods</h2>
|
||||||
|
<div id="payment_gateways_options-description">
|
||||||
|
<p>
|
||||||
|
Installed payment methods are listed below and can be sorted to
|
||||||
|
control their display order on the frontend.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const PaymentsBannerWrapper = () => {
|
||||||
|
const {
|
||||||
|
installedPaymentGateways,
|
||||||
|
paymentGatewaySuggestions,
|
||||||
|
isResolving,
|
||||||
|
} = useSelect( ( select: WCDataSelector ) => {
|
||||||
|
return {
|
||||||
|
installedPaymentGateways: select(
|
||||||
|
PAYMENT_GATEWAYS_STORE_NAME
|
||||||
|
).getPaymentGateways(),
|
||||||
|
isResolving: select( ONBOARDING_STORE_NAME ).isResolving(
|
||||||
|
'getPaymentGatewaySuggestions'
|
||||||
|
),
|
||||||
|
paymentGatewaySuggestions: select(
|
||||||
|
ONBOARDING_STORE_NAME
|
||||||
|
).getPaymentGatewaySuggestions(),
|
||||||
|
};
|
||||||
|
} );
|
||||||
|
|
||||||
|
const isWcPayInstalled = installedPaymentGateways.some(
|
||||||
|
( gateway: PaymentGateway ) => {
|
||||||
|
return gateway.id === 'woocommerce_payments';
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const isWcPayDisabled = installedPaymentGateways.find(
|
||||||
|
( gateway: PaymentGateway ) => {
|
||||||
|
return (
|
||||||
|
gateway.id === 'woocommerce_payments' &&
|
||||||
|
gateway.enabled === false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const momentDate = moment().utc();
|
||||||
|
const year = momentDate.format( 'YYYY' );
|
||||||
|
const month = momentDate.format( 'MM' );
|
||||||
|
const [ isLoadingExperiment, experimentAssignment ] = useExperiment(
|
||||||
|
`woocommerce_payments_settings_banner_${ year }_${ month }`
|
||||||
|
);
|
||||||
|
if ( ! isResolving && ! isLoadingExperiment ) {
|
||||||
|
if (
|
||||||
|
isWcPaySupported( paymentGatewaySuggestions ) &&
|
||||||
|
isWcPayInstalled &&
|
||||||
|
isWcPayDisabled &&
|
||||||
|
experimentAssignment?.variationName === 'treatment'
|
||||||
|
) {
|
||||||
|
return <WcPayBanner />;
|
||||||
|
}
|
||||||
|
return <DefaultPaymentMethodsHeaderText />;
|
||||||
|
}
|
||||||
|
return <DefaultPaymentMethodsHeaderText />;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import { createSlotFill, SlotFillProvider } from '@wordpress/components';
|
||||||
|
import { registerPlugin, PluginArea } from '@wordpress/plugins';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Internal dependencies
|
||||||
|
*/
|
||||||
|
import { PaymentsBannerWrapper } from './payment-settings-banner';
|
||||||
|
|
||||||
|
const { Fill, Slot } = createSlotFill(
|
||||||
|
'__EXPERIMENTAL__WcAdminPaymentsGatewaysSettingsBanner'
|
||||||
|
);
|
||||||
|
const PaymentsBannerFill = () => {
|
||||||
|
return (
|
||||||
|
<Fill>
|
||||||
|
<PaymentsBannerWrapper />
|
||||||
|
</Fill>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const WcAdminPaymentsGatewaysBannerSlot = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SlotFillProvider>
|
||||||
|
<Slot />
|
||||||
|
<PluginArea scope="woocommerce-settings" />
|
||||||
|
</SlotFillProvider>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
registerPlugin( 'woocommerce-admin-paymentsgateways-settings-banner', {
|
||||||
|
scope: 'woocommerce-settings',
|
||||||
|
render: PaymentsBannerFill,
|
||||||
|
} );
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import { render } from '@testing-library/react';
|
||||||
|
import { useSelect } from '@wordpress/data';
|
||||||
|
import { useExperiment } from '@woocommerce/explat';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Internal dependencies
|
||||||
|
*/
|
||||||
|
import { PaymentsBannerWrapper } from '../payment-settings-banner';
|
||||||
|
|
||||||
|
jest.mock( '@wordpress/data', () => ( {
|
||||||
|
...jest.requireActual( '@wordpress/data' ),
|
||||||
|
useSelect: jest.fn(),
|
||||||
|
} ) );
|
||||||
|
jest.mock( '@woocommerce/explat' );
|
||||||
|
|
||||||
|
describe( 'Payment Settings Banner', () => {
|
||||||
|
it( 'should render the banner if woocommerce payments is supported but setup not completed', () => {
|
||||||
|
( useSelect as jest.Mock ).mockReturnValue( {
|
||||||
|
installedPaymentGateways: [
|
||||||
|
{ id: 'woocommerce_payments', enabled: false },
|
||||||
|
],
|
||||||
|
paymentGatewaySuggestions: [ { id: 'woocommerce_payments:us' } ],
|
||||||
|
} );
|
||||||
|
|
||||||
|
( useExperiment as jest.Mock ).mockImplementation( () => [
|
||||||
|
false,
|
||||||
|
{ variationName: 'treatment' },
|
||||||
|
] );
|
||||||
|
|
||||||
|
const { container } = render( <PaymentsBannerWrapper /> );
|
||||||
|
expect(
|
||||||
|
container.querySelector(
|
||||||
|
'.woocommerce-recommended-payments-banner'
|
||||||
|
)
|
||||||
|
).toBeInTheDocument();
|
||||||
|
} );
|
||||||
|
|
||||||
|
it( 'should not render the banner if treatment is control', () => {
|
||||||
|
( useSelect as jest.Mock ).mockReturnValue( {
|
||||||
|
installedPaymentGateways: [
|
||||||
|
{ id: 'woocommerce_payments', enabled: false },
|
||||||
|
],
|
||||||
|
paymentGatewaySuggestions: [ { id: 'woocommerce_payments:us' } ],
|
||||||
|
} );
|
||||||
|
|
||||||
|
( useExperiment as jest.Mock ).mockImplementation( () => [
|
||||||
|
false,
|
||||||
|
{ variationName: 'control' },
|
||||||
|
] );
|
||||||
|
|
||||||
|
const { container } = render( <PaymentsBannerWrapper /> );
|
||||||
|
expect(
|
||||||
|
container.querySelector(
|
||||||
|
'.woocommerce-recommended-payments-banner'
|
||||||
|
)
|
||||||
|
).not.toBeInTheDocument();
|
||||||
|
} );
|
||||||
|
|
||||||
|
it( 'should not render anything if woocommerce payments is not supported', () => {
|
||||||
|
( useSelect as jest.Mock ).mockReturnValue( {
|
||||||
|
installedPaymentGateways: [],
|
||||||
|
paymentGatewaySuggestions: [],
|
||||||
|
} );
|
||||||
|
|
||||||
|
const { container } = render( <PaymentsBannerWrapper /> );
|
||||||
|
expect(
|
||||||
|
container.querySelector(
|
||||||
|
'.woocommerce-recommended-payments-banner'
|
||||||
|
)
|
||||||
|
).not.toBeInTheDocument();
|
||||||
|
} );
|
||||||
|
|
||||||
|
it( 'should not render anything if woocommerce payments is setup', () => {
|
||||||
|
( useSelect as jest.Mock ).mockReturnValue( {
|
||||||
|
installedPaymentGateways: [
|
||||||
|
{ id: 'woocommerce_payments', enabled: true },
|
||||||
|
],
|
||||||
|
paymentGatewaySuggestions: [ { id: 'woocommerce_payments:us' } ],
|
||||||
|
} );
|
||||||
|
|
||||||
|
const { container } = render( <PaymentsBannerWrapper /> );
|
||||||
|
expect(
|
||||||
|
container.querySelector(
|
||||||
|
'.woocommerce-recommended-payments-banner'
|
||||||
|
)
|
||||||
|
).not.toBeInTheDocument();
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import { Plugin } from '@woocommerce/data';
|
||||||
|
|
||||||
|
export const isWcPaySupported = ( paymentGatewaySuggestions: Plugin[] ) =>
|
||||||
|
paymentGatewaySuggestions &&
|
||||||
|
paymentGatewaySuggestions.filter( ( paymentGatewaySuggestion: Plugin ) => {
|
||||||
|
return (
|
||||||
|
paymentGatewaySuggestion.id.indexOf( 'woocommerce_payments' ) === 0
|
||||||
|
);
|
||||||
|
} ).length === 1;
|
||||||
|
|
@ -0,0 +1,156 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import { createElement } from '@wordpress/element';
|
||||||
|
|
||||||
|
export default () => (
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
<g clipPath="url(#clip1_255_63852)">
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
clipRule="evenodd"
|
||||||
|
d="M31.2434 48.9644H63.992C64.4849 48.9641 64.9731 49.0616 65.4281 49.2513C65.8831 49.4409 66.296 49.719 66.6429 50.0693C67.3472 50.7805 67.7421 51.7411 67.7418 52.7421V65.3446C67.7429 66.3456 67.3487 67.3066 66.6449 68.0185C66.2984 68.3691 65.8857 68.6475 65.4308 68.8376C64.976 69.0277 64.4879 69.1257 63.9949 69.1259H52.2494L53.8562 73.1093L46.7622 69.1259H31.2434C29.177 69.1239 27.502 67.4334 27.5 65.3476V52.7421C27.502 50.6573 29.177 48.9663 31.2434 48.9644Z"
|
||||||
|
fill="#7F54B3"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
clipRule="evenodd"
|
||||||
|
d="M133.883 54.6586C132.78 55.7719 132.229 57.1855 132.229 58.8994C132.229 60.7437 132.776 62.2315 133.87 63.3628C134.964 64.4941 136.392 65.0592 138.153 65.0592C138.736 65.0479 139.314 64.9591 139.873 64.7953V62.0697C139.386 62.228 138.88 62.3147 138.368 62.3276C137.491 62.3276 136.79 62.0284 136.264 61.4299C135.738 60.8308 135.475 60.0167 135.476 58.9865C135.476 58.0295 135.737 57.2433 136.259 56.6279C136.494 56.3329 136.794 56.096 137.136 55.9354C137.477 55.7747 137.851 55.6946 138.228 55.7012C138.787 55.7062 139.344 55.7904 139.882 55.9502V53.2131C139.292 53.0591 138.685 52.9838 138.075 52.989C136.381 52.989 134.982 53.5457 133.877 54.6601L133.883 54.6586ZM79.987 54.5391C80.8429 53.5054 82.0339 52.989 83.5606 52.989C85.1858 52.9865 86.4286 53.5044 87.2875 54.5426C88.1465 55.5802 88.5762 57.0611 88.5762 58.9855C88.5787 60.9095 88.1554 62.4028 87.3075 63.4654C86.4595 64.5279 85.2525 65.0592 83.6875 65.0592C82.0678 65.0592 80.8324 64.5284 79.982 63.4659C79.1315 62.4028 78.7068 60.8692 78.7068 58.864C78.7043 57.0143 79.131 55.5728 79.987 54.5391ZM70.4248 58.9019C70.4248 57.1875 70.9765 55.7739 72.0794 54.6611C73.1833 53.5467 74.581 52.9895 76.2729 52.9895C76.8824 52.9845 77.4904 53.0592 78.0809 53.2136V55.9517C77.5439 55.7917 76.9871 55.7077 76.4268 55.7022C76.0496 55.6956 75.6759 55.7757 75.3346 55.9364C74.9932 56.0971 74.6933 56.334 74.458 56.6289C73.9367 57.2443 73.6758 58.031 73.6758 58.988C73.6768 60.0177 73.9397 60.8323 74.4645 61.4308C74.9898 62.0299 75.6904 62.3291 76.5672 62.3291C77.0794 62.3161 77.587 62.2292 78.0744 62.0712V64.7958C77.513 64.9606 76.9321 65.0501 76.3471 65.0617C74.5895 65.0617 73.1629 64.4961 72.0675 63.3653C70.972 62.234 70.4248 60.7462 70.4248 58.9019ZM84.8706 61.7505C84.7353 61.9748 84.5424 62.1587 84.3119 62.2831C84.0814 62.4076 83.8218 62.468 83.5601 62.4581C83.3116 62.4654 83.0661 62.4024 82.8519 62.2764C82.6376 62.1503 82.4634 61.9663 82.3491 61.7455C82.0713 61.2705 81.9324 60.3225 81.9324 58.9014C81.9324 56.6956 82.4836 55.5922 83.5865 55.5922C84.7511 55.5922 85.3337 56.7125 85.3337 58.9522C85.3292 60.3394 85.1748 61.2705 84.8706 61.7455V61.7505ZM96.176 55.8869L96.7685 53.3127L100.694 53.3162L102.221 64.7869H99.2084L98.3948 56.8982L96.5171 64.7754H94.4592L92.4904 56.8694L91.7076 64.7749H88.8261L90.2721 53.3042H94.1181C94.6653 55.7789 95.097 57.9065 95.4137 59.6881L95.7443 57.909C95.8783 57.2219 96.0207 56.5457 96.176 55.8874V55.8869ZM110.549 53.3127L109.957 55.8869C109.8 56.5579 109.656 57.2319 109.525 57.9085L109.194 59.6881C108.878 57.9065 108.446 55.7789 107.899 53.3042H104.052L102.606 64.7749H105.488L106.271 56.8694L108.239 64.7749H110.297L112.175 56.8977L112.989 64.7869H116.001L114.475 53.3162L110.549 53.3127ZM122.602 60.2458H119.903V62.3281H123.034V64.7779H116.858V53.3077H123.014V55.7475H119.903V57.8622H122.602V60.2463V60.2458ZM131.602 58.4328C132.46 57.0486 132.123 55.2242 130.829 54.2528C129.999 53.6224 128.867 53.3072 127.435 53.3072H123.893V64.7784H126.935V59.5552H126.985L129.444 64.7784H132.659L130.229 59.6055C130.799 59.3694 131.279 58.9589 131.602 58.4328ZM126.935 55.525V58.2461C128.282 58.2247 128.955 57.8214 128.955 57.0362C128.954 56.5034 128.798 56.123 128.487 55.8939C128.176 55.6649 127.658 55.5419 126.935 55.525ZM143.758 60.2403V62.3266L146.885 62.3281V64.7779H140.709V53.3077H146.865V55.7475H143.751V57.8622H146.46V60.2413H143.758V60.2403Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M29.7701 52.1735C29.8903 52.0174 30.044 51.8903 30.2199 51.8014C30.3958 51.7126 30.5893 51.6643 30.7863 51.6601C31.6119 51.6004 32.0859 51.9977 32.2084 52.8527C32.7193 56.3182 33.2645 59.2595 33.8446 61.6759L37.4102 54.7498C37.7359 54.1254 38.1407 53.7933 38.6336 53.7534C39.3472 53.7021 39.7938 54.1667 39.9721 55.1471C40.3064 57.0866 40.8221 58.9904 41.5126 60.8334C41.9389 56.6175 42.6534 53.5717 43.6567 51.6965C43.7515 51.4876 43.9016 51.3085 44.0908 51.1788C44.2801 51.0491 44.5012 50.9736 44.7302 50.9606C44.9151 50.9458 45.101 50.9675 45.2774 51.0246C45.4538 51.0817 45.6173 51.1729 45.7584 51.2932C46.0522 51.5212 46.234 51.8698 46.2544 52.2467C46.2769 52.5209 46.2204 52.7958 46.0916 53.0389C45.4572 54.2419 44.9334 56.2421 44.5201 59.0394C44.1168 61.7396 43.9674 63.8509 44.073 65.374C44.1099 65.7475 44.0446 66.1241 43.8843 66.4635C43.8055 66.6299 43.6836 66.7722 43.5311 66.8754C43.3786 66.9786 43.2012 67.0389 43.0174 67.05C42.5837 67.0799 42.1545 66.8743 41.7307 66.4336C40.219 64.8487 39.021 62.492 38.1372 59.3631C37.0866 61.4907 36.3023 63.0885 35.7855 64.1561C34.832 66.0387 34.0139 67.0017 33.3307 67.045C32.8861 67.0774 32.5067 66.6975 32.192 65.9053C31.3624 63.7304 30.4706 59.5254 29.5166 53.2914C29.4805 53.0976 29.4844 52.8984 29.528 52.7062C29.5717 52.5139 29.6542 52.3327 29.7706 52.1735H29.7701Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
clipRule="evenodd"
|
||||||
|
d="M62.3059 53.0669C63.4153 53.2839 64.3728 54.0049 64.9175 55.0322C65.4453 55.9434 65.7092 57.0547 65.7092 58.3663C65.7236 60.0516 65.2851 61.7098 64.4395 63.1678C63.4656 64.8637 62.1884 65.7117 60.6085 65.7117C60.3108 65.7102 60.0141 65.6767 59.7237 65.6116C58.6143 65.3945 57.6563 64.6735 57.1121 63.6458C56.5843 62.7186 56.3204 61.5993 56.3204 60.2878C56.3029 58.6102 56.7418 56.9595 57.5901 55.5122C58.5794 53.8162 59.8561 52.9683 61.4211 52.9683C61.7187 52.9692 62.0154 53.0022 62.3059 53.0669ZM61.6138 62.2466C62.2203 61.6839 62.635 60.8459 62.8596 59.7336V59.7386C62.9403 59.3293 62.9801 58.913 62.9786 58.4952C62.9743 57.9669 62.8771 57.4434 62.6913 56.9487C62.4518 56.3009 62.1331 55.9354 61.7348 55.8532C61.1448 55.7198 60.5781 56.0678 60.0339 56.8979C59.6191 57.5074 59.3264 58.1916 59.172 58.9125C59.0913 59.3223 59.0515 59.7391 59.0525 60.1573C59.0575 60.6851 59.155 61.2074 59.3403 61.6989C59.5793 62.3422 59.8989 62.7077 60.2983 62.7943C60.6976 62.8815 61.1363 62.6992 61.6138 62.2466ZM52.2483 53.0669C53.3577 53.2849 54.3152 54.0054 54.8604 55.0322H54.8589C55.3857 55.9434 55.6492 57.0547 55.6492 58.3663C55.6639 60.0515 55.2258 61.7098 54.3804 63.1678C53.4065 64.8637 52.1293 65.7117 50.5489 65.7117C50.2507 65.7102 49.9536 65.6766 49.6626 65.6116C48.5532 65.3935 47.5952 64.673 47.0505 63.6458C46.5237 62.7186 46.2603 61.5993 46.2603 60.2878C46.2428 58.6102 46.6816 56.9595 47.53 55.5122C48.5184 53.8162 49.7955 52.9683 51.362 52.9683C51.6601 52.9693 51.9573 53.0023 52.2483 53.0669ZM51.5562 62.2466C52.1637 61.6839 52.5789 60.8459 52.802 59.7336V59.7386C52.8832 59.3293 52.923 58.913 52.9215 58.4952C52.9162 57.9669 52.8188 57.4435 52.6337 56.9487C52.3947 56.3009 52.0755 55.9354 51.6772 55.8532C51.0872 55.7198 50.52 56.0678 49.9763 56.8979C49.5613 57.5074 49.2685 58.1915 49.1139 58.9125C49.0327 59.3218 48.9924 59.7391 48.9934 60.1573C48.9989 60.6851 49.097 61.2079 49.2822 61.6989C49.5207 62.3467 49.8404 62.7112 50.2387 62.7943C50.637 62.8775 51.0782 62.6947 51.5562 62.2466Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M87.9281 77.958V74.5477H90.3634C92.4263 74.5477 93.5726 73.1436 93.5726 71.482C93.5726 69.806 92.4408 68.4019 90.3634 68.4019H85.8936V77.957H87.9281V77.958ZM90.0771 72.7577H87.9281V70.1934H90.0771C90.8793 70.1934 91.4952 70.6804 91.4952 71.4825C91.4952 72.2702 90.8793 72.7572 90.0771 72.7572V72.7577ZM100.37 77.958V73.4882C100.37 71.4965 98.9228 70.8666 97.3329 70.8666C96.2439 70.8666 95.155 71.1962 94.31 71.9551L95.026 73.2302C95.5991 72.7004 96.2868 72.4136 97.0177 72.4136C97.9344 72.4136 98.5364 72.8717 98.5364 73.5738V74.4482C98.0778 73.9034 97.2756 73.6027 96.344 73.6027C95.2411 73.6027 93.952 74.2047 93.952 75.8379C93.952 77.3849 95.2411 78.1298 96.344 78.1298C97.2467 78.1298 98.0633 77.8002 98.5364 77.2271V77.958H100.37ZM97.075 76.8975C96.3584 76.8975 95.7714 76.5255 95.7714 75.8668C95.7714 75.2075 96.3584 74.8206 97.075 74.8206C97.662 74.8206 98.2351 75.0352 98.5364 75.4365V76.296C98.2351 76.6973 97.662 76.898 97.075 76.898V76.8975ZM101.788 80.6513C102.002 80.723 102.475 80.7658 102.676 80.7658C103.865 80.737 104.782 80.3934 105.298 79.0898L108.55 71.0384H106.601L104.782 75.8523L102.977 71.0389H101.028L103.836 78.0447L103.578 78.6462C103.407 79.0186 103.091 79.1476 102.619 79.1476C102.447 79.1476 102.203 79.1048 102.046 79.0331L101.788 80.6513ZM119.634 77.958V72.9584C119.634 71.5398 118.875 70.8666 117.599 70.8666C116.539 70.8666 115.622 71.497 115.221 72.1129C114.978 71.3391 114.319 70.8666 113.301 70.8666C112.241 70.8666 111.339 71.5253 111.038 71.9267V71.0384H109.219V77.9585H111.038V73.288C111.31 72.9155 111.84 72.4858 112.471 72.4858C113.216 72.4858 113.502 72.9439 113.502 73.5887V77.9585H115.336V73.288C115.594 72.9155 116.124 72.4858 116.768 72.4858C117.513 72.4858 117.8 72.9439 117.8 73.5887V77.9585H119.634V77.958ZM124.541 78.1298C125.616 78.1298 126.704 77.8002 127.392 77.1698L126.576 75.9668C126.131 76.3965 125.329 76.64 124.742 76.64C123.567 76.64 122.879 75.938 122.75 75.0925H127.894V74.6628C127.894 72.4136 126.504 70.8666 124.426 70.8666C122.335 70.8666 120.845 72.4853 120.845 74.4915C120.845 76.7117 122.435 78.1298 124.541 78.1298ZM126.145 73.8322H122.736C122.808 73.1446 123.295 72.3564 124.426 72.3564C125.63 72.3564 126.088 73.173 126.145 73.8322ZM135.569 77.958V73.0729C135.569 71.726 134.838 70.8666 133.305 70.8666C132.187 70.8666 131.328 71.4108 130.884 71.9267V71.0384H129.064V77.9585H130.884V73.288C131.199 72.8872 131.743 72.4858 132.46 72.4858C133.233 72.4858 133.735 72.8155 133.735 73.7755V77.958H135.569ZM139.538 78.1298C140.297 78.1298 140.784 77.9292 141.057 77.6857L140.67 76.2965C140.57 76.411 140.312 76.5106 140.039 76.5106C139.639 76.5106 139.409 76.1819 139.409 75.7373V72.6287H140.813V71.0384H139.409V69.1473H137.59V71.0384H136.444V72.6287H137.59V76.2243C137.59 77.4711 138.263 78.1298 139.538 78.1298ZM144.407 78.1298C146.327 78.1298 147.416 77.1987 147.416 75.924C147.416 73.1302 143.304 73.9896 143.304 72.9723C143.304 72.5854 143.734 72.2991 144.393 72.2991C145.238 72.2991 146.027 72.6716 146.442 73.1013L147.172 71.8116C146.485 71.2674 145.553 70.8666 144.393 70.8666C142.559 70.8666 141.557 71.8838 141.557 73.044C141.557 75.7662 145.654 74.8351 145.654 75.9668C145.654 76.3965 145.281 76.6973 144.493 76.6973C143.634 76.6973 142.617 76.2243 142.101 75.7373L141.313 77.0553C142.044 77.729 143.204 78.1298 144.407 78.1298Z"
|
||||||
|
fill="#7F54B3"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: add
|
||||||
|
|
||||||
|
Added react mount point in payment settings page for banner slotfill #32697
|
||||||
|
|
@ -25,6 +25,7 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page {
|
||||||
$this->id = 'checkout'; // @todo In future versions this may make more sense as 'payment' however to avoid breakage lets leave this alone until we refactor settings APIs in general.
|
$this->id = 'checkout'; // @todo In future versions this may make more sense as 'payment' however to avoid breakage lets leave this alone until we refactor settings APIs in general.
|
||||||
$this->label = _x( 'Payments', 'Settings tab label', 'woocommerce' );
|
$this->label = _x( 'Payments', 'Settings tab label', 'woocommerce' );
|
||||||
|
|
||||||
|
add_action( 'woocommerce_admin_field_payment_gateways_banner', array( $this, 'payment_gateways_banner' ) );
|
||||||
add_action( 'woocommerce_admin_field_payment_gateways', array( $this, 'payment_gateways_setting' ) );
|
add_action( 'woocommerce_admin_field_payment_gateways', array( $this, 'payment_gateways_setting' ) );
|
||||||
parent::__construct();
|
parent::__construct();
|
||||||
}
|
}
|
||||||
|
|
@ -49,11 +50,9 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page {
|
||||||
$settings =
|
$settings =
|
||||||
array(
|
array(
|
||||||
array(
|
array(
|
||||||
'title' => __( 'Payment methods', 'woocommerce' ),
|
'type' => 'title', // this is needed as <table> tag is generated by this element, even if it has no other content.
|
||||||
'desc' => __( 'Installed payment methods are listed below and can be sorted to control their display order on the frontend.', 'woocommerce' ),
|
|
||||||
'type' => 'title',
|
|
||||||
'id' => 'payment_gateways_options',
|
|
||||||
),
|
),
|
||||||
|
array( 'type' => 'payment_gateways_banner' ), // React mount point for embedded banner slotfill.
|
||||||
array(
|
array(
|
||||||
'type' => 'payment_gateways',
|
'type' => 'payment_gateways',
|
||||||
),
|
),
|
||||||
|
|
@ -106,6 +105,15 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page {
|
||||||
$gateway->admin_options();
|
$gateway->admin_options();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates the React mount point for the embedded banner.
|
||||||
|
*/
|
||||||
|
public function payment_gateways_banner() {
|
||||||
|
?>
|
||||||
|
<div id="wc_payment_gateways_banner_slotfill"> </div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Output payment gateway settings.
|
* Output payment gateway settings.
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -71,8 +71,8 @@ class WC_Settings_Payment_Gateways_Test extends WC_Settings_Unit_Test_Case {
|
||||||
$settings_ids_and_types = $this->get_ids_and_types( $settings );
|
$settings_ids_and_types = $this->get_ids_and_types( $settings );
|
||||||
|
|
||||||
$expected = array(
|
$expected = array(
|
||||||
'payment_gateways_options' => array( 'title', 'sectionend' ),
|
'payment_gateways_options' => 'sectionend',
|
||||||
'' => 'payment_gateways',
|
'' => array( 'title', 'payment_gateways_banner', 'payment_gateways' ),
|
||||||
);
|
);
|
||||||
|
|
||||||
$this->assertEquals( $expected, $settings_ids_and_types );
|
$this->assertEquals( $expected, $settings_ids_and_types );
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue