Skip to content

Commit

Permalink
[COJ-1143]Amina/ fix: reset_email_modal_refresh_issue (#15449)
Browse files Browse the repository at this point in the history 
* fix: reset_email_modal_refresh_issue

* fix: client store

* fix: error case
  • Loading branch information
@amina-deriv
amina-deriv authored Jun 7, 2024
1 parent 54a9034 commit bf1fc17
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 89 deletions.
166 changes: 82 additions & 84 deletions packages/core/src/App/Containers/ConfirmEmailModal/confirm-email-modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,106 +2,104 @@ import React from 'react';
import { Button, Modal, Text } from '@deriv/components';
import { localize, Localize } from '@deriv/translations';
import { SentEmailModal } from '@deriv/account';
import { observer, useStore } from '@deriv/stores';
import { WS } from 'Services';
import PropTypes from 'prop-types';

export const ConfirmEmailModal = ({
changed_email,
is_open,
onClose,
prev_email,
setErrorMessage,
verification_code,
setEmailValue,
}) => {
const [email_request, setEmailRequest] = React.useState(null);
const [is_send_email_modal_open, setIsSendEmailModalOpen] = React.useState(false);
const [is_modal_open, setIsModalOpen] = React.useState(is_open);
export const ConfirmEmailModal = observer(
({ changed_email, is_open, onClose, prev_email, setErrorMessage, setEmailValue }) => {
const [email_request, setEmailRequest] = React.useState(null);
const [is_send_email_modal_open, setIsSendEmailModalOpen] = React.useState(false);
const [is_modal_open, setIsModalOpen] = React.useState(is_open);

const handleSubmit = () => {
const api_request = {
change_email: 'verify',
new_email: changed_email,
verification_code,
};
const { client } = useStore();
const { verification_code, setVerificationCode } = client;

setEmailRequest(prev => ({ ...prev, ...api_request }));
const handleSubmit = () => {
const api_request = {
change_email: 'verify',
new_email: changed_email,
verification_code: verification_code.request_email,
};

WS.changeEmail(api_request).then(response => {
if (response.error) {
onClose();
setEmailValue(changed_email);
setErrorMessage(response.error.message);
} else {
setIsSendEmailModalOpen(true);
}
setIsModalOpen(false);
});
};
setEmailRequest(prev => ({ ...prev, ...api_request }));

const resendEmail = () => {
WS.changeEmail(email_request);
};
WS.changeEmail(api_request).then(response => {
setIsModalOpen(false);
if (response.error) {
onClose();
setEmailValue(changed_email);
setErrorMessage(response.error.message);
} else {
setIsSendEmailModalOpen(true);
}
setVerificationCode('', 'request_email');
});
};

if (is_send_email_modal_open) {
const resendEmail = () => {
WS.changeEmail(email_request);
};

if (is_send_email_modal_open) {
return (
<SentEmailModal
is_open={is_send_email_modal_open}
onClose={() => setIsSendEmailModalOpen(false)}
identifier_title={'Change_Email'}
onClickSendEmail={resendEmail}
has_live_chat={true}
is_modal_when_mobile={true}
/>
);
}
return (
<SentEmailModal
is_open={is_send_email_modal_open}
onClose={() => setIsSendEmailModalOpen(false)}
identifier_title={'Change_Email'}
onClickSendEmail={resendEmail}
has_live_chat={true}
is_modal_when_mobile={true}
/>
<Modal
is_open={is_modal_open}
should_header_stick_body
title={<Localize i18n_default_text='Are you sure?' />}
toggleModal={onClose}
width='440px'
is_closed_on_cancel={false}
has_close_icon={false}
>
<React.Fragment>
<div className='email-confirmation'>
<Text as='p' color='prominent' size='xs' align='left'>
<Localize
i18n_default_text='Are you sure you want to update email <0>{{prev_email}}</0> to <1>{{changed_email}}</1>?'
values={{ prev_email, changed_email }}
components={[
<strong key={0} />,
<strong key={1} className='email-confirmation__currentEmail' />,
]}
/>
</Text>
</div>
<Modal.Footer>
<Button onClick={onClose} has_effect text={localize('Cancel')} secondary large />
<Button
className='email-change_button'
has_effect
onClick={() => {
handleSubmit();
}}
primary
large
>
<Localize i18n_default_text='Confirm' />
</Button>
</Modal.Footer>
</React.Fragment>
</Modal>
);
}
return (
<Modal
is_open={is_modal_open}
should_header_stick_body
title={<Localize i18n_default_text='Are you sure?' />}
toggleModal={onClose}
width='440px'
is_closed_on_cancel={false}
has_close_icon={false}
>
<React.Fragment>
<div className='email-confirmation'>
<Text as='p' color='prominent' size='xs' align='left'>
<Localize
i18n_default_text='Are you sure you want to update email <0>{{prev_email}}</0> to <1>{{changed_email}}</1>?'
values={{ prev_email, changed_email }}
components={[
<strong key={0} />,
<strong key={1} className='email-confirmation__currentEmail' />,
]}
/>
</Text>
</div>
<Modal.Footer>
<Button onClick={onClose} has_effect text={localize('Cancel')} secondary large />
<Button
className='email-change_button'
has_effect
onClick={() => {
handleSubmit();
}}
primary
large
>
<Localize i18n_default_text='Confirm' />
</Button>
</Modal.Footer>
</React.Fragment>
</Modal>
);
};
);

ConfirmEmailModal.propTypes = {
changed_email: PropTypes.string,
is_open: PropTypes.bool,
onClose: PropTypes.func,
prev_email: PropTypes.string,
setErrorMessage: PropTypes.func,
verification_code: PropTypes.string,
};
10 changes: 5 additions & 5 deletions packages/core/src/App/Containers/ResetEmailModal/reset-email-modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,9 @@ const ResetEmailModal = observer(() => {
const { ui, client } = useStore();
const { disableApp, enableApp, is_loading, is_reset_email_modal_visible: is_visible, toggleResetEmailModal } = ui;
const { email } = client;
const verification_code = client.verification_code.request_email;
const [is_confirm_email_modal_open, setIsConfirmResetEmailModal] = React.useState(false);
const [email_error_msg, setEmailErrorMsg] = React.useState(null);
const [email_value, setEmailValue] = React.useState(null);
const [email_value, setEmailValue] = React.useState('');

const handleSubmit = values => {
setEmailValue(values.email);
Expand Down Expand Up @@ -43,7 +42,6 @@ const ResetEmailModal = observer(() => {
onClose={() => setIsConfirmResetEmailModal(false)}
prev_email={email}
setErrorMessage={setEmailErrorMsg}
verification_code={verification_code}
setEmailValue={setEmailValue}
/>
);
Expand All @@ -62,7 +60,7 @@ const ResetEmailModal = observer(() => {
disableApp={disableApp}
enableApp={enableApp}
is_loading={is_loading}
dismissable={status.error_msg}
dismissable={status.error_msg || email_error_msg}
onConfirm={() => toggleResetEmailModal(false)}
is_closed_on_cancel={false}
>
Expand Down Expand Up @@ -116,7 +114,9 @@ const ResetEmailModal = observer(() => {
!values.email || errors.email || isSubmitting,
})}
type='submit'
is_disabled={!values.email || !!errors.email || isSubmitting}
is_disabled={
!values.email || !!errors.email || isSubmitting || !!email_error_msg
}
primary
large
>
Expand Down
7 changes: 7 additions & 0 deletions packages/core/src/Stores/client-store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1506,6 +1506,13 @@ export default class ClientStore extends BaseStore {
this.user_id = LocalStore.get('active_user_id');
this.setAccounts(LocalStore.getObject(storage_key));
this.setSwitched('');
if (action_param === 'request_email') {
const request_email_code = code_param ?? LocalStore.get(`verification_code.${action_param}`) ?? '';
if (request_email_code) {
this.setVerificationCode(request_email_code, action_param);
this.root_store.ui.toggleResetEmailModal(true);
}
}
const client = this.accounts[this.loginid];
// If there is an authorize_response, it means it was the first login
if (authorize_response) {
Expand Down

0 comments on commit bf1fc17

Please sign in to comment.