@capillarytech/creatives-library 8.0.353-alpha.3 → 8.0.353-alpha.4

package/v2Containers/CreativesContainer/index.js

@@ -1,4 +1,48 @@
 import React from 'react';
+
+// Isolated input for the email template name field.
+// Manages its own value in local state so keystrokes only re-render this
+// small component, not the entire CreativesContainer → Email → FormBuilder tree.
+class TemplateNameInputField extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { localValue: props.initialValue || '' };
+  }
+
+  componentDidUpdate(prevProps) {
+    // Sync from props only when the external value changed AND the user hasn't
+    // diverged from the previous prop value. This handles async data-load in edit
+    // mode without overwriting what the user is actively typing.
+    if (
+      prevProps.initialValue !== this.props.initialValue &&
+      this.state.localValue === (prevProps.initialValue || '')
+    ) {
+      this.setState({ localValue: this.props.initialValue || '' });
+    }
+  }
+
+  handleChange = (ev) => {
+    const { value } = ev.currentTarget;
+    this.setState({ localValue: value });
+    if (this.props.onChange) this.props.onChange(value);
+  };
+
+  handleBlur = () => {
+    if (this.props.onBlur) this.props.onBlur(this.state.localValue);
+  };
+
+  render() {
+    const { onChange: _onChange, initialValue: _initialValue, onBlur: _ob, ...rest } = this.props;
+    return (
+      <CapInput
+        {...rest}
+        value={this.state.localValue}
+        onChange={this.handleChange}
+        onBlur={this.handleBlur}
+      />
+    );
+  }
+}
 import PropTypes from 'prop-types';
 import {
   CAP_SPACE_16, CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64,
@@ -1753,30 +1797,22 @@ export class Creatives extends React.Component {
       } />
   )
 
