@capillarytech/creatives-library 8.0.123 → 8.0.125-alpha.0

package/v2Containers/InApp/index.js

@@ -46,10 +46,12 @@ import {
   INITIAL_CTA_DATA,
   IOS,
   LAYOUT_RADIO_OPTIONS,
-  AI_CONTENT_BOT_DISABLED
+  AI_CONTENT_BOT_DISABLED,
 } from "./constants";
 import { INAPP, SMS } from "../CreativesContainer/constants";
-import { ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY } from "../Whatsapp/constants";
+import {
+  ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY,
+} from "../Whatsapp/constants";
 import CapDeviceContent from "../../v2Components/CapDeviceContent";
 import { getCdnUrl } from "../../utils/cdnTransformation";
 import { getCtaObject, hasAnyErrors, getSingleTab } from "./utils";
@@ -297,14 +299,13 @@ export const InApp = (props) => {
 
   const templateDescErrorHandler = (value) => {
     let errorMessage = false;
-    const { unsupportedTags, isBraceError } =
-      validateTags({
-        content: value,
-        tagsParam: tags,
-        injectedTagsParams: injectedTags,
-        location,
-        tagModule: getDefaultTags,
-      }) || {};
+    const { unsupportedTags, isBraceError } = validateTags({
+      content: value,
+      tagsParam: tags,
+      injectedTagsParams: injectedTags,
+      location,
+      tagModule: getDefaultTags,
+    }) || {};
     if (value === '' && INAPP_MEDIA_TYPES.NONE) {
       errorMessage = formatMessage(messages.emptyTemplateDescErrorMessage);
     } else if (unsupportedTags?.length > 0) {
@@ -472,7 +473,7 @@ export const InApp = (props) => {
         placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
         value={templateName}
         size="default"
-          />
+      />
     </CapRow>
   );
   //create methods end
@@ -582,8 +583,7 @@ export const InApp = (props) => {
     return false;
   };
 
-  const getCtaPayload = (type) =>
-  (type === ANDROID ? ctaDataAndroid : ctaDataIos).map((cta) => {
+  const getCtaPayload = (type) => (type === ANDROID ? ctaDataAndroid : ctaDataIos).map((cta) => {
     const { text, urlType, url } = cta;
     return {
       type: urlType,

package/v2Containers/MobilePush/Create/index.js

@@ -239,6 +239,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   onLinkTypeChange = (eventTriggered, formData, field) => {
     let schema = cloneDeep(this.state.schema);
     const inputFields = get(schema, `containers[0].panes[${this.state.currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`);
+    
     forEach(inputFields, (inputField, fieldIndex) => {
       if (inputField) {
         forEach(inputField.cols, (col) => {

package/v2Containers/MobilePushNew/actions.js

@@ -0,0 +1,116 @@
+/*
+ *
+ * Create actions
+ *
+ */
+
+import * as types from './constants';
+
+export function createTemplate(template, callback) {
+  return {
+    type: types.CREATE_TEMPLATE_REQUEST,
+    template,
+    callback,
+  };
+}
+
+export function clearCreateResponse() {
+  return {
+    type: types.CLEAR_CREATE_RESPONSE_REQUEST,
+  };
+}
+
+export function defaultAction() {
+  return {
+    type: types.DEFAULT_ACTION,
+  };
+}
+
+export function uploadAsset(file, assetType, fileParams, index = 0, mobilePushParams = {}) {
+  return {
+    type: types.UPLOAD_ASSET_REQUEST,
+    file,
+    assetType,
+    fileParams,
+    index,
+    mobilePushParams,
+  };
+}
+
+export function getIosCtas(licenseCode) {
+  return {
+    type: types.GET_IOS_CTAS, licenseCode,
+  };
+}
+
+export function clearAsset(index = undefined) {
+  return {
+    type: types.CLEAR_ASSET,
+    index,
+  };
+}
+
+export function resetStore() {
+  return {
+    type: types.RESET_STORE,
+  };
+}
+
+export function getTemplateDetails(id) {
+  return {
+    type: types.GET_TEMPLATE_DETAILS_REQUEST, id,
+  };
+}
+
+export function editTemplate(template, callback) {
+  return {
+    type: types.EDIT_TEMPLATE_REQUEST, template, callback,
+  };
+}
+
+export function clearEditResponse() {
+  return {
+    type: types.CLEAR_EDIT_RESPONSE_REQUEST,
+  };
+}
+
+export function clearData() {
+  return {
+    type: types.CLEAR_DATA,
+  };
+}
+
+export function getWeCrmAccounts(source) {
+  return {
+    type: types.GET_WECRM_ACCOUNTS_REQUEST, source,
+  };
+}
+
+export function setWeChatAccount(weChatAccount) {
+  return {
+    type: types.SET_WECHAT_ACCOUNT,
+    weChatAccount,
+  };
+}
+
+export function getMobilepushTemplatesList(channel, queryParams) {
+  return {
+    type: types.GET_MOBILEPUSH_TEMPLATES_LIST_REQUEST,
+    channel,
+    queryParams,
+  };
+}
+
+export function setSelectedTemplate(templateData) {
+  return {
+    type: types.SET_SELECTED_TEMPLATE,
+    data: templateData,
+  };
+}
+
+export function setTemplateDetails(templateDetails) {
+  return {
+    type: types.GET_TEMPLATE_DETAILS_SUCCESS,
+    data: templateDetails,
+  };
+}

package/v2Containers/MobilePushNew/components/CtaButtons.js

@@ -0,0 +1,170 @@
+import React, { memo, useState } from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapMpushCTA from "../../../v2Components/CapMpushCTA";
+import { PRIMARY, SECONDARY, DEEP_LINK } from "../constants";
+import messages from "../messages";
+
+const CtaButtons = ({
+  primaryButton,
+  secondaryButton,
+  setPrimaryButton,
+  setSecondaryButton,
+  ctaData,
+  updateHandler,
+  deleteHandler,
+  deepLink,
+}) => {
+  // Local state to control CTA form visibility
+  const [showPrimaryCTA, setShowPrimaryCTA] = useState(false);
+  const [showSecondaryCTA, setShowSecondaryCTA] = useState(false);
+
+  const handleAddPrimary = () => {
+    // Prevent multiple clicks if primary button is already being added or form is already showing
+    if (primaryButton && showPrimaryCTA) {
+      return;
+    }
+
+    // If ctaData is empty or doesn't have a primary button, initialize it
+    if (ctaData.length === 0 || !ctaData.find((cta) => cta.index === 0)) {
+      const newPrimaryButton = {
+        index: 0,
+        ctaType: PRIMARY,
+        text: "",
+        urlType: DEEP_LINK,
+        url: "",
+        isSaved: false,
+      };
+      updateHandler(newPrimaryButton, 0);
+    }
+
+    setPrimaryButton(true);
+    setShowPrimaryCTA(true);
+  };
+
+  const handleAddSecondary = () => {
+    // Prevent multiple clicks if secondary button is already being added or form is already showing
+    if (secondaryButton && showSecondaryCTA) {
+      return;
+    }
+
+    if (shouldShowSecondaryCTA) {
+      return;
+    }
+
+    // If ctaData doesn't have a secondary button, initialize it
+    if (ctaData.length < 2 || !ctaData.find((cta) => cta.index === 1)) {
+      const newSecondaryButton = {
+        index: 1,
+        ctaType: SECONDARY,
+        text: "",
+        urlType: DEEP_LINK,
+        url: "",
+        isSaved: false,
+      };
+      updateHandler(newSecondaryButton, 1);
+    }
+
+    setSecondaryButton(true);
+    setShowSecondaryCTA(true);
+  };
+
+  // Check if primary button exists (saved or being edited)
+  const primaryButtonExists = ctaData.length > 0 && ctaData[0]?.text;
+  const isPrimaryButtonSaved = primaryButtonExists && ctaData[0]?.isSaved;
+
+  // Check if secondary button exists (saved or being edited)
+  const secondaryButtonExists = ctaData.length > 1 && ctaData[1]?.text;
+  const isSecondaryButtonSaved = secondaryButtonExists && ctaData[1]?.isSaved;
+
+  // Show primary CTA if button is active and (form is showing OR button exists)
+  const shouldShowPrimaryCTA = primaryButton && (showPrimaryCTA || primaryButtonExists);
+
+  // Show secondary CTA if button is active and (form is showing OR button exists)
+  const shouldShowSecondaryCTA = secondaryButton && (showSecondaryCTA || secondaryButtonExists);
+
+  // Enhanced delete handler to hide forms when buttons are deleted
+  const handleDelete = (index) => {
+    if (index === 0) {
+      setShowPrimaryCTA(false);
+      setPrimaryButton(false);
+    } else if (index === 1) {
+      setShowSecondaryCTA(false);
+      setSecondaryButton(false);
+    }
+    deleteHandler(index);
+  };
+
+  return (
+    <>
+      <CapRow>
+        <CapHeading type="h4">
+          <FormattedMessage {...messages.buttons} />
+        </CapHeading>
+        {!isPrimaryButtonSaved && !shouldShowPrimaryCTA && (
+          <CapButton
+            type="flat"
+            id="add-primary-button"
+            onClick={handleAddPrimary}
+          >
+            <CapIcon type="plus" />
+            <CapHeading type="h5" id="add-primary-btn-heading">
+              <FormattedMessage {...messages.addPrimaryButton} />
+            </CapHeading>
+          </CapButton>
+        )}
+      </CapRow>
+      {shouldShowPrimaryCTA && (
+        <CapMpushCTA
+          ctaData={ctaData}
+          updateHandler={updateHandler}
+          deleteHandler={handleDelete}
+          deepLink={deepLink || []}
+          buttonType={PRIMARY}
+        />
+      )}
+      {isPrimaryButtonSaved && !isSecondaryButtonSaved && !shouldShowSecondaryCTA && (
+        <CapButton
+          type="flat"
+          id="add-secondary-button"
+          onClick={handleAddSecondary}
+        >
+          <CapIcon type="plus" />
+          <CapHeading type="h5" id="add-secondary-btn-heading">
+            <FormattedMessage {...messages.addSecondaryButton} />
+          </CapHeading>
+        </CapButton>
+      )}
+      {shouldShowSecondaryCTA && (
+        <CapMpushCTA
+          ctaData={ctaData}
+          updateHandler={updateHandler}
+          deleteHandler={handleDelete}
+          deepLink={deepLink || []}
+          buttonType={SECONDARY}
+        />
+      )}
+    </>
+  );
+};
+
+CtaButtons.propTypes = {
+  primaryButton: PropTypes.bool.isRequired,
+  secondaryButton: PropTypes.bool.isRequired,
+  setPrimaryButton: PropTypes.func.isRequired,
+  setSecondaryButton: PropTypes.func.isRequired,
+  ctaData: PropTypes.array.isRequired,
+  updateHandler: PropTypes.func.isRequired,
+  deleteHandler: PropTypes.func.isRequired,
+  deepLink: PropTypes.array,
+};
+
+CtaButtons.defaultProps = {
+  deepLink: [],
+};
+
+export default memo(CtaButtons);