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

package/initialState.js

@@ -50,5 +50,4 @@ export default {
   facebook: {
 
   },
-  metaTagsStatus: '',
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.87-alpha.19",
+  "version": "8.0.87-alpha.2",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -118,7 +118,7 @@ function request(url, options, handleUnauthorizedStatus) {
     .catch((error) => error);
 }
 
-function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeaders = false, orgUnitId = false, allowOrgInProd = false) {
+function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeaders = false, orgUnitId = false) {
   const token = loadItem('token');
   const orgID = loadItem('orgID');
   const user = loadItem('user');
@@ -145,8 +145,8 @@ function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeader
       headers['X-CAP-REMOTE-USER'] = user.refID;
     }
 
-    if ((allowOrgInProd || process.env.NODE_ENV !== "production") && orgID !== undefined) {
-      headers["X-CAP-API-AUTH-ORG-ID"] = orgID;
+    if (process.env.NODE_ENV !== 'production' && orgID !== undefined) {
+      headers['X-CAP-API-AUTH-ORG-ID'] = orgID;
     }
 
     if (process.env.NODE_ENV !== 'production' && token !== undefined) {
@@ -520,7 +520,13 @@ export const checkBulkDuplicates = (data) => {
 export const createWhatsappTemplate = ({payload, gupshupMediaFile }) => {
   const data = new FormData();
   data.append('payload', JSON.stringify(payload));
-  data.append('gupshupMediaFile', gupshupMediaFile);
+  if (Array.isArray(gupshupMediaFile) && gupshupMediaFile.length) {
+    gupshupMediaFile.forEach((file, index) => {
+      data.append(`gupshupMediaFile_${index}`, file);
+    });
+  } else {
+    data.append('gupshupMediaFile', gupshupMediaFile);
+  }
   const url = `${API_ENDPOINT}/templates/WHATSAPP`;
   return request(url, getAPICallObject('POST', data, true));
 };
@@ -569,9 +575,4 @@ export const getLiquidTags = (content) => {
   return request(url, getAPICallObject("POST", { content }, false, true));
 };
 
-export const createCentralCommsMetaId = (payload, metaId = 'TRANSACTION') => {
-  const url = `${API_ENDPOINT}/common/central-comms/meta-id/${metaId}`;
-  return request(url, getAPICallObject('POST', payload, false, false, false, true));
-};
-
 export {request, getAPICallObject};

package/v2Components/CapWhatsappCTA/messages.js

@@ -104,4 +104,8 @@ export default defineMessages({
     id: `${prefix}.whatsappCtaTagListRevert`,
     defaultMessage: 'Reset website URL label to default value',
   },
+  url: {
+    id: `${prefix}.url`,
+    defaultMessage: 'URL',
+  },
 });

package/v2Components/CapWhatsappCarouselButton/constant.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import capWhatsappCTAMsg from '../CapWhatsappCTA/messages';
+import capWhatsappMsg from '../../v2Containers/Whatsapp/messages';
+
+export const PHONE_NUMBER = 'PHONE_NUMBER';
+export const URL = 'URL';
+export const QUICK_REPLY = 'QUICK_REPLY';
+export const STATIC_URL = 'STATIC_URL';
+export const BTN_MAX_LENGTH = 20;
+export const PHONE_NUMBER_MAX_LENGTH = 15;
+export const URL_MAX_LENGTH = 2000;
+export const carouselButtonOptions = [
+  {
+    value: PHONE_NUMBER,
+    label: <FormattedMessage {...capWhatsappCTAMsg.ctaPhoneNo} />,
+  },
+  {
+    value: URL,
+    label: <FormattedMessage {...capWhatsappCTAMsg.url} />,
+  },
+  {
+    value: QUICK_REPLY,
+    label: <FormattedMessage {...capWhatsappMsg.btnTypeQuickReply} />,
+  },
+];
+
+export const INITIAL_CAROUSEL_PHONE_NUMBER_DATA = {
+  buttonType: PHONE_NUMBER,
+  text: '',
+  phone_number: '',
+  isSaved: false,
+  textError: "",
+};
+
+export const INITIAL_CAROUSEL_URL_DATA = {
+  buttonType: URL,
+  text: '',
+  urlType: STATIC_URL,
+  url: '',
+  isSaved: false,
+  textError: "",
+  urlError: "",
+};
+
+export const INITIAL_CAROUSEL_QUICK_REPLY_DATA = {
+  text: "",
+  buttonType: QUICK_REPLY,
+  isSaved: false,
+  textError: "",
+};

package/v2Components/CapWhatsappCarouselButton/index.js

@@ -0,0 +1,446 @@
+import React, { useState } from "react";
+import { injectIntl } from "react-intl";
+import PhoneInput from 'react-phone-input-2';
+import { cloneDeep } from "lodash";
+import 'react-phone-input-2/lib/style.css';
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapRadioGroup from "@capillarytech/cap-ui-library/CapRadioGroup";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapTooltipWithInfo from "@capillarytech/cap-ui-library/CapTooltipWithInfo";
+import CapSelect from "@capillarytech/cap-ui-library/CapSelect";
+import CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapTooltip from "@capillarytech/cap-ui-library/CapTooltip";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import { CAP_SPACE_04 } from "@capillarytech/cap-ui-library/styled/variables";
+import TagList from "../../v2Containers/TagList";
+import {
+  carouselButtonOptions,
+  INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
+  INITIAL_CAROUSEL_QUICK_REPLY_DATA,
+  INITIAL_CAROUSEL_URL_DATA,
+  PHONE_NUMBER,
+  URL,
+  BTN_MAX_LENGTH,
+  PHONE_NUMBER_MAX_LENGTH,
+  URL_MAX_LENGTH,
+  QUICK_REPLY,
+} from "./constant";
+import capWhatsappMsg from '../../v2Containers/Whatsapp/messages';
+import capWhatsappCTAMsg from '../CapWhatsappCTA/messages';
+import {
+  KARIX_GUPSHUP_URL_OPTIONS, TWILIO_URL_OPTIONS, DYNAMIC_URL, STATIC_URL,
+} from "../CapWhatsappCTA/constants";
+import globalMessages from '../../v2Containers/Cap/messages';
+import { isUrl, isValidText } from '../../v2Containers/Line/Container/Wrapper/utils';
+import { HOST_TWILIO } from "../../v2Containers/Whatsapp/constants";
+import "./index.scss";
+
+export const CapWhatsappCarouselButton = (props) => {
+  const {
+    intl,
+    carouselData = [],
+    setCarouselData,
+    carouselIndex = 0,
+    hostName = '',
+    isEditFlow = false,
+    tags = [],
+    injectedTags = {},
+    selectedOfferDetails = [],
+  } = props;
+  const { formatMessage } = intl;
+  const buttonData = carouselData[carouselIndex]?.buttons || [];
+  const invalidVarRegex = /{{(.*?)}}/g;
+
+  const handleButtonType = ({ target: { value } }, buttonIndex) => {
+    const cloneCarouselData = cloneDeep(carouselData);
+    const dataMap = {
+      [PHONE_NUMBER]: INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
+      [URL]: INITIAL_CAROUSEL_URL_DATA,
+      [QUICK_REPLY]: INITIAL_CAROUSEL_QUICK_REPLY_DATA,
+    };
+
+    const updatedCarouselData = cloneCarouselData.map((carousel) => {
+      carousel.buttons[buttonIndex] = dataMap[value] || dataMap.default;
+      return carousel;
+    });
+
+    setCarouselData(updatedCarouselData);
+  };
+
+  const onValueChange = (buttonIndex, fields = []) => {
+    const updatedButtonData = cloneDeep(buttonData);
+    fields.forEach((field) => {
+      updatedButtonData[buttonIndex][field.fieldName] = field.value;
+    });
+    setCarouselData(
+      carouselData.map((item, index) => index === carouselIndex
+        ? { ...item, buttons: updatedButtonData }
+        : item)
+    );
+  };
+
+  const onTagSelect = (data, index, url) => {
+    onValueChange(index, [{fieldName: 'url', value: url.replace('{{1}}', `{{${data}}}`)}]);
+  };
+
+  const revertTagSelect = (index, url) => {
+    onValueChange(index, [{fieldName: 'url', value: url.replace(invalidVarRegex, `{{1}}`)}]);
+  };
+
+  const renderLength = (len, max) => (
+    <CapHeading type="label1" className="whatsapp-render-btn-length">
+      {formatMessage(capWhatsappMsg.templateMessageLength, {
+        currentLength: len,
+        maxLength: max,
+      })}
+    </CapHeading>
+  );
+
+  const onUrlChange = ({ target }, urlType, buttonIndex) => {
+    let { value } = target;
+    if (urlType === DYNAMIC_URL) {
+      value = value.replace(invalidVarRegex, '');
+      value = `${value}{{1}}`;
+    }
+    let errorMessage = false;
+    if (!isUrl(value)) {
+      errorMessage = formatMessage(capWhatsappCTAMsg.ctaWebsiteUrlErrorMessage);
+    } else if (
+      urlType === STATIC_URL
+      && value.match(invalidVarRegex)?.length > 0
+    ) {
+      errorMessage = formatMessage(capWhatsappCTAMsg.staticUrlWithVarErrorMessage);
+    }
+    onValueChange(buttonIndex, [{fieldName: 'url', value}, {fieldName: 'urlError', value: errorMessage}]);
+  };
+
+  const onButtonTextChange = (value, buttonIndex) => {
+    let errorMessage = '';
+    if (!isValidText(value)) {
+      errorMessage = formatMessage(capWhatsappCTAMsg.ctaButtonErrorMessage);
+    }
+    onValueChange(buttonIndex, [{fieldName: 'text', value}, {fieldName: 'textError', value: errorMessage}]);
+  };
+
+  const ctaSaveDisabled = (index) => {
+    const {
+      buttonType, text, phone_number, url, textError, urlError,
+    } = buttonData[index] || {};
+    if (text === '' || textError) {
+      return true;
+    } if (buttonType === PHONE_NUMBER && phone_number.length < 5) {
+      return true;
+    } if (buttonType === URL && (url === '' || urlError)) {
+      return true;
+    }
+    return false;
+  };
+
+  const handleSaveButton = (buttonIndex) => {
+    onValueChange(buttonIndex, [{fieldName: 'isSaved', value: true}]);
+  };
+
+  const handleEditButton = (buttonIndex) => {
+    onValueChange(buttonIndex, [{fieldName: 'isSaved', value: false}]);
+  };
+
+  const handleDeleteButton = (buttonIndex) => {
+    setCarouselData((prevData) => prevData.map((carousel) => ({
+      ...carousel,
+      buttons: carousel.buttons.filter((_, index) => index !== buttonIndex),
+    })));
+  };
+
+  const addCarouselButton = () => {
+    setCarouselData(
+      carouselData.map((item, index) => index === carouselIndex
+        ? { ...item, buttons: [...buttonData, INITIAL_CAROUSEL_PHONE_NUMBER_DATA] }
+        : item)
+    );
+  };
+
+  const renderButtonContent = (buttonType, buttonIndex) => (
+    <>
+      <CapRow className="text-box-container">
+        <CapColumn span={24}>
+          {/* Button text */}
+          <CapHeading type="h4" className="cta-label">
+            {formatMessage(capWhatsappCTAMsg.ctaButtonText)}
+            <CapTooltipWithInfo
+              infoIconProps={{
+                style: { marginLeft: CAP_SPACE_04 },
+              }}
+              autoAdjustOverflow
+              placement="right"
+              title={formatMessage(capWhatsappCTAMsg.ctaButtonTextTooltip)}
+            />
+          </CapHeading>
+          <CapInput
+            className="whatsapp-cta-button-text"
+            onChange={({ target: { value } }) => onButtonTextChange(value, buttonIndex)}
+            placeholder={formatMessage(capWhatsappCTAMsg.ctaButtonTextPlaceholder)}
+            value={buttonData[buttonIndex].text}
+            size="large"
+            maxLength={BTN_MAX_LENGTH}
+            errorMessage={buttonData[buttonIndex]?.textError}
+          />
+          {renderLength(buttonData[buttonIndex]?.text?.length, BTN_MAX_LENGTH)}
+        </CapColumn>
+      </CapRow>
+      {buttonType === PHONE_NUMBER && (
+        <CapRow className="text-box-container">
+          <CapColumn span={24}>
+            {/* phone number */}
+            <CapHeading type="h4" className="cta-label">
+              {formatMessage(capWhatsappCTAMsg.ctaPhoneNo)}
+            </CapHeading>
+            <PhoneInput
+              placeholder={formatMessage(capWhatsappCTAMsg.ctaPhoneNoPlaceholder)}
+              autoFormat={false}
+              countryCodeEditable={false}
+              value={buttonData[buttonIndex].phone_number}
+              onChange={(value) => onValueChange(buttonIndex, [{fieldName: 'phone_number', value}])}
+              country="in"
+              className="cta-phone-number carousel-button-phone-number"
+            />
+            {renderLength(buttonData[buttonIndex]?.phone_number.length, PHONE_NUMBER_MAX_LENGTH)}
+          </CapColumn>
+        </CapRow>
+      )}
+      {buttonType === URL
+      && (
+        <CapRow className="text-box-container">
+          <CapColumn span={6}>
+            {/* URL Type */}
+            <CapHeading type="h4" className="cta-label">
+              {formatMessage(capWhatsappCTAMsg.ctaWebsiteType)}
+            </CapHeading>
+            <CapSelect
+              id="whatsapp-carousel-button-url-type"
+              options={
+                hostName === HOST_TWILIO
+                  ? TWILIO_URL_OPTIONS
+                  : KARIX_GUPSHUP_URL_OPTIONS
+              }
+              onChange={(value) => onValueChange(buttonIndex, [{fieldName: 'urlType', value}])}
+              value={buttonData[buttonIndex]?.urlType}
+            />
+          </CapColumn>
+          <CapColumn span={18}>
+            {/* cta url */}
+            <CapHeading type="h4" className="cta-label">
+              {formatMessage(capWhatsappCTAMsg.ctaWebsiteUrl)}
+              {buttonData[buttonIndex]?.urlType === DYNAMIC_URL && (
+                <CapTooltipWithInfo
+                  infoIconProps={{
+                    style: { marginLeft: CAP_SPACE_04 },
+                  }}
+                  autoAdjustOverflow
+                  placement="right"
+                  title={formatMessage(capWhatsappCTAMsg.dynamicUrlTooltip, { one: '{{1}}' })}
+                />
+              )}
+            </CapHeading>
+            <CapInput
+              className="whatsapp-cta-url"
+              onChange={(event) => onUrlChange(event, buttonData[buttonIndex]?.urlType, buttonIndex)}
+              placeholder={
+              buttonData[buttonIndex]?.urlType === DYNAMIC_URL
+                ? formatMessage(capWhatsappCTAMsg.ctaDynamicPlaceholder)
+                : formatMessage(capWhatsappCTAMsg.ctaStaticPlaceholder)
+              }
+              value={buttonData[buttonIndex]?.url}
+              size="large"
+              maxLength={URL_MAX_LENGTH}
+              errorMessage={buttonData[buttonIndex]?.urlError || ''}
+            />
+            {renderLength(buttonData[buttonIndex]?.url?.length, URL_MAX_LENGTH)}
+          </CapColumn>
+        </CapRow>
+      )
+      }
+      {/* it render save and delete button */}
+      <CapRow className="whatsapp-cta-save-delete-btn whatsapp-carousel-save-edit-btn">
+        <CapTooltip
+          title={
+            ctaSaveDisabled(buttonIndex)
+              && formatMessage(capWhatsappCTAMsg.ctaSaveDisabled)
+          }
+          placement="bottom"
+        >
+          <div className="button-disabled-tooltip-wrapper">
+            <CapButton
+              onClick={() => {
+                handleSaveButton(buttonIndex);
+              }}
+              disabled={ctaSaveDisabled(buttonIndex)}
+              className="whatsapp-cta-save-btn"
+            >
+              {formatMessage(globalMessages.save)}
+            </CapButton>
+            {buttonData.length > 1 && buttonIndex > 0 && parseInt(carouselIndex) === 0 && (
+              <CapButton
+                onClick={() => {
+                  handleDeleteButton(buttonIndex);
+                }}
+                className="whatsapp-cta-delete-btn whatsapp-carousel-delete-button"
+                type="secondary"
+              >
+                {formatMessage(globalMessages.delete)}
+              </CapButton>
+            )}
+          </div>
+        </CapTooltip>
+      </CapRow>
+    </>
+  );
+
+  const isCarouselAddButtonDisable = buttonData?.length === 1 && !buttonData?.[0]?.isSaved;
+
+  return (
+    <CapRow>
+      {buttonData.map((button, index) => {
+        const isPhoneNumberType = button?.buttonType === PHONE_NUMBER;
+        const isURLtype = button?.buttonType === URL;
+        if (button.isSaved || isEditFlow) {
+          return (
+            <CapRow
+              key={`${button.buttonType}_${index}`}
+              className="cap-whatsapp-saved-cta cap-whatsapp-saved-carousel-button margin-t-12"
+              align="middle"
+              type="flex"
+              style={{ marginLeft: isEditFlow ? 0 : '' }}
+            >
+              <CapColumn
+                span={1}
+                className={`${isPhoneNumberType ? 'whatsapp-saved-cta-phone-icon' : ''}`}
+              >
+                <CapIcon size="s" type={isPhoneNumberType ? 'call' : isURLtype ? 'launch' : 'six-dots'} />
+              </CapColumn>
+              <CapColumn span={6}>
+                <CapLabel
+                  type="label2"
+                  className="whatsapp-saved-cta-button-text"
+                >
+                  {button?.text}
+                </CapLabel>
+              </CapColumn>
+              {isPhoneNumberType && (
+                <CapColumn span={10} align="left">
+                  <CapLabel className="phone">
+                    {button?.phone_number}
+                  </CapLabel>
+                </CapColumn>
+              )}
+              {isURLtype && (
+                <>
+                  <CapColumn span={3}>
+                    <CapLabel className="url-type" type="label2">
+                      {button?.urlType === STATIC_URL
+                        ? formatMessage(capWhatsappCTAMsg.ctaWebsiteTypeStatic)
+                        : formatMessage(capWhatsappCTAMsg.ctaWebsiteTypeDynamic)}
+                    </CapLabel>
+                  </CapColumn>
+                  <CapTooltip title={button?.url} placement="top">
+                    <CapColumn span={7} style={{ marginRight: '0px' }}>
+                      <CapLabel className="url">{button?.url}</CapLabel>
+                    </CapColumn>
+                  </CapTooltip>
+                </>
+              )}
+              {!isEditFlow && (
+                <>
+                  <CapColumn
+                    span={1}
+                    className="whatsapp-saved-cta-edit-icon"
+                    onClick={() => handleEditButton(index)}
+                  >
+                    <CapIcon size="s" type="edit" />
+                  </CapColumn>
+                  {parseInt(carouselIndex) === 0 && (
+                    <CapColumn span={1}>
+                      <CapButton type="flat" className="whatsapp-carousel-delete-icon-btn" onClick={() => handleDeleteButton(index)} disabled={buttonData?.length === 1}>
+                        <CapIcon size="s" type="delete" />
+                      </CapButton>
+                    </CapColumn>
+                  )}
+                </>
+              )}
+              {isEditFlow && button?.urlType === DYNAMIC_URL && button?.url.includes('{{1}}') && (
+                <CapColumn>
+                  <TagList
+                    className="whatsapp-cta-taglist"
+                    label={formatMessage(capWhatsappCTAMsg.whatsappCtaTagListLabel)}
+                    onTagSelect={(data) => onTagSelect(data, index, button?.url)}
+                    tags={tags}
+                    injectedTags={injectedTags}
+                    selectedOfferDetails={selectedOfferDetails}
+                  />
+                </CapColumn>
+              )}
+              {isEditFlow && button?.urlType === DYNAMIC_URL && !button?.url.includes('{{1}}') && (
+                <CapColumn
+                  span={1}
+                  onClick={() => revertTagSelect(index, button?.url)}
+                  className="whatsapp-cta-tag-revert"
+                >
+                  <CapTooltip
+                    title={formatMessage(capWhatsappCTAMsg.whatsappCtaTagListRevert)}
+                    placement="top"
+                  >
+                    <CapIcon size="s" type="return" />
+                  </CapTooltip>
+                </CapColumn>
+              )}
+            </CapRow>
+          );
+        } return (
+          <CapRow
+            key={`${button.buttonType}_${index}`}
+            className="cap-whatsapp-carousel-button"
+          >
+            <CapLabel type="label16" className="button-type-heading">{formatMessage(capWhatsappMsg.buttonType)}</CapLabel>
+            <CapRadioGroup
+              id="carousel-button-radio"
+              options={carouselButtonOptions}
+              value={button.buttonType}
+              onChange={(e) => handleButtonType(e, index)}
+              className="whatsapp-media-radio"
+            />
+            {renderButtonContent(button.buttonType, index)}
+          </CapRow>
+        );
+      })}
+      <CapRow>
+        {buttonData?.length < 2 && !isEditFlow && parseInt(carouselIndex) === 0 && (
+          <CapRow>
+            <CapTooltip
+              title={
+                isCarouselAddButtonDisable ? formatMessage(capWhatsappCTAMsg.ctaAddDisabled) : ""
+              }
+              placement="right"
+            >
+              <div className="button-disabled-tooltip-wrapper">
+                <CapButton
+                  type="flat"
+                  id="whatsapp-quick-reply-add-button"
+                  disabled={isCarouselAddButtonDisable}
+                  className="margin-t-12 margin-l-24"
+                  isAddBtn
+                  onClick={addCarouselButton}
+                >
+                  {formatMessage(capWhatsappCTAMsg.addButton)}
+                </CapButton>
+              </div>
+            </CapTooltip>
+          </CapRow>
+        )}
+      </CapRow>
+    </CapRow>
+  );
+};
+
+export default injectIntl(CapWhatsappCarouselButton);

package/v2Components/CapWhatsappCarouselButton/index.scss

@@ -0,0 +1,39 @@
+@import "~@capillarytech/cap-ui-library/styles/_variables";
+
+.cap-whatsapp-carousel-button {
+  border: solid 0.063rem $CAP_G06;
+  padding: $CAP_SPACE_24;
+  border-radius: 0.285rem;
+  margin-top: $CAP_SPACE_12;
+  .button-type-heading {
+    margin-bottom: $CAP_SPACE_12;
+  }
+  .carousel-button-phone-number {
+    .form-control {
+      width: 100%;
+    }
+  }
+  .text-box-container {
+    margin-top: $CAP_SPACE_16;
+  }
+  #whatsapp-carousel-button-url-type {
+    width: 90%;
+  }
+  .whatsapp-carousel-save-edit-btn {
+    margin-top: $CAP_SPACE_24;
+  }
+  .whatsapp-carousel-delete-button {
+    margin-left: $CAP_SPACE_12;
+  }
+}
+
+.cap-whatsapp-saved-carousel-button {
+  width: 100%;
+  margin-left: 0;
+  margin-top: $CAP_SPACE_12;
+  .whatsapp-carousel-delete-icon-btn {
+    padding: 0;
+    margin: 0;
+    height: auto;
+  }
+}

package/v2Components/FormBuilder/index.js

@@ -44,7 +44,7 @@ import EDMEditor from "../Edmeditor";
 import BeeEditor from '../../v2Containers/BeeEditor';
 import CustomPopOver from '../CustomPopOver';
 import messages from './messages';
-import { makeSelectMetaEntities, selectCurrentOrgDetails, selectLiquidStateDetails, selectMetaTagsStatus } from "../../v2Containers/Cap/selectors";
+import { makeSelectMetaEntities, selectCurrentOrgDetails, selectLiquidStateDetails } from "../../v2Containers/Cap/selectors";
 import * as actions from "../../v2Containers/Cap/actions";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
@@ -56,7 +56,6 @@ import { OUTBOUND } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../containers/App/constants';
-import { REQUEST } from '../../v2Containers/Cap/constants'
 import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
 import { bindActionCreators } from 'redux';
@@ -1083,7 +1082,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
     });}
   }
