@capillarytech/creatives-library 8.0.358 → 8.0.359-alpha.0

package/v2Components/CommonTestAndPreview/tests/index.test.js

@@ -1174,50 +1174,6 @@ describe('CommonTestAndPreview', () => {
         expect(screen.getByTestId('preview-section')).toBeTruthy();
       });
     });
-
-    it('should handle WEBPUSH channel', async () => {
-      const webpushContent = {
-        content: { title: 'Web Push', message: 'Hello from web push' },
-        accountId: 'acc-001',
-      };
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        content: webpushContent,
-      };
-
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview {...props} />
-        </TestWrapper>
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTestId('left-panel')).toBeTruthy();
-        expect(screen.getByTestId('preview-section')).toBeTruthy();
-      });
-    });
-
-    it('should treat WEBPUSH content as object (same branch as WHATSAPP)', async () => {
-      // The WEBPUSH channel uses the same contentObj branch as WHATSAPP (JSON string or object)
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        content: JSON.stringify({
-          content: { title: 'Stringified', message: 'Content' },
-        }),
-      };
-
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview {...props} />
-        </TestWrapper>
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTestId('preview-section')).toBeTruthy();
-      });
-    });
   });
 
   describe('Device Initialization', () => {
@@ -2673,156 +2629,6 @@ describe('CommonTestAndPreview', () => {
         });
       });
     });
