Skip to content

Commit

Permalink
DTRA-1969 + 2061 / Kate / Translation fixes (deriv-com#17081)
Browse files Browse the repository at this point in the history 
* fix: translation for contract details reports and fixed position tab navigation

* fix: add translation for buy and sell

* refactor: add tests and remove extra files

* chore: remove type assertion

* chore: test renaming

* chore: add comments
  • Loading branch information
@kate-deriv
kate-deriv authored Oct 14, 2024
1 parent 057d822 commit 0d1b31b
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 38 deletions.
11 changes: 9 additions & 2 deletions packages/reports/src/Containers/statement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,8 @@ export const getRowAction = (row_obj: TSource | TRow): TAction => {
};

const Statement = observer(({ component_icon }: TStatement) => {
const { client } = useStore();
const { client, common } = useStore();
const { current_language } = common;
const { statement } = useReportsStore();
const { currency, is_switching, is_virtual } = client;
const {
Expand Down Expand Up @@ -247,7 +248,13 @@ const Statement = observer(({ component_icon }: TStatement) => {

return (
<React.Fragment>
<ReportsMeta className='reports__meta--statement' filter_component={<FilterComponent />} is_statement />
<ReportsMeta
className='reports__meta--statement'
filter_component={<FilterComponent />}
is_statement
// key param is needed to force rerendering of the ReportsMeta component on language change
key={current_language}
/>
{is_switching ? (
<PlaceholderComponent is_loading />
) : (
Expand Down
1 change: 1 addition & 0 deletions packages/shared/src/utils/constants/contract.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,7 @@ export const getCardLabelsV2 = () =>
HIGH_BARRIER: localize('High Barrier'),
LOW_BARRIER: localize('Low Barrier'),
BUY_PRICE: localize('Buy price'),
BUY: localize('Buy'),
CANCEL: localize('Cancel'),
CLOSE: localize('Close'),
CLOSED: localize('Closed'),
Expand Down
10 changes: 10 additions & 0 deletions packages/shared/src/utils/helpers/__tests__/dtrader-v2-helpers.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,21 @@ describe('getPositionsV2TabIndexFromURL', () => {
expect(getPositionsV2TabIndexFromURL()).toBe(0);
});

it('should return 0 if it is an open tab in location.search and URL has additional parameters', () => {
location.search = `?lang=KM&tab_name=${POSITIONS_V2_TAB_NAME.OPEN.toLowerCase()}`;
expect(getPositionsV2TabIndexFromURL()).toBe(0);
});

it('should return 1 if it is a closed tab in location.search', () => {
location.search = `?tab_name=${POSITIONS_V2_TAB_NAME.CLOSED.toLowerCase()}`;
expect(getPositionsV2TabIndexFromURL()).toBe(1);
});

it('should return 1 if it is a closed tab in location.search and URL has additional parameters', () => {
location.search = `?lang=PL&tab_name=${POSITIONS_V2_TAB_NAME.CLOSED.toLowerCase()}`;
expect(getPositionsV2TabIndexFromURL()).toBe(1);
});

it('should return 0 if there is no appropriate query param', () => {
location.search = '';
expect(getPositionsV2TabIndexFromURL()).toBe(0);
Expand Down
13 changes: 11 additions & 2 deletions packages/shared/src/utils/helpers/dtrader-v2-helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,18 @@ export const POSITIONS_V2_TAB_NAME = {

export const getPositionsV2TabIndexFromURL = () => {
const searchParams = new URLSearchParams(window.location.search);
const positions_v2_tab_names_array = Object.keys(POSITIONS_V2_TAB_NAME).map(key => key.toLowerCase());

if (searchParams.toString()) {
const current_opened_tab = [...searchParams.values()];
return current_opened_tab[0] === POSITIONS_V2_TAB_NAME.OPEN.toLowerCase() ? 0 : 1;
// searchParams will include language as additional parameter for all languages except English.
// We need filtration for URL params in order to make solutions independent from any langue change
const current_opened_tab = [...searchParams.values()].filter(value =>
positions_v2_tab_names_array.includes(value?.toLowerCase())
);
return current_opened_tab[0]?.toLowerCase() === POSITIONS_V2_TAB_NAME.OPEN.toLowerCase() ||
!current_opened_tab[0]
? 0
: 1;
}
return 0;
};
Expand Down
68 changes: 34 additions & 34 deletions packages/trader/src/AppV2/Hooks/useOrderDetails.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { isCancellationExpired } from 'Stores/Modules/Trading/Helpers/logic';
import { Localize } from '@deriv/translations';
import React from 'react';

const CARD_LABELS = getCardLabelsV2();
type TCardLabels = ReturnType<typeof getCardLabelsV2>;

const formatTimestampToDateTime = (timestamp: number) => {
const date = new Date(timestamp * 1000);
Expand All @@ -40,7 +40,7 @@ const formatTimestampToDateTime = (timestamp: number) => {
return [formattedDate, formattedTime];
};

const getDealCancelFee = (data: TContractInfo) => {
const getDealCancelFee = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
if (!data.cancellation?.ask_price || !data.currency) return undefined;

let status;
Expand All @@ -56,7 +56,7 @@ const getDealCancelFee = (data: TContractInfo) => {
};

// Contains all key values that are used more than once in different transform objects
const getCommonFields = (data: TContractInfo) => {
const getCommonFields = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const { tick_count, tick_passed, contract_type } = data;
const ticks_label = Number(tick_count) < 2 ? CARD_LABELS.TICK : CARD_LABELS.TICKS;
const ticks_duration_text = isAccumulatorContract(contract_type)
Expand All @@ -65,8 +65,8 @@ const getCommonFields = (data: TContractInfo) => {

return {
[CARD_LABELS.REFERENCE_ID]: [
data.transaction_ids?.buy ? `${data.transaction_ids.buy} (Buy)` : '',
data.transaction_ids?.sell ? `${data.transaction_ids.sell} (Sell)` : '',
data.transaction_ids?.buy ? `${data.transaction_ids.buy} (${CARD_LABELS.BUY})` : '',
data.transaction_ids?.sell ? `${data.transaction_ids.sell} (${CARD_LABELS.SELL})` : '',
],
[CARD_LABELS.STAKE]:
data.buy_price && data.currency
Expand All @@ -81,9 +81,9 @@ const getCommonFields = (data: TContractInfo) => {
};
};
// For Multiplier
const transformMultiplierData = (data: TContractInfo) => {
const commonFields = getCommonFields(data);
const dealCancelFee = getDealCancelFee(data);
const transformMultiplierData = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const commonFields = getCommonFields(data, CARD_LABELS);
const dealCancelFee = getDealCancelFee(data, CARD_LABELS);

return {
[CARD_LABELS.REFERENCE_ID]: commonFields[CARD_LABELS.REFERENCE_ID],
Expand All @@ -109,14 +109,14 @@ const transformMultiplierData = (data: TContractInfo) => {
};

// For Rise
const transformCallPutData = (data: TContractInfo) => {
const transformCallPutData = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const { barrier, purchase_time, shortcode } = data;
const is_forward_starting = isForwardStarting(shortcode ?? '', purchase_time);
const start_time = getStartTime(shortcode ?? '');
const has_forward_contract_started = hasForwardContractStarted(shortcode ?? '');
const show_barrier_placeholder = is_forward_starting && !!start_time && !has_forward_contract_started;

const commonFields = getCommonFields(data);
const commonFields = getCommonFields(data, CARD_LABELS);
return {
[CARD_LABELS.REFERENCE_ID]: commonFields[CARD_LABELS.REFERENCE_ID],
[CARD_LABELS.DURATION]: commonFields[CARD_LABELS.DURATION],
Expand All @@ -127,8 +127,8 @@ const transformCallPutData = (data: TContractInfo) => {
};

// For Turbos
const transformTurbosData = (data: TContractInfo) => {
const commonFields = getCommonFields(data);
const transformTurbosData = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const commonFields = getCommonFields(data, CARD_LABELS);
return {
[CARD_LABELS.REFERENCE_ID]: commonFields[CARD_LABELS.REFERENCE_ID],
[CARD_LABELS.DURATION]: commonFields[CARD_LABELS.DURATION],
Expand All @@ -143,8 +143,8 @@ const transformTurbosData = (data: TContractInfo) => {
};

// For Digits
const transformDigitsData = (data: TContractInfo) => {
const commonFields = getCommonFields(data);
const transformDigitsData = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const commonFields = getCommonFields(data, CARD_LABELS);
const duration_time = getDurationTime(data) ?? '';
return {
[CARD_LABELS.REFERENCE_ID]: commonFields[CARD_LABELS.REFERENCE_ID],
Expand All @@ -158,8 +158,8 @@ const transformDigitsData = (data: TContractInfo) => {
};

// For Accumulators
const transformAccumulatorData = (data: TContractInfo) => {
const commonFields = getCommonFields(data);
const transformAccumulatorData = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const commonFields = getCommonFields(data, CARD_LABELS);
return {
[CARD_LABELS.REFERENCE_ID]: commonFields[CARD_LABELS.REFERENCE_ID],
...{
Expand All @@ -183,8 +183,8 @@ const transformAccumulatorData = (data: TContractInfo) => {
};

// For Vanillas
const transformVanillaData = (data: TContractInfo) => {
const commonFields = getCommonFields(data);
const transformVanillaData = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const commonFields = getCommonFields(data, CARD_LABELS);
return {
[CARD_LABELS.REFERENCE_ID]: commonFields[`${CARD_LABELS.REFERENCE_ID}`],
[CARD_LABELS.DURATION]: `${getDurationTime(data) ?? ''} ${getDurationUnitText(getDurationPeriod(data)) ?? ''}`,
Expand All @@ -196,8 +196,8 @@ const transformVanillaData = (data: TContractInfo) => {
};
};

const transformEndsBetween = (data: TContractInfo) => {
const commonFields = getCommonFields(data);
const transformEndsBetween = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const commonFields = getCommonFields(data, CARD_LABELS);
return {
[CARD_LABELS.REFERENCE_ID]: commonFields[`${CARD_LABELS.REFERENCE_ID}`],
[CARD_LABELS.DURATION]: `${getDurationTime(data) ?? ''} ${getDurationUnitText(getDurationPeriod(data)) ?? ''}`,
Expand All @@ -209,8 +209,8 @@ const transformEndsBetween = (data: TContractInfo) => {
};
};

const transformAsian = (data: TContractInfo) => {
const commonFields = getCommonFields(data);
const transformAsian = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const commonFields = getCommonFields(data, CARD_LABELS);
return {
[CARD_LABELS.REFERENCE_ID]: commonFields[CARD_LABELS.REFERENCE_ID],
[CARD_LABELS.DURATION]: commonFields[CARD_LABELS.DURATION],
Expand All @@ -221,8 +221,8 @@ const transformAsian = (data: TContractInfo) => {
};
};

const transformLooksback = (data: TContractInfo) => {
const commonFields = getCommonFields(data);
const transformLooksback = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const commonFields = getCommonFields(data, CARD_LABELS);
const is_call_contract = data.contract_type == CONTRACT_TYPES.LB_CALL;
let spot_key;

Expand All @@ -241,8 +241,8 @@ const transformLooksback = (data: TContractInfo) => {
};
};

const transformHighLowLookback = (data: TContractInfo) => {
const commonFields = getCommonFields(data);
const transformHighLowLookback = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const commonFields = getCommonFields(data, CARD_LABELS);
return {
[CARD_LABELS.REFERENCE_ID]: commonFields[CARD_LABELS.REFERENCE_ID],
[CARD_LABELS.DURATION]: commonFields[CARD_LABELS.DURATION],
Expand All @@ -257,8 +257,8 @@ const transformHighLowLookback = (data: TContractInfo) => {
};
};

const transformReset = (data: TContractInfo) => {
const commonFields = getCommonFields(data);
const transformReset = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const commonFields = getCommonFields(data, CARD_LABELS);

return {
[CARD_LABELS.REFERENCE_ID]: commonFields[CARD_LABELS.REFERENCE_ID],
Expand Down Expand Up @@ -288,8 +288,8 @@ const transformReset = (data: TContractInfo) => {
};
};

const transformRunHigh = (data: TContractInfo) => {
const commonFields = getCommonFields(data);
const transformRunHigh = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const commonFields = getCommonFields(data, CARD_LABELS);
return {
[CARD_LABELS.REFERENCE_ID]: commonFields[CARD_LABELS.REFERENCE_ID],
[CARD_LABELS.DURATION]: commonFields[CARD_LABELS.DURATION],
Expand All @@ -298,8 +298,8 @@ const transformRunHigh = (data: TContractInfo) => {
data.payout && data.currency ? `${formatMoney(data.currency, data.payout, true)} ${data.currency}` : '',
};
};
const transformHighLow = (data: TContractInfo) => {
const commonFields = getCommonFields(data);
const transformHighLow = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
const commonFields = getCommonFields(data, CARD_LABELS);
return {
[CARD_LABELS.REFERENCE_ID]: commonFields[CARD_LABELS.REFERENCE_ID],
[CARD_LABELS.DURATION]: commonFields[CARD_LABELS.DURATION],
Expand All @@ -311,7 +311,7 @@ const transformHighLow = (data: TContractInfo) => {
};

// Map of contract types to their respective transform functions
const transformFunctionMap: Record<string, (data: TContractInfo) => Record<string, any>> = {
const transformFunctionMap: Record<string, (data: TContractInfo, card_label: TCardLabels) => Record<string, any>> = {
[CONTRACT_TYPES.TURBOS.LONG]: transformTurbosData,
[CONTRACT_TYPES.TURBOS.SHORT]: transformTurbosData,
[CONTRACT_TYPES.MULTIPLIER.DOWN]: transformMultiplierData,
Expand Down Expand Up @@ -354,7 +354,7 @@ const useOrderDetails = (contract_info: TContractInfo) => {
const contractInfo = contract_info;
if (!contractInfo.contract_type) return;
const transformFunction = transformFunctionMap[contractInfo.contract_type];
const details = transformFunction ? transformFunction(contractInfo) : {};
const details = transformFunction ? transformFunction(contractInfo, getCardLabelsV2()) : {};
return {
details,
};
Expand Down

0 comments on commit 0d1b31b

Please sign in to comment.