Added extra check and toggle for custom statuses in conversation properties

packages/crayons-extended/custom-objects/src/components/form-builder/assets/form-mapper.json

@@ -241,7 +241,9 @@
       "freePlanFieldAddDisabledButton": "",
       "noCreatePermissionFieldAddDisabledHeader": "",
       "noCreatePermissionFieldAddDisabledMessage": "",
-      "boolShowRelationshipTypeSelect": true
+      "boolShowRelationshipTypeSelect": true,
+      "boolShowCustomToggle": false,
+      "showCustomToggleField": ""
     },
     "labels": {
       "headerProduct": "",
@@ -442,7 +444,9 @@
       "freePlanFieldAddDisabledButton": "freePlanFieldAddDisabledButton",
       "noCreatePermissionFieldAddDisabledHeader": "noCreatePermissionFieldAddDisabledHeader",
       "noCreatePermissionFieldAddDisabledMessage": "noCreatePermissionFieldAddDisabledMessage",
-      "boolShowRelationshipTypeSelect": false
+      "boolShowRelationshipTypeSelect": false,
+      "boolShowCustomToggle": true,
+      "showCustomToggleField": "status"
     },
     "labels": {
       "headerProduct": "headerProductConvProps",

packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.scss

@@ -262,6 +262,28 @@
           height: auto;
           box-sizing: border-box;
         }
+
+        .fw-field-editor-status-toggle {
+          border: 1px solid $color-smoke-100;
+
+          .fw-field-editor-status-toggle-item {
+            display: grid;
+            font-size: $font-size-14;
+            font-weight: $font-weight-600;
+            grid-template-columns: 1fr 1fr;
+            padding-inline-start: $font-size-20;
+            padding-block-end: 8px;
+            padding-inline-end: 0;
+            padding-block-start: 8px;
+
+            &.header {
+              background: $color-smoke-50;
+              border: 1px solid $color-smoke-100;
+              border-width: 0 1px 1px 1px;
+              font-size: $font-size-12;
+            }
+          }
+        }
       }
     }
 

packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx

@@ -22,6 +22,7 @@ import {
   getMaximumLimitsConfig,
   deriveInternalNameFromLabel,
   hasPermission,
+  checkIfCustomToggleField,
 } from '../utils/form-builder-utils';
 import formMapper from '../assets/form-mapper.json';
 import presetSchema from '../assets/form-builder-preset.json';
@@ -571,6 +572,10 @@ export class FieldEditor {
       }
     }
 
