carol/ P2P: Email verification for orders

packages/cashier/src/pages/p2p-cashier/p2p-cashier.jsx

@@ -34,6 +34,9 @@ const P2PCashier = ({
     setOnRemount,
 }) => {
     const [order_id, setOrderId] = React.useState(null);
+    const [action_param, setActionParam] = React.useState();
+    const [code_param, setCodeParam] = React.useState();
+
     const server_time = {
         get,
         init,
@@ -42,7 +45,16 @@ const P2PCashier = ({
 
     React.useEffect(() => {
         const url_params = new URLSearchParams(location.search);
-        const passed_order_id = url_params.get('order');
+        let passed_order_id;
+
+        setActionParam(url_params.get('action'));
+        setCodeParam(url_params.get('code'));
+
+        if (url_params.has('order_id')) {
+            passed_order_id = url_params.get('order_id');
+        } else if (url_params.has('order')) {
+            passed_order_id = url_params.get('order');
+        }
 
         if (passed_order_id) {
             setQueryOrder(passed_order_id);
@@ -55,8 +67,9 @@ const P2PCashier = ({
         input_order_id => {
             const current_query_params = new URLSearchParams(location.search);
 
-            if (current_query_params.has('order')) {
+            if (current_query_params.has('order_id') || current_query_params.has('order')) {
                 current_query_params.delete('order');
+                current_query_params.delete('order_id');
             }
 
             if (input_order_id) {
@@ -91,8 +104,9 @@ const P2PCashier = ({
     return (
         <P2P
             addNotificationMessage={addNotificationMessage}
-            client={{ currency, local_currency_config, is_virtual, residence, loginid }}
             balance={balance}
+            client={{ currency, local_currency_config, is_virtual, residence, loginid }}
+            current_focus={current_focus}
             filterNotificationMessages={filterNotificationMessages}
             history={history}
             is_dark_mode_on={is_dark_mode_on}
@@ -107,13 +121,14 @@ const P2PCashier = ({
             removeNotificationByKey={removeNotificationByKey}
             removeNotificationMessage={removeNotificationMessage}
             server_time={server_time}
+            setCurrentFocus={setCurrentFocus}
             setNotificationCount={setNotificationCount}
-            setOnRemount={setOnRemount}
             setOrderId={setQueryOrder}
+            setOnRemount={setOnRemount}
             should_show_verification={/verification/.test(location.hash)}
+            verification_action={action_param}
+            verification_code={code_param}
             websocket_api={WS}
-            current_focus={current_focus}
-            setCurrentFocus={setCurrentFocus}
         />
     );
 };

packages/core/src/App/Containers/Redirect/redirect.jsx

@@ -145,6 +145,14 @@ const Redirect = ({
             redirected_to_route = true;
             break;
         }
+        case 'p2p_order_confirm': {
+            history.push({
+                pathname: routes.cashier_p2p,
+                search: url_query_string,
+            });
+            redirected_to_route = true;
+            break;
+        }
 
         default:
             break;

packages/p2p/jest.config.js

@@ -20,7 +20,7 @@ module.exports = {
         '/crowdin/',
         // TODO: Update the test files once the major features are done
         // This is a temporary change, I hope
-        '/src/components/order-details/',
+        '/src/components/order*',
     ],
     coveragePathIgnorePatterns: [
         '<rootDir>/.eslintrc.js',

packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx

@@ -4,15 +4,17 @@ import { Icon, Modal, Text } from '@deriv/components';
 import { Localize } from 'Components/i18next';
 
 const EmailLinkBlockedModal = ({
-    blocked_for_minutes,
+    // TODO: Uncomment when time is available in BE response
+    // blocked_for_minutes,
+    email_link_blocked_modal_error_message,
     is_email_link_blocked_modal_open,
     setIsEmailLinkBlockedModalOpen,
 }) => {
     return (
         <Modal
             has_close_icon
             is_open={is_email_link_blocked_modal_open}
-            title=''
+            renderTitle={() => <></>}
             toggleModal={() => setIsEmailLinkBlockedModalOpen(false)}
             width='440px'
         >
@@ -22,18 +24,17 @@ const EmailLinkBlockedModal = ({
                     <Localize i18n_default_text='Too many failed attempts' />
                 </Text>
                 <Text align='center' color='prominent' size='s'>
-                    <Localize
-                        i18n_default_text='We have temporarily blocked your request after too many failed attempts. Please try again after {{blocked_for_minutes}} minutes.'
-                        values={{ blocked_for_minutes }}
-                    />
+                    {email_link_blocked_modal_error_message}
                 </Text>
             </Modal.Body>
         </Modal>
     );
 };
 
 EmailLinkBlockedModal.propTypes = {
-    blocked_for_minutes: PropTypes.number,
+    // TODO: Uncomment when time is available in BE response
+    // blocked_for_minutes: PropTypes.number,
+    email_link_blocked_modal_error_message: PropTypes.string,
     is_email_link_blocked_modal_open: PropTypes.bool,
     setIsEmailLinkBlockedModalOpen: PropTypes.func,
 };

packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx

@@ -6,15 +6,15 @@ import { Localize } from 'Components/i18next';
 const EmailLinkVerifiedModal = ({
     amount,
     currency,
-    is_email_verified_modal_open,
+    is_email_link_verified_modal_open,
     onClickConfirm,
     setIsEmailLinkVerifiedModalOpen,
 }) => {
     return (
         <Modal
             has_close_icon
-            is_open={is_email_verified_modal_open}
-            title=''
+            is_open={is_email_link_verified_modal_open}
+            renderTitle={() => <></>}
             toggleModal={() => setIsEmailLinkVerifiedModalOpen(false)}
             width='440px'
         >
@@ -31,7 +31,14 @@ const EmailLinkVerifiedModal = ({
                 </Text>
             </Modal.Body>
             <Modal.Footer className='email-verified-modal--footer'>
-                <Button large primary onClick={onClickConfirm}>
+                <Button
+                    large
+                    primary
+                    onClick={() => {
+                        setIsEmailLinkVerifiedModalOpen(false);
+                        onClickConfirm();
+                    }}
+                >
                     <Localize i18n_default_text='Confirm' />
                 </Button>
             </Modal.Footer>
@@ -42,7 +49,7 @@ const EmailLinkVerifiedModal = ({
 EmailLinkVerifiedModal.propTypes = {
     amount: PropTypes.number,
     currency: PropTypes.string,
-    is_email_verified_modal_open: PropTypes.bool,
+    is_email_link_verified_modal_open: PropTypes.bool,
     onClickConfirm: PropTypes.func,
     setIsEmailLinkVerifiedModalOpen: PropTypes.func,
 };

packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx

@@ -1,33 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Icon, Loading, Modal, Text } from '@deriv/components';
+import { Button, Icon, Modal, Text } from '@deriv/components';
 import { Localize } from 'Components/i18next';
 
 const EmailVerificationModal = ({
     email_address,
     is_email_verification_modal_open,
-    is_verifying = false,
     onClickResendEmailButton,
-    remaining_time,
     setIsEmailVerificationModalOpen,
-    should_show_resend_email_button = false,
-    verification_link_expiry_time,
+    should_show_resend_email_button = true,
+    // TODO: Uncomment when time is available in BE response
+    // remaining_time,
+    // verification_link_expiry_time,
 }) => {
     const [should_show_reasons_if_no_email, setShouldShowReasonsIfNoEmail] = React.useState(false);
 
-    if (is_verifying) {
-        return (
-            <Modal has_close_icon={false} small width='440px'>
-                <Loading is_fullscreen={false} />
-            </Modal>
-        );
-    }
-
     return (
         <Modal
             has_close_icon
             is_open={is_email_verification_modal_open}
-            title=''
+            renderTitle={() => <></>}
             toggleModal={() => setIsEmailVerificationModalOpen(false)}
             width='440px'
         >
@@ -47,10 +39,8 @@ const EmailVerificationModal = ({
                     />
                 </Text>
                 <Text color='prominent' size='s'>
-                    <Localize
-                        i18n_default_text='The verification link expires in {{verification_link_expiry_time}} minutes'
-                        values={{ verification_link_expiry_time }}
-                    />
+                    {/* TODO: Uncomment when time is available in BE response */}
+                    <Localize i18n_default_text='The verification link expires in 10 minutes' />
                 </Text>
                 <Text
                     className='email-verification-modal--receive_email_text'
@@ -84,16 +74,18 @@ const EmailVerificationModal = ({
                         <div className='email-verification-modal--reason'>
                             <Icon icon='IcEmailFirewall' size={36} />
                             <Text className='email-verification-modal--reason__text' color='prominent' size='xxs'>
-                                <Localize i18n_default_text='We can’t deliver the email to this address (usually because of firewalls or filtering).' />
+                                <Localize i18n_default_text="We can't deliver the email to this address (usually because of firewalls or filtering)." />
                             </Text>
                         </div>
                     </React.Fragment>
                 )}
             </Modal.Body>
-            {should_show_resend_email_button && (
+            {should_show_resend_email_button && should_show_reasons_if_no_email && (
                 <Modal.Footer>
                     <Button large primary onClick={onClickResendEmailButton}>
-                        <Localize i18n_default_text='Resend email {{remaining_time}}' values={{ remaining_time }} />
+                        <Localize i18n_default_text='Resend email' />
+                        {/* TODO: Uncomment when time is available in BE response
+                        <Localize i18n_default_text='Resend email {{remaining_time}}' values={{ remaining_time }} /> */}
                     </Button>
                 </Modal.Footer>
             )}
@@ -106,10 +98,12 @@ EmailVerificationModal.propTypes = {
     is_email_verification_modal_open: PropTypes.bool,
     is_verifying: PropTypes.bool,
     onClickResendEmailButton: PropTypes.func,
-    remaining_time: PropTypes.string,
+    // TODO: Uncomment when time is available in BE response
+    // remaining_time: PropTypes.string,
     setIsEmailVerificationModalOpen: PropTypes.func,
     should_show_resend_email_button: PropTypes.bool,
-    verification_link_expiry_time: PropTypes.number,
+    // TODO: Uncomment when time is available in BE response
+    // verification_link_expiry_time: PropTypes.number,
 };
 
 export default EmailVerificationModal;

packages/p2p/src/components/error-modal/error-modal.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal } from '@deriv/components';
+import { Localize } from 'Components/i18next';
+
+const ErrorModal = ({ error_message, error_modal_title, is_error_modal_open, setIsErrorModalOpen }) => {
+    return (
+        <Modal is_open={is_error_modal_open} title={error_modal_title}>
+            <Modal.Body>{error_message}</Modal.Body>
+            <Modal.Footer>
+                <Button large primary onClick={() => setIsErrorModalOpen(false)}>
+                    <Localize i18n_default_text='Ok' />
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+ErrorModal.propTypes = {
+    error_message: PropTypes.string,
+    error_modal_title: PropTypes.string,
+    is_error_modal_open: PropTypes.bool,
+    setIsErrorModalOpen: PropTypes.func,
+};

packages/p2p/src/components/error-modal/index.js

@@ -0,0 +1,3 @@
+import ErrorModal from './error-modal.jsx';
+
+export default ErrorModal;

packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx

@@ -4,16 +4,18 @@ import { Button, Icon, Modal, Text } from '@deriv/components';
 import { Localize } from 'Components/i18next';
 
 const InvalidVerificationLinkModal = ({
+    invalid_verification_link_error_message,
     is_invalid_verification_link_modal_open,
     onClickGetNewLinkButton,
     setIsInvalidVerificationLinkModalOpen,
-    verification_link_expiry_time,
+    // TODO: Uncomment when time is available in BE response
+    // verification_link_expiry_time,
 }) => {
     return (
         <Modal
             has_close_icon
             is_open={is_invalid_verification_link_modal_open}
-            title=''
+            renderTitle={() => <></>}
             toggleModal={() => setIsInvalidVerificationLinkModalOpen(false)}
             width='440px'
         >
@@ -23,14 +25,18 @@ const InvalidVerificationLinkModal = ({
                     <Localize i18n_default_text='Invalid verification link' />
                 </Text>
                 <Text align='center' color='prominent' size='s'>
-                    <Localize
-                        i18n_default_text='The verification link becomes invalid after {{verification_link_expiry_time}} minutes. Hit the button below to request a new one.'
-                        values={{ verification_link_expiry_time }}
-                    />
+                    {invalid_verification_link_error_message}
                 </Text>
             </Modal.Body>
             <Modal.Footer className='invalid-verification-link-modal--footer'>
-                <Button large primary onClick={onClickGetNewLinkButton}>
+                <Button
+                    large
+                    primary
+                    onClick={() => {
+                        setIsInvalidVerificationLinkModalOpen(false);
+                        onClickGetNewLinkButton();
+                    }}
+                >
                     <Localize i18n_default_text='Get new link' />
                 </Button>
             </Modal.Footer>
@@ -39,10 +45,12 @@ const InvalidVerificationLinkModal = ({
 };
 
 InvalidVerificationLinkModal.propTypes = {
+    invalid_verification_link_error_message: PropTypes.string,
     is_invalid_verification_link_modal_open: PropTypes.bool,
     onClickGetNewLinkButton: PropTypes.func,
     setIsInvalidVerificationLinkModalOpen: PropTypes.func,
-    verification_link_expiry_time: PropTypes.number,
+    // TODO: Uncomment when time is available in BE response
+    // verification_link_expiry_time: PropTypes.number,
 };
 
 export default InvalidVerificationLinkModal;

packages/p2p/src/components/loading-modal/index.js

@@ -0,0 +1,3 @@
+import LoadingModal from './loading-modal.jsx';
+
+export default LoadingModal;

packages/p2p/src/components/loading-modal/loading-modal.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Loading, Modal } from '@deriv/components';
+
+const LoadingModal = ({ is_loading_modal_open }) => {
+    return (
+        <Modal has_close_icon={false} is_open={is_loading_modal_open} small width='440px'>
+            <Loading is_fullscreen={false} />
+        </Modal>
+    );
+};
+
+LoadingModal.propTypes = {
+    is_loading_modal_open: PropTypes.bool,
+};
+
+export default LoadingModal;

packages/p2p/src/components/order-details/order-details-confirm-modal.jsx

@@ -91,14 +91,8 @@ const OrderDetailsConfirmModal = ({
                             large
                             onClick={() => {
                                 hideConfirmOrderModal();
-                                order_store.confirmOrderRequest(id);
-                                if (!is_buy_order_for_user) {
-                                    clearTimeout(wait);
-
-                                    const wait = setTimeout(() => {
-                                        order_store.setIsRatingModalOpen(true);
-                                    }, 250);
-                                }
+                                setIsCheckboxChecked(false);
+                                order_store.confirmOrderRequest(id, is_buy_order_for_user);
                             }}
                         >
                             {is_buy_order_for_user ? (