-
-    describe('preparePreviewPayload - WEBPUSH', () => {
-      it('should build WEBPUSH payload with title and message', async () => {
-        const webpushContent = {
-          content: {
-            title: 'Push Title',
-            message: 'Push message body',
-          },
-          accountId: 'acc-123',
-          messageSubject: 'Push Title',
-        };
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.WEBPUSH,
-          content: JSON.stringify(webpushContent),
-        };
-
-        render(
-          <TestWrapper>
-            <CommonTestAndPreview {...props} />
-          </TestWrapper>
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('left-panel')).toBeTruthy();
-          expect(screen.getByTestId('preview-section')).toBeTruthy();
-        });
-      });
-
-      it('should handle WEBPUSH content with iconImageUrl', async () => {
-        const webpushContent = {
-          content: {
-            title: 'Hello',
-            message: 'World',
-            iconImageUrl: 'https://example.com/icon.png',
-          },
-          accountId: 'acc-123',
-        };
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.WEBPUSH,
-          content: webpushContent,
-        };
-
-        render(
-          <TestWrapper>
-            <CommonTestAndPreview {...props} />
-          </TestWrapper>
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('preview-section')).toBeTruthy();
-        });
-      });
-
-      it('should handle WEBPUSH content with cta', async () => {
-        const webpushContent = {
-          content: {
-            title: 'Hello',
-            message: 'World',
-            cta: { type: 'EXTERNAL_URL', actionLink: 'https://example.com' },
-          },
-          accountId: 'acc-123',
-        };
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.WEBPUSH,
-          content: webpushContent,
-        };
-
-        render(
-          <TestWrapper>
-            <CommonTestAndPreview {...props} />
-          </TestWrapper>
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('preview-section')).toBeTruthy();
-        });
-      });
-
-      it('should handle WEBPUSH content with expandableDetails', async () => {
-        const webpushContent = {
-          content: {
-            title: 'Hello',
-            message: 'World',
-            expandableDetails: {
-              media: [{ url: 'https://example.com/image.jpg', type: 'IMAGE' }],
-              ctas: [{ title: 'Click', actionLink: 'https://example.com', type: 'EXTERNAL_URL' }],
-            },
-          },
-          accountId: 'acc-123',
-        };
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.WEBPUSH,
-          content: webpushContent,
-        };
-
-        render(
-          <TestWrapper>
-            <CommonTestAndPreview {...props} />
-          </TestWrapper>
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('preview-section')).toBeTruthy();
-        });
-      });
-
-      it('should handle WEBPUSH with null formData gracefully', async () => {
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.WEBPUSH,
-          formData: null,
-          content: null,
-        };
-
-        render(
-          <TestWrapper>
-            <CommonTestAndPreview {...props} />
-          </TestWrapper>
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('preview-section')).toBeTruthy();
-        });
-      });
-
-      it('should handle WEBPUSH channel with object content (non-string)', async () => {
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.WEBPUSH,
-          content: {
-            content: { title: 'ObjTitle', message: 'ObjMessage' },
-            accountId: 'acc-999',
-          },
-        };
-
-        render(
-          <TestWrapper>
-            <CommonTestAndPreview {...props} />
-          </TestWrapper>
-        );
-
-        await waitFor(() => {
-          expect(screen.getByTestId('preview-section')).toBeTruthy();
-        });
-      });
-    });
   });
 
   describe('Tag Extraction', () => {

package/v2Components/FormBuilder/index.js

@@ -79,69 +79,6 @@ const errorMessageForTags = {
   TAG_BRACKET_COUNT_MISMATCH_ERROR: 'tagBracketCountMismatchError'
 };
 
-// Isolated input for EMAIL template-name: only this tiny component re-renders on each keystroke.
-// formData is updated only on blur (onCommit), eliminating all re-renders during typing.
-class HighFreqInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { localValue: props.value || '' };
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.value !== this.props.value && this.state.localValue !== this.props.value) {
-      this.setState({ localValue: this.props.value || '' });
-    }
-  }
-
-  handleChange = (e) => {
-    this.setState({ localValue: e.target.value });
-  };
-
-  handleBlur = (e) => {
-    this.props.onCommit(this.state.localValue);
-    if (this.props.onBlur) this.props.onBlur(e);
-  };
-
-  render() {
-    const { value: _v, onCommit: _oc, onBlur: _ob, ...rest } = this.props;
-    return <CapInput {...rest} value={this.state.localValue} onChange={this.handleChange} onBlur={this.handleBlur} />;
-  }
-}
-
-// Isolated wrapper for EMAIL template-subject: blur-only commit, same as HighFreqInput.
-class HighFreqTagInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { localInputValue: props.inputValue || '' };
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.inputValue !== this.props.inputValue && this.state.localInputValue !== this.props.inputValue) {
-      this.setState({ localInputValue: this.props.inputValue || '' });
-    }
-  }
-
-  handleInputChange = (e) => {
-    this.setState({ localInputValue: e.target.value });
-  };
-
-  handleBlur = () => {
-    this.props.onCommit(this.state.localInputValue);
-  };
-
-  render() {
-    const { inputValue: _iv, onCommit: _oc, inputOnChange: _ic, ...rest } = this.props;
-    return (
-      <CapTagListWithInput
-        {...rest}
-        inputValue={this.state.localInputValue}
-        inputOnChange={this.handleInputChange}
-        inputProps={{ ...(this.props.inputProps || {}), onBlur: this.handleBlur }}
-      />
-    );
-  }
-}
-
 class FormBuilder extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -415,7 +352,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       this.setState({tabCount: nextProps.tabCount});
     }
     if (nextProps.startValidation && nextProps.startValidation !== false && this.props.startValidation !== nextProps.startValidation) {
-      if (this.debouncedUpdateFormData) this.debouncedUpdateFormData.flush();
       this.setState({checkValidation: true});
       this.validateForm(null, null, true, true, () => {
         //triggering the saveFormData or onSubmit when validation sets isFormValid to TRUE
@@ -3474,25 +3410,26 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               ? formatMessage(messages.personalizationTagsErrorMessage)
               : (errorType === TAG_BRACKET_COUNT_MISMATCH_ERROR ? formatMessage(globalMessages.unbalanacedCurlyBraces) : (val.errorMessage && ifError ? val.errorMessage : ''));
             if (styling === 'semantic') {
-              const isEmailStandaloneHighFreq = val.standalone && this.props.schema?.channel?.toUpperCase() === EMAIL;
-              if (isEmailStandaloneHighFreq) {
-                columns.push(
-                  <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
-                    <HighFreqInput
-                      id={val.id}
-                      errorMessage={errorMessageText}
-                      label={val.label}
-                      inductiveText={val.inductiveText}
-                      className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
-                      style={val.style ? val.style : {}}
-                      placeholder={val.placeholder}
-                      onCommit={(newValue) => this.performFormDataUpdate(newValue, val)}
-                      onBlur={(e) => this.handleFieldBlur(e, val)}
-                      value={value || ""}
-                      disabled={val.disabled}
-                      size={val.size || "default"}
-                    />
-                    {!aiContentBotDisabled && (
+              columns.push(
+              <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
+                  <CapInput
+                    id={val.id}
+                    errorMessage={errorMessageText}
+                    label={val.label}
+                    inductiveText={val.inductiveText}
+                    className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
+                    // fluid={val.fluid}
+                    style={val.style ? val.style : {}}
+                    placeholder={val.placeholder}
+                    onChange={(e) => this.updateFormData(e.target.value, val)}
+                    onBlur={(e) => this.handleFieldBlur(e, val)}
+                    value={value || ""}
+                    defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    disabled={val.disabled}
+                    size={val.size || "default"}
+                  />
+                  {this.props.schema?.channel === EMAIL &&
+                    !aiContentBotDisabled && (
                       <CapAskAira.ContentGenerationBot
                         text={value || ""}
                         setText={this.handleSetText.bind(this, val)}
@@ -3501,48 +3438,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                         rootStyle={{
                           bottom: "0.2rem",
                           right: "0.2rem",
-                          left: "auto",
+                          left: "auto",                           
                         }}
                       />
                     )}
-                  </CapColumn>
-                );
-              } else {
-                columns.push(
-                <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
-                    <CapInput
-                      id={val.id}
-                      errorMessage={errorMessageText}
-                      label={val.label}
-                      inductiveText={val.inductiveText}
-                      className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
-                      // fluid={val.fluid}
-                      style={val.style ? val.style : {}}
-                      placeholder={val.placeholder}
-                      onChange={(e) => this.updateFormData(e.target.value, val)}
-                      onBlur={(e) => this.handleFieldBlur(e, val)}
-                      value={value || ""}
-                      defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                      disabled={val.disabled}
-                      size={val.size || "default"}
-                    />
-                    {this.props.schema?.channel === EMAIL &&
-                      !aiContentBotDisabled && (
-                        <CapAskAira.ContentGenerationBot
-                          text={value || ""}
-                          setText={this.handleSetText.bind(this, val)}
-                          iconPlacement="float-br"
-                          iconSize="1.6rem"
-                          rootStyle={{
-                            bottom: "0.2rem",
-                            right: "0.2rem",
-                            left: "auto",
-                          }}
-                        />
-                      )}
-                  </CapColumn>
-                );
-              }
+                </CapColumn>
+              );
             }
             break;
 
@@ -3783,48 +3684,37 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               isBEEAppEnableForCapTagList === false ||
               channelForCapTagList !== 'EMAIL'
             ) {
-              const isEmailStandaloneSubject = val.standalone && channelForCapTagList === EMAIL && val.id === 'template-subject';
-              const tagListProps = {
-                key: `input-${val.id}`,
-                inputId: val.id,
-                inputValue: this.state.formData[val.id] || '',
-                inputPlaceholder: val.placeholder || '',
-                inputErrorMessage: val.errorMessage && ifError ? val.errorMessage : '',
-                inputRequired: val.required || false,
-                inputDisabled: val.disabled || false,
-                headingText: val.label || '',
-                headingStyle: val.headingStyle || { marginTop: '3%', marginRight: '79%' },
-                headingType: "h4",
-                onTagSelect: (data) => this.callChildEvent(data, val, 'onTagSelect'),
-                onContextChange: this.props.onContextChange,
-                location: this.props.location,
-                tags: this.props.tags ? this.props.tags : [],
-                injectedTags: this.props.injectedTags ? this.props.injectedTags : {},
-                className: val.className ? val.className : '',
-                userLocale: this.state.translationLang,
-                selectedOfferDetails: this.props.selectedOfferDetails,
-                eventContextTags: this.props?.eventContextTags,
-                waitEventContextTags: this.props?.waitEventContextTags,
-                moduleFilterEnabled: moduleFilterEnabledForCapTagList,
-                containerStyle: val.style || {},
-                inputProps: val.inputProps || {},
-                showInput: val.showInput !== false,
-                showTagList: val.showTagList !== false,
-                restrictPersonalization: this.props.restrictPersonalization,
-              };
               columns.push(
                 <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
-                  {isEmailStandaloneSubject ? (
-                    <HighFreqTagInput
-                      {...tagListProps}
-                      onCommit={(newValue) => this.performFormDataUpdate(newValue, val)}
-                    />
-                  ) : (
-                    <CapTagListWithInput
-                      {...tagListProps}
-                      inputOnChange={(e) => this.updateFormData(e.target.value, val)}
-                    />
-                  )}
+                  <CapTagListWithInput
+                    key={`input-${val.id}`}
+                    inputId={val.id}
+                    inputValue={this.state.formData[val.id] || ''}
+                    inputOnChange={(e) => this.updateFormData(e.target.value, val)}
+                    inputPlaceholder={val.placeholder || ''}
+                    inputErrorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                    inputRequired={val.required || false}
+                    inputDisabled={val.disabled || false}
+                    headingText={val.label || ''}
+                    headingStyle={val.headingStyle || { marginTop: '3%', marginRight: '79%' }}
+                    headingType="h4"
+                    onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
+                    onContextChange={this.props.onContextChange}
+                    location={this.props.location}
+                    tags={this.props.tags ? this.props.tags : []}
+                    injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+                    className={val.className ? val.className : ''}
+                    userLocale={this.state.translationLang}
+                    selectedOfferDetails={this.props.selectedOfferDetails}
+                    eventContextTags={this.props?.eventContextTags}
+                    waitEventContextTags={this.props?.waitEventContextTags}
+                    moduleFilterEnabled={moduleFilterEnabledForCapTagList}
+                    containerStyle={val.style || {}}
+                    inputProps={val.inputProps || {}}
+                    showInput={val.showInput !== false}
+                    showTagList={val.showTagList !== false}
+                    restrictPersonalization={this.props.restrictPersonalization}
+                  />
                 </CapColumn>
               );
             }

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -69,8 +69,8 @@ const TestAndPreviewSlidebox = (props) => {
 
 TestAndPreviewSlidebox.propTypes = {
   // Channel prop - supports all channels
-  channel: PropTypes.oneOf([CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER, CHANNELS.ZALO, CHANNELS.WEBPUSH]),
-  currentChannel: PropTypes.oneOf([CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER, CHANNELS.ZALO, CHANNELS.WEBPUSH]), // Alternative prop name for backward compatibility
+  channel: PropTypes.oneOf([CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.INAPP, CHANNELS.MOBILEPUSH]),
+  currentChannel: PropTypes.oneOf([CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.INAPP, CHANNELS.MOBILEPUSH]), // Alternative prop name for backward compatibility
   // All original props are passed through
   show: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,

package/v2Containers/App/constants.js

@@ -124,6 +124,3 @@ export const LOYALTY = 'loyalty';
 export const FAILURE = 'FAILURE';
 export const DATE_DISPLAY_FORMAT = 'D MMM YYYY';
 export const TIME_DISPLAY_FORMAT = 'hh:mm A';
-export const EXTERNAL_URL = 'EXTERNAL_URL';
-export const URL = 'URL';
-export const SITE_URL = 'SITE_URL';

package/v2Containers/CreativesContainer/index.js

@@ -1,48 +1,4 @@
 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,
@@ -1797,22 +1753,30 @@ export class Creatives extends React.Component {
       } />
   )
 
-  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 });
-        }
-      }}
-    />
-  )
+  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);
+        }}
+      />
+    );
+  }
 
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
     const {

package/v2Containers/Templates/_templates.scss

@@ -153,6 +153,83 @@
             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;
+            }
+          }
         
         }