[DTRA] Maryia/DTRA-1032/fix: payload for actions of 'ce_contracts_set_up_form' Rudderstack event (deriv-com#14280)

* test: switchers

* fix: prevent localization of duration in analytics + extra check for null

* fix: duration_type

* test: sendTradeParamsAnalytics

* refactor: address comments

* refactor: address comments

* fix: send track when this.duration_units_list has 1 duration

Author: maryia-deriv

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/duration.tsx

@@ -108,9 +108,9 @@ const Duration = ({
         if (name === 'advanced_duration_unit') {
             sendTradeParamsAnalytics({
                 action: 'change_parameter_value',
-                parameter_type: 'duration_type',
+                durationUnit: value,
                 parameter_field_type: 'dropdown',
-                duration_type: duration_units_list.find(unit => unit.value === value)?.text?.toLowerCase() ?? '',
+                parameter_type: 'duration_type',
             });
         }
     };

packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/simple-duration.tsx

@@ -51,13 +51,14 @@ const SimpleDuration = observer(
             return filtered_arr;
         };
         const has_label = !duration_units_list.some(du => du.value === 't');
+        const filteredMinutesAndTicksList = filterMinutesAndTicks(duration_units_list);
 
         return (
             <>
-                {duration_units_list.length > 1 && (
+                {filteredMinutesAndTicksList.length > 1 && (
                     <ButtonToggle
                         id='dt_simple_duration_toggle'
-                        buttons_arr={filterMinutesAndTicks(duration_units_list)}
+                        buttons_arr={filteredMinutesAndTicksList}
                         is_animated={true}
                         name='simple_duration_unit'
                         onChange={changeDurationUnit}

packages/trader/src/Stores/Modules/Trading/__tests__/trade-store.spec.ts

@@ -257,12 +257,12 @@ beforeAll(async () => {
 describe('TradeStore', () => {
     describe('sendTradeParamsAnalytics', () => {
         const action = 'change_parameter_value';
-        const payload = {
+        const passThrough = {
             action,
-            parameter_type: 'duration_type',
             parameter_field_type: 'dropdown',
-            duration_type: 'minutes',
+            parameter_type: 'duration_type',
         } as Partial<TEvents['ce_contracts_set_up_form']>;
+        const payload = { ...passThrough, durationUnit: 'm' };
 
         it('should send form_name, trade type & provided payload with ce_contracts_set_up_form event', async () => {
             const spyTrackEvent = jest.spyOn(Analytics, 'trackEvent');
@@ -271,9 +271,10 @@ describe('TradeStore', () => {
             mockedTradeStore.sendTradeParamsAnalytics(payload);
             await waitFor(() => {
                 expect(spyTrackEvent).toHaveBeenCalledWith('ce_contracts_set_up_form', {
+                    ...passThrough,
                     form_name: 'default',
                     trade_type_name: 'Rise/Fall',
-                    ...payload,
+                    duration_type: 'minutes',
                 });
                 expect(spyDebouncedFunction).not.toHaveBeenCalled();
             });
@@ -285,9 +286,10 @@ describe('TradeStore', () => {
             mockedTradeStore.sendTradeParamsAnalytics(payload, true);
             await waitFor(() => {
                 expect(spyTrackEvent).toHaveBeenCalledWith('ce_contracts_set_up_form', {
+                    ...passThrough,
                     form_name: 'default',
                     trade_type_name: 'Rise/Fall',
-                    ...payload,
+                    duration_type: 'minutes',
                 });
                 expect(spyDebouncedFunction).toHaveBeenCalled();
             });

packages/trader/src/Stores/Modules/Trading/trade-store.ts

@@ -179,6 +179,7 @@ type TBarriersData = Record<string, never> | { barrier: string; barrier_choices:
 
 const store_name = 'trade_store';
 const g_subscribers_map: Partial<Record<string, ReturnType<typeof WS.subscribeTicksHistory>>> = {}; // blame amin.m
+const ANALYTICS_DURATIONS = ['ticks', 'seconds', 'minutes', 'hours', 'days'];
 
 export default class TradeStore extends BaseStore {
     // Control values
@@ -1020,14 +1021,13 @@ export default class TradeStore extends BaseStore {
                                 const durationMode =
                                     this.root_store.ui.is_advanced_duration && this.expiry_type
                                         ? this.expiry_type
-                                        : this.duration_units_list.find(({ value }) => value === this.duration_unit)
-                                              ?.text ?? '';
+                                        : ANALYTICS_DURATIONS.find(value => value.startsWith(this.duration_unit)) ?? '';
                                 this.sendTradeParamsAnalytics({
                                     action: 'run_contract',
-                                    ...(this.duration_units_list.length > 1
-                                        ? { switcher_duration_mode_name: durationMode.toLowerCase() }
+                                    ...(this.duration_units_list.length && durationMode
+                                        ? { switcher_duration_mode_name: durationMode }
                                         : {}),
-                                    ...(this.basis_list.length > 1
+                                    ...(this.basis_list.length > 1 && this.basis
                                         ? { switcher_stakepayout_mode_name: this.basis }
                                         : {}),
                                 });
@@ -1063,11 +1063,20 @@ export default class TradeStore extends BaseStore {
         })();
     };
 
-    sendTradeParamsAnalytics = (options: Partial<TEvents['ce_contracts_set_up_form']>, isDebounced?: boolean) => {
+    sendTradeParamsAnalytics = (
+        options: Partial<TEvents['ce_contracts_set_up_form']> & { durationUnit?: string },
+        isDebounced?: boolean
+    ) => {
+        const { durationUnit, ...passThrough } = options;
         const payload = {
+            ...passThrough,
             form_name: 'default',
             trade_type_name: getContractTypesConfig()[this.contract_type]?.title,
-            ...options,
+            ...(durationUnit
+                ? {
+                      duration_type: ANALYTICS_DURATIONS.find(value => value.startsWith(durationUnit ?? '')) ?? '',
+                  }
+                : {}),
         } as TEvents['ce_contracts_set_up_form'];
         if (isDebounced) {
             this.debouncedSendTradeParamsAnalytics(payload);