91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { Button } from '@wordpress/components';
|
|
import { useState } from '@wordpress/element';
|
|
import { WCPayConnectCard } from '@woocommerce/onboarding';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { getAdminSetting } from '~/utils/admin-settings';
|
|
import sanitizeHTML from '~/lib/sanitize-html';
|
|
import 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 wccomSettings = getAdminSetting( 'wccomHelper', {} );
|
|
|
|
const handleNoThanks = () => {
|
|
setNoThanksClicked( true );
|
|
setExitSurveyModalOpen( true );
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<WCPayConnectCard
|
|
actionButton={
|
|
<div className="woopayments-welcome-page__offer">
|
|
<div className="woopayments-welcome-page__offer-pill">
|
|
{ strings.limitedTimeOffer }
|
|
</div>
|
|
<h2
|
|
dangerouslySetInnerHTML={ sanitizeHTML(
|
|
description +
|
|
'<span class="tos-asterix">*</span>'
|
|
) }
|
|
/>
|
|
<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>{ strings.TosAndPp }</p>
|
|
<p>{ strings.termsAndConditions( tc_url ) }</p>
|
|
</div>
|
|
}
|
|
firstName={ first_name }
|
|
businessCountry={ wccomSettings?.storeCountry ?? '' }
|
|
isWooPayEligible={ isWooPayEligible }
|
|
showNotice={ true }
|
|
/>
|
|
{ isExitSurveyModalOpen && (
|
|
<ExitSurveyModal
|
|
setExitSurveyModalOpen={ setExitSurveyModalOpen }
|
|
/>
|
|
) }
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Banner;
|