feat(field-editor): i have added the sla timer toggle when we are pas…

…sing the feature flag
freshworks · Apr 1, 2024 · af9602b · af9602b
1 parent 7b55e87
commit af9602b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/.../crayons-extended/custom-objects/src/components/form-builder/components/field-editor.scss b/.../crayons-extended/custom-objects/src/components/form-builder/components/field-editor.scss
@@ -288,6 +288,10 @@
             padding-inline-end: 0;
             padding-block-start: 8px;
 
+            &.sla {
+              grid-template-columns: 1fr 1fr 1fr;
+            }
+
             &.header {
               background: $color-smoke-50;
               border: 1px solid $color-smoke-100;

diff --git a/...s/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx b/...s/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx
@@ -898,7 +898,12 @@ export class FieldEditor {
     const objPayload = this.dataProvider;
     const id = (event.target as HTMLInputElement).id;
     const choice = objPayload.choices.find((item) => item.id === id);
-    choice.choice_options.resolution_timer = event.detail.checked;
+    const name = (event.target as HTMLInputElement).name;
+    if (name === 'resolution_timer') {
+      choice.choice_options.resolution_timer = event.detail.checked;
+    } else if (name === 'pause_resolution_sla_timer') {
+      choice.choice_options.pause_resolution_sla_timer = event.detail.checked;
+    }
   };
 
   private lookupChangeHandler = (event: CustomEvent) => {
@@ -1262,22 +1267,29 @@ export class FieldEditor {
     const strBaseClassName = 'fw-field-editor';
     const choices = objFormValue.choices;
 
-    const renderToggle = (id, checked) => (
+    const isSlaEnabled =
+      Object(choices[1].choice_options).keys.length > 1 ||
+      Object(choices[2].choice_options).keys.length > 1;
+
+    const renderToggle = (id, name, checked) => (
       <span>
         <fw-toggle
           id={id}
+          name={name}
           size='medium'
           checked={checked}
           onFwChange={this.statusToggleHandler}
         ></fw-toggle>
       </span>
     );
     return (
-      <div class={`${strBaseClassName}-status-toggle`}>
-        <div class={`${strBaseClassName}-status-toggle-item header`}>
+      <div
+        class={`${strBaseClassName}-status-toggle ${isSlaEnabled ? 'sla' : ''}`}
+      >
+        <div class={`${strBaseClassName}-item header`}>
           <span>{i18nText('fieldLabel')}</span>
           <span>{i18nText('ertText')}</span>
-          <span>{i18nText('pstText')}</span>
+          (isSlaEnabled && <span>{i18nText('pstText')}</span>)
         </div>
         {choices.map((dataItem) => {
           return (
@@ -1294,13 +1306,19 @@ export class FieldEditor {
                   ></fw-input>
                 </div>
               </span>
-              {dataItem?.choice_options.resolution_timer &&
+              {dataItem?.choice_options?.resolution_timer !== undefined &&
+                renderToggle(
+                  dataItem.id,
+                  'resolution_timer',
+                  dataItem.choice_options.resolution_timer
+                )}
+              {dataItem?.choice_options?.pause_resolution_sla_timer !==
+                undefined &&
                 renderToggle(
                   dataItem.id,
-                  dataItem?.choice_options.resolution_timer
+                  'pause_resolution_sla_timer',
+                  dataItem.choice_options.pause_resolution_sla_timer
                 )}
-              {dataItem?.choice_options.sla_timer &&
-                renderToggle(dataItem.id, dataItem?.choice_options.sla_timer)}
             </div>
           );
         })}

diff --git a/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.e2e.ts b/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.e2e.ts
@@ -368,7 +368,7 @@ describe('fw-form-builder', () => {
               value: 'Waiting on customer',
               choice_options: {
                 resolution_timer: true,
-                sla_timer: true,
+                pause_resolution_sla_timer: true,
               },
               field_id: 'e189019d-ac50-4852-a17f-97acf2b05582',
               position: 2,
@@ -380,7 +380,7 @@ describe('fw-form-builder', () => {
               value: 'Waiting on internal teams',
               choice_options: {
                 resolution_timer: true,
-                sla_timer: true,
+                pause_resolution_sla_timer: true,
               },
               field_id: 'e189019d-ac50-4852-a17f-97acf2b05582',
               position: 3,