Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Farzin/PRODQA-921/Cashier dark mode issue #8700

Merged
merged 8 commits into from
May 30, 2023
Merged

Farzin/PRODQA-921/Cashier dark mode issue #8700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
28a146b
fix(cashier): :bug: fix cashier dark mode issue
May 23, 2023
b6d1c9d
test(cashier): :white_check_mark: fix the failing test
May 23, 2023
1388c50
Merge branch 'master' into farzin/PRODQA-921/cashier_dark_mode_issue
May 24, 2023
0c16052
Merge branch 'master' into farzin/PRODQA-921/cashier_dark_mode_issue
May 25, 2023
718b452
Merge branch 'master' into farzin/PRODQA-921/cashier_dark_mode_issue
May 26, 2023
16e4e43
Merge branch 'master' into farzin/PRODQA-921/cashier_dark_mode_issue
May 30, 2023
94f7dcf
Merge branch 'master' into farzin/PRODQA-921/cashier_dark_mode_issue
May 30, 2023
7ad9763
Merge branch 'master' into farzin/PRODQA-921/cashier_dark_mode_issue
amina-deriv May 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ describe('<Real />', () => {
clearIframe: jest.fn(),
iframe_height: 100,
iframe_url: 'https://www.test_url.com',
changeTheme: jest.fn(),
checkIframeLoaded: jest.fn(),
setContainerHeight: jest.fn(),
},
deposit: {
onMountDeposit: jest.fn(),
Expand Down
21 changes: 9 additions & 12 deletions packages/cashier/src/components/cashier-container/real/real.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,12 @@ import { useCashierStore } from '../../../stores/useCashierStores';
import './real.scss';

const Real = observer(({ is_deposit = false }: { is_deposit?: boolean }) => {
const {
traders_hub: { is_low_risk_cr_eu_real },
ui: { is_dark_mode_on },
} = useStore();

Comment on lines -9 to -13
Copy link
Member

@shayan-deriv shayan-deriv May 24, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's not that important but just for having more consistency for our code style I'm asking this. I saw in this PR we are getting our data from store like this:

const {
        common: { current_language },
    } = useStore();

but here you actually changed the syntax. IMO the way you wrote it is more clear to understand , So I think we can discuss and agree on one of the formats for the future

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shayan-deriv Yeah agree with you, I personally try to avoid nested object destructuring cause it will be hard to follow by eye. It similar to nested ternary operator situation 👀

const { traders_hub, ui } = useStore();
const { is_low_risk_cr_eu_real } = traders_hub;
const { is_dark_mode_on } = ui;
const { iframe, deposit, general_store } = useCashierStore();

const { clearIframe, iframe_height, iframe_url, changeTheme } = iframe;

const { clearIframe, iframe_height, iframe_url, checkIframeLoaded, setContainerHeight } = iframe;
const { is_loading } = general_store;

const { onMountDeposit } = deposit;

const should_show_breadcrumbs = !is_low_risk_cr_eu_real && is_deposit && Boolean(iframe_height);
Expand All @@ -30,8 +25,10 @@ const Real = observer(({ is_deposit = false }: { is_deposit?: boolean }) => {
}, [clearIframe, onMountDeposit]);

React.useEffect(() => {
changeTheme();
}, [changeTheme, is_dark_mode_on]);
// To show loading state when switching theme
setContainerHeight(0);
checkIframeLoaded();
}, [checkIframeLoaded, is_dark_mode_on, setContainerHeight]);

return (
<div className='cashier__wrapper real'>
Expand All @@ -41,7 +38,7 @@ const Real = observer(({ is_deposit = false }: { is_deposit?: boolean }) => {
<iframe
className='cashier__content'
height={iframe_height}
src={iframe_url}
src={`${iframe_url}&DarkMode=${is_dark_mode_on ? 'on' : 'off'}`}
frameBorder='0'
scrolling='auto'
data-testid='dt_doughflow_section'
Expand Down
2 changes: 1 addition & 1 deletion packages/cashier/src/stores/__tests__/iframe-store.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ describe('IframeStore', () => {
it('should set the proper iframe url', () => {
iframe_store.setIframeUrl('iframe_url/');

expect(iframe_store.iframe_url).toBe('iframe_url/&DarkMode=on');
expect(iframe_store.iframe_url).toBe('iframe_url/');
expect(iframe_store.root_store.client.setVerificationCode).toHaveBeenCalledWith('', 'payment_agent_withdraw');
});

Expand Down
20 changes: 2 additions & 18 deletions packages/cashier/src/stores/iframe-store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,22 @@ export default class IframeStore {
makeObservable(this, {
iframe_height: observable,
iframe_url: observable,
base_url: observable,
is_session_timeout: observable,
timeout_session: observable,
setSessionTimeout: action.bound,
checkIframeLoaded: action.bound,
clearTimeoutCashierUrl: action.bound,
setBaseUrl: action.bound,
setTimeoutCashierUrl: action.bound,
setIframeUrl: action.bound,
setContainerHeight: action.bound,
clearIframe: action.bound,
changeTheme: action.bound,
});

this.root_store = root_store;
}

iframe_height = 0;
iframe_url = '';
base_url = '';
is_session_timeout = true;
onIframeLoaded: TOnIframeLoadedCallback | null = null;
timeout_session: NodeJS.Timeout | null = null;
Expand Down Expand Up @@ -84,11 +80,10 @@ export default class IframeStore {
}

setIframeUrl(url?: string): void {
const { client, ui } = this.root_store;
const { client } = this.root_store;

if (url) {
this.setBaseUrl(url);
this.iframe_url = `${url}&DarkMode=${ui.is_dark_mode_on ? 'on' : 'off'}`;
this.iframe_url = url;

const container = this.root_store.modules.cashier.general_store.active_container;

Expand All @@ -103,17 +98,6 @@ export default class IframeStore {
}
}

setBaseUrl(url?: string): void {
if (url) {
this.base_url = url;
}
}

changeTheme(): void {
const { ui } = this.root_store;
this.iframe_url = `${this.base_url}&DarkMode=${ui.is_dark_mode_on ? 'on' : 'off'}`;
}

setContainerHeight(height: number): void {
this.iframe_height = height;
}
Expand Down