-  
   saveForm(saveForm) {
     if (this.props.isNewVersionFlow && !saveForm) {
       this.props.getValidationData();
@@ -3795,7 +3793,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
     return (
-      <CapSpin spinning={Boolean((this.liquidFlow && this.props.liquidExtractionInProgress) || this.props.metaIdStatus === REQUEST)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
+      <CapSpin spinning={Boolean(this.liquidFlow && this.props.liquidExtractionInProgress)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
       <CapRow>
         {this.props.schema && this.renderForm()}
         <SlideBox
@@ -3829,7 +3827,6 @@ FormBuilder.defaultProps = {
   isNewVersionFlow: false,
   userLocale: localStorage.getItem('jlocale') || 'en',
   showLiquidErrorInFooter: () => {},
-  metaIdStatus: false,
 };
 
 FormBuilder.propTypes = {
@@ -3877,13 +3874,12 @@ FormBuilder.propTypes = {
   isFullMode: PropTypes.bool,
   currentOrgDetails: PropTypes.object,
   liquidExtractionInProgress: PropTypes.bool,
-  showLiquidErrorInFooter: PropTypes.func
+  showLiquidErrorInFooter: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({
   currentOrgDetails: selectCurrentOrgDetails(),
   liquidExtractionInProgress: selectLiquidStateDetails(),
-  metaIdStatus: selectMetaTagsStatus(),
   metaEntities: makeSelectMetaEntities(),
 });
 

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -567,6 +567,10 @@
         font-size: 10px;
         font-family: 'open-sans';
       }
+      &.message-pop-carousel {
+        position: relative; 
+        margin-right: 4px;
+      }
     }
   }
   .android-push-message-Container, .iphone-push-message-Container{
@@ -747,6 +751,11 @@
       width: 153px;
     }
   }
+
+  .msg-container-carousel {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .align-center {