@capillarytech/creatives-library 8.0.87-alpha.2 → 8.0.87-alpha.20

package/v2Components/TemplatePreview/index.js

@@ -43,15 +43,13 @@ import inAppMobileIOSModal from './assets/images/inapp_mobile_ios_modal.svg';
 import inAppMobileIOSTop from './assets/images/inapp_mobile_ios_top.svg';
 import inAppMobileIOSBottom from './assets/images/inapp_mobile_ios_bottom.svg';
 import inAppMobileIOSFull from './assets/images/inapp_mobile_ios_full.svg';
-import whatsappImageEmptyPreview from './assets/images/empty_image_preview.svg';
-import whatsappVideoEmptyPreview from './assets/images/empty_video_preview.svg';
 import videoPlay from '../../assets/videoPlay.svg';
 import zaloMessage from '../../v2Containers/Zalo/messages';
 import { handlePreviewInNewTab } from '../../utils/common';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 import WhatsappStatusContainer from '../WhatsappStatusContainer';
-import { getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../v2Containers/Whatsapp/utils';
+import { getWhatsappQuickReply } from '../../v2Containers/Whatsapp/utils';
 import { QUICK_REPLY, WHATSAPP_CATEGORIES } from '../../v2Containers/Whatsapp/constants';
 import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
 
@@ -215,7 +213,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       iosActions = _.map(content.actions, (action) => {
         if (action.label) {
           return (<div className="actions" key={`action-${action.label}`}>
-              <span className="action">{action.label.toUpperCase()}</span>
+            <span className="action">{action.label.toUpperCase()}</span>
           </div>);
         }
         return undefined;
@@ -255,15 +253,6 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       'width': '88%',
       'left': 0,
     };
-    const carouselWhatsappSectionStyle = {
-      'padding': `4px 0 ${CAP_SPACE_08}`,
-      'border-radius': '6px',
-      'background-color': CAP_WHITE,
-      'width': '166px',
-      'cursor': 'pointer',
-      'flex-shrink': 0,
-      'left': 0,
-    };
     const getVideoContent = ({
       video,
       actionUrl,
@@ -285,53 +274,53 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       >
         {
           video
-            ? (
-              <>
-                <video style={{ opacity: 0.5, width: '100%' }}>
-                  <source src={video} type="video/mp4" />
-                </video>
-                <div
-                  style={{
-                    position: 'absolute',
-                    display: 'flex',
-                    flexDirection: 'column',
-                  }}
+          ? (
+            <>
+              <video style={{ opacity: 0.5, width: '100%' }}>
+                <source src={video} type="video/mp4" />
+              </video>
+              <div
+                style={{
+                  position: 'absolute',
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
+                <CapButton
+                  className="preview-video-btn"
+                  type="flat"
                 >
-                  <CapButton
-                    className="preview-video-btn"
-                    type="flat"
-                  >
                   <CapIcon type="play"/>
-                    <FormattedMessage {...messages.playVideo} />
-                  </CapButton>
-                  {
-                    actionUrl
-                      ? (
-                        <CapButton
-                          className="preview-video-btn"
-                          type="flat"
-                        >
+                  <FormattedMessage {...messages.playVideo} />
+                </CapButton>
+                {
+                  actionUrl
+                  ? (
+                    <CapButton
+                      className="preview-video-btn"
+                      type="flat"
+                    >
                       <CapIcon type="reply" style={{ fontSize: 18 }}/>
-                          <FormattedMessage {...messages.showDetails} />
-                        </CapButton>
-                      )
-                      : null
-                  }
-                </div>
-              </>
-            )
-            : (
-              <CapImage
-                src={lineVideoPlaceholder}
-                alt="brand-name"
-                rest={{
-                  style: {
-                    width: 126,
-                    marginBottom: 5,
-                  },
-                }}
-              />
-            )
+                      <FormattedMessage {...messages.showDetails} />
+                    </CapButton>
+                  )
+                  : null
+                }
+              </div>
+            </>
+          )
+          : (
+            <CapImage
+              src={lineVideoPlaceholder}
+              alt="brand-name"
+              rest={{
+                style: {
+                  width: 126,
+                  marginBottom: 5,
+                },
+              }}
+            />
+          )
         }
       </div>
     );
@@ -347,10 +336,10 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             renderArray.push(
               <CapLabel type="label21" className="whatsapp-cta-preview">
                 {type !== WHATSAPP_CATEGORIES.authentication && <CapIcon
-                    type={
-                      (ctaType || type) === 'PHONE_NUMBER' ? 'call' : 'launch'
-                    }
-                    size="xs"
+                  type={
+                    (ctaType || type) === 'PHONE_NUMBER' ? 'call' : 'launch'
+                  }
+                  size="xs"
                 />}
                 {text}
               </CapLabel>,
@@ -441,42 +430,42 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
         {this.props.showCount &&
           channel &&
           channel.toLowerCase() !== FACEBOOK && (
-          <CapColumn span={16}>
-            {channel && channel.toLowerCase() === "sms" && (
-              <CapHeading type="h3">
-                <FormattedMessage
-                  {...messages.charactersTotal}
-                  values={{
-                    smsCount: smsDetails.parts,
-                    charCount: smsDetails.chars_used,
-                  }}
-                />
-                {smsDetails.unicode && (
-                  <FormattedMessage {...messages.smsFormatType} />
-                )}
-              </CapHeading>
-            )}
-            {smsDetails.optoutUrlPresent && (
-              <CapHeading type="h6">
-                <FormattedMessage
-                  {...messages.optoutCharactersTotal}
-                  values={{ optoutUrlLength: smsDetails.optouturlLength }}
-                />
-              </CapHeading>
-            )}
-            {channel?.toLowerCase() === WHATSAPP.toLowerCase() ? (
-              <>
-                <WhatsappStatusContainer template={templateData} />
-                <CapHeading type="h3" className="margin-t-12">
+            <CapColumn span={16}>
+              {channel && channel.toLowerCase() === "sms" && (
+                <CapHeading type="h3">
                   <FormattedMessage
-                    {...messages.whatsappMessageLength}
-                    values={{ length: whatsappUpdatedLen }}
+                    {...messages.charactersTotal}
+                    values={{
+                      smsCount: smsDetails.parts,
+                      charCount: smsDetails.chars_used,
+                    }}
                   />
+                  {smsDetails.unicode && (
+                    <FormattedMessage {...messages.smsFormatType} />
+                  )}
                 </CapHeading>
-              </>
-            ) : null}
-          </CapColumn>
-        )}
+              )}
+              {smsDetails.optoutUrlPresent && (
+                <CapHeading type="h6">
+                  <FormattedMessage
+                    {...messages.optoutCharactersTotal}
+                    values={{ optoutUrlLength: smsDetails.optouturlLength }}
+                  />
+                </CapHeading>
+              )}
+              {channel?.toLowerCase() === WHATSAPP.toLowerCase() ? (
+                <>
+                  <WhatsappStatusContainer template={templateData} />
+                  <CapHeading type="h3" className="margin-t-12">
+                    <FormattedMessage
+                      {...messages.whatsappMessageLength}
+                      values={{ length: whatsappUpdatedLen }}
+                    />
+                  </CapHeading>
+                </>
+              ) : null}
+            </CapColumn>
+          )}
         <CapColumn span={this.props.showCount ? 8 : 24}>
           {showTestAndPreview && (
             <div className="test-and-preview-container">
@@ -639,9 +628,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         )}
                         {content.actions.filter((action) => action.label)
                           .length ? (
-                            <div className="actions">
-                              {_.map(
-                                content.actions,
+                          <div className="actions">
+                            {_.map(
+                              content.actions,
                               (action) =>
                                 !!action.label && (
                                   <span
@@ -651,11 +640,11 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                                     {action.label && action.label.toUpperCase()}
                                   </span>
                                 )
-                              )}
-                            </div>
-                          ) : (
-                            ""
-                          )}
+                            )}
+                          </div>
+                        ) : (
+                          ""
+                        )}
                       </div>
                     ) : (
                       <div className="message-pop align-left">
@@ -991,14 +980,14 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   <CapLabel className="whatsapp-brand-name">
                     {whatsappUpdatedAccountName || ""}
                   </CapLabel>
-                  <div className={`msg-container whatsapp-message-container ${content?.carouselData && 'msg-container-carousel'}`}>
+                  <div className="msg-container whatsapp-message-container">
                     <div
-                      className={`message-pop align-left ${content?.carouselData && 'message-pop-carousel'}`}
+                      className="message-pop align-left"
                       style={whatsappSectionStyle}
                     >
                       <div className="whatsapp-content">
-                        {content?.showUrlPreview
-                          && renderUrlPreview(content?.metaTagsDetails)}
+                        {content?.showUrlPreview &&
+                          renderUrlPreview(content?.metaTagsDetails)}
                         {content?.whatsappImageSrc && (
                           <CapImage
                             src={content.whatsappImageSrc}
@@ -1037,60 +1026,6 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         {renderQuickReplyPreview()}
                       </div>
                     </div>
-                    {content?.carouselData && (
-                      <div
-                        style={{
-                          overflowX: "auto",
-                          display: "flex",
-                          paddingTop: "5px",
-                          paddingRight: "5px",
-                          whiteSpace: "nowrap",
-                          scrollbarWidth: "none", // Hide scrollbar in Firefox
-                          msOverflowStyle: "none", // Hide scrollbar in IE/Edge
-                        }}
-                        className="scroll-container"
-                      >
-                        {content?.carouselData?.map((data, index) => (
-                          <div
-                            key={`carousel-${index}`}
-                            className="message-pop align-left message-pop-carousel"
-                            style={carouselWhatsappSectionStyle}>
-                            <div className="whatsapp-content">
-                              {content?.carouselMediaType === "image" && (
-                                <CapImage
-                                  src={data?.imageSrc ? data?.imageSrc : whatsappImageEmptyPreview}
-                                  className="whatsapp-image"
-                                  alt={formatMessage(messages.previewGenerated)}
-                                />
-                              )}
-                              {content?.carouselMediaType === "video" && (
-                                <CapTooltip
-                                  title={formatMessage(messages.videoPreviewTooltip)}
-                                >
-                                  <div className="video-preview">
-                                    <CapImage
-                                      src={data?.videoPreviewImg ? data?.videoPreviewImg : whatsappVideoEmptyPreview}
-                                      className="whatsapp-image"
-                                      alt={formatMessage(messages.previewGenerated)}
-                                    />
-                                    <div className="icon-position">
-                                      <CapImage
-                                        className="video-icon"
-                                        src={videoPlay}
-                                      />
-                                    </div>
-                                  </div>
-                                </CapTooltip>
-                              )}
-                              <CapLabel type="label5">
-                                {content?.isEditFlow ? data?.updatedBodyText?.join("") : data?.bodyText}
-                              </CapLabel>
-                              {getWhatsappCarouselButtonView(data?.buttons, true)}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    )}
                   </div>
                 </div>
                 <CapHeading
@@ -1270,21 +1205,21 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       {ctaData &&
                         !isEmpty(ctaData) &&
                         ctaData[0]?.text !== "" && (
-                        <CapButton
-                          type="primary"
-                          className={`inapp-button-${templateLayoutType}-${device} ${
+                          <CapButton
+                            type="primary"
+                            className={`inapp-button-${templateLayoutType}-${device} ${
                               mediaPreview?.inAppImageSrcAndroid
                                 ? ""
                                 : `without-image-button-${templateLayoutType}-android`
-                          } ${
+                            } ${
                               mediaPreview?.inAppImageSrcIos
                                 ? ""
                                 : `without-image-button-${templateLayoutType}-ios`
-                          }`}
-                        >
-                          {ctaData[0]?.text}
-                        </CapButton>
-                      )}
+                            }`}
+                          >
+                            {ctaData[0]?.text}
+                          </CapButton>
+                        )}
                     </div>
                   </div>
                 </div>

package/v2Containers/Cap/actions.js

@@ -85,3 +85,11 @@ export const getLiquidTags = (data,callback) => {
     callback,
   };
 };
+
+export const createCentralCommsMetaId = (data, callback) => {
+  return {
+    type: types.CREATE_CENTRAL_COMMS_META_ID_REQUEST,
+    data,
+    callback,
+  };
+};

package/v2Containers/Cap/constants.js

@@ -63,3 +63,7 @@ export const DEFAULT_MODULE = 'creatives';
 export const GET_LIQUID_TAGS_FAILURE = 'cap/GET_LIQUID_TAGS_FAILURE_V2';
 export const GET_LIQUID_TAGS_REQUEST = 'cap/GET_LIQUID_TAGS_REQUEST_V2';
 export const GET_LIQUID_TAGS_SUCCESS = 'cap/GET_LIQUID_TAGS_SUCCESS_V2';
+
+export const CREATE_CENTRAL_COMMS_META_ID_FAILURE = 'cap/CREATE_CENTRAL_COMMS_META_ID_FAILURE_V2';
+export const CREATE_CENTRAL_COMMS_META_ID_REQUEST = 'cap/CREATE_CENTRAL_COMMS_META_ID_REQUEST_V2';
+export const CREATE_CENTRAL_COMMS_META_ID_SUCCESS = 'cap/CREATE_CENTRAL_COMMS_META_ID_SUCCESS_V2';

package/v2Containers/Cap/reducer.js

@@ -199,6 +199,12 @@ function capReducer(state = fromJS(initialState.cap), action) {
       return state
         .set('demoVideoAndLinkJSONStatus', types.FAILURE)
         .set('demoVideoAndLinkJSONError', action?.error);
+    case types.CREATE_CENTRAL_COMMS_META_ID_REQUEST:
+      return state.set('metaTagsStatus', types.REQUEST);
+    case types.CREATE_CENTRAL_COMMS_META_ID_SUCCESS:
+      return state.set('metaTagsStatus', types.SUCCESS);
+    case types.CREATE_CENTRAL_COMMS_META_ID_FAILURE:
+      return state.set('metaTagsStatus', types.FAILURE);
     default:
       return state;
   }

package/v2Containers/Cap/sagas.js

@@ -186,6 +186,22 @@ const getTopbarData = (parentModule) => {
   }
 };
 
+export function* createCentralCommsMetaId(action) {
+  try {
+    const result = yield call(Api.createCentralCommsMetaId, action?.data);
+    if (result?.status?.code === 200) {
+      if (action?.callback) {
+        yield call(action?.callback, result);
+      }
+      yield put({ type: types.CREATE_CENTRAL_COMMS_META_ID_SUCCESS, result });
+    } else {
+      yield put({ type: types.CREATE_CENTRAL_COMMS_META_ID_FAILURE, error: result?.message });
+    }
+  } catch (error) {
+    yield put({ type: types.CREATE_CENTRAL_COMMS_META_ID_FAILURE, error });
+  }
+}
+
 function* getTopbarMenuData(params) {
   const {parentModule} = params;
   try {
@@ -225,6 +241,10 @@ export function* watchLiquidEntity() {
   yield takeLatest(types.GET_LIQUID_TAGS_REQUEST, getLiquidTags);
 }
 
+export function* watchMetaId() {
+  yield takeLatest(types.CREATE_CENTRAL_COMMS_META_ID_REQUEST, createCentralCommsMetaId);
+}
+
 function* watchForOrgChange() {
   yield takeLatest(types.SWITCH_ORG_REQUEST, switchOrg);
 }
@@ -257,6 +277,7 @@ export default [
   watchGetTopbarMenuData,
   watchForGetVideosConfig,
   watchLiquidEntity,
+  watchMetaId,
 ];
 
 
@@ -268,6 +289,7 @@ export function* capSagaForFetchSchemaForEntity() {
 export function* capSagaLiquidEntity() {
   yield all([
     watchLiquidEntity(),
+    watchMetaId(),
   ]);
 };
 
@@ -279,5 +301,6 @@ export function* v2CapSagas() {
     watchForFetchUserInfo(),
     watchGetTopbarMenuData(),
     watchForGetVideosConfig(),
+    watchMetaId(),
   ]);
 }

package/v2Containers/Cap/selectors.js

@@ -72,6 +72,11 @@ const selectLiquidStateDetails = () => createSelector(
   (globalState) => globalState.get('fetchingLiquidTags')
 );
 
+const selectMetaTagsStatus = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('metaTagsStatus')
+);
+
 const makeSelectFetchingSchema = () => createSelector(
   selectCapDomain,
   (globalState) => globalState.get('fetchingSchema')
@@ -113,4 +118,5 @@ export {
   makeSelectFetchingSchemaError,
   makeSelectDemoVideoAndLink,
   selectLiquidStateDetails,
+  selectMetaTagsStatus,
 };

package/v2Containers/Cap/tests/__snapshots__/index.test.js.snap

@@ -40,6 +40,7 @@ exports[`<Cap /> should render correct component 1`] = `
       "changeOrg": [Function],
       "clearMetaEntities": [Function],
       "clearTopbarMenuData": [Function],
+      "createCentralCommsMetaId": [Function],
       "fetchSchemaForEntity": [Function],
       "getLiquidTags": [Function],
       "getSupportVideosConfig": [Function],

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -158,6 +158,7 @@ export function SlideBoxContent(props) {
       hostName = '',
       eventContextTags,
       isLoyaltyModule,
+      loyaltyMetaData = {},
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -434,6 +435,8 @@ export function SlideBoxContent(props) {
         enableNewChannels={enableNewChannels}
         hideTestAndPreviewBtn={hideTestAndPreviewBtn}
         eventContextTags={eventContextTags}
+        loyaltyMetaData={loyaltyMetaData}
+        isLoyaltyModule={isLoyaltyModule}
         />
       )}
       {isPreview && (
@@ -514,6 +517,7 @@ export function SlideBoxContent(props) {
           onCreateComplete={onCreateComplete}
           smsRegister={smsRegister}
           eventContextTags={eventContextTags}
+          messageDetails={messageDetails}
         />
       )}
       {isEditFTP && (
@@ -582,6 +586,7 @@ export function SlideBoxContent(props) {
         smsRegister={smsRegister}
         onShowTemplates={onShowTemplates}
         eventContextTags={eventContextTags}
+        messageDetails={messageDetails}
       />
         )}
 
@@ -615,6 +620,7 @@ export function SlideBoxContent(props) {
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         eventContextTags={eventContextTags}
         isLoyaltyModule={isLoyaltyModule}
+        messageDetails={messageDetails}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -645,6 +651,7 @@ export function SlideBoxContent(props) {
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         eventContextTags={eventContextTags}
         isLoyaltyModule={isLoyaltyModule}
+        messageDetails={messageDetails}
       />
         )}
       {isEditMPush &&
@@ -671,6 +678,7 @@ export function SlideBoxContent(props) {
           hideTestAndPreviewBtn={hideTestAndPreviewBtn}
           creativesMode={creativesMode}
           eventContextTags={eventContextTags}
+          messageDetails={messageDetails}
         />
         }
       {isCreateMPush &&
@@ -700,6 +708,7 @@ export function SlideBoxContent(props) {
           hideTestAndPreviewBtn={hideTestAndPreviewBtn}
           onTestContentClicked={onTestContentClicked}
           eventContextTags={eventContextTags}
+          messageDetails={messageDetails}
         />
       }
       {
@@ -934,6 +943,7 @@ SlideBoxContent.propTypes = {
   weChatTemplateType: PropTypes.string,
   onWechatTemplateChange: PropTypes.func,
   selectedWeChatAccount: PropTypes.object,
+  loyaltyMetaData: PropTypes.object,
   onWeChatMaptemplateStepChange: PropTypes.func,
   weChatMaptemplateStep: PropTypes.string,
   onFacebookSubmit: PropTypes.func,
@@ -950,6 +960,6 @@ SlideBoxContent.propTypes = {
   moduleType: PropTypes.string,
   showLiquidErrorInFooter: PropTypes.bool,
   creativesMode: PropTypes.string,
-  hostName: PropTypes.string,
+  hostName: PropTypes.string
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/constants.js

@@ -17,6 +17,7 @@ export const FTP = "FTP";
 export const NO_COMMUNICATION = "NO_COMMUNICATION";
 export const VIBER = "VIBER";
 export const WHATSAPP = "WHATSAPP";
+export const PUSH = "PUSH";
 export const RCS = "RCS";
 export const ZALO = "ZALO";
 export const INAPP = "INAPP";
@@ -24,6 +25,8 @@ export const PREVIEW = "preview";
 export const EDIT_TEMPLATE = "editTemplate";
 export const JOURNEY = "journey";
 
+export const LOYALTY_SUPPORTED_ACTION = "SEND_COMMUNICATION_ACTION";
+
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";