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

package/v2Components/CapImageUpload/index.js

@@ -44,6 +44,7 @@ function CapImageUpload(props) {
     imageData,
     channel,
     channelSpecificStyle,
+    showReUploadButton = true,
   } = props;
   const {
     formatMessage,
@@ -224,16 +225,18 @@ function CapImageUpload(props) {
         </>
       );
     }
-    return (
-      <CapButton
-        className="dragger-button re-upload"
-        type="flat"
-        onClick={onReUpload}
-        style={channelSpecificStyle ? { marginTop: '-16px'} : {}}
-       >
-        <FormattedMessage {...messages.imageReUpload} />
-      </CapButton>
-    );
+    if (showReUploadButton) {
+      return (
+        <CapButton
+          className="dragger-button re-upload"
+          type="flat"
+          onClick={onReUpload}
+          style={channelSpecificStyle ? { marginTop: '-16px'} : {}}
+        >
+          <FormattedMessage {...messages.imageReUpload} />
+        </CapButton>
+      );
+    }
   }, [isImageError, imageSrc]);
 
   return (

package/v2Components/CapVideoUpload/index.js

@@ -39,6 +39,7 @@ function CapVideoUpload(props) {
     errorMessage,
     showVideoNameAndDuration = true,
     formClassName = 'video-form',
+    showReUploadButton = true,
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
@@ -246,15 +247,17 @@ function CapVideoUpload(props) {
     const videoDurationValue = moment('1900-01-01 00:00:00').add(videoDuration, 'seconds').format("HH.mm.ss"); // to get the duration of video
     return (
       <Fragment key={videoSrc}>
-        <div style={{ overflow: 'hidden' }}>
-          <CapButton
-            className="dragger-button video-reupload"
-            type="flat"
-            onClick={onReUpload}
-          >
-            <FormattedMessage {...messages.imageReUpload} />
-          </CapButton>
-        </div>
+        {showReUploadButton && (
+          <div style={{ overflow: 'hidden' }}>
+            <CapButton
+              className="dragger-button video-reupload"
+              type="flat"
+              onClick={onReUpload}
+            >
+              <FormattedMessage {...messages.imageReUpload} />
+            </CapButton>
+          </div>
+        )}
         <div className={showVideoNameAndDuration ? 'video-panel' : 'video-panel-wp'}>
           <video
             width="230"

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,56 @@
+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 = (carouselIndex) => {
+  return [
+    {
+      value: PHONE_NUMBER,
+      label: <FormattedMessage {...capWhatsappCTAMsg.ctaPhoneNo} />,
+      disabled: carouselIndex > 0,
+    },
+    {
+      value: URL,
+      label: <FormattedMessage {...capWhatsappCTAMsg.url} />,
+      disabled: carouselIndex > 0,
+    },
+    {
+      value: QUICK_REPLY,
+      label: <FormattedMessage {...capWhatsappMsg.btnTypeQuickReply} />,
+      disabled: carouselIndex > 0,
+    },
+  ];
+};
+
+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] || {};
+      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, 10) === 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 ${isEditFlow ? 'margin-l-0' : ''}`}
+              align="middle"
+              type="flex"
+            >
+              <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} className="margin-r-0">
+                      <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, 10) === 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(carouselIndex)}
+              value={button.buttonType}
+              onChange={(e) => handleButtonType(e, index)}
+              className="whatsapp-media-radio"
+            />
+            {renderButtonContent(button.buttonType, index)}
+          </CapRow>
+        );
+      })}
+      <CapRow>
+        {/* user can add only two button in the first carousel in other carousel user dont allow to add buttons */}
+        {buttonData?.length < 2 && !isEditFlow && parseInt(carouselIndex, 10) === 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;
+  }
+}