94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { Card, CardBody, Button, CardDivider } from '@wordpress/components';
|
|
import { useState } from '@wordpress/element';
|
|
import { WooPaymentMethodsLogos } from '@woocommerce/onboarding';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { getAdminSetting } from '~/utils/admin-settings';
|
|
import sanitizeHTML from '~/lib/sanitize-html';
|
|
import WooPaymentsLogo from './woopayments.svg';
|
|
import ExitSurveyModal from './exit-survey-modal';
|
|
import strings from './strings';
|
|
|
|
interface Props {
|
|
isSubmitted: boolean;
|
|
handleSetup: () => void;
|
|
}
|
|
|
|
const Banner: React.FC< Props > = ( { isSubmitted, handleSetup } ) => {
|
|
const { first_name } = getAdminSetting( 'currentUserData', {} );
|
|
const { description, cta_label, tc_url } = getAdminSetting(
|
|
'wcpayWelcomePageIncentive'
|
|
);
|
|
|
|
const [ isNoThanksClicked, setNoThanksClicked ] = useState( false );
|
|
const [ isExitSurveyModalOpen, setExitSurveyModalOpen ] = useState( false );
|
|
|
|
const isWooPayEligible = getAdminSetting( 'isWooPayEligible' );
|
|
|
|
const handleNoThanks = () => {
|
|
setNoThanksClicked( true );
|
|
setExitSurveyModalOpen( true );
|
|
};
|
|
|
|
return (
|
|
<Card className="__CLASS__">
|
|
<CardBody className="woopayments-welcome-page__header">
|
|
<img src={ WooPaymentsLogo } alt="WooPayments logo" />
|
|
<h1>{ strings.heading( first_name ) }</h1>
|
|
</CardBody>
|
|
<CardBody className="woopayments-welcome-page__offer">
|
|
<div className="woopayments-welcome-page__offer-pill">
|
|
{ strings.limitedTimeOffer }
|
|
</div>
|
|
<h2
|
|
dangerouslySetInnerHTML={ sanitizeHTML(
|
|
description + '<span class="tos-asterix">*</span>'
|
|
) }
|
|
/>
|
|
<Button
|
|
variant="primary"
|
|
isBusy={ isSubmitted }
|
|
disabled={ isSubmitted }
|
|
onClick={ handleSetup }
|
|
>
|
|
{ cta_label }
|
|
</Button>
|
|
<Button
|
|
variant="tertiary"
|
|
isBusy={ isNoThanksClicked && isExitSurveyModalOpen }
|
|
disabled={ isNoThanksClicked && isExitSurveyModalOpen }
|
|
onClick={ handleNoThanks }
|
|
>
|
|
{ strings.noThanks }
|
|
</Button>
|
|
<p>
|
|
{ isWooPayEligible
|
|
? strings.TosAndPpWooPay
|
|
: strings.TosAndPp }
|
|
</p>
|
|
<p>{ strings.termsAndConditions( tc_url ) }</p>
|
|
</CardBody>
|
|
<CardDivider />
|
|
<CardBody className="woopayments-welcome-page__payments">
|
|
<p>{ strings.paymentOptions }</p>
|
|
<WooPaymentMethodsLogos
|
|
isWooPayEligible={ isWooPayEligible }
|
|
maxElements={ 10 }
|
|
/>
|
|
</CardBody>
|
|
{ isExitSurveyModalOpen && (
|
|
<ExitSurveyModal
|
|
setExitSurveyModalOpen={ setExitSurveyModalOpen }
|
|
/>
|
|
) }
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default Banner;
|