+    if (checkIfCustomToggleField(this.productName, this.dataProvider.name)) {
+      objValues['choices'] = [...this.dataProvider.choices];
+    }
+
     if (boolValidForm) {
       if (!this.isNewField) {
         objValues[this.KEY_INTERNAL_NAME] = this.dataProvider.name;
@@ -680,6 +685,14 @@ export class FieldEditor {
     }
   };
 
+  private statusToggleHandler = (event: CustomEvent) => {
+    this.isValuesChanged = true;
+    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;
+  };
+
   private lookupChangeHandler = (event: CustomEvent) => {
     event.stopImmediatePropagation();
     event.stopPropagation();
@@ -952,6 +965,51 @@ export class FieldEditor {
     );
   }
 
+  private renderStatusToggle(objFormValue) {
+    const strBaseClassName = 'fw-field-editor';
+    const choices = objFormValue.choices;
+    return (
+      <div class={`${strBaseClassName}-status-toggle`}>
+        <div class={`${strBaseClassName}-status-toggle-item header`}>
+          <span>{i18nText('fieldLabel')}</span>
+          <span>{i18nText('ertText')}</span>
+        </div>
+        {choices.map((dataItem) => {
+          let toggle = null;
+          if (
+            dataItem?.choice_options &&
+            Object.keys(dataItem?.choice_options).length
+          ) {
+            toggle = (
+              <span>
+                <fw-toggle
+                  id={dataItem.id}
+                  size='medium'
+                  checked={dataItem?.choice_options.resolution_timer}
+                  onFwChange={this.statusToggleHandler}
+                ></fw-toggle>
+              </span>
+            );
+          }
+          return (
+            <div class={`${strBaseClassName}-status-toggle-item`}>
+              <span>
+                <div class={`${strBaseClassName}-input-container`}>
+                  <fw-input
+                    class={`${strBaseClassName}-content-required-input`}
+                    value={dataItem.value}
+                    disabled='true'
+                  ></fw-input>
+                </div>
+              </span>
+              {toggle}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
   private renderLookup(boolDisableLookup) {
     const objFormValue = this.dataProvider;
 
@@ -1059,6 +1117,12 @@ export class FieldEditor {
     const boolSupportInternalName = objProductConfig.editInternalName;
     const strBaseClassName = 'fw-field-editor';
     const objFieldBuilder = this.fieldBuilderOptions;
+
+    /** Adding extra check for status type */
+    const isStatusType = checkIfCustomToggleField(
+      this.productName,
+      objFormValue.name
+    );
     const strInputLabel = hasCustomProperty(objFieldBuilder, 'label')
       ? objFieldBuilder.label
       : '';
@@ -1096,6 +1160,10 @@ export class FieldEditor {
       }
     }
 
+    const elementStatusToggle = isStatusType
+      ? this.renderStatusToggle(objFormValue)
+      : null;
+
     const elementDropdown =
       isDropdownType && !boolIgnoreDropdownChoices
         ? this.renderDropdown(boolDisableDropdowns)
@@ -1167,6 +1235,7 @@ export class FieldEditor {
             isDefaultNonCustomField,
             boolEditAllowed
           )}
+        {elementStatusToggle}
         {isDropdownType && (
           <div class={`${strBaseClassName}-content-dropdown`}>
             {elementDropdown}

packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.e2e.ts

@@ -357,6 +357,7 @@ describe('fw-form-builder', () => {
               account_id: '0',
               internal_name: 'open',
               value: 'Open',
+              choice_options: {},
               field_id: 'e189019d-ac50-4852-a17f-97acf2b05582',
               position: 1,
             },
@@ -365,6 +366,9 @@ describe('fw-form-builder', () => {
               account_id: '0',
               internal_name: 'waiting_on_customer',
               value: 'Waiting on customer',
+              choice_options: {
+                resolution_timer: true,
+              },
               field_id: 'e189019d-ac50-4852-a17f-97acf2b05582',
               position: 2,
             },
@@ -373,6 +377,9 @@ describe('fw-form-builder', () => {
               account_id: '0',
               internal_name: 'waiting_on_internal_teams',
               value: 'Waiting on internal teams',
+              choice_options: {
+                resolution_timer: true,
+              },
               field_id: 'e189019d-ac50-4852-a17f-97acf2b05582',
               position: 3,
             },
@@ -381,6 +388,7 @@ describe('fw-form-builder', () => {
               account_id: '0',
               internal_name: 'resolved',
               value: 'Resolved',
+              choice_options: {},
               field_id: 'e189019d-ac50-4852-a17f-97acf2b05582',
               position: 4,
             },

packages/crayons-extended/custom-objects/src/components/form-builder/utils/form-builder-utils.ts

@@ -264,3 +264,14 @@ export function createUUID() {
   );
   return uuid;
 }
+
+export function checkIfCustomToggleField(
+  productName = 'CUSTOM_OBJECTS',
+  fieldName
+) {
+  const dbConfig = formMapper[productName];
+  return (
+    dbConfig?.config?.boolShowCustomToggle &&
+    fieldName === dbConfig?.config?.showCustomToggleField
+  );
+}

packages/crayons-i18n/i18n/en-US.json

@@ -159,6 +159,7 @@
     "freePlanFieldAddDisabledButton": "Explore plans",
     "noCreatePermissionFieldAddDisabledHeader": "You do not have permission to create new properties",
     "noCreatePermissionFieldAddDisabledMessage": "Please reach out to your admin for more details.",
+    "ertText": "Effective resolution timer",
     "errors": {
       "emptyFieldName": "Field label is required.",
       "emptyRelationshipType": "Relationship type is required.",