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

package/v2Containers/Whatsapp/index.scss

@@ -110,16 +110,7 @@
     width: 95%;
   }
 
-  #select-whatsapp-category {
-    padding-right: 5px;
-  }
-
-  #select-whatsapp-media {
-    padding-left: 5px;
-  }
-
   #select-whatsapp-category,
-  #select-whatsapp-media,
   #select-whatsapp-language {
     width: 100%;
   }
@@ -258,52 +249,10 @@
   color: $CAP_G10;
 }
 
-.carousel-media-selection {
-  display: flex;
-  align-items: center;
-  .carousel-media-selection-heading {
-    margin-right: 20px;
-  }
-}
-
-.whatsapp-carousel-tab { 
-  .ant-tabs-extra-content {
-    padding: 0;
-    line-height: normal;
-    .add-carousel-content-button {
-      padding: 9px 0px;
-      margin: 0;
-    }
-    .cap-divider-v2{
-      height: 1.5rem;
-      margin-bottom: 7px;
-    }
-  }
-}
-
-.whatsapp-carousel-card {
-  .ant-card-head {
-    border-bottom: none;
-  }
-  .ant-card-body {
-    padding-top: 0px;
-  }
-  .ant-card-head-wrapper {
-    .ant-card-extra {
-      .cap-button-v2 {
-        padding: 0px;
-      }
-    }
-  }
-}
-
-.whatsapp-carousel-message-heading {
-  margin-top: $CAP_SPACE_24;
-}
 .template-status-font{
   font-weight: 500;
 }
 
 .template-status-margin{
   margin: $CAP_SPACE_04 0 $CAP_SPACE_04;
-}
+}

package/v2Containers/Whatsapp/messages.js

@@ -110,13 +110,9 @@ export default defineMessages({
     id: `${prefix}.templateLanguageEnglish`,
     defaultMessage: 'English',
   },
-  none: {
-    id: `${prefix}.none`,
-    defaultMessage: 'None',
-  },
   mediaLabel: {
     id: `${prefix}.mediaLabel`,
-    defaultMessage: 'Media type',
+    defaultMessage: 'Media',
   },
   mediaText: {
     id: `${prefix}.mediaText`,
@@ -134,17 +130,13 @@ export default defineMessages({
     id: `${prefix}.mediaDocument`,
     defaultMessage: 'Document',
   },
-  mediaCarousel: {
-    id: `${prefix}.mediaCarousel`,
-    defaultMessage: 'Carousel',
-  },
   disabledFeatureTooltip: {
     id: `${prefix}.disabledFeatureTooltip`,
     defaultMessage: 'Not yet enabled. Coming soon!',
   },
   templateMessageLabel: {
     id: `${prefix}.templateMessageLabel`,
-    defaultMessage: 'Body text',
+    defaultMessage: 'Message',
   },
   templateMessageTooltip: {
     id: `${prefix}.templateMessageTooltip`,
@@ -737,34 +729,6 @@ export default defineMessages({
     id: `${prefix}.checkExpiryTooltipDesc`,
     defaultMessage: 'To check the configured expiry time that is same for all OTPs',
   },
-  carouselMediaType: {
-    id: `${prefix}.carouselMediaType`,
-    defaultMessage: 'Carousel media type',
-  },
-  card: {
-    id: `${prefix}.card`,
-    defaultMessage: 'Card',
-  },
-  carouselCardBodyMessageLabel: {
-    id: `${prefix}.carousleCardBodyMessageLabel`,
-    defaultMessage: 'Card body text',
-  },
-  carouselCardBodyMessagePlaceholder: {
-    id: `${prefix}.carouselCardBodyMessagePlaceholder`,
-    defaultMessage: 'Enter card body text',
-  },
-  buttonType: {
-    id: `${prefix}.buttonType`,
-    defaultMessage: 'Button type',
-  },
-  emptyCardBodyeErrorMessage: {
-    id: `${prefix}.emptyTemplateMessageErrorMessage`,
-    defaultMessage: 'Card body text cannot be empty',
-  },
-  carouselButtonInfo: {
-    id: `${prefix}.carouselButtonInfo`,
-    defaultMessage: 'Number of buttons and their types setup in the first card will be same for all the other cards in the carousel',
-  },
   pending: {
     id: `${prefix}.pending`,
     defaultMessage: 'Pending',

package/v2Containers/Whatsapp/utils.js

@@ -80,7 +80,6 @@ export const getWhatsappContent = (template, isPreview) => {
               header = '',
               footer = '',
             } = {},
-            carouselData = [],
           } = {},
         } = {},
       } = {},
@@ -126,7 +125,6 @@ export const getWhatsappContent = (template, isPreview) => {
       quickReplyData: buttonsData
     }),
     ...mediaParams,
-    carouselData,
   };
 };
 
@@ -190,38 +188,6 @@ export const getWhatsappQuickReply= (template, templatePreview) => {
   }
   return renderArray;
 }
-
-export const getWhatsappCarouselButtonView = (buttons, templatePreview) => {
-  const renderArray = [];
-  if (buttons?.length) {
-    renderArray.push(<CapDivider className={templatePreview ? "whatsapp-divider" : "whatsapp-list-view-divider"} />);
-    buttons.forEach((button, index) => {
-      const { text, buttonType, type } = button || {};
-      const currentButtonType = type || buttonType;
-      if (text) {
-        renderArray.push(
-          <CapLabel
-            type="label21"
-            style={{ textAlign: 'center', marginTop: '12px' }}
-            // className={templatePreview ? "whatsapp-cta-preview" : "whatsapp-list-quick-reply-preview"}
-          >
-            <CapIcon
-              type={currentButtonType === PHONE_NUMBER ? 'call' : currentButtonType === QUICK_REPLY ? "small-link" : 'launch'}
-              size="xs"
-              svgProps={{ style: { marginRight: '4px' } }}
-            />
-            {text}
-          </CapLabel>,
-        );
-      }
-      if (index < buttons?.length - 1) {
-        renderArray.push(<CapDivider className={templatePreview ? "whatsapp-divider" : "whatsapp-list-view-divider"} />);
-      }
-    });
-  }
-  return renderArray;
-};
-
 export const getWhatsappAutoFill = (template) => {
   const {category}= get(
     template,

package/v2Containers/mockdata.js

@@ -2583,6 +2583,9 @@ export default {
     },
     demoVideoAndLinkJSONStatus: "SUCCESS",
   },
+  loyaltyMetaData: {
+    actionName: "SEND_COMMUNICATION_ACTION",
+  },
   getWhatsappAutoFillData: 
     < CapLabel
       className="whatsapp-autofill-btn"

package/v2Components/CapWhatsappCarouselButton/constant.js

@@ -1,51 +0,0 @@
-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

@@ -1,446 +0,0 @@
-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);