woocommerce/plugins/woocommerce-admin/client/payments-welcome/exit-survey-modal.tsx

145 lines
3.6 KiB
TypeScript
Raw Normal View History

Move WC Pay welcome page from wc-calypso-bridge (https://github.com/woocommerce/woocommerce-admin/pull/8151) * Move WC Pay welcome page from wc-calypso-bridge (https://github.com/woocommerce/woocommerce-admin/pull/8083) * Add wc-pay-welcome-screen flags * Add wc pay welcome page from wc calpyso bridge * Add changelog * Rename var to pageViewTimestamp to prevent confusion * Remove unused code * Make sure hasViewedWelcomePage is a boolean value * Simplify storeViewWelcome * Add payments remind me later note (https://github.com/woocommerce/woocommerce-admin/pull/8085) * Add payments remind me later note Fix wcpay path * Add changelogs * Update src/Notes/PaymentsRemindMeLater.php Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> * Fix possibly_add_note syntax error Update Events.php Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> * Replace flag icon with component and svg background to png (https://github.com/woocommerce/woocommerce-admin/pull/8101) * Activate promo note after WC Pay is activated (https://github.com/woocommerce/woocommerce-admin/pull/8104) * Activate promo after wcpay is a\ctivated * Add changelogs * Add experimental to promo API path and limit the promo names * Use ExPlat to render the WC Pay menu conditionally (https://github.com/woocommerce/woocommerce-admin/pull/8115) * Check ExPlat to render the menu conditionally * Update the experiment name * Fix letter case to follow feature class naming convention * Enable wc-pay-welcome-page feature in core config (https://github.com/woocommerce/woocommerce-admin/pull/8124) * Use wc_calypso_bridge_payments_dismissed option name to respect the previously saved setting from wp.com * Missed wc_calypso_bridge_payments_dismissed rename * Use the existing code to prevent duplication * Fix warning (https://github.com/woocommerce/woocommerce-admin/pull/8141) * Change experiment to come after checks (https://github.com/woocommerce/woocommerce-admin/pull/8142) * Change track path to (https://github.com/woocommerce/woocommerce-admin/pull/8143) Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Replace deprecated wc-admin-settings package Co-authored-by: Moon <moon.kyong@automattic.com> Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>
2022-01-12 06:46:33 +00:00
/**
* External dependencies
*/
import { useState } from '@wordpress/element';
import {
Button,
Modal,
CheckboxControl,
TextareaControl,
} from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import strings from './strings';
/**
* Provides a modal requesting customer feedback.
*
*/
function ExitSurveyModal( {
setExitSurveyModalOpen,
}: {
// eslint-disable-next-line @typescript-eslint/ban-types
setExitSurveyModalOpen: Function;
} ): JSX.Element | null {
const [ isOpen, setOpen ] = useState( true );
const [ isHappyChecked, setHappyChecked ] = useState( false );
const [ isInstallChecked, setInstallChecked ] = useState( false );
const [ isMoreInfoChecked, setMoreInfoChecked ] = useState( false );
const [ isAnotherTimeChecked, setAnotherTimeChecked ] = useState( false );
const [ isSomethingElseChecked, setSomethingElseChecked ] = useState(
false
);
const [ comments, setComments ] = useState( '' );
const closeModal = () => {
setOpen( false );
setExitSurveyModalOpen( false );
};
const removeWCPayMenu = () => {
apiFetch( {
path: 'wc-admin/options',
method: 'POST',
data: {
wc_calypso_bridge_payments_dismissed: 'yes',
},
} ).then( () => {
window.location.href = 'admin.php?page=wc-admin';
} );
setOpen( false );
};
const sendFeedback = () => {
recordEvent( 'wcpay_exit_survey', {
happy: isHappyChecked ? 'Yes' : 'No',
install: isInstallChecked ? 'Yes' : 'No',
moreInfo: isMoreInfoChecked ? 'Yes' : 'No',
anotherTime: isAnotherTimeChecked ? 'Yes' : 'No',
somethingElse: isSomethingElseChecked ? 'Yes' : 'No',
comments,
} );
removeWCPayMenu();
};
if ( ! isOpen ) {
return null;
}
return (
<Modal
className="wc-calypso-bridge-payments-welcome-survey"
title={ strings.surveyTitle }
onRequestClose={ closeModal }
shouldCloseOnClickOutside={ false }
>
<p className="wc-calypso-bridge-payments-welcome-survey__intro">
{ strings.surveyIntro }
</p>
<p className="wc-calypso-bridge-payments-welcome-survey__question">
{ strings.surveyQuestion }
</p>
<div className="wc-calypso-bridge-payments-welcome-survey__selection">
<CheckboxControl
label={ strings.surveyHappyLabel }
checked={ isHappyChecked }
onChange={ setHappyChecked }
/>
<CheckboxControl
label={ strings.surveyInstallLabel }
checked={ isInstallChecked }
onChange={ setInstallChecked }
/>
<CheckboxControl
label={ strings.surveyMoreInfoLabel }
checked={ isMoreInfoChecked }
onChange={ setMoreInfoChecked }
/>
<CheckboxControl
label={ strings.surveyAnotherTimeLabel }
checked={ isAnotherTimeChecked }
onChange={ setAnotherTimeChecked }
/>
<CheckboxControl
label={ strings.surveySomethingElseLabel }
checked={ isSomethingElseChecked }
onChange={ setSomethingElseChecked }
/>
</div>
<div className="wc-calypso-bridge-payments-welcome-survey__comments">
<TextareaControl
label={ strings.surveyCommentsLabel }
value={ comments }
onChange={ ( value: string ) => setComments( value ) }
rows={ 3 }
/>
</div>
<div className="wc-calypso-bridge-payments-welcome-survey__buttons">
<Button
isTertiary
isDestructive
onClick={ removeWCPayMenu }
name="cancel"
>
{ strings.surveyCancelButton }
</Button>
<Button isSecondary onClick={ sendFeedback } name="send">
{ strings.surveySubmitButton }
</Button>
</div>
</Modal>
);
}
export default ExitSurveyModal;