-  templateNameComponentInput = ({ formData, onFormDataChange, name }) => {
-    // Use local state for immediate UI feedback, fallback to prop value
-    const displayValue = this.state.localTemplateName !== '' ? this.state.localTemplateName : name;
-
-    return (
-      <CapInput
-        value={displayValue}
-        suffix={<span />}
-        onBlur={() => {
-          this.setState({
-            isEditName: false,
-            localTemplateName: '', // Clear local state on blur
-          }, () => {
-            this.showTemplateName({ formData, onFormDataChange });
-          });
-        }}
-        onChange={(ev) => {
-          const { value } = ev.currentTarget;
-          // Use optimized update for better performance
-          this.updateTemplateNameImmediately(value, formData, onFormDataChange);
-        }}
-      />
-    );
-  }
+  templateNameComponentInput = ({ formData, onFormDataChange, name }) => (
+    <TemplateNameInputField
+      initialValue={name}
+      suffix={<span />}
+      onBlur={(committedValue) => {
+        this.performTemplateNameUpdate(committedValue, formData, onFormDataChange);
+        this.setState({ isEditName: false });
+      }}
+      onChange={(value) => {
+        const isEmptyTemplateName = !value.trim();
+        if (this.state.isTemplateNameEmpty !== isEmptyTemplateName) {
+          this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
+        }
+      }}
+    />
+  )
 
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
     const {

package/v2Containers/Email/index.js

@@ -798,6 +798,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   onFormDataChange = (updatedFormData, tabCount, currentTab) => {
     // this.transformFormData(formData);
     const formData = {...updatedFormData};
+
     const {defaultData = {}, isFullMode, showTemplateName} = this.props;
     const templateName = formData['template-name'];
     const defaultTemplateName = _.get(defaultData, 'template-name', "");
@@ -809,7 +810,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       formData['template-name'] = templateName;
     }
 
-
     this.setState({formData, tabCount, isSchemaChanged: false}, () => {
       if (this.props.isFullMode && showTemplateName) {
         showTemplateName({formData, onFormDataChange: this.onFormDataChange});

package/v2Containers/Templates/_templates.scss

@@ -153,83 +153,6 @@
             line-clamp: 3;
             }
           }
-          .viber-carousel-static-content {
-            width: 100%;
-            overflow: hidden;
-            .viber-carousel-static-message-box {
-              width: 100%;
-              height: 2.25rem;
-              border-radius: $CAP_SPACE_04;
-              background: $CAP_WHITE;
-              margin-bottom: $CAP_SPACE_08;
-              padding: 0 $CAP_SPACE_08;
-              display: flex;
-              align-items: center;
-            }
-            .viber-carousel-static-message {
-              display: block;
-              width: 100%;
-              color: $CAP_G01;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            }
-            .viber-carousel-static-cards {
-              display: flex;
-              gap: $CAP_SPACE_08;
-              overflow: hidden;
-            }
-            .viber-carousel-static-card {
-              flex: 1;
-              min-width: 0;
-              background: $CAP_WHITE;
-              border-radius: $CAP_SPACE_04;
-              padding: $CAP_SPACE_06;
-              overflow: hidden;
-            }
-            .viber-carousel-static-image,
-            .viber-carousel-static-image-placeholder {
-              width: 100%;
-              height: 5.357rem;
-              border-radius: $CAP_SPACE_04;
-            }
-            .viber-carousel-static-image {
-              object-fit: cover;
-            }
-            .viber-carousel-static-image-placeholder {
-              background: $CAP_G07;
-            }
-            .viber-carousel-static-text {
-              display: block;
-              color: $CAP_G01;
-              margin: $CAP_SPACE_04 0;
-              line-height: 1.3;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: normal;
-            }
-            .viber-carousel-static-buttons {
-              display: flex;
-              flex-direction: column;
-              gap: $CAP_SPACE_04;
-            }
-            .viber-carousel-static-button {
-              display: block;
-              min-height: 1.5rem;
-              border-radius: $CAP_SPACE_12;
-              background: $CAP_PURPLE01;
-              color: $CAP_WHITE;
-              text-align: center;
-              padding: 0.179rem $CAP_SPACE_08;
-              white-space: normal;
-            }
-            .viber-carousel-static-button-secondary {
-              color: $CAP_PURPLE01;
-              background: transparent;
-              border: none;
-              box-shadow: none;
-            }
-          }
         
         }
       

package/v2Containers/Templates/index.js

@@ -72,7 +72,6 @@ import * as ebillActions from '../Ebill/actions';
 import * as emailActions from '../Email/actions';
 import * as lineActions from '../Line/Container/actions';
 import * as viberActions from '../Viber/actions';
-import { VIBER_MEDIA_TYPES } from '../Viber/constants';
 import * as facebookActions from '../Facebook/actions';
 import * as whatsappActions from '../Whatsapp/actions';
 import * as rcsActions from '../Rcs/actions';
@@ -1372,11 +1371,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const image = viberContent.image || {};
         const video = viberContent.video || {};
         const button = viberContent.button || {};
-        const messageType = viberContent.type || '';
-        const cardsRaw = viberContent.cards;
-        const cards = Array.isArray(cardsRaw) ? cardsRaw : [];
-        const isCarousel =
-          messageType === VIBER_MEDIA_TYPES.CAROUSEL || cards.length > 0;
 
         const viberPreview = {
           messageContent: text,
@@ -1394,39 +1388,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           };
         }
 
-        if (isCarousel) {
-          viberPreview.type = VIBER_MEDIA_TYPES.CAROUSEL;
-          viberPreview.cards = cards.map((card) => ({
-            text: card?.text || '',
-            mediaUrl: card?.mediaUrl || '',
-            buttons: (card?.buttons || []).map((btn) => ({
-              title: btn?.title || '',
-              action: btn?.action || '',
-            })),
-          }));
-          viberPreview.showCarouselEditorPreview = true;
-        }
-
         // Extract account name
         const accountName = get(template, 'definition.accountName', '');
 
         // Return Viber content object (same as Viber/index.js getTemplateContent)
         return {
           viberPreviewContent: viberPreview,
-          accountName: accountName || '',
-          brandName: accountName || '',
-          messageContent: text,
-          ...(isCarousel && {
-            type: VIBER_MEDIA_TYPES.CAROUSEL,
-            cards: viberPreview.cards,
-          }),
-          ...(!isCarousel && !isEmpty(button) && button.text && (button.url || viberContent.buttonURL) && {
-            button: {
-              text: button.text,
-              url: button.url || viberContent.buttonURL || '',
-            },
-          }),
-          buttonURL: button.url || viberContent.buttonURL || '',
+          accountName: accountName ? [accountName] : [],
+          brandName: accountName ? [accountName] : [],
         };
       }
 
@@ -2372,52 +2341,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 image = {},
                 button = {},
                 video = {},
