@capillarytech/creatives-library 8.0.348 → 8.0.350

package/v2Containers/Whatsapp/constants.js

@@ -319,14 +319,6 @@ export const WHATSAPP_MEDIA_TYPES = {
   DOCUMENT: 'DOCUMENT',
   CAROUSEL: 'CAROUSEL',
 };
-
-export const WHATSAPP_IMAGE_SOURCE = {
-  UPLOAD: 'UPLOAD_IMAGE',
-  URL: 'ADD_IMAGE_URL',
-};
-
-export const ADD_IMAGE_URL_PREVIEW_MARKER = '__add_image_url__';
-export const TEMPLATE_VARIABLE_REGEX = /\{\{.*?\}\}/;
 export const NONE = 'NONE';
 export const CTA = 'CTA';
 export const QUICK_REPLY = 'QUICK_REPLY';

package/v2Containers/Whatsapp/index.js

@@ -104,8 +104,7 @@ import {
   VIDEO,
   URL,
   REQUEST,
-  HOST_KARIX,
-  WHATSAPP_IMAGE_SOURCE,
+  HOST_KARIX
 } from './constants';
 import { transformAssetData, transformToVendorFormat, VENDOR_TYPES, resolveCarouselVideoUpdateFields } from '../../utils/vendorDataTransformers';
 import { validateCarouselCards } from '../../utils/commonUtils';
