@capillarytech/creatives-library 8.0.343 → 8.0.345-0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.343",
+  "version": "8.0.345-0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CommonTestAndPreview/UnifiedPreview/WhatsAppPreviewContent.js

@@ -214,11 +214,19 @@ const WhatsAppPreviewContent = ({
 
         {/* Image Preview */}
         {content?.whatsappImageSrc && (
-          <CapImage
-            src={content.whatsappImageSrc}
-            className="whatsapp-image"
-            alt={formatMessage(messages.previewGenerated)}
-          />
+          /\{\{.*?\}\}/.test(content.whatsappImageSrc) ? (
+            <CapRow className="whatsapp-image-url-placeholder">
+              <CapIcon type="picture" size="s" className="whatsapp-image-url-placeholder-icon" />
+              <span className="whatsapp-image-url-placeholder-text">{content.whatsappImageSrc}</span>
+            </CapRow>
+          ) : (
+            <img
+              src={content.whatsappImageSrc}
+              className="whatsapp-image"
+              alt={formatMessage(messages.previewGenerated)}
+              onError={(e) => { e.target.src = whatsappImageEmptyPreview; }}
+            />
+          )
         )}
 
         {/* Video Preview */}

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -940,6 +940,33 @@
       }
     }
 
+    .whatsapp-image-url-placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: $CAP_SPACE_08;
+      width: 100%;
+      min-height: 5rem;
+      max-height: 8.786rem;
+      margin-bottom: $CAP_SPACE_04;
+      background-color: #f5f5f5;
+      border-radius: 4px;
+      padding: $CAP_SPACE_08;
+
+      .whatsapp-image-url-placeholder-icon {
+        color: #8c8c8c;
+        font-size: 1.5rem;
+      }
+
+      .whatsapp-image-url-placeholder-text {
+        font-size: $FONT_SIZE_S;
+        color: #595959;
+        text-align: center;
+        word-break: break-all;
+      }
+    }
+
     .whatsapp-image {
       width: 100%;
       max-height: 8.786rem;

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -816,6 +816,27 @@
     }
   }
 