-                type = '',
-                cards = [],
               } = {},
             } = {},
           } = template.versions.base;
-          const isViberCarousel = type === VIBER_MEDIA_TYPES.CAROUSEL;
           templateData.content = text;
-          if (isViberCarousel) {
-            const previewCards = Array.isArray(cards) ? cards.slice(0, 1) : [];
-            templateData.className = 'viber-carousel-static';
-            templateData.content = (
-              <CapRow className="viber-carousel-static-content">
-                <CapRow className="viber-carousel-static-message-box">
-                  <CapLabel type="label1" className="viber-carousel-static-message">
-                    {text}
-                  </CapLabel>
-                </CapRow>
-                <CapRow className="viber-carousel-static-cards">
-                  {previewCards.map((card, cardIdx) => (
-                    <CapRow className="viber-carousel-static-card" key={`viber-static-card-${cardIdx}`}>
-                      {card?.mediaUrl ? (
-                        <CapImage src={card.mediaUrl} className="viber-carousel-static-image" />
-                      ) : (
-                        <CapRow className="viber-carousel-static-image-placeholder" />
-                      )}
-                      <CapLabel type="label1" className="viber-carousel-static-text">
-                        {card?.text}
-                      </CapLabel>
-                      <CapRow className="viber-carousel-static-buttons">
-                        {(Array.isArray(card?.buttons) && card.buttons.length ? card.buttons : [{}, {}]).slice(0, 2).map((carouselButton, btnIdx) => (
-                          <CapLabel
-                            key={`viber-static-btn-${cardIdx}-${btnIdx}`}
-                            type="label1"
-                            className={`viber-carousel-static-button ${btnIdx === 1 ? 'viber-carousel-static-button-secondary' : ''}`}
-                          >
-                            {(carouselButton?.title || '').trim()}
-                          </CapLabel>
-                        ))}
-                      </CapRow>
-                    </CapRow>
-                  ))}
-                </CapRow>
-              </CapRow>
-            );
-            break;
-          }
           if (!isEmpty(image)) {
             const { url = '' } = image;
             templateData.url = url;

package/v2Containers/Viber/constants.js

@@ -47,22 +47,7 @@ export const VIBER_MEDIA_TYPES = {
   TEXT: 'TEXT',
   IMAGE: 'IMAGE',
   VIDEO: 'VIDEO',
-  CAROUSEL: 'CAROUSEL',
 };
-export const VIBER_CAROUSEL_MIN_CARDS = 2;
-export const VIBER_CAROUSEL_MAX_CARDS = 5;
-export const VIBER_CAROUSEL_MAX_BUTTONS = 2;
-export const VIBER_CAROUSEL_CARD_TITLE_MIN_LENGTH = 2;
-export const VIBER_CAROUSEL_CARD_TITLE_MAX_LENGTH = 38;
-export const VIBER_CAROUSEL_FIRST_BUTTON_TITLE_MAX_LENGTH = 10;
-export const VIBER_CAROUSEL_SECOND_BUTTON_TITLE_MAX_LENGTH = 12;
-export const VIBER_CAROUSEL_BUTTON_URL_MAX_LENGTH = 1000;
-/** Recommended / validated carousel image height in pixels (passed to image upload). */
-export const VIBER_CAROUSEL_IMG_HEIGHT = 600;
-/** Recommended / validated carousel image width in pixels (passed to image upload). */
-export const VIBER_CAROUSEL_IMG_WIDTH = 696;
-/** Maximum carousel image file size (bytes). 10_000_000 ≈ 10 MB (decimal). */
-export const VIBER_CAROUSEL_IMG_SIZE = 10000000;
 export const ALLOWED_IMAGE_EXTENSIONS_REGEX_VIBER = /\.(jpe?g|png)$/i;
 export const ALLOWED_EXTENSIONS_VIDEO_REGEX_VIBER = /\.(mp4|3gp|m4v|mov)$/i;
 export const NONE = 'NONE';
@@ -84,10 +69,6 @@ export const mediaRadioOptions = [
     value: VIBER_MEDIA_TYPES.VIDEO,
     label: <FormattedMessage {...messages.mediaVideo} />,
   },
-  {
-    value: VIBER_MEDIA_TYPES.CAROUSEL,
-    label: <FormattedMessage {...messages.mediaCarousel} />,
-  },
 ];
 
 export const buttonRadioOptions = [