@capillarytech/creatives-library 8.0.126 → 8.0.127-alpha.0

package/v2Components/TemplatePreview/index.js

@@ -32,6 +32,7 @@ import {
   RCS,
   ZALO,
   INAPP,
+  MOBILE_PUSH
 } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
 import { VIBER, FACEBOOK } from '../../v2Containers/App/constants';
@@ -66,8 +67,8 @@ const viberMobileAndroid = require('./assets/images/viberMobile.svg');
 const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
 const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
 const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
-const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
-const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
+const androidPushMessagePhone = require('./assets/images/Android _ With date and time.svg');
+const iPhonePushMessagePhone = require('./assets/images/iOS _ With date and time.svg');
 
 export class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -167,6 +168,53 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     this.props.onTestContentClicked(params);
   };
 
+  renderMobilePushCarousel = (content) => {
+    if (!content?.carouselData || content.carouselData.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className="msg-container-carousel mobile-push-carousel-container">
+        <div className="scroll-container mobile-push-scroll-container">
+          {content.carouselData.map((item, idx) => (
+            <div
+              key={`carousel-card-${idx}`}
+              className="mobile-push-carousel-card message-pop align-left message-pop-carousel"
+            >
+              {item.mediaType === "image" && item.imageUrl && (
+                <CapImage
+                  src={item.imageUrl}
+                  alt="carousel-img"
+                  className="carousel-image"
+                />
+              )}
+              {item.mediaType === "video" && item.videoPreviewImg && (
+                <div className="video-preview">
+                  <CapImage
+                    src={item.videoPreviewImg}
+                    alt="carousel-video-preview"
+                    className="carousel-video-preview"
+                  />
+                  <div className="icon-position">
+                    <CapImage className="video-icon" src={videoPlay} />
+                  </div>
+                </div>
+              )}
+              <div className="carousel-content">
+                <div className="carousel-title">
+                  {item.title || item.header || ""}
+                </div>
+                <div className="carousel-message">
+                  {item.message || item.bodyText || ""}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
   render() {
     const {
       channel,
@@ -213,7 +261,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
     let iosActions = [];
     if ((channel || '').toLowerCase() === "mobilepush") {
-      iosActions = _.map(content.actions, (action) => {
+      iosActions = _.map(content.actions || [], (action) => {
         if (action.label) {
           return (<div className="actions" key={`action-${action.label}`}>
               <span className="action">{action.label.toUpperCase()}</span>
@@ -410,31 +458,32 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       handlePreviewInNewTab(templatePreviewUrl);
     };
 
-    const getPreviewImage = () => {
-      if (this.props.device === ANDROID) {
-        switch (templateLayoutType) {
-          case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
-            return inAppMobileAndroidModal;
-          case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
-            return inAppMobileAndroidTop;
-          case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
-            return inAppMobileAndroidBottom;
-          default:
-            return inAppMobileAndroidFull;
-        }
-      } else {
-        switch (templateLayoutType) {
-          case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
-            return inAppMobileIOSModal;
-          case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
-            return inAppMobileIOSTop;
-          case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
-            return inAppMobileIOSBottom;
-          default:
-            return inAppMobileIOSFull;
-        }
+    const   getPreviewImage = () => {
+    if (this.props.device === ANDROID) {
+      switch (templateLayoutType) {
+        case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
+          return inAppMobileAndroidModal;
+        case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
+          return inAppMobileAndroidTop;
+        case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
+          return inAppMobileAndroidBottom;
+        default:
+          return inAppMobileAndroidFull;
       }
-    };
+    } else {
+      switch (templateLayoutType) {
+        case INAPP_MESSAGE_LAYOUT_TYPES.MODAL:
+          return inAppMobileIOSModal;
+        case INAPP_MESSAGE_LAYOUT_TYPES.TOPBANNER:
+          return inAppMobileIOSTop;
+        case INAPP_MESSAGE_LAYOUT_TYPES.BOTTOMBANNER:
+          return inAppMobileIOSBottom;
+        default:
+          return inAppMobileIOSFull;
+      }
+    }
+  };
+
     const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
     const whatsappUpdatedLen = whatsappContentLen !== undefined ? whatsappContentLen : content?.charCount;
     return (
@@ -606,7 +655,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             ) : (
               ""
             )}
-            {channel && channel.toLowerCase() === "mobilepush" && (
+            {channel && channel.toUpperCase() === MOBILE_PUSH && (
               <div className="shell-v2 align-center" id="mobilepush-preview">
                 <CapImage
                   className="preview-image"
@@ -619,7 +668,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 />
                 {(!!content.header ||
                   !!content.bodyText ||
-                  !!content.bodyImage) && (
+                  !!content.bodyImage || !!content.bodyVideo?.videoSrc || !!content.bodyGif) && (
                   <div
                     className={`${
                       this.props.device === "ios" ? "iphone" : this.props.device
@@ -627,22 +676,54 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   >
                     {this.props.device === "android" ? (
                       <div className="message-pop align-left">
-                        <div className="app-name">
-                          <span className="app-icon"></span>{" "}
-                          {content.appName ? content.appName : "App name"}
+                        <div className="app-header">
+                          <div className="app-header-left">
+                          <span className="app-icon">{""}</span>
+                          <div className="title">{content.header}</div>
+                          </div>
+                          <div className="app-header-right">
+                            <span>2:29 PM</span>
+                            <CapIcon type="chevron-down" size="sm" />
+                          </div>
                         </div>
-                        <div className="title">{content.header}</div>
                         <div className="body-text">{content.bodyText}</div>
-                        {content.bodyImage && (
+                        {(content.bodyImage || content?.bodyVideo?.videoSrc || content.bodyGif) && (
                           <div className="body-image">
-                            <CapImage src={content.bodyImage} alt="" />
+                            {(() => {
+                              if (content?.bodyVideo?.videoSrc && !content.bodyImage && !content.bodyGif) {
+                                return (
+                                  <video 
+                                    key={`android-video-${content.bodyVideo.videoSrc}`}
+                                    controls 
+                                    style={{ maxWidth: '100%', maxHeight: '120px' }}
+                                    poster={content?.bodyVideo?.videoPreview || undefined}
+                                  >
+                                    <source src={content.bodyVideo.videoSrc} type="video/mp4" />
+                                    {formatMessage(messages.videoNotSupported)}
+                                  </video>
+                                );
+                              } else if (content.bodyGif) {
+                                return (
+                                  <img 
+                                    src={content.bodyGif} 
+                                    alt="GIF preview" 
+                                    style={{ maxWidth: '100%', maxHeight: '120px' }}
+                                    key={`android-gif-${content.bodyGif}`}
+                                  />
+                                );
+                              } else {
+                                return (
+                                  <CapImage src={content.bodyImage || content?.bodyVideo?.videoPreview} alt="" />
+                                );
+                              }
+                            })()}
                           </div>
                         )}
-                        {content.actions.filter((action) => action.label)
+                        {(content.actions || []).filter((action) => action.label)
                           .length ? (
                             <div className="actions">
                               {_.map(
-                                content.actions,
+                                content.actions || [],
                               (action) =>
                                 !!action.label && (
                                   <span
@@ -657,26 +738,73 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                           ) : (
                             ""
                           )}
+                        {channel && channel.toLowerCase() === "mobilepush" && this.renderMobilePushCarousel(content)}
                       </div>
                     ) : (
                       <div className="message-pop align-left">
-                        <div className="app-name">
-                          <span className="app-icon"></span>
-                          {content.appName ? content.appName : "App name"}{" "}
-                          <i className="material-icons">
-                            {this.props.intl.formatMessage(messages.close)}
-                          </i>
+                        <div className="app-header">
+                          <div className="app-header-left">
+                          <span className="app-icon">{""}</span>
+                          <div className="title">{content.header}</div>
+                          </div>
+                          <div className="app-header-right">
+                            <span>2:29 PM</span>
+                            <CapIcon type="chevron-down" size="sm" />
+                          </div>
                         </div>
-                        {content.bodyImage && (
+                        <div className="body-text">{content.bodyText}</div>
+                        {(content.bodyImage || content?.bodyVideo?.videoSrc || content.bodyGif) && (
                           <div className="body-image">
-                            <CapImage src={content.bodyImage} alt="" />
+                            {(() => {
+                              if (content?.bodyVideo?.videoSrc && !content.bodyImage && !content.bodyGif) {
+                                return (
+                                  <video 
+                                    key={`ios-video-${content.bodyVideo.videoSrc}`}
+                                    controls 
+                                    style={{ maxWidth: '100%', maxHeight: '120px' }}
+                                    poster={content?.bodyVideo?.videoPreview || undefined}
+                                  >
+                                    <source src={content.bodyVideo.videoSrc} type="video/mp4" />
+                                    {formatMessage(messages.videoNotSupported)}
+                                  </video>
+                                );
+                              } else if (content.bodyGif) {
+                                return (
+                                  <img 
+                                    src={content.bodyGif} 
+                                    alt="GIF preview" 
+                                    style={{ maxWidth: '100%', maxHeight: '120px' }}
+                                    key={`ios-gif-${content.bodyGif}`}
+                                  />
+                                );
+                              } else {
+                                return (
+                                  <CapImage src={content.bodyImage || content?.bodyVideo?.videoPreview} alt="" />
+                                );
+                              }
+                            })()}
                           </div>
                         )}
-                        <div className="title">{content.header}</div>
-                        <div className="body-text">{content.bodyText}</div>
-                        {content.actions.filter((action) => action.label).length
-                          ? iosActions
-                          : ""}
+                        {(content.actions || []).filter((action) => action.label)
+                          .length ? (
+                            <div className="actions">
+                              {_.map(
+                                content.actions || [],
+                              (action) =>
+                                !!action.label && (
+                                  <span
+                                    className="action"
+                                    key={`action-${action.label}`}
+                                  >
+                                    {action.label && action.label.toUpperCase()}
+                                  </span>
+                                )
+                              )}
+                            </div>
+                          ) : (
+                            ""
+                          )}
+                        {channel && channel.toLowerCase() === "mobilepush" && this.renderMobilePushCarousel(content)}
                       </div>
                     )}
                   </div>

package/v2Components/TemplatePreview/messages.js

@@ -90,4 +90,8 @@ export default defineMessages({
     id: `creatives.componentsV2.TemplatePreview.addToCart`,
     defaultMessage: 'Add to cart',
   },
+  videoNotSupported: {
+    id: 'creatives.componentsV2.TemplatePreview.videoNotSupported',
+    defaultMessage: 'Your browser does not support the video tag.',
+  },
 });

package/v2Components/TestAndPreviewSlidebox/CustomValuesEditor.js

@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapSwitch from '@capillarytech/cap-ui-library/CapSwitch';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import messages from './messages';
+
+const CustomValuesEditor = ({
+  isExtractingTags,
+  isUpdatePreviewDisabled,
+  showJSON,
+  setShowJSON,
+  customValues,
+  handleJSONTextChange,
+  extractedTags,
+  requiredTags,
+  optionalTags,
+  handleCustomValueChange,
+  handleDiscardCustomValues,
+  handleUpdatePreview,
+  isUpdatingPreview,
+  formatMessage,
+}) => {
+  if (isExtractingTags) {
+    return (
+      <CapRow className="loading-container">
+        <CapSpin size="large" />
+        <CapRow className="loading-text">
+          <FormattedMessage {...messages.extractingTags} />
+        </CapRow>
+      </CapRow>
+    );
+  }
+
+  return (
+    <CapRow className="custom-values-editor">
+      {isUpdatePreviewDisabled && (
+        <CapLabel type="label16" className="values-missing-message">
+          <FormattedMessage {...messages.valuesMissing} />
+        </CapLabel>
+      )}
+      <CapRow className="editor-header">
+        <CapRow className="json-toggle">
+          <span className="toggle-label">
+            <FormattedMessage {...messages.showJSON} />
+          </span>
+          <CapSwitch
+            checked={showJSON}
+            onChange={setShowJSON}
+            size="small"
+          />
+        </CapRow>
+      </CapRow>
+      {showJSON ? (
+        <CapRow className="json-editor">
+          <CapRow className="json-editor-container">
+            <CapRow className="line-numbers">
+              {JSON.stringify(customValues, null, 2).split('\n').map((_, index) => (
+                <CapRow key={`line-${index + 1}`} className="line-number">
+                  {index + 1}
+                </CapRow>
+              ))}
+            </CapRow>
+            <textarea
+              className="json-textarea"
+              value={JSON.stringify(customValues, null, 2)}
+              onChange={(e) => handleJSONTextChange(e.target.value)}
+              placeholder={formatMessage(messages.enterValue)}
+              rows={Math.max(10, JSON.stringify(customValues, null, 2).split('\n').length)}
+              spellCheck={false}
+            />
+          </CapRow>
+        </CapRow>
+      ) : (
+        <>
+          {extractedTags?.length > 0 && (
+            <CapRow className="values-table">
+              <CapRow className="table-header">
+                <CapLabel type="label31" className="header-cell">
+                  <FormattedMessage {...messages.personalizationTags} />
+                </CapLabel>
+                <CapLabel type="label31" className="header-cell">
+                  <FormattedMessage {...messages.customValues} />
+                </CapLabel>
+              </CapRow>
+              {requiredTags.map((tag) => (
+                <CapRow key={tag.fullPath} className="value-row">
+                  <CapRow className="tag-name">
+                    {tag.fullPath}
+                    <span className="required-tag-indicator">*</span>
+                  </CapRow>
+                  <CapRow className="tag-input">
+                    <CapInput
+                      type="text"
+                      isRequired
+                      className="tag-input-field"
+                      value={customValues[tag.fullPath] || ''}
+                      onChange={(e) => handleCustomValueChange(tag.fullPath, e.target.value)}
+                      placeholder={formatMessage(messages.enterValue)}
+                      size="small"
+                    />
+                  </CapRow>
+                </CapRow>
+              ))}
+              {optionalTags.map((tag) => (
+                <CapRow key={tag.fullPath} className="value-row">
+                  <CapRow className="tag-name">{tag.fullPath}</CapRow>
+                  <CapRow className="tag-input">
+                    <CapInput
+                      type="text"
+                      className="tag-input-field"
+                      value={customValues[tag.fullPath] || ''}
+                      onChange={(e) => handleCustomValueChange(tag.fullPath, e.target.value)}
+                      placeholder={formatMessage(messages.enterValue)}
+                      size="small"
+                    />
+                  </CapRow>
+                </CapRow>
+              ))}
+            </CapRow>
+          )}
+        </>
+      )}
+      <div className="editor-actions">
+        <CapButton
+          className="discard-button"
+          type="flat"
+          size="small"
+          onClick={handleDiscardCustomValues}
+          icon="close"
+        >
+          <FormattedMessage {...messages.discardCustomValues} />
+        </CapButton>
+        <CapButton
+          type="primary"
+          size="small"
+          onClick={handleUpdatePreview}
+          loading={isUpdatingPreview}
+          disabled={isUpdatePreviewDisabled}
+        >
+          <FormattedMessage {...messages.updatePreview} />
+        </CapButton>
+      </div>
+    </CapRow>
+  );
+};
+
+CustomValuesEditor.propTypes = {
+  isExtractingTags: PropTypes.bool.isRequired,
+  isUpdatePreviewDisabled: PropTypes.bool.isRequired,
+  showJSON: PropTypes.bool.isRequired,
+  setShowJSON: PropTypes.func.isRequired,
+  customValues: PropTypes.object.isRequired,
+  handleJSONTextChange: PropTypes.func.isRequired,
+  extractedTags: PropTypes.array.isRequired,
+  requiredTags: PropTypes.array.isRequired,
+  optionalTags: PropTypes.array.isRequired,
+  handleCustomValueChange: PropTypes.func.isRequired,
+  handleDiscardCustomValues: PropTypes.func.isRequired,
+  handleUpdatePreview: PropTypes.func.isRequired,
+  isUpdatingPreview: PropTypes.bool.isRequired,
+  formatMessage: PropTypes.func.isRequired,
+};
+
+export default CustomValuesEditor;

package/v2Components/TestAndPreviewSlidebox/LeftPanelContent.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapInfoNote from '@capillarytech/cap-ui-library/CapInfoNote';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CustomerSearchSection from '../CustomerSearchSection';
+import messages from './messages';
+
+const LeftPanelContent = ({
+  isExtractingTags,
+  extractedTags,
+  selectedCustomer,
+  handleCustomerSelect,
+  handleSearchCustomer,
+  customers,
+  isSearchingCustomer,
+  handleClearSelection,
+  tagsExtracted,
+  handleExtractTags,
+  renderCustomValuesEditor,
+}) => {
+  if (isExtractingTags) {
+    return (
+      <CapRow className="loading-container">
+        <CapSpin size="large" />
+        <CapRow className="loading-text">
+          <FormattedMessage {...messages.extractingTags} />
+        </CapRow>
+      </CapRow>
+    );
+  }
+  if (extractedTags?.length > 0) {
+    return (
+      <>
+        {/* Customer Search Section */}
+        <CapRow className="panel-section customer-section">
+          <CapHeader size="label1" title={<FormattedMessage {...messages.customerSearchTitle} />} />
+          <CustomerSearchSection
+            selectedCustomer={selectedCustomer}
+            onCustomerSelect={handleCustomerSelect}
+            onSearch={handleSearchCustomer}
+            customers={customers}
+            isSearchingCustomer={isSearchingCustomer}
+            onClearSelection={handleClearSelection}
+          />
+        </CapRow>
+        {/* Tags Section */}
+        {!tagsExtracted && (
+          <CapRow className="panel-section">
+            <CapButton type="flat" className="extract-tags-button" onClick={handleExtractTags}>
+              <CapLabel type="label33">
+                <FormattedMessage {...messages.enterCustomValuesForTags} />
+              </CapLabel>
+            </CapButton>
+          </CapRow>
+        )}
+        {tagsExtracted && renderCustomValuesEditor()}
+      </>
+    );
+  }
+  return (
+    <CapInfoNote
+      className="no-tags-extracted-info-note"
+      noteText={(
+        <CapLabel type="label31">
+          <FormattedMessage {...messages.noTagsExtracted} />
+        </CapLabel>
+      )}
+    />
+  );
+};
+
+LeftPanelContent.propTypes = {
+  isExtractingTags: PropTypes.bool.isRequired,
+  extractedTags: PropTypes.array.isRequired,
+  selectedCustomer: PropTypes.object,
+  handleCustomerSelect: PropTypes.func.isRequired,
+  handleSearchCustomer: PropTypes.func.isRequired,
+  customers: PropTypes.array.isRequired,
+  isSearchingCustomer: PropTypes.bool.isRequired,
+  handleClearSelection: PropTypes.func.isRequired,
+  tagsExtracted: PropTypes.bool.isRequired,
+  handleExtractTags: PropTypes.func.isRequired,
+  renderCustomValuesEditor: PropTypes.func.isRequired,
+};
+
+LeftPanelContent.defaultProps = {
+  selectedCustomer: null,
+};
+
+export default LeftPanelContent;

package/v2Components/TestAndPreviewSlidebox/PreviewSection.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import messages from './messages';
+
+const PreviewSection = ({
+  previewDevice,
+  setPreviewDevice,
+  selectedCustomer,
+  formData,
+  isUpdatingPreview,
+  previewDataHtml,
+  content,
+  formatMessage,
+  PreviewChrome,
+}) => (
+  <CapRow className="preview-section panel-section">
+    <PreviewChrome
+      device={previewDevice}
+      onDeviceChange={setPreviewDevice}
+      customer={selectedCustomer}
+      subject={formData['template-subject']}
+    >
+      {isUpdatingPreview && (
+        <CapRow className="loading-container">
+          <CapSpin />
+          <CapRow className="loading-text">{formatMessage(messages.updatingPreview)}</CapRow>
+        </CapRow>
+      )}
+      {!isUpdatingPreview && previewDataHtml && (
+        <iframe
+          srcDoc={previewDataHtml?.resolvedBody}
+          title="Email Preview"
+          width="100%"
+          height="100%"
+          frameBorder="0"
+        />
+      )}
+      {!isUpdatingPreview && !previewDataHtml && (
+        <iframe
+          srcDoc={content}
+          title="Email Preview"
+          width="100%"
+          height="100%"
+          frameBorder="0" />
+      )}
+    </PreviewChrome>
+  </CapRow>
+);
+
+PreviewSection.propTypes = {
+  previewDevice: PropTypes.string.isRequired,
+  setPreviewDevice: PropTypes.func.isRequired,
+  selectedCustomer: PropTypes.object,
+  formData: PropTypes.object.isRequired,
+  isUpdatingPreview: PropTypes.bool.isRequired,
+  previewDataHtml: PropTypes.object,
+  content: PropTypes.string.isRequired,
+  formatMessage: PropTypes.func.isRequired,
+  PreviewChrome: PropTypes.elementType.isRequired,
+};
+
+PreviewSection.defaultProps = {
+  selectedCustomer: null,
+  previewDataHtml: null,
+};
+
+export default PreviewSection;