Skip to content

Commit

Permalink
Merge pull request binary-com#39 from fasihali-deriv/fix-leave-confir…
Browse files Browse the repository at this point in the history
…mation-modal

Fasih/ Fixed modal height issue and semicolon issue
  • Loading branch information
amina-deriv committed Jun 4, 2024
2 parents bd1b259 + 133ea34 commit a445862
Show file tree
Hide file tree
Showing 6 changed files with 9 additions and 34 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@ const FinancialDetailsDropdownField = ({
{...field}
/>
)}
;
</React.Fragment>
)}
</Field>
Expand Down Expand Up @@ -141,7 +140,6 @@ const FinancialDetailsOccupationDropdownField = ({
required
/>
)}
;
</React.Fragment>
)}
</Field>
Expand Down
21 changes: 9 additions & 12 deletions packages/account/src/Components/leave-confirm/leave-confirm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import React from 'react';
import { RouteComponentProps, useHistory, withRouter } from 'react-router-dom';
import { FormikConsumer } from 'formik';
import { Button, Icon, Modal } from '@deriv/components';
import { isMobile } from '@deriv/shared';
import { localize } from '@deriv/translations';
import IconMessageContent from '../icon-message-content';
import { useDevice } from '@deriv-com/ui';

type TLeaveConfirmMessage = {
back: () => void;
Expand All @@ -17,29 +17,25 @@ type TTransitionBlocker = RouteComponentProps & {
};

const LeaveConfirmMessage = ({ back, leave }: TLeaveConfirmMessage) => {
const { isMobile } = useDevice();

return (
<IconMessageContent
className='leave-confirm'
message={localize('Unsaved changes')}
text={localize('You have unsaved changes. Are you sure you want to discard changes and leave this page?')}
icon={<Icon icon='IcUnsavedChanges' size={isMobile() ? 93 : 128} data_testid='dt_unsaved_changes_icon' />}
icon={<Icon icon='IcUnsavedChanges' size={isMobile ? 93 : 128} data_testid='dt_unsaved_changes_icon' />}
is_disabled_for_mobile={true}
>
<div className='account-management-flex-wrapper account-management-leave-confirm'>
<Button
type='button'
has_effect
onClick={back}
text={localize('Cancel')}
secondary
{...(isMobile() ? { large: true } : {})}
/>
<Button type='button' has_effect onClick={back} text={localize('Cancel')} secondary large={isMobile} />
<Button
type='button'
has_effect
onClick={leave}
text={localize('Leave Settings')}
primary
{...(isMobile() ? { large: true } : {})}
large={isMobile}
/>
</div>
</IconMessageContent>
Expand All @@ -53,6 +49,7 @@ export const TransitionBlocker = ({ dirty, onDirty }: TTransitionBlocker) => {
const [show, setShow] = React.useState(false);
const [next_location, setNextLocation] = React.useState<{ pathname: string } | null>(null);
const history = useHistory();
const { isMobile } = useDevice();

React.useEffect(() => {
return () => unblock();
Expand Down Expand Up @@ -87,7 +84,7 @@ export const TransitionBlocker = ({ dirty, onDirty }: TTransitionBlocker) => {

return (
<>
{show && isMobile() ? (
{show && isMobile ? (
<LeaveConfirmMessage back={back} leave={leave} />
) : (
<Modal is_open={show} small toggleModal={back}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,6 @@ const CountrySelector = ({ handleSelectionNext, is_from_external, mismatch_statu
/>
</div>
)}
;
</React.Fragment>
)}
</Field>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ const TradingAssessmentDropdown = ({
/>
</div>
)}
;
</React.Fragment>
);
}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -467,7 +467,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
{!is_mf && (
<fieldset className='account-form__fieldset'>
Expand Down Expand Up @@ -510,7 +509,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
)}
<fieldset className='account-form__fieldset'>
Expand Down Expand Up @@ -541,7 +539,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
{!shouldHideOccupationField(values.employment_status || employment_status) && (
<fieldset className='account-form__fieldset'>
Expand Down Expand Up @@ -577,7 +574,6 @@ const FinancialAssessment = observer(() => {
data_testid='occupation'
/>
)}
;
</fieldset>
)}
<fieldset className='account-form__fieldset'>
Expand Down Expand Up @@ -606,7 +602,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
<fieldset className='account-form__fieldset'>
{isDesktop ? (
Expand Down Expand Up @@ -634,7 +629,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
<fieldset className='account-form__fieldset'>
{isDesktop ? (
Expand Down Expand Up @@ -662,7 +656,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
<fieldset className='account-form__fieldset'>
{isDesktop ? (
Expand Down Expand Up @@ -691,7 +684,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
<fieldset className='account-form__fieldset'>
{isDesktop ? (
Expand Down Expand Up @@ -720,7 +712,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
{/* Trading experience fieldset */}
</FormBodySection>
Expand Down Expand Up @@ -764,7 +755,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
<fieldset className='account-form__fieldset'>
{isDesktop ? (
Expand Down Expand Up @@ -799,7 +789,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
<fieldset className='account-form__fieldset'>
{isDesktop ? (
Expand Down Expand Up @@ -834,7 +823,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
<fieldset className='account-form__fieldset'>
{isDesktop ? (
Expand Down Expand Up @@ -869,7 +857,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
<fieldset className='account-form__fieldset'>
{isDesktop ? (
Expand Down Expand Up @@ -904,7 +891,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
<fieldset className='account-form__fieldset'>
{isDesktop ? (
Expand Down Expand Up @@ -939,7 +925,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
<fieldset className='account-form__fieldset'>
{isDesktop ? (
Expand Down Expand Up @@ -977,7 +962,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
<fieldset className='account-form__fieldset'>
{isDesktop ? (
Expand Down Expand Up @@ -1016,7 +1000,6 @@ const FinancialAssessment = observer(() => {
}}
/>
)}
;
</fieldset>
</FormBodySection>
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,6 @@ const TradingAssessment = observer(() => {
/>
</div>
)}
;
</fieldset>
);
// eslint-disable-next-line no-else-return
Expand Down

0 comments on commit a445862

Please sign in to comment.