@capillarytech/creatives-library 2.0.70 → 2.0.72

package/v2Containers/MobilePush/commonMethods.js

@@ -0,0 +1,249 @@
+import {get, filter, cloneDeep} from 'lodash';
+
+function getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions}) {
+  const newInputFields = cloneDeep(inputFields);
+  newInputFields.splice(fieldIndex + 1, 0, {
+    rowClassName: 'mobile-push-row',
+    identifier: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}`,
+
+    cols: [
+      {
+        id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}`,
+        type: "radioGroup",  //Resembles component to be used
+        metaType: "text",
+        datatype: "string",
+        options: ["Deeplink", "External Link"],
+        inductiveText: ["A page within mobile app", "An external web page"],
+        value: "Deeplink",
+        required: true,
+        width: 18,
+        offset: 1,
+        errorMessage: "Please select link type",
+        fluid: true,
+        styling: "semantic",
+        order: 1,
+        customComponent: false,
+        supportedEvents: ["onChange"],
+      },
+
+    ],
+  });
+  newInputFields.splice(fieldIndex + 2, 0, {
+    rowClassName: 'mobile-push-row',
+    id: 'cta-deeplink-select-section',
+    identifier: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-select`,
+
+    cols: [
+
+      {
+        id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-select`,
+        placeholder: "Select DeepLink",
+        type: "select",  //Resembles component to be used
+        options: deepLinkOptions,
+        metaType: "text",
+        datatype: "string",
+        required: true,
+        errorMessage: "Select a deeplink",
+        fluid: true,
+        width: 18,
+        offset: 1,
+        style: {
+          width: '100%',
+
+
+          marginBottom: '16px',
+        },
+        styling: "semantic",
+        order: 1,
+        customComponent: false,
+        supportedEvents: [
+          'onSelect',
+        ],
+      },
+    ],
+  });
+  return newInputFields;
+}
+
+function getSecondaryCtaFields({inputFields, fieldIndex, deepLinkOptions}) {
+  const inputId = `secondary-cta-${get(inputFields[fieldIndex], 'cols[0]').fieldsCount}`;
+  const newInputFields = cloneDeep(inputFields);
+  newInputFields.splice(fieldIndex + 1, 0, {
+    rowClassName: 'mobile-push-row',
+    cols: [
+
+      {
+        id: `${inputId}-label`,
+        label: "Button label",
+        type: "input",  //Resembles component to be used
+        metaType: "text",
+        datatype: "string",
+        required: true,
+        width: 18,
+        offset: 1,
+        placeholder: "Enter CTA Label here",
+        fluid: true,
+        styling: "semantic",
+        order: 1,
+        customComponent: false,
+        errorMessage: "CTA label cannot be empty.",
+      },
+
+    ],
+  });
+  newInputFields.splice(fieldIndex + 2, 0, {
+    rowClassName: 'mobile-push-row',
+    identifier: `cta-deeplink-${inputId}`,
+    cols: [
+
+      {
+        id: `cta-deeplink-${inputId}`,
+        type: "radioGroup",  //Resembles component to be used
+        metaType: "text",
+        datatype: "string",
+        options: ["Deeplink", "External Link"],
+        inductiveText: ["A page within mobile app", "An external web page"],
+        value: "Deeplink",
+        required: true,
+        width: 18,
+        offset: 1,
+        errorMessage: "Please select link type",
+        fluid: true,
+        styling: "semantic",
+        order: 1,
+
+        customComponent: false,
+        supportedEvents: ["onChange"],
+      },
+    ],
+  });
+  newInputFields.splice(fieldIndex + 3, 0, {
+    rowClassName: 'mobile-push-row',
+    id: 'cta-deeplink-select-section',
+    identifier: `cta-deeplink-${inputId}-select`,
+    cols: [
+
+
+      {
+        id: `cta-deeplink-${inputId}-select`,
+        placeholder: "Select DeepLink",
+        type: "select",  //Resembles component to be used
+        options: deepLinkOptions,
+        errorMessage: "Select a deeplink",
+        metaType: "text",
+        datatype: "string",
+        required: true,
+        fluid: true,
+        width: 18,
+        offset: 1,
+        style: {
+          width: '100%',
+          marginBottom: '16px',
+        },
+        styling: "semantic",
+        order: 1,
+        customComponent: false,
+        supportedEvents: [
+          'onSelect',
+        ],
+      },
+    ],
+  });
+  return newInputFields;
+}
+function getLinkTypeFields({inputFieldsArgs, fieldIndex, deepLinkOptions, formData, field}) {
+  const inputFields = cloneDeep(inputFieldsArgs);
+  const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
+  const deeplinkValue = formData[this.state.currentTab - 1][field.id];
+  const componentIndex = fieldIndex + 1;
+  const inputId = deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" ? `${field.id}-select` : `${field.id}-text`;
+  if ( deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" && (fieldIndex === inputFields.length - 1 || inputFields[componentIndex].id !== "cta-deeplink-select-section")) {
+    const deleteCount = get(inputFields, `[${componentIndex}].id`) === "cta-external-link" ? 1 : 0;
+    inputFields.splice(componentIndex, deleteCount, {
+      rowClassName: 'mobile-push-row',
+      id: 'cta-deeplink-select-section',
+      identifier: inputId,
+      cols: [
+
+        {
+          id: inputId,
+          placeholder: "Select DeepLink",
+          type: "select",  //Resembles component to be used
+          options: deepLinkOptions,
+          metaType: "text",
+          datatype: "string",
+          errorMessage: "Select a deeplink",
+          required: true,
+          fluid: true,
+          width: 18,
+          offset: 1,
+          style: {
+            width: '100%',
+
+            marginBottom: '16px',
+          },
+          styling: "semantic",
+          order: 1,
+          customComponent: false,
+          supportedEvents: [
+            'onSelect',
+          ],
+        },
+      ],
+    });
+  } else if ( deeplinkValue && deeplinkValue.toLowerCase() === "external link") {
+    const row = {
+      rowClassName: 'mobile-push-row',
+      id: 'cta-external-link',
+      identifier: inputId,
+
+      cols: [
+
+        {
+          id: inputId,
+          placeholder: "External Link",
+          type: "input",  //Resembles component to be used
+          metaType: "text",
+          datatype: "string",
+          errorMessage: "External Link cannot be empty",
+          required: true,
+          fluid: true,
+          width: 18,
+          offset: 1,
+          style: {
+            width: '100%',
+
+            marginBottom: '16px',
+          },
+          styling: "semantic",
+          order: 1,
+          customComponent: false,
+          standalone: false,
+        },
+      ],
+    };
+    if (!inputFields[fieldIndex + 1] || inputFields[componentIndex].id === "cta-deeplink-select-section") {
+      inputFields[componentIndex] = row;
+      if (inputFields[componentIndex + 1] && inputFields[componentIndex + 1].id === "show-cta-deeplink-keys-label") {
+        inputFields.splice(componentIndex + 1, 1);
+      }
+      if (inputFields[componentIndex + 1] && inputFields[componentIndex + 1].id === "cta-deeplink-keys") {
+        let configkeys = filter(JSON.parse(deeplinks), (dl) => dl.link === formData[this.state.currentTab - 1][`${field.id}-select`]);
+        if (configkeys[0]) {
+          configkeys = configkeys[0].keys;
+        }
+        if (configkeys.length) {
+          //inputFields = inputFields.slice(0, componentIndex + 1).concat(inputFields.slice( componentIndex + 1 + configkeys.length, inputFields.length));
+
+          inputFields.splice(componentIndex + 1, configkeys.length);
+        }
+      }
+    } else {
+      inputFields.splice(componentIndex, 0, row);
+    }
+  }
+  return inputFields;
+}
+export {
+  getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields,
+};