+  .whatsapp-image-url-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    width: 100%;
+    min-height: 5rem;
+    max-height: 8.786rem;
+    margin-bottom: 4px;
+    .whatsapp-image-url-placeholder-text {
+      font-size: 11px;
+      color: #666;
+      margin-top: 4px;
+      text-align: center;
+      word-break: break-all;
+      padding: 0 4px;
+    }
+  }
+
   .msg-container-carousel {
     display: flex;
     flex-direction: column;

package/v2Components/TemplatePreview/index.js

@@ -1194,11 +1194,19 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         {content?.showUrlPreview
                           && renderUrlPreview(content?.metaTagsDetails)}
                         {content?.whatsappImageSrc && (
-                          <CapImage
-                            src={content.whatsappImageSrc}
-                            className="whatsapp-image"
-                            alt={formatMessage(messages.previewGenerated)}
-                          />
+                          /\{\{.*?\}\}/.test(content.whatsappImageSrc) ? (
+                            <div className="whatsapp-image-url-placeholder">
+                              <CapIcon type="picture" size="s" className="whatsapp-image-url-placeholder-icon" />
+                              <span className="whatsapp-image-url-placeholder-text">{content.whatsappImageSrc}</span>
+                            </div>
+                          ) : (
+                            <img
+                              src={content.whatsappImageSrc}
+                              className="whatsapp-image"
+                              alt={formatMessage(messages.previewGenerated)}
+                              onError={(e) => { e.target.src = whatsappImageEmptyPreview; }}
+                            />
+                          )
                         )}
                         {content?.whatsappVideoPreviewImg && (
                           <CapTooltip

package/v2Containers/CreativesContainer/index.js

@@ -684,6 +684,8 @@ export class Creatives extends React.Component {
           switch (mediaType) {
             case (WHATSAPP_MEDIA_TYPES.IMAGE):
               mediaParams.imageUrl = url;
+              // Detect isAddImageUrl from previewUrl marker (previewUrl is unused for IMAGE type)
+              mediaParams.isAddImageUrl = previewUrl === '__add_image_url__';
               break;
             case (WHATSAPP_MEDIA_TYPES.VIDEO):
               mediaParams.videoUrl = url;
@@ -1142,6 +1144,7 @@ export class Creatives extends React.Component {
               headerTemplate = '',
             } = {},
             isPreviewUrl = false,
+            isAddImageUrl = false,
             carouselData = [],
           } = cloneDeep(versions.base.content.whatsapp);
 
@@ -1178,6 +1181,11 @@ export class Creatives extends React.Component {
           switch (mediaType) {
             case (WHATSAPP_MEDIA_TYPES.IMAGE):
               whatsappMedia.url = imageUrl;
+              // previewUrl is unused for IMAGE type — reuse it to persist isAddImageUrl flag
+              // without adding any new field that the backend would reject
+              if (isAddImageUrl) {
+                whatsappMedia.previewUrl = '__add_image_url__';
+              }
               break;
             case (WHATSAPP_MEDIA_TYPES.VIDEO):
               whatsappMedia.url = videoUrl;

package/v2Containers/Whatsapp/index.js

@@ -252,12 +252,15 @@ 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('Upload image');
+  const [imageURL, setImageURL] = useState('');
   // TestAndPreviewSlidebox state
   const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
   const [isTestAndPreviewMode, setIsTestAndPreviewMode] = useState(false);
@@ -364,6 +367,7 @@ export const Whatsapp = (props) => {
         whatsappMedia: { header = '', footer = '', headerVarMapped = [] } = {},
         isPreviewUrl = false,
         carouselData : editCarouselData = [],
+        isAddImageUrl = false,
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -378,6 +382,14 @@ export const Whatsapp = (props) => {
       });
       setWhatsappDocSource(documentUrl);
       setWhatsappDocParams(whatsappDocParams);
+      if (mediaType === WHATSAPP_MEDIA_TYPES.IMAGE) {
+        if (isAddImageUrl) {
+          setMediaTypeSelection('Add image URL');
+          setImageURL(imageUrl);
+        } else {
+          setMediaTypeSelection('Upload image');
+        }
+      }
       if (host === HOST_HAPTIC) {
         updateAssetList(transformToVendorFormat({
           ...assetList,
@@ -800,6 +812,14 @@ 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);
+  };
+
   //setting the id of currently selected text area, is used onTagSelect
   const setTextAreaId = ({ target: { id } }, type, carouselIndex) => {
     if (type === HEADER_TEXT) {
@@ -1151,6 +1171,9 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 				);
 			} else {
 				setWhatsappImageSrc(filePath);
+				if (mediaTypeSelection !== 'Add image URL') {
+					setMediaTypeSelection('Upload image');
+				}
 				if (isHaptic) {
 					setHapticFileHandle(fileHandle);
 				} else {
@@ -1159,7 +1182,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 			}
       actions.clearWhatsappAsset(0);
     },
-    [whatsappImageSrc, isMediaTypeCarousel, activeIndex, carouselData, isHaptic],
+    [whatsappImageSrc, isMediaTypeCarousel, activeIndex, carouselData, isHaptic, mediaTypeSelection],
   );
 
   const updateOnWhatsappImageReUpload = useCallback(() => {
@@ -1626,8 +1649,10 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     const { whatsappVideoSrc = '', whatsappVideoPreviewImg = '' } = whatsappVideoSrcAndPreview;
     switch (templateMediaType) {
       case WHATSAPP_MEDIA_TYPES.IMAGE:
+        const isImageUrlMode = mediaTypeSelection === 'Add image URL';
         mediaParams = {
           imageUrl: getCdnUrl({ url: whatsappImageSrc, channelName: WHATSAPP }),
+          ...(isImageUrlMode && { isAddImageUrl: true }),
         };
         break;
       case WHATSAPP_MEDIA_TYPES.VIDEO:
@@ -1646,7 +1671,6 @@ 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) {
@@ -1758,7 +1782,22 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       type: WHATSAPP,
     });
   };
-  const isMediatypeValid =()=> ((isMediaTypeImage && whatsappImageSrc === "") || (isMediaTypeVideo && whatsappVideoSrcAndPreview?.whatsappVideoSrc === "") || (isMediaTypeDoc && whatsappDocSource === ""));
+  const isMediatypeValid =()=> {
+    if (isMediaTypeImage) {
+      // In Add image URL mode: creation needs a demo upload; edit flow shows stored URL
+      if (mediaTypeSelection === 'Add image URL') {
+        return isEditFlow ? imageURL === "" : whatsappImageSrc === "";
+      }
+      return whatsappImageSrc === "";
+    }
+    if (isMediaTypeVideo) {
+      return whatsappVideoSrcAndPreview?.whatsappVideoSrc === "";
+    }
+    if (isMediaTypeDoc) {
+      return whatsappDocSource === "";
+    }
+    return false;
+  };
 
   const isDisableDone = () => {
     // Snapshot removed
@@ -1835,9 +1874,106 @@ 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="Enter image URL"
+          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 === 'Upload image') {
+      setImageURL('');
+    } else if (e.target.value === 'Add image URL') {
+      setWhatsappImageSrc('');
+      if (isHaptic) {
+        setHapticFileHandle('');
+      } else {
+        setKarixFileHandle('');
+      }
+    }
+  };
+
   const renderMediaComponent = () => (
     <>
-      {isMediaTypeImage && renderImageComponent()}
+      {isMediaTypeImage && (
+        <CapRow className="whatsapp-dynamic-url-selection-container">
+          <CapHeading type="h4" className="whatsapp-dynamic-url-selection-heading">
+            {formatMessage(messages.mediaImage)}
+          </CapHeading>
+          <CapRadioGroup
+            options={[
+              {
+                value: 'Upload image',
+                label: 'Upload image',
+              },
+              {
+                value: 'Add image URL',
+                label: (
+                  <span>
+                    Add image URL{' '}
+                    <CapTooltip
+                      placement="top"
+                      title="You can upload a placeholder image and change it after approval. The link can include a personalized image URL."
+                    >
+                      <CapIcon type="info-circle" size="s" style={{ cursor: 'pointer' }} />
+                    </CapTooltip>
+                  </span>
+                ),
+              },
+            ]}
+            value={mediaTypeSelection}
+            onChange={handleMediaChange}
+            className="whatsapp-media-radio"
+            disabled={templateStatus === WHATSAPP_STATUSES.approved || isEditFlow}
+          />
+        </CapRow>
+      )}
+      {isMediaTypeImage && (mediaTypeSelection === 'Upload image' || !isEditFlow) && renderImageComponent()}
+      {isMediaTypeImage && mediaTypeSelection === 'Add image URL' && isEditFlow && renderImageURLComponent()}
       {isMediaTypeVideo && renderVideoComonent()}
       {isMediaTypeDoc && renderDocumentComponent()}
     </>

package/v2Containers/Whatsapp/index.scss

@@ -9,6 +9,14 @@
     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;