@capillarytech/creatives-library 8.0.87-alpha.21 → 8.0.87-alpha.23

package/v2Containers/CreativesContainer/index.js

@@ -44,7 +44,7 @@ import {
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
-import { WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES } from '../Whatsapp/constants';
+import { WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES, PHONE_NUMBER, URL } from '../Whatsapp/constants';
 
 import { updateImagesInHtml } from '../../utils/cdnTransformation';
 import { IOS } from '../InApp/constants';
@@ -58,6 +58,7 @@ import {
   CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
+import { DYNAMIC_URL } from '../../v2Components/CapWhatsappCTA/constants';
 
 import {
   transformChannelPayload,
@@ -234,6 +235,39 @@ export class Creatives extends React.Component {
     this.setState({ isGetFormData: false });
   };
 
+  mapCarouselDataToCreatives = (cards) => {
+    return cards.map((card) => {
+      const { cardVarMapped, bodyTemplate, media, buttons, mediaType } = card || {};
+      const buttonData = buttons?.map((button) => {
+        const { type, text, phoneNumber, url, dynamicUrlPayload } = button || {};
+        const buttonObj = { type, text };
+        if (type === PHONE_NUMBER) {
+          buttonObj.phone_number = phoneNumber;
+        }
+        if (type === URL) {
+          buttonObj.url = url;
+          if (dynamicUrlPayload) {
+            buttonObj.urlType = DYNAMIC_URL;
+          }
+        }
+        return buttonObj;
+      });
+      return {
+        bodyText: bodyTemplate,
+        varMap: cardVarMapped,
+        ...(mediaType === IMAGE && {
+          imageUrl: media?.url,
+        }),
+        ...(mediaType === VIDEO && {
+          videoUrl: media?.url,
+          videoPreviewImg: media?.previewUrl,
+        }),
+        buttons: buttonData,
+        mediaType: mediaType?.toLowerCase(),
+      };
+    });
+  }
+
   getTemplateData = (templateData) => { //from consumers to creatives
     const { isFullMode, messageDetails = {}, smsRegister } = this.props;
     const { additionalProperties = {} } = messageDetails;
@@ -476,6 +510,7 @@ export class Creatives extends React.Component {
               mediaType = 'TEXT',
               whatsappMedia = {},
               isPreviewUrl = false,
+              cards = [],
             } = {},
           } = templateData;
           const mediaParams = {};
@@ -498,7 +533,7 @@ export class Creatives extends React.Component {
             default:
               break;
           }
-          const modifiedButtons = cloneDeep(buttons).map((btn) => {
+          const modifiedButtons = cloneDeep(buttons)?.map((btn) => {
             if (btn.type === 'PHONE_NUMBER') {
               btn.phone_number = btn.phoneNumber;
               delete btn.phoneNumber;
@@ -542,6 +577,10 @@ export class Creatives extends React.Component {
                       },
                     ],
                     isPreviewUrl,
+                    carouselData: this.mapCarouselDataToCreatives(cards),
+                    ...(cards?.length && {
+                      mediaType: WHATSAPP_MEDIA_TYPES.CAROUSEL,
+                    }),
                   },
                 },
               },
@@ -588,6 +627,47 @@ export class Creatives extends React.Component {
     return templateData || null;
   }
 
+  getCarouselMappedData = (carouselData = []) => {
+    return carouselData.map((carousel) => {
+      const { bodyText, imageUrl, videoUrl, videoPreviewImg, buttons, mediaType, cardVarMapped, bodyTemplate } = carousel || {};
+      const buttonData = buttons.map((button, index) => {
+        const { type, text, phone_number, urlType, url } = button || {};
+        const buttonObj = {
+          type,
+          text,
+          index,
+        };
+        if (type === PHONE_NUMBER) {
+          buttonObj.phoneNumber = phone_number;
+        }
+        if (type === URL) {
+          buttonObj.url = url;
+          if (urlType === DYNAMIC_URL) {
+            const dynamicUrlPayload = url?.match(/{{(.*?)}}/g);
+            buttonObj.dynamicUrlPayload = dynamicUrlPayload?.length === 1 ? dynamicUrlPayload[0] : '';
+          }
+        }
+        return buttonObj;
+      });
+      return {
+        body: bodyText,
+        cardVarMapped,
+        bodyTemplate,
+        media: {
+          ...(mediaType?.toLowerCase() === IMAGE.toLowerCase() && {
+            url: imageUrl,
+          }),
+          ...(mediaType?.toLowerCase() === VIDEO.toLowerCase() && {
+            url: videoUrl,
+            previewUrl: videoPreviewImg,
+          }),
+        },
+        buttons: buttonData,
+        mediaType: mediaType?.toUpperCase(),
+      };
+    });
+  };
+
   getCreativesData = async (channel, template, templateRecords) => { //from creatives to consumers
     let templateData = { channel };
     switch (channel) {
@@ -666,7 +746,10 @@ export class Creatives extends React.Component {
             forEach(androidContent.custom, (customKeyValue) => {
               custom[customKeyValue.key] = customKeyValue.value;
             });
-            androidContent.custom = custom;
+            //skipping it for MPUSH as custom key is already in the reqd format for hydra sdk
+            if (channel !== constants.MOBILE_PUSH) {
+              androidContent.custom = custom;
+            }
             templateData.androidContent = androidContent;
             templateData.androidContent.type = get(channelTemplate, 'definition.mode', '').toUpperCase();
             templateData.androidContent.deviceType = 'ANDROID';
@@ -682,7 +765,10 @@ export class Creatives extends React.Component {
             forEach(iosContent.custom, (customKeyValue) => {
               custom[customKeyValue.key] = customKeyValue.value;
             });
-            iosContent.custom = custom;
+            //skipping it for MPUSH as custom key is already in the reqd format for hydra sdk
+            if (channel !== constants.MOBILE_PUSH) {
+              iosContent.custom = custom;
+            }
             templateData.iosContent = iosContent;
             templateData.iosContent.type = get(channelTemplate, 'definition.mode').toUpperCase();
             templateData.iosContent.deviceType = IOS.toUpperCase();
@@ -760,6 +846,7 @@ export class Creatives extends React.Component {
               headerTemplate = '',
             } = {},
             isPreviewUrl = false,
+            carouselData = [],
           } = cloneDeep(versions.base.content.whatsapp);
 
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -826,11 +913,17 @@ export class Creatives extends React.Component {
               varMapped,
               category,
               language: languages[0].language,
-              buttonType,
-              buttons: modifiedButtons,
+              ...(mediaType !== WHATSAPP_MEDIA_TYPES.CAROUSEL && {
+                buttonType,
+                buttons: modifiedButtons,
+                whatsappMedia,
+              }),
               mediaType,
-              whatsappMedia,
               isPreviewUrl,
+              ...(mediaType === WHATSAPP_MEDIA_TYPES.CAROUSEL && {
+                cards: this.getCarouselMappedData(carouselData),
+                mediaType: carouselData[0]?.mediaType?.toUpperCase(),
+              }),
             },
           };
         }
@@ -1031,8 +1124,8 @@ export class Creatives extends React.Component {
   
   processCentralCommsMetaId = (channel, creativesData) => {
     // Create the payload for the centralcommnsmetaId API call
-    const { isLoyaltyModule, loyaltyMetaData } = this.props;
-    const { actionName, setMetaData = () => {} } = this.props.loyaltyMetaData || {};
+    const { isLoyaltyModule = false, loyaltyMetaData = {} } = this.props;
+    const { actionName, setMetaData = () => {} } = loyaltyMetaData;
     const { formatMessage } = this.props.intl;
 
     // const isTemplateModified = getTemplateDiffState(

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap

@@ -651,6 +651,7 @@ exports[`Test SlideBoxContent container Should render correct component for rcs
         "search": "",
       }
     }
+    loyaltyMetaData={Object {}}
     messageDetails={Object {}}
     onCreateComplete={[MockFunction]}
     slidBoxContent="templates"
@@ -935,6 +936,7 @@ exports[`Test SlideBoxContent container Should render correct component for what
     charCounterEnabled={false}
     content={
       Object {
+        "carouselData": Array [],
         "charCount": 151,
         "ctaData": Array [
           Object {
@@ -1041,6 +1043,7 @@ exports[`Test SlideBoxContent container Should render correct component for what
         "search": "",
       }
     }
+    loyaltyMetaData={Object {}}
     messageDetails={Object {}}
     onCreateComplete={[MockFunction]}
     slidBoxContent="templates"

package/v2Containers/Email/index.js

@@ -2747,7 +2747,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   eventContextTags={this.props?.eventContextTags}
                   forwardedTags={this.props?.forwardedTags}
                   isLoyaltyModule={this.props?.isLoyaltyModule}
-                  messageDetails={this.props?.messageDetails}
               /> : ''}
             </Col>
           </Row>

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -0,0 +1,192 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import styled from 'styled-components';
+import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get';
+import CapRadioCard from '@capillarytech/cap-ui-library/CapRadioCard';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapUploader from '@capillarytech/cap-ui-library/CapUploader';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import Email from '../../Email';
+import CmsTemplatesComponent from '../../../v2Components/CmsTemplatesComponent';
+import messages from '../messages';
+import { EMAIL_CREATE_MODES, STEPS } from '../constants';
+
+const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
+
+const CardContainer = styled.div`
+  margin-top: 16px;
+  .ant-radio-group{
+    .ant-radio-button-wrapper{
+      &:first-child{
+        margin-left: unset;
+      }
+    }
+  }
+`;
+
+// Mode selection component that handles the creation mode selection UI
+const ModeSelectionUI = ({
+  isFullMode,
+  templateName,
+  onTemplateNameChange,
+  isTemplateNameEmpty,
+  modes,
+  emailCreateMode,
+  onChange,
+  EmailLayout,
+  modeContent,
+  useFileUpload,
+  uploadButtonLabel,
+}) => (
+  <>
+    {isFullMode && (
+      <CapInput
+        label={<FormattedMessage {...messages.creativeName} />}
+        onChange={onTemplateNameChange}
+        value={templateName}
+        labelPosition="top"
+        size="default"
+        style={{ width: '68%'}}
+      />
+    )}
+    <CardContainer>
+      <CapRadioCardWithLabel
+        panes={modes}
+        onChange={onChange}
+        selected={emailCreateMode}
+        label={<FormattedMessage {...messages.createMode} />}
+      />
+    </CardContainer>
+    <>
+      {emailCreateMode === EMAIL_CREATE_MODES.UPLOAD && (
+        <div style={{ marginLeft: '8px' }}>
+          <CapUploader onChange={useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
+            {(isFullMode && isTemplateNameEmpty) && (
+              <CapError type="error">
+                <FormattedMessage {...messages.emptyTemplateName} />
+              </CapError>
+            )}
+            <CapButton disabled={isFullMode && isTemplateNameEmpty}>
+              {uploadButtonLabel}
+            </CapButton>
+          </CapUploader>
+          {!isEmpty(EmailLayout) && (
+            <>{get(modeContent, "file.name")}</>
+          )}
+        </div>
+      )}
+    </>
+  </>
+);
+
+ModeSelectionUI.propTypes = {
+  isFullMode: PropTypes.bool,
+  templateName: PropTypes.string,
+  onTemplateNameChange: PropTypes.func.isRequired,
+  isTemplateNameEmpty: PropTypes.bool,
+  modes: PropTypes.array.isRequired,
+  emailCreateMode: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  EmailLayout: PropTypes.object,
+  modeContent: PropTypes.object,
+  useFileUpload: PropTypes.func.isRequired,
+  uploadButtonLabel: PropTypes.node.isRequired,
+};
+
+// Content creation component that handles the email or template selection UI
+const ContentCreationUI = ({
+  isShowEmailCreate,
+  emailProps,
+  cmsTemplatesProps,
+}) => (
+  <>
+    {isShowEmailCreate ? (
+      <Email {...emailProps} />
+    ) : (
+      <CmsTemplatesComponent {...cmsTemplatesProps} />
+    )}
+  </>
+);
+
+ContentCreationUI.propTypes = {
+  isShowEmailCreate: PropTypes.bool.isRequired,
+  emailProps: PropTypes.object.isRequired,
+  cmsTemplatesProps: PropTypes.object.isRequired,
+};
+
+// Main EmailWrapper presentational component
+const EmailWrapperView = ({
+  isUploading,
+  emailCreateMode,
+  step,
+  isFullMode,
+  templateName,
+  onTemplateNameChange,
+  isTemplateNameEmpty,
+  modes,
+  onChange,
+  EmailLayout,
+  modeContent,
+  useFileUpload,
+  uploadButtonLabel,
+  isShowEmailCreate,
+  emailProps,
+  cmsTemplatesProps,
+}) => {
+  console.log("EmailLayout", step, emailCreateMode);
+  const isShowTemplateSelection = step === STEPS.MODE_SELECTION || (step === STEPS.TEMPLATE_SELECTION && emailCreateMode === EMAIL_CREATE_MODES.UPLOAD);
+
+  return (
+    <>
+      <CapSpin spinning={emailCreateMode === EMAIL_CREATE_MODES.UPLOAD ? isUploading : false}>
+        {isShowTemplateSelection ? (
+          <ModeSelectionUI
+            isFullMode={isFullMode}
+            templateName={templateName}
+            onTemplateNameChange={onTemplateNameChange}
+            isTemplateNameEmpty={isTemplateNameEmpty}
+            modes={modes}
+            emailCreateMode={emailCreateMode}
+            onChange={onChange}
+            EmailLayout={EmailLayout}
+            modeContent={modeContent}
+            useFileUpload={useFileUpload}
+            uploadButtonLabel={uploadButtonLabel}
+          />
+        ) : (
+          <ContentCreationUI
+            isShowEmailCreate={isShowEmailCreate}
+            emailProps={emailProps}
+            cmsTemplatesProps={cmsTemplatesProps}
+          />
+        )}
+      </CapSpin>
+    </>
+  );
+};
+
+EmailWrapperView.propTypes = {
+  isUploading: PropTypes.bool,
+  emailCreateMode: PropTypes.string,
+  step: PropTypes.string,
+  isFullMode: PropTypes.bool,
+  templateName: PropTypes.string,
+  onTemplateNameChange: PropTypes.func.isRequired,
+  isTemplateNameEmpty: PropTypes.bool,
+  modes: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  EmailLayout: PropTypes.object,
+  modeContent: PropTypes.object,
+  useFileUpload: PropTypes.func.isRequired,
+  uploadButtonLabel: PropTypes.node.isRequired,
+  isShowEmailCreate: PropTypes.bool.isRequired,
+  emailProps: PropTypes.object.isRequired,
+  cmsTemplatesProps: PropTypes.object.isRequired,
+};
+
+export default EmailWrapperView;

package/v2Containers/EmailWrapper/constants.js

@@ -4,4 +4,14 @@
  *
  */
 
-export const DEFAULT_ACTION = 'app/EmailWrapper/DEFAULT_ACTION';
+export const DEFAULT_ACTION = "app/EmailWrapper/DEFAULT_ACTION";
+export const EMAIL_CREATE_MODES = {
+  UPLOAD: "upload",
+  EDITOR: "editor",
+};
+
+export const STEPS = {
+  MODE_SELECTION: "modeSelection",
+  TEMPLATE_SELECTION: "templateSelection",
+  CREATE_TEMPLATE_CONTENT: "createTemplateContent",
+};