package/v2Containers/MobilePush/eventsMap.js

@@ -0,0 +1,127 @@
+const getEventsMap = (context) => ({
+  "template-name": {
+    onChange: context.onTemplateNameChange,
+  },
+  "cta-deeplink-secondary-cta-0": {
+    onChange: context.onLinkTypeChange,
+  },
+  "cta-deeplink-secondary-cta-1": {
+    onChange: context.onLinkTypeChange,
+  },
+  "cta-deeplink-secondary-cta-12": {
+    onChange: context.onLinkTypeChange,
+  },
+  "cta-deeplink-delete": {
+    onDelete: context.deletePrimaryCTA,
+  },
+  "cta-deeplink2-delete": {
+    onDelete: context.deletePrimaryCTA,
+  },
+  "secondary-cta-0-delete": {
+    onDelete: context.deleteSecondaryCTA,
+  },
+  "secondary-cta-1-delete": {
+    onDelete: context.deleteSecondaryCTA,
+  },
+  "secondary-cta-1-delete-ios": {
+    onDelete: context.deleteSecondaryCtaIos,
+  },
+  "discard-button": {
+    discardValues: context.discardValues,
+  },
+  "cancel-button": {
+    cancelTemplate: context.cancelTemplate,
+  },
+  "copy-android-content": {
+    onClick: context.copyAndroidContent,
+  },
+  "copy-iphone-content": {
+    onClick: context.copyIphoneContent,
+  },
+  "save-button": {
+    saveFormData: context.saveFormData,
+  },
+  "message-editor": {
+    onChange: context.onTemplateContentChange,
+  },
+  "message-editor2": {
+    onChange: context.onTemplateContentChange,
+  },
+  "message-tagList": {
+    onTagSelect: context.onTagSelect,
+  },
+  "message-tagList2": {
+    onTagSelect: context.onTagSelect,
+  },
+  "title-tagList": {
+    onTagSelect: context.onTagSelect,
+  },
+  "title-tagList2": {
+    onTagSelect: context.onTagSelect,
+  },
+  "pane": {
+    onTabChange: context.onTabChange,
+  },
+  "cta-deeplink": {
+    onChange: context.onLinkTypeChange,
+  },
+  "cta-deeplink2": {
+    onChange: context.onLinkTypeChange,
+  },
+  "cta-deeplink-secondary-cta-1-select": {
+    onSelect: context.showCtaKeys,
+  },
+  "cta-deeplink-secondary-cta-0-select": {
+    onSelect: context.showCtaKeys,
+  },
+  "cta-deeplink-secondary-cta-1-select2": {
+    onSelect: context.showCtaKeys,
+  },
+  "cta-deeplink-select": {
+    onSelect: context.showCtaKeys,
+  },
+  "cta-deeplink2-select": {
+    onSelect: context.showCtaKeys,
+  },
+  "add-pri-cta": {
+    addPrimaryCta: context.addPrimaryCta,
+  },
+  "add-pri-cta-ios": {
+    addPrimaryCta: context.addPrimaryCta,
+  },
+  "add-sec-cta": {
+    addSecondaryCta: context.addSecondoryCta,
+  },
+  "add-sec-cta-2": {
+    addSecondaryCta: context.addSecondoryCta,
+  },
+  "add-sec-cta-ios": {
+    addSecondaryCtaIos: context.addSecondoryCtaIos,
+  },
+
+  "image": {
+    onUpload: context.uploadImage,
+  },
+  "image-upload-ios": {
+    onUpload: context.uploadImage,
+  },
+  "secondary-cta-1-table": {
+    onRowClick: context.selectCtaIos,
+  },
+  "cta-deeplink-select-show-keys": {
+    onShowCtaKeys: context.showCtaKeys,
+  },
+  "cta-deeplink-secondary-cta-0-select-show-keys": {
+    onShowCtaKeys: context.showCtaKeys,
+  },
+  "cta-deeplink-secondary-cta-1-select-show-keys": {
+    onShowCtaKeys: context.showCtaKeys,
+  },
+  "wechat-template": {
+    onSelect: context.onTemplateChange,
+  },
+  "mobilepush-template": {
+    onSelect: context.onTemplateChange,
+  },
+});
+export default getEventsMap;