@@ -253,15 +252,12 @@ export const Whatsapp = (props) => {
   const [headerTextAreaId, setHeaderTextAreaId] = useState('');
   const [isHeaderTagValidationError, updateIsHeaderTagValidationError] =
     useState(false);
-  const [imageURLCursorPosition, setImageURLCursorPosition] = useState(0);
   const [showUrlPreview, setShowUrlPreview] = useState(false);
   const [previewUrl, setPreviewUrl] = useState('');
   const [carouselMediaType, setCarouselMediaType] = useState('image');
   const [carouselData, setCarouselData] = useState(CAROUSEL_INITIAL_DATA);
   const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
   const [carouselValidateTag, setCarouselValidateTag] = useState(false);
-  const [mediaTypeSelection, setMediaTypeSelection] = useState(WHATSAPP_IMAGE_SOURCE.UPLOAD);
-  const [imageURL, setImageURL] = useState('');
   // TestAndPreviewSlidebox state
   const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
   const [isTestAndPreviewMode, setIsTestAndPreviewMode] = useState(false);
@@ -368,7 +364,6 @@ export const Whatsapp = (props) => {
         whatsappMedia: { header = '', footer = '', headerVarMapped = [] } = {},
         isPreviewUrl = false,
         carouselData : editCarouselData = [],
-        isAddImageUrl = false,
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -383,14 +378,6 @@ export const Whatsapp = (props) => {
       });
       setWhatsappDocSource(documentUrl);
       setWhatsappDocParams(whatsappDocParams);
-      if (mediaType === WHATSAPP_MEDIA_TYPES.IMAGE) {
-        if (isAddImageUrl) {
-          setMediaTypeSelection(WHATSAPP_IMAGE_SOURCE.URL);
-          setImageURL(imageUrl);
-        } else {
-          setMediaTypeSelection(WHATSAPP_IMAGE_SOURCE.UPLOAD);
-        }
-      }
       if (host === HOST_HAPTIC) {
         updateAssetList(transformToVendorFormat({
           ...assetList,
@@ -813,15 +800,6 @@ export const Whatsapp = (props) => {
     });
   }
 
-  const onImageURLTagSelect = (data) => {
-    const currentURL = imageURL || '';
-    const tag = `{{${data}}}`;
-    const newURL = currentURL.slice(0, imageURLCursorPosition) + tag + currentURL.slice(imageURLCursorPosition);
-    setImageURL(newURL);
-    setWhatsappImageSrc(newURL);
-    setImageURLCursorPosition(imageURLCursorPosition + tag.length);
-  };
-
   //setting the id of currently selected text area, is used onTagSelect
   const setTextAreaId = ({ target: { id } }, type, carouselIndex) => {
     if (type === HEADER_TEXT) {
@@ -1173,9 +1151,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 				);
 			} else {
 				setWhatsappImageSrc(filePath);
-				if (mediaTypeSelection !== WHATSAPP_IMAGE_SOURCE.URL) {
-					setMediaTypeSelection(WHATSAPP_IMAGE_SOURCE.UPLOAD);
-				}
 				if (isHaptic) {
 					setHapticFileHandle(fileHandle);
 				} else {
@@ -1184,7 +1159,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 			}
       actions.clearWhatsappAsset(0);
     },
-    [whatsappImageSrc, isMediaTypeCarousel, activeIndex, carouselData, isHaptic, mediaTypeSelection],
+    [whatsappImageSrc, isMediaTypeCarousel, activeIndex, carouselData, isHaptic],
   );
 
   const updateOnWhatsappImageReUpload = useCallback(() => {
@@ -1651,10 +1626,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     const { whatsappVideoSrc = '', whatsappVideoPreviewImg = '' } = whatsappVideoSrcAndPreview;
     switch (templateMediaType) {
       case WHATSAPP_MEDIA_TYPES.IMAGE:
-        const isImageUrlMode = mediaTypeSelection === WHATSAPP_IMAGE_SOURCE.URL;
         mediaParams = {
           imageUrl: getCdnUrl({ url: whatsappImageSrc, channelName: WHATSAPP }),
-          ...(isImageUrlMode && { isAddImageUrl: true }),
         };
         break;
       case WHATSAPP_MEDIA_TYPES.VIDEO:
@@ -1673,6 +1646,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
         break;
     }
 
+    // Add the correct file handle based on host
     if (isHaptic && hapticFileHandle) {
       mediaParams.hapticFileHandle = hapticFileHandle;
     } else if (!isHaptic && karixFileHandle) {
@@ -1784,21 +1758,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       type: WHATSAPP,
     });
   };
-  const isMediatypeValid =()=> {
-    if (isMediaTypeImage) {
-      if (mediaTypeSelection === WHATSAPP_IMAGE_SOURCE.URL) {
-        return isEditFlow ? !imageURL?.trim() : !whatsappImageSrc?.trim();
-      }
-      return !whatsappImageSrc?.trim();
-    }
-    if (isMediaTypeVideo) {
-      return !whatsappVideoSrcAndPreview?.whatsappVideoSrc?.trim();
-    }
-    if (isMediaTypeDoc) {
-      return !whatsappDocSource?.trim();
-    }
-    return false;
-  };
+  const isMediatypeValid =()=> ((isMediaTypeImage && whatsappImageSrc === "") || (isMediaTypeVideo && whatsappVideoSrcAndPreview?.whatsappVideoSrc === "") || (isMediaTypeDoc && whatsappDocSource === ""));
 
   const isDisableDone = () => {
     // Snapshot removed
@@ -1875,106 +1835,9 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     return false;
   };
 
-  const renderImageURLComponent = () => (
-    <>
-      {templateStatus === WHATSAPP_STATUSES.approved && !isAuthenticationTemplate && (
-        <CapRow className="whatsapp-render-heading">
-          <CapHeader
-            title={
-              <CapHeading type="h4">
-                {formatMessage(messages.mediaImage)}
-              </CapHeading>
-            }
-            suffix={
-              <TagList
-                label={formatMessage(globalMessages.addLabels)}
-                onTagSelect={onImageURLTagSelect}
-                location={location}
-                tags={tags || []}
-                onContextChange={handleOnTagsContextChange}
-                injectedTags={injectedTags || {}}
-                selectedOfferDetails={selectedOfferDetails}
-                eventContextTags={eventContextTags}
-              />
-            }
-          />
-        </CapRow>
-      )}
-      <CapRow className="whatsapp-image-url-container">
-        <CapInput
-          id="whatsapp-image-url-input"
-          placeholder={formatMessage(messages.imageUrlInputPlaceholder)}
-          value={imageURL}
-          disabled={isEditFlow && isFullMode}
-          onChange={e => {
-            setImageURL(e.target.value);
-            setWhatsappImageSrc(e.target.value);
-          }}
-          onFocus={(e) => {
-            setImageURLCursorPosition(e.target.selectionStart || e.target.value.length);
-          }}
-          onSelect={(e) => {
-            setImageURLCursorPosition(e.target.selectionStart || e.target.value.length);
-          }}
-        />
-      </CapRow>
-    </>
-  );
-
-  const handleMediaChange = (e) => {
-    if (templateStatus === WHATSAPP_STATUSES.approved || isEditFlow) {
-      return;
-    }
-    setMediaTypeSelection(e.target.value);
-    if (e.target.value === WHATSAPP_IMAGE_SOURCE.UPLOAD) {
-      setImageURL('');
-    } else if (e.target.value === WHATSAPP_IMAGE_SOURCE.URL) {
-      setWhatsappImageSrc('');
-      if (isHaptic) {
-        setHapticFileHandle('');
-      } else {
-        setKarixFileHandle('');
-      }
-    }
-  };
-
   const renderMediaComponent = () => (
     <>
-      {isMediaTypeImage && (
-        <CapRow className="whatsapp-dynamic-url-selection-container">
-          <CapHeading type="h4" className="whatsapp-dynamic-url-selection-heading">
-            {formatMessage(messages.mediaImage)}
-          </CapHeading>
-          <CapRadioGroup
-            options={[
-              {
-                value: WHATSAPP_IMAGE_SOURCE.UPLOAD,
-                label: formatMessage(messages.imageSourceUpload),
-              },
-              {
-                value: WHATSAPP_IMAGE_SOURCE.URL,
-                label: (
-                  <CapLabel.CapLabelInline type="label2">
-                    {formatMessage(messages.imageSourceUrl)}{' '}
-                    <CapTooltip
-                      placement="top"
-                      title={formatMessage(messages.imageSourceUrlTooltip)}
-                    >
-                      <CapIcon type="info-circle" size="s" style={{ cursor: 'pointer' }} />
-                    </CapTooltip>
-                  </CapLabel.CapLabelInline>
-                ),
-              },
-            ]}
-            value={mediaTypeSelection}
-            onChange={handleMediaChange}
-            className="whatsapp-media-radio"
-            disabled={templateStatus === WHATSAPP_STATUSES.approved || isEditFlow}
-          />
-        </CapRow>
-      )}
-      {isMediaTypeImage && (mediaTypeSelection === WHATSAPP_IMAGE_SOURCE.UPLOAD || !isEditFlow) && renderImageComponent()}
-      {isMediaTypeImage && mediaTypeSelection === WHATSAPP_IMAGE_SOURCE.URL && isEditFlow && renderImageURLComponent()}
+      {isMediaTypeImage && renderImageComponent()}
       {isMediaTypeVideo && renderVideoComonent()}
       {isMediaTypeDoc && renderDocumentComponent()}
     </>

package/v2Containers/Whatsapp/index.scss

@@ -9,14 +9,6 @@
     margin-top: $CAP_SPACE_16;
   }
 
-  .whatsapp-dynamic-url-selection-container {
-    margin-bottom: $CAP_SPACE_08;
-    margin-top: $CAP_SPACE_32;
-    .whatsapp-dynamic-url-selection-heading {
-      margin-bottom: $CAP_SPACE_08;
-    }
-  }
-
   .whatsapp-render-heading {
     margin-top: $CAP_SPACE_16;
     margin-bottom: $CAP_SPACE_06;

package/v2Containers/Whatsapp/messages.js

@@ -138,22 +138,6 @@ export default defineMessages({
     id: `${prefix}.mediaCarousel`,
     defaultMessage: 'Carousel',
   },
-  imageSourceUpload: {
-    id: `${prefix}.imageSourceUpload`,
-    defaultMessage: 'Upload image',
-  },
-  imageSourceUrl: {
-    id: `${prefix}.imageSourceUrl`,
-    defaultMessage: 'Dynamic image',
-  },
-  imageSourceUrlTooltip: {
-    id: `${prefix}.imageSourceUrlTooltip`,
-    defaultMessage: 'Post template approval, the image placeholder is replaceable with image URL',
-  },
-  imageUrlInputPlaceholder: {
-    id: `${prefix}.imageUrlInputPlaceholder`,
-    defaultMessage: 'Enter image URL',
-  },
   disabledFeatureTooltip: {
     id: `${prefix}.disabledFeatureTooltip`,
     defaultMessage: 'Not yet enabled. Coming soon!',