@capillarytech/creatives-library 8.0.123 → 8.0.125-alpha.0

package/v2Components/CapDeviceContent/index.js

@@ -327,6 +327,7 @@ const CapDeviceContent = (props) => {
           options={BUTTON_RADIO_OPTIONS}
           value={buttonType}
           onChange={onChangeButtonType}
+          disabled={!isAndroid}
           className="inapp-btn-radio-group"
         />
         {isBtnTypeCta && (

package/v2Components/CapImageUpload/index.js

@@ -22,7 +22,9 @@ import { isEmpty, get } from 'lodash';
 import './index.scss';
 import Gallery from '../../v2Containers/Assets/Gallery';
 import { MAX_SUPPORTED_IMAGE_SIZE } from './constants';
-import { FACEBOOK, INAPP, RCS, WHATSAPP, VIBER } from "../../v2Containers/CreativesContainer/constants";
+import {
+  FACEBOOK, INAPP, RCS, WHATSAPP, VIBER,
+} from "../../v2Containers/CreativesContainer/constants";
 
 import messages from './messages';
 function CapImageUpload(props) {
@@ -48,14 +50,14 @@ function CapImageUpload(props) {
   } = props;
   const {
     formatMessage,
-    } = intl || {};
+  } = intl || {};
 
 
   useEffect(() => {
     const imageDataObj = imageData[`uploadedAssetData${index}`];
     if (!isEmpty(imageDataObj)) {
-      const { secure_file_path = '', karixFileHandle = '' } = get(imageDataObj, 'metaInfo', {});
-      updateImageSrc(secure_file_path, karixFileHandle);
+      const { secure_file_path = '' } = get(imageDataObj, 'metaInfo', {});
+      updateImageSrc(secure_file_path);
     }
   }, [imageData[`uploadedAssetData${index}`]]);
 
@@ -65,7 +67,7 @@ function CapImageUpload(props) {
   const {CapHeadingSpan} = CapHeading;
   const ImageComponent = useCallback(
     () => (
-        <>
+      <>
         {
           !isEmpty(imageSrc) ? (
             <div className={`image-container upload ${props.ifError ? 'error' : ''}`}>
@@ -74,10 +76,10 @@ function CapImageUpload(props) {
               )}
             </div>
           ) : null}
-        </>
-      ),
-      [imageSrc],
-    );
+      </>
+    ),
+    [imageSrc],
+  );
 
   const WithLabel = LabelHOC(ImageComponent);
 
@@ -147,10 +149,13 @@ function CapImageUpload(props) {
   const onReUpload = useCallback(() => {
     updateImageSrc('');
     updateOnReUpload();
+    // Don't automatically trigger file dialog - let user choose between computer and gallery
   }, []);
 
   const onGalleryImageSelect = useCallback((imageTemplate) => {
-    const {secure_file_path: image, width, height, file_size: size} = get(imageTemplate, 'metaInfo', {});
+    const {
+      secure_file_path: image, width, height, file_size: size,
+    } = get(imageTemplate, 'metaInfo', {});
     updateDrawerRequirement(false);
     if (!allowedExtensionsRegex.test(image) || height > imgHeight || width > imgWidth || size > imgSize ) {
       updateImageErrorMessage(formatMessage(messages.imageErrorDesc));
@@ -176,7 +181,7 @@ function CapImageUpload(props) {
           isFullMode={isFullMode}
           isLineAsset
           onGalleryImageSelect={onGalleryImageSelect}
-          />
+        />
       </>
     );
   }, []);
@@ -194,34 +199,35 @@ function CapImageUpload(props) {
 
   const getImageSection = useCallback(() => {
     if (imageSrc === "") {
-      return (<>
-        <CapUploader.CapDragger
-          customRequest={capUploaderCustomRequest}
-          className="form-builder-dragger grey-background"
-          showUploadList={!isImageError}
-        >
-          <CapHeading className="dragger-title" type="h7">
-            <FormattedMessage {...messages.dragAndDrop} />
-          </CapHeading>
-          <CapHeading className="dragger-or" type="label6">
-            <FormattedMessage {...messages.or} />
-          </CapHeading>
-          <CapButton className="dragger-button upload-image" type="secondary">
-            <FormattedMessage {...messages.uploadComputer} />
-          </CapButton>
-          {channel !== WHATSAPP && (
-            <CapButton
-              className="dragger-button gallery-select"
-              type="secondary"
-              onClick={onGalleryClick}
-            >
-              <FormattedMessage {...messages.uploadGallery} />
+      return (
+        <>
+          <CapUploader.CapDragger
+            customRequest={capUploaderCustomRequest}
+            className="form-builder-dragger grey-background"
+            showUploadList={!isImageError}
+          >
+            <CapHeading className="dragger-title" type="h7">
+              <FormattedMessage {...messages.dragAndDrop} />
+            </CapHeading>
+            <CapHeading className="dragger-or" type="label6">
+              <FormattedMessage {...messages.or} />
+            </CapHeading>
+            <CapButton className="dragger-button upload-image" type="secondary">
+              <FormattedMessage {...messages.uploadComputer} />
             </CapButton>
-          )}
-        </CapUploader.CapDragger>
-        <CapError type="error" className="upload-image-error">
-          {isImageError}
-        </CapError>
+            {channel !== WHATSAPP && (
+              <CapButton
+                className="dragger-button gallery-select"
+                type="secondary"
+                onClick={onGalleryClick}
+              >
+                <FormattedMessage {...messages.uploadGallery} />
+              </CapButton>
+            )}
+          </CapUploader.CapDragger>
+          <CapError type="error" className="upload-image-error">
+            {isImageError}
+          </CapError>
         </>
       );
     }
@@ -242,26 +248,26 @@ function CapImageUpload(props) {
   return (
     <div style={style} className="cap-custom-image-upload">
       <WithLabel
-        key={`with-label`}
+        key="with-label"
         ifError={!!isImageError}
 
-    />
-      <form encType="multipart/form-data" id={`form`} className={className}>
+      />
+      <form encType="multipart/form-data" id="form" className={className}>
         <input
-          key={`imgFile`}
+          key="imgFile"
           style={{ display: 'none' }}
-          id="fileName"
+          id="imageFileName"
           type="file"
           onChange={(e) => uploadImages(e, { files: e.target.files })}
           accept={supportedExtensions || "image/*"}
-      />
+        />
         {getImageSection()}
         <CapDrawer
           content={getGalleryDrawerContent()}
           visible={isDrawerRequired}
           width={430}
           onClose={() => updateDrawerRequirement(false)}
-      />
+        />
       </form>
       <div className="image-info-wrapper">
         {channel === WHATSAPP && (

package/v2Components/CapInAppCTA/index.js

@@ -38,6 +38,7 @@ export const CapInAppCTA = (props) => {
     deleteHandler,
     isEditFlow,
     deepLink,
+    channel,
   } = props;
   const { formatMessage } = intl;
 

package/v2Components/CapMpushCTA/constants.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+
+export const DEEP_LINK = 'DEEP_LINK';
+export const EXTERNAL_URL = 'EXTERNAL_URL';
+export const WEBSITE = 'WEBSITE';
+
+export const CTA_OPTIONS = [
+  {
+    key: DEEP_LINK,
+    value: DEEP_LINK,
+    label: <FormattedMessage {...messages.ctaLinkTypeDeep} />,
+    tooltipLabel: <FormattedMessage {...messages.ctaOptionDisabledTooltipDeepLink} />,
+  },
+  {
+    key: EXTERNAL_URL,
+    value: EXTERNAL_URL,
+    label: <FormattedMessage {...messages.ctaLinkTypeExternal} />,
+    tooltipLabel: <FormattedMessage {...messages.ctaOptionDisabledTooltipExternalLink} />,
+  },
+];
+
+export const BTN_MAX_LENGTH = 20;
+export const URL_MAX_LENGTH = 2000;

package/v2Components/CapMpushCTA/index.js

@@ -0,0 +1,332 @@
+import React, { useState, useEffect, useRef } from "react";
+import { injectIntl } from "react-intl";
+import "react-phone-input-2/lib/style.css";
+import cloneDeep from "lodash/cloneDeep";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
+import CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapTooltip from "@capillarytech/cap-ui-library/CapTooltip";
+import CapSelect from "@capillarytech/cap-ui-library/CapSelect";
+import CapTag from '@capillarytech/cap-ui-library/CapTag';
+import globalMessages from "../../v2Containers/Cap/messages";
+import inAppMsg from "../../v2Containers/InApp/messages";
+import messages from "./messages";
+import './index.scss';
+import {
+    isUrl,
+    isValidText,
+} from "../../v2Containers/Line/Container/Wrapper/utils";
+import {
+    BTN_MAX_LENGTH,
+    DEEP_LINK,
+    EXTERNAL_URL,
+    CTA_OPTIONS,
+    URL_MAX_LENGTH,
+} from "./constants";
+import { PRIMARY } from "../../v2Containers/MobilePushNew/constants";
+
+export const CapMpushCTA = (props) => {
+    const {
+        intl,
+        ctaData = [],
+        updateHandler,
+        deleteHandler,
+        deepLink,
+        buttonType,
+    } = props;
+    const { formatMessage } = intl;
+
+    const [urlError, setUrlError] = useState(false);
+    const [buttonError, setButtonError] = useState(false);
+    const [ctaDeepLinkValue, setCtaDeepLinkValue] = useState(ctaData[0]?.url || "");
+    const [localUrlValues, setLocalUrlValues] = useState({});
+    // Track which URLs have been manually cleared to prevent restoration
+    const clearedUrlsRef = useRef(new Set());
+    const selectedDeepLink = deepLink?.find(link => link?.value === ctaData[0]?.url);
+
+    useEffect(() => {
+        const urlValues = {};
+        ctaData.forEach((cta) => {
+            if (cta && typeof cta.index !== 'undefined') {
+                // Don't restore URLs that have been manually cleared
+                const wasManuallyCleared = clearedUrlsRef.current.has(cta.index);
+                urlValues[cta.index] = wasManuallyCleared ? '' : (cta.url || '');
+                
+
+            }
+        });
+        setLocalUrlValues(urlValues);
+    }, [ctaData]);
+
+    const updateHelper = (type, value, index) => {
+        let clonedCta = cloneDeep(ctaData[index]);
+        clonedCta = {
+            ...clonedCta,
+            [type]: value,
+        };
+        
+        if (type === 'url') {
+            setLocalUrlValues(prev => ({
+                ...prev,
+                [index]: value
+            }));
+        }
+        
+        updateHandler(clonedCta, index);
+    };
+
+    const renderLength = (len, max) => (
+        <CapHeading
+            type="label1"
+            className="inapp-render-btn-length"
+        >
+            {formatMessage(inAppMsg.templateMessageLength, {
+                currentLength: len,
+                maxLength: max,
+            })}
+        </CapHeading>
+    );
+
+
+    const onButtonTextChange = ({ target }) => {
+        const { value, id } = target;
+        let errorMessage = "";
+        if (!isValidText(value)) {
+            errorMessage = formatMessage(messages.ctaButtonErrorMessage);
+        }
+        setButtonError(errorMessage);
+        updateHelper("text", value, id);
+    };
+
+    const onUrlTypeChange = (value, index) => {
+        // Mark this URL as manually cleared to prevent restoration
+        clearedUrlsRef.current.add(index);
+        
+        // Clear the URL field when switching between link types
+        updateHelper('url', '', index);
+        
+        // Immediately clear the local URL state for this button
+        setLocalUrlValues(prev => ({
+            ...prev,
+            [index]: ''
+        }));
+        
+        // Also clear the local deep link state
+        setCtaDeepLinkValue('');
+        // Clear any URL errors
+        setUrlError(false);
+        // Update the URL type
+        updateHelper('urlType', value, index);
+    };
+
+    const onUrlChange = ({ target }) => {
+        const { value, dataset } = target;
+        const index = parseInt(dataset.index, 10);
+        
+        // If user is typing a new URL, remove from cleared set
+        if (value && value.trim() !== '') {
+            clearedUrlsRef.current.delete(index);
+        }
+        
+        let errorMessage = false;
+        if (!isUrl(value)) {
+            errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
+        }
+        setUrlError(errorMessage);
+        
+        // Update local state immediately for instant UI feedback
+        setLocalUrlValues(prev => ({
+            ...prev,
+            [index]: value
+        }));
+        
+        updateHelper('url', value, index);
+    };
+
+    const onDeepLinkSelect = (value, index) => {
+        setCtaDeepLinkValue(value);
+        let errorMessage = false;
+        if (!isUrl(value)) {
+            errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
+        }
+        setUrlError(errorMessage);
+        updateHelper('url', value, index);
+    };
+
+    const ctaSaveDisabled = (index) => {
+        const { urlType, text, url } = ctaData[index] || {};
+        if (text === "" || buttonError) {
+            return true;
+        } else if (urlType === DEEP_LINK && (ctaDeepLinkValue === "" || urlError)) {
+            return true;
+        } else if (urlType === EXTERNAL_URL && (url === "" || urlError)) {
+            return true;
+        }
+    };
+
+    const isSavedCta = (index, saved) => {
+        updateHelper("isSaved", saved, index);
+    };
+
+    const renderedContent = () => {
+        const renderArray = [];
+        const filteredCtaData = ctaData?.filter((cta) => {
+            if (buttonType === PRIMARY) {
+                return cta.index === 0;
+            } else {
+                return cta.index === 1;
+            }
+        });
+        
+        filteredCtaData?.forEach((cta) => {
+            const { index, text, url, urlType, isSaved } = cta || {};
+            if (isSaved) {
+                renderArray.push(
+                    <CapRow
+                        className="cap-inapp-saved-cta"
+                        align="middle"
+                        type="flex"
+                    >
+                        <CapRow className="inapp-cta-row">
+                            <CapColumn>
+                                <CapIcon size="s" type={'launch'} className="btn-icon" />
+                            </CapColumn>
+                            <CapColumn className="btn-text">
+                                <CapLabel type="label2" className="inapp-saved-cta-button-text">
+                                    {text}
+                                </CapLabel>
+                            </CapColumn>
+                        </CapRow>
+                        <CapColumn >
+                            {urlType === DEEP_LINK ?
+                                <CapTag className="cta-type-label">{formatMessage(messages.urlDeepLink)}</CapTag>
+                                : <CapTag className="cta-type-label">{formatMessage(messages.urlExternalLink)}</CapTag>}
+                        </CapColumn>
+                        <CapColumn>
+                            {urlType === DEEP_LINK ? selectedDeepLink?.label : ''}
+                        </CapColumn>
+                        {(
+                            <CapRow className="cta-action-grp">
+                                <CapColumn
+                                    className="inapp-saved-cta-edit-icon"
+                                    onClick={() => isSavedCta(index, false)}
+                                >
+                                    <CapIcon size="s" type="edit" className="cta-action" />
+                                </CapColumn>
+                                <CapColumn onClick={() => deleteHandler(index)} className="cta-del-icon">
+                                    <CapIcon size="s" type="delete" className="cta-action" ariaLabel="delete-cta-icon" />
+                                </CapColumn>
+                            </CapRow>
+                        )}
+                    </CapRow>
+                );
+            } else {
+                renderArray.push(
+                    <CapRow
+                        className="cap-inapp-cta"
+                        id={`cap-inapp-cta-${index}`}
+                    >
+                        <CapColumn>
+                            <CapHeading type="h4" className="cta-label">
+                                {buttonType === PRIMARY ? formatMessage(messages.ctaButtonText) : formatMessage(messages.ctaButtonTextSecondary)}
+                            </CapHeading>
+                            <CapInput
+                                id={index}
+                                onChange={onButtonTextChange}
+                                placeholder={formatMessage(messages.ctaButtonTextPlaceholder)}
+                                value={text}
+                                maxLength={BTN_MAX_LENGTH}
+                                errorMessage={buttonError}
+                            />
+                            {renderLength(text.length, BTN_MAX_LENGTH)}
+                        </CapColumn>
+                        <CapColumn className="inapp-cta-buttons">
+                            <CapRow style={{ width: '30%', marginRight: '10px' }}>
+                                <CapHeading type="h4" className="cta-label">
+                                    {formatMessage(messages.ctaType)}
+                                </CapHeading>
+                                <CapSelect.CapCustomSelect
+                                    id="inapp-cta-type"
+                                    key="mpush-cta-type"
+                                    options={CTA_OPTIONS || []}
+                                    onChange={(value) => onUrlTypeChange(value, index)}
+                                    value={urlType}
+                                />
+                            </CapRow>
+                            {urlType === DEEP_LINK && (
+                                <CapRow style={{ width: '70%' }}>
+                                    <CapHeading type="h4">
+                                        {formatMessage(messages.urlDeepLink)}
+                                    </CapHeading>
+                                    <CapSelect.CapCustomSelect
+                                        id="inapp-deep-link-type"
+                                        key="mpush-deep-link-type"
+                                        placeholder={formatMessage(messages.ctaDeepLinkOptionsPlaceholder)}
+                                        options={deepLink || []}
+                                        onChange={(value) => onDeepLinkSelect(value, index)}
+                                        value={ctaDeepLinkValue}
+                                    />
+                                </CapRow>
+
+                            )}
+                            {urlType === EXTERNAL_URL && (
+                                <CapRow style={{ width: '70%' }}>
+                                    <CapHeading type="h4">
+                                        {formatMessage(messages.urlExternalLink)}
+                                    </CapHeading>
+                                    <CapInput
+                                        id="inapp-cta-external-link"
+                                        className="inapp-cta-external-link"
+                                        onChange={onUrlChange}
+                                        placeholder={formatMessage(messages.ctaExternalLinkPlaceholder)}
+                                        value={localUrlValues[index] || ''}
+                                        size="large"
+                                        maxLength={URL_MAX_LENGTH}
+                                        errorMessage={urlError}
+                                        data-index={index}
+                                    />
+                                </CapRow>
+                            )}
+                        </CapColumn>
+                        <CapRow className="inapp-cta-save-delete-btn">
+                            <CapTooltip
+                                title={
+                                    ctaSaveDisabled(index)
+                                        ? formatMessage(messages.ctaSaveDisabled)
+                                        : ""
+                                }
+                                placement={"bottom"}
+                            >
+                                <div className="button-disabled-tooltip-wrapper">
+                                    <CapButton
+                                        onClick={() => isSavedCta(index, true)}
+                                        disabled={ctaSaveDisabled(index)}
+                                        className="inapp-cta-save-btn"
+                                    >
+                                        {formatMessage(globalMessages.save)}
+                                    </CapButton>
+                                </div>
+                            </CapTooltip>
+                            <CapButton
+                                onClick={() => deleteHandler(index)}
+                                className="inapp-cta-delete-btn"
+                                type="secondary"
+                            >
+                                {formatMessage(globalMessages.delete)}
+                            </CapButton>
+                        </CapRow>
+                    </CapRow>
+                );
+            }
+        });
+        return renderArray;
+    };
+
+    return renderedContent();
+};
+
+export default injectIntl(CapMpushCTA);

package/v2Components/CapMpushCTA/index.scss

@@ -0,0 +1,95 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.cap-inapp-cta {
+    margin-top: $CAP_SPACE_16;
+    margin-left: 1.6rem;
+    padding: $CAP_SPACE_16 $CAP_SPACE_24;
+    border: 1px solid $CAP_G06;
+    border-radius: $CAP_SPACE_04;
+
+    .inapp-cta-buttons {
+        margin-top: $CAP_SPACE_12;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        justify-content: space-between;
+
+        .inapp-render-btn-length {
+            margin-top: $CAP_SPACE_12;
+            width: 90%;
+            margin-left: 52%;
+            margin-bottom: $CAP_SPACE_12;
+        }
+    }
+
+    #inapp-deep-link-type {
+        width: 100%;
+        margin-top: $CAP_SPACE_12;
+    }
+
+    .inapp-cta-external-link {
+        margin-top: $CAP_SPACE_12;
+    }
+
+    .inapp-cta-save-delete-btn {
+        margin-top: $CAP_SPACE_16;
+
+        .inapp-cta-save-btn {
+            margin-right: $CAP_SPACE_04;
+        }
+        .inapp-cta-delete-btn {
+            margin-left: $CAP_SPACE_04;
+        }
+    }
+    
+}
+
+.cap-inapp-saved-cta {
+    border: solid 1px $CAP_G06;
+    margin-left: $CAP_SPACE_20;
+    display: flex;
+    justify-content: space-between;
+    padding: $CAP_SPACE_08 $CAP_SPACE_12;
+    border-radius: $CAP_SPACE_04;
+    margin-top: $CAP_SPACE_12;
+    height: $CAP_SPACE_40;
+
+    .inapp-saved-cta-button-text {
+        font-weight: 500;
+        padding-left: $CAP_SPACE_16;
+    }
+
+    .inapp-saved-cta-edit-icon {
+        margin-left: 4.286rem;
+    }
+}
+.cta-label {
+    margin-bottom: $CAP_SPACE_08;
+}
+.cta-type-label {
+    border-radius: 1rem;
+    background-color: $CAP_G08;
+    width: $CAP_SPACE_80;
+    height: $CAP_SPACE_24 !important;
+    align-items: center;
+    justify-content: center;
+}
+.cta-action {
+    cursor: pointer;
+}
+.inapp-cta-row {
+    display: flex;
+    align-items: center;
+}
+.cta-action-grp {
+    display: flex;
+}
+.cta-del-icon {
+    padding-left: 1rem;
+}
+.btn-text {
+    margin-left: $CAP_SPACE_08;
+}
+.btn-icon {
+    color: $CAP_G06;
+}