implement slotfill
This commit is contained in:
RJChow
parent
feb1f42949
commit
9a95dc028f
|
|
@ -16,7 +16,10 @@ import { getAdminSetting } from '~/utils/admin-settings';
|
|||
import { PageLayout, EmbedLayout, PrimaryLayout as NoticeArea } from './layout';
|
||||
import { CustomerEffortScoreTracksContainer } from './customer-effort-score-tracks';
|
||||
import { EmbeddedBodyLayout } from './embedded-body-layout';
|
||||
import { PaymentsRecommendationsBanner } from './payments-recommendations-banner';
|
||||
import { PaymentsRecommendationsBanner } from './payments/payment-recommendations-banner';
|
||||
|
||||
import { createSlotFill, SlotFillProvider } from '@wordpress/components';
|
||||
import { registerPlugin, PluginArea } from '@wordpress/plugins';
|
||||
|
||||
// Modify webpack pubilcPath at runtime based on location of WordPress Plugin.
|
||||
// eslint-disable-next-line no-undef,camelcase
|
||||
|
|
@ -27,33 +30,47 @@ const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
|
|||
const settingsGroup = 'wc_admin';
|
||||
const hydrateUser = getAdminSetting( 'currentUserData' );
|
||||
|
||||
// TODO: move this to another module
|
||||
const Banner = () => {
|
||||
// if feature flag is enabled
|
||||
// show banned
|
||||
// else show existing h2 description and stuff
|
||||
const featureFlag = true;
|
||||
const { Fill, Slot } = createSlotFill( 'banner' );
|
||||
// Fill.slot = Slot;
|
||||
|
||||
if ( featureFlag ) {
|
||||
return (<>
|
||||
<PaymentsRecommendationsBanner>
|
||||
</PaymentsRecommendationsBanner>
|
||||
</>)
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
const PaymentsBannerFill = () => {
|
||||
return (
|
||||
<Fill>
|
||||
<PaymentsRecommendationsBanner />
|
||||
</Fill>
|
||||
);
|
||||
};
|
||||
|
||||
const PaymentsGatewaysOptionsDescroption = () => {
|
||||
return (
|
||||
<Fill>
|
||||
<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>
|
||||
</Fill>
|
||||
);
|
||||
};
|
||||
|
||||
registerPlugin( 'banner', { scope: 'my-scope', render: PaymentsBannerFill } );
|
||||
registerPlugin( 'banner2', { scope: 'my-scope', render: PaymentsGatewaysOptionsDescroption } );
|
||||
|
||||
// TODO: move this to another module
|
||||
const Banner = () => {
|
||||
return (
|
||||
<>
|
||||
<SlotFillProvider>
|
||||
<div className="banner">
|
||||
<Slot />
|
||||
</div>
|
||||
<PluginArea scope='my-scope' />
|
||||
</SlotFillProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
if ( appRoot ) {
|
||||
let HydratedPageLayout = withSettingsHydration(
|
||||
|
|
@ -94,14 +111,15 @@ if ( appRoot ) {
|
|||
// Render notices just above the WP content div.
|
||||
const wpBody = document.getElementById( 'wpbody-content' );
|
||||
|
||||
const mainform = document.getElementById( 'wc_payment_gateways_banner_slotfill' );
|
||||
const mainform = document.getElementById(
|
||||
'wc_payment_gateways_banner_slotfill'
|
||||
);
|
||||
const wrap =
|
||||
wpBody.querySelector( '.wrap.woocommerce' ) ||
|
||||
wpBody.querySelector( '.wrap' );
|
||||
const noticeContainer = document.createElement( 'div' );
|
||||
// always insert the slotfill -> problem because mainform element does not always exist
|
||||
// note this slotfill is not part of the form
|
||||
// how do we know which page we are on?
|
||||
|
||||
// TODO: note this slotfill is not part of the form
|
||||
render( Banner(), mainform );
|
||||
|
||||
render(
|
||||
|
|
@ -133,4 +151,3 @@ if (
|
|||
);
|
||||
} )();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
import { Card, CardHeader, CardFooter, Button } from '@wordpress/components';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
import { EllipsisMenu, List, Pill } from '@woocommerce/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
|
||||
export const PaymentsRecommendationsBanner = () => {
|
||||
return (
|
||||
<Card size="medium" className="woocommerce-recommended-payments-card">
|
||||
<CardHeader>
|
||||
<div className="woocommerce-recommended-payments-card__header">
|
||||
<Text
|
||||
variant="title.small"
|
||||
as="p"
|
||||
size="20"
|
||||
lineHeight="28px"
|
||||
>
|
||||
{ __( 'Additional ways to get paid', 'woocommerce' ) }
|
||||
</Text>
|
||||
<Text
|
||||
className={
|
||||
'woocommerce-recommended-payments__header-heading'
|
||||
}
|
||||
variant="caption"
|
||||
as="p"
|
||||
size="12"
|
||||
lineHeight="16px"
|
||||
>
|
||||
{ __(
|
||||
'We recommend adding one of the following payment extensions to your store. The extension will be installed and activated for you when you click "Get started".',
|
||||
'woocommerce'
|
||||
) }
|
||||
</Text>
|
||||
</div>
|
||||
<div className="woocommerce-card__menu woocommerce-card__header-item">
|
||||
<EllipsisMenu
|
||||
label={ __( 'Task List Options', 'woocommerce' ) }
|
||||
renderContent={ () => (
|
||||
<div className="woocommerce-review-activity-card__section-controls">
|
||||
<Button>
|
||||
{ __( 'Hide this', 'woocommerce' ) }
|
||||
</Button>
|
||||
</div>
|
||||
) }
|
||||
/>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardFooter>
|
||||
{/* TODO fix font colour and add icons */}
|
||||
{ __( 'Accepted payment methods include:', 'woocommerce' ) }
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
|
@ -72,7 +72,7 @@ const LearnMore = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const PaymentMethods = () => (
|
||||
export const PaymentMethods = () => (
|
||||
<div className="wcpay-connect-account-page-payment-methods">
|
||||
<Visa />
|
||||
<MasterCard />
|
||||
|
|
|
|||
|
|
@ -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 clip-path="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 clip-path="url(#clip1_255_63852)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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
|
||||
fill-rule="evenodd"
|
||||
clip-rule="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,73 @@
|
|||
import { Card, CardHeader, CardFooter, Button } from '@wordpress/components';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
import { EllipsisMenu, List, Pill } from '@woocommerce/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import Banner from './banner';
|
||||
import { PaymentMethods } from '../payments-welcome';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './payment-recommendations.scss';
|
||||
import { CardBody } from '@wordpress/components';
|
||||
|
||||
export const PaymentsRecommendationsBanner = () => {
|
||||
return (
|
||||
<Card size="medium" className="woocommerce-recommended-payments-banner">
|
||||
<CardBody className="woocommerce-recommended-payments-banner__body">
|
||||
<div className="woocommerce-recommended-payments-banner__image_container">
|
||||
<Banner />
|
||||
</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 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>
|
||||
<PaymentMethods className="woocommerce-recommended-payments-banner__footer_icon_container" />
|
||||
</div>
|
||||
<div>
|
||||
<Text variant="caption" as="p" size="12" lineHeight="16px">
|
||||
{ __( '& more.', 'woocommerce' ) }
|
||||
</Text>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,5 +1,41 @@
|
|||
.woocommerce-recommended-payments-banner {
|
||||
margin: 0 15px 10px 0;
|
||||
animation: isLoaded;
|
||||
animation-duration: 250ms;
|
||||
|
||||
.woocommerce-recommended-payments-banner__body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.woocommerce-recommended-payments-banner__text_container {
|
||||
width: 40%;
|
||||
margin-inline: 24px;
|
||||
|
||||
* {
|
||||
margin-block: 1rem
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-recommended-payments-banner__image_container {
|
||||
|
||||
}
|
||||
|
||||
.woocommerce-recommended-payments-banner__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wcpay-connect-account-page-payment-methods > svg {
|
||||
height: 28px
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-recommended-payments-card {
|
||||
margin: 0 0 10px 0;
|
||||
margin: 0 15px 10px 0;
|
||||
animation: isLoaded;
|
||||
animation-duration: 250ms;
|
||||
|
||||
|
|
|
|||
|
|
@ -49,12 +49,12 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page {
|
|||
protected function get_settings_for_default_section() {
|
||||
$settings =
|
||||
array(
|
||||
// array(
|
||||
// 'title' => __( 'Payment methods', 'woocommerce' ),
|
||||
// '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(
|
||||
// 'title' => __( 'Payment methods', 'woocommerce' ),
|
||||
// 'desc' => __( 'Installed payment methods are listed below and can be sorted to control their display order on the frontend.', 'woocommerce' ),
|
||||
'type' => 'title', // this is needed as <table> tag is generated by this element, even if it has no other content
|
||||
// 'id' => 'payment_gateways_options',
|
||||
),
|
||||
// TODO: write unit test to assert that mount point has been inserted
|
||||
array('type' => 'payment_gateways_banner'),
|
||||
array(
|
||||
|
|
|
|||
Loading…
Reference in New Issue