Merge pull request #1461 from FromDoppler/DOP-1705-update-congrats-action-sf

DOP-1705 - Update congrats action for smart form

Author: ck-makingsense

src/customJs/tools/smartforms/helper.ts

@@ -1,7 +1,12 @@
 import { $t } from '../../localization';
 import { dropdownProperty } from '../../properties/helpers';
 import { UnlayerProperty } from '../../types';
-import { CustomField, ListOption, SubscriptionList } from './types';
+import {
+  CustomField,
+  ListOption,
+  SmartFormAction,
+  SubscriptionList,
+} from './types';
 
 export const behaviorListProperty: () => UnlayerProperty<string> = () =>
   dropdownProperty({
@@ -16,14 +21,19 @@ export const behaviorListProperty: () => UnlayerProperty<string> = () =>
     ],
   } as const);
 
-export const congratsBehaviorListProperty: () => UnlayerProperty<string> = () =>
-  dropdownProperty({
-    label: $t('_dp.smart_forms.behavior.action.label'),
-    defaultValue: '0',
-    options: [
-      { label: $t('_dp.smart_forms.behavior.action.option_0'), value: '0' },
-    ],
-  } as const);
+export const congratsBehaviorListProperty: () => UnlayerProperty<SmartFormAction> =
+  () =>
+    dropdownProperty({
+      label: $t('_dp.smart_forms.behavior.action.label'),
+      defaultValue: 'message',
+      options: [
+        {
+          label: $t('_dp.smart_forms.behavior.action.option_0'),
+          value: 'message',
+        },
+        { label: $t('_dp.smart_forms.behavior.action.option_1'), value: 'url' },
+      ],
+    } as const);
 
 const mapListOption = (list: SubscriptionList): ListOption => {
   return { label: list.name, value: list.listId };

src/customJs/tools/smartforms/index.ts

@@ -1,7 +1,7 @@
 import { $t } from '../../localization';
 import { SmartFormViewer } from './smartFormViewer';
 import { ReactToolDefinitionFrom } from '../../types';
-import { SmartFormBase } from './types';
+import { SmartFormBase, SmartFormValues } from './types';
 import { ASSETS_BASE_URL } from '../../constants';
 import {
   alignmentProperty,
@@ -18,6 +18,7 @@ import {
   SubscriptionListProperty,
   availableFields,
 } from './helper';
+import { urlProperty } from '../../properties/url';
 
 const DEFAULT_GREEN_COLOR = '#64BF91';
 
@@ -36,6 +37,9 @@ export const getSmartFormToolDefinition: () =>
         options: {
           display: behaviorListProperty(),
           congratBehavior: congratsBehaviorListProperty(),
+          congratUrl: urlProperty({
+            label: $t('_dp.smart_forms.behavior.congratsUrl.label'),
+          }),
           descriptionHtml: richTextProperty({
             label: $t('_dp.smart_forms.behavior.message'),
           }),
@@ -212,5 +216,13 @@ export const getSmartFormToolDefinition: () =>
         },
       },
     },
+    propertyStates: (values: SmartFormValues) => ({
+      congratUrl: {
+        enabled: values.congratBehavior === 'url',
+      },
+      descriptionHtml: {
+        enabled: values.congratBehavior === 'message',
+      },
+    }),
   };
 };

src/customJs/tools/smartforms/smartFormViewer.tsx

@@ -38,6 +38,7 @@ export const SmartFormViewer: ViewerComponent<any> = ({ values }) => {
     }, '');
   };
 
+  const congratUrlEncode = encodeURI(values.congratUrl);
   const getCheboxList = (field: UnlayerField): string => {
     const labelStyle = `
       display: block; text-align: left; vertical-align: middle; color: rgb(68, 68, 68); font-size: 14px;
@@ -155,6 +156,8 @@ export const SmartFormViewer: ViewerComponent<any> = ({ values }) => {
           style={formStyle}
           data-field-instance={values.display}
           data-target-id-list={values.list}
+          data-action-on-finish={values.congratBehavior}
+          data-action-on-finish-url={congratUrlEncode}
         >
           <div color="#000">
             {fields.map((field) => (

src/customJs/tools/smartforms/types.ts

@@ -1,3 +1,4 @@
+import { UrlValue } from '../../properties/url/UrlValue';
 import {
   Alignment,
   AutoWidth,
@@ -13,6 +14,8 @@ import {
 
 export type ListOption = { value: string; label: string };
 
+export type SmartFormAction = 'message' | 'url';
+
 export type CustomField = {
   predefined: boolean;
   name: string;
@@ -53,7 +56,8 @@ export type UnlayerField = {
 export type SmartFormBase = {
   behavior: {
     display: string;
-    congratBehavior: string;
+    congratBehavior: SmartFormAction;
+    congratUrl: UrlValue;
     descriptionHtml: string;
   };
   formAction: {

src/i18n/en.ts

@@ -108,6 +108,8 @@ export const messages_en: IntlMessages = {
   '_dp.smart_forms.action.title': `List Manager`,
   '_dp.smart_forms.behavior.action.label': `Action for form completed`,
   '_dp.smart_forms.behavior.action.option_0': `Show congrats message`,
+  '_dp.smart_forms.behavior.action.option_1': `Redirect a webpage`,
+  '_dp.smart_forms.behavior.congratsUrl.label': `Open new tab at`,
   '_dp.smart_forms.behavior.label': `Visible field by print`,
   '_dp.smart_forms.behavior.message': `The message that the user sees when the form is completed `,
   '_dp.smart_forms.behavior.option_0': `All`,

src/i18n/es.ts

@@ -108,6 +108,8 @@ export const messages_es = {
   '_dp.smart_forms.action.title': `Administrar Lista`,
   '_dp.smart_forms.behavior.action.label': `Acción al finalizar el formulario`,
   '_dp.smart_forms.behavior.action.option_0': `Mostrar mensaje de agradecimiento`,
+  '_dp.smart_forms.behavior.action.option_1': `Redireccionar a pagina web`,
+  '_dp.smart_forms.behavior.congratsUrl.label': `Abrir nueva pestaña`,
   '_dp.smart_forms.behavior.label': `Campos a visualizar por impresion`,
   '_dp.smart_forms.behavior.message': `Mensaje que visualizará el usuario al completar el formulario`,
   '_dp.smart_forms.behavior.option_0': `Todos`,