@capillarytech/creatives-library 9.0.15-alpha.1 → 9.0.16

package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/Tests/SenderDetails.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  render, screen, waitFor, within, fireEvent,
+  render, screen, waitFor, within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
@@ -183,9 +183,9 @@ const WAIT_OPTIONS = { timeout: 10000 };
 
 async function openSelectAndChoose(root, comboIndex, optionText) {
   const combos = within(root).getAllByRole('combobox');
-  fireEvent.mouseDown(combos[comboIndex]);
+  await userEvent.click(combos[comboIndex]);
   await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-  fireEvent.click(await findVisibleSelectOption(optionText, WAIT_OPTIONS));
+  await userEvent.click(await findVisibleSelectOption(optionText, WAIT_OPTIONS));
 }
 
 describe('SenderDetails', () => {
@@ -334,7 +334,7 @@ describe('SenderDetails', () => {
     await waitFor(() => expect(within(root).getByText('beta@other.com')).toBeInTheDocument());
 
     const resetLinks = within(root).getAllByText('Reset');
-    fireEvent.click(resetLinks[0]);
+    await userEvent.click(resetLinks[0]);
 
     await waitFor(() => {
       expect(within(root).getByText('alpha@brand.com')).toBeInTheDocument();
@@ -349,12 +349,12 @@ describe('SenderDetails', () => {
     await waitFor(() => expect(within(root).getByText('+1002003001')).toBeInTheDocument());
 
     const combos = within(root).getAllByRole('combobox');
-    fireEvent.mouseDown(combos[1]);
+    await userEvent.click(combos[1]);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    fireEvent.click(await findVisibleSelectOption('+1002003002', WAIT_OPTIONS));
+    await userEvent.click(await findVisibleSelectOption('+1002003002', WAIT_OPTIONS));
 
     const resetLinks = within(root).getAllByText('Reset');
-    fireEvent.click(resetLinks[1]);
+    await userEvent.click(resetLinks[1]);
 
     await waitFor(() => expect(within(root).getByText('+1002003001')).toBeInTheDocument());
   });
@@ -370,13 +370,13 @@ describe('SenderDetails', () => {
     await waitFor(() => expect(within(root).getByText('My Business')).toBeInTheDocument());
 
     const combos = within(root).getAllByRole('combobox');
-    fireEvent.mouseDown(combos[combos.length - 1]);
+    await userEvent.click(combos[combos.length - 1]);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    fireEvent.click(await findVisibleSelectOption('+91900111333', WAIT_OPTIONS));
+    await userEvent.click(await findVisibleSelectOption('+91900111333', WAIT_OPTIONS));
 
     const saveBtn = within(root).getByRole('button', { name: /save changes/i });
     await waitFor(() => expect(saveBtn).not.toBeDisabled());
-    fireEvent.click(saveBtn);
+    await userEvent.click(saveBtn);
 
     expect(onSave).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -425,9 +425,9 @@ describe('SenderDetails', () => {
     await waitFor(() => expect(within(root).getByText('Gateway A')).toBeInTheDocument());
 
     const combos = within(root).getAllByRole('combobox');
-    fireEvent.mouseDown(combos[0]);
+    await userEvent.click(combos[0]);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    fireEvent.click(await findVisibleSelectOption('Gateway B', WAIT_OPTIONS));
+    await userEvent.click(await findVisibleSelectOption('Gateway B', WAIT_OPTIONS));
 
     // The sender ID should now auto-update to Gateway B's sender
     await waitFor(() => expect(within(root).getByText('+222')).toBeInTheDocument());
@@ -444,9 +444,9 @@ describe('SenderDetails', () => {
 
     // Switch to Mail Beta domain
     const combos = within(root).getAllByRole('combobox');
-    fireEvent.mouseDown(combos[0]);
+    await userEvent.click(combos[0]);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    fireEvent.click(await findVisibleSelectOption('Mail Beta', WAIT_OPTIONS));
+    await userEvent.click(await findVisibleSelectOption('Mail Beta', WAIT_OPTIONS));
 
     // Sender ID should auto-update to beta@other.com
     await waitFor(() => expect(within(root).getByText('beta@other.com')).toBeInTheDocument());
@@ -468,13 +468,13 @@ describe('SenderDetails', () => {
     // Change sender to enable save
     const combos = within(root).getAllByRole('combobox');
     const senderCombo = combos[combos.length - 1];
-    fireEvent.mouseDown(senderCombo);
+    await userEvent.click(senderCombo);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    fireEvent.click(await findVisibleSelectOption('+91900111333', WAIT_OPTIONS));
+    await userEvent.click(await findVisibleSelectOption('+91900111333', WAIT_OPTIONS));
 
     const saveBtn = within(root).getByRole('button', { name: /save changes/i });
     await waitFor(() => expect(saveBtn).not.toBeDisabled());
-    fireEvent.click(saveBtn);
+    await userEvent.click(saveBtn);
 
     // Should have called onSave with whatsappDomainId derived from the matched WABA domain
     expect(onSave).toHaveBeenCalledWith(
@@ -507,9 +507,9 @@ describe('SenderDetails', () => {
     // Change to an alternate sender
     const combos = within(root).getAllByRole('combobox');
     const senderCombo = combos[combos.length - 1];
-    fireEvent.mouseDown(senderCombo);
+    await userEvent.click(senderCombo);
     await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument(), WAIT_OPTIONS);
-    fireEvent.click(await findVisibleSelectOption('+viber-alt', WAIT_OPTIONS));
+    await userEvent.click(await findVisibleSelectOption('+viber-alt', WAIT_OPTIONS));
 
     // antd v6 also renders selected option in an aria-live polite region for
     // screen readers, so the text appears twice. Match only the visible select
@@ -521,7 +521,7 @@ describe('SenderDetails', () => {
     // Now click reset — for viberSenderId the else branch in handleReset is hit
     // (viberSenderId is not smsDomain/emailDomain, so getDefaultValueForField returns '')
     const resetLinks = within(root).getAllByText('Reset');
-    fireEvent.click(resetLinks[resetLinks.length - 1]);
+    await userEvent.click(resetLinks[resetLinks.length - 1]);
     // After reset, the field goes to the default value returned by getDefaultValueForField
     // For viberSenderId this is '' (no specific default handler). The visible
     // select tile no longer shows +viber-alt; the aria-live polite span may

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import pick from 'lodash/pick';
 import cloneDeep from 'lodash/cloneDeep';
 import TemplatesV2 from '../TemplatesV2';
 import TemplatePreview from '../../v2Components/TemplatePreview';
@@ -26,7 +25,6 @@ import Viber from '../Viber';
 import Whatsapp from '../Whatsapp';
 import InApp from '../InApp';
 import Rcs from '../Rcs';
-import { isRcsTextOnlyCardMediaType, resolveRcsCardPreviewStrings } from '../Rcs/utils';
 import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
 import Zalo from '../Zalo';
@@ -182,8 +180,6 @@ export function SlideBoxContent(props) {
       isTestAndPreviewMode,
       onHtmlEditorValidationStateChange,
     } = props;
-  const localTemplatesConfig = props.localTemplatesConfig || pick(props, constants.LOCAL_TEMPLATE_CONFIG_KEYS);
-  const useLocalTemplates = !!get(localTemplatesConfig, 'useLocalTemplates');
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
   const creativesLocationProps = {
@@ -403,37 +399,12 @@ export function SlideBoxContent(props) {
       }
       case constants.RCS: {
         const template = cloneDeep(templateDataObject);
-        const cardPath = 'versions.base.content.RCS.rcsContent.cardContent[0]';
-        const card = get(template, cardPath, {}) || {};
-        const {
-          description = '',
-          media: { mediaUrl = '' } = {},
-          title = '',
-          mediaType: cardMediaType,
-          suggestions = [],
-          cardVarMapped: nestedCardVarMapped,
-        } = card;
-        const rootMirror = templateDataObject?.rcsCardVarMapped;
-        const nestedRecord =
-          nestedCardVarMapped != null && typeof nestedCardVarMapped === 'object'
-            ? nestedCardVarMapped
-            : {};
-        const rootRecord =
-          rootMirror != null && typeof rootMirror === 'object' ? rootMirror : {};
-        const mergedCardVarMapped = { ...rootRecord, ...nestedRecord };
-        const textOnlyCard = isRcsTextOnlyCardMediaType(cardMediaType);
-        const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
-          title,
-          description,
-          mergedCardVarMapped,
-          !isFullMode,
-          textOnlyCard,
-        );
+        const { description = "", media: { mediaUrl = "" } = {}, title = "", suggestions = [] } = get(template, 'versions.base.content.RCS.rcsContent.cardContent[0]', {});
         return {
           rcsPreviewContent: {
             rcsImageSrc: mediaUrl,
-            rcsTitle,
-            rcsDesc,
+            rcsTitle: title,
+            rcsDesc: description,
             ...(suggestions.length > 0 && {
               buttonText: suggestions[0]?.text,
             }),
@@ -459,7 +430,7 @@ export function SlideBoxContent(props) {
 
   return (
     <CreativesWrapper>
-      {slidBoxContent === 'templates' && (!isFullMode || useLocalTemplates) && (
+      {!isFullMode && slidBoxContent === 'templates' && (
       <TemplatesV2
         isFullMode={isFullMode}
         onSelectTemplate={onSelectTemplate}
@@ -492,7 +463,6 @@ export function SlideBoxContent(props) {
         waitEventContextTags={waitEventContextTags}
         loyaltyMetaData={loyaltyMetaData}
         isLoyaltyModule={isLoyaltyModule}
-        localTemplatesConfig={localTemplatesConfig}
         />
       )}
       {isPreview && (
@@ -663,7 +633,6 @@ export function SlideBoxContent(props) {
         route={{ name: 'sms' }}
         isCreateSms={isCreateSms}
         isComponent
-        templateData={templateData}
         isGetFormData={isGetFormData}
         getFormSubscriptionData={getFormData}
         getLiquidTags={getLiquidTags}
@@ -681,6 +650,9 @@ export function SlideBoxContent(props) {
         restrictPersonalization={restrictPersonalization}
         isAnonymousType={isAnonymousType}
         waitEventContextTags={waitEventContextTags}
+        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+        handleTestAndPreview={handleTestAndPreview}
+        handleCloseTestAndPreview={handleCloseTestAndPreview}
       />
         )}
 
@@ -1270,7 +1242,6 @@ export function SlideBoxContent(props) {
       )}
       {isCreateRcs && (<Rcs
         {...rcsCommonProps}
-        templateData={templateData}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -49,8 +49,6 @@ function SlideBoxFooter(props) {
     isAnonymousType = false,
     templateData = {},
     hasPersonalizationTokenError: hasPersonalizationTokenErrorProp = false,
-    /** When set (e.g. SMS library create), overrides `creativesTemplatesSave` (“Done”) for the primary button */
-    primarySaveButtonMessage,
   } = props;
   // Calculate if buttons should be disabled
   // Only apply validation state checks for EMAIL channel in HTML Editor mode (not BEE/DragDrop)
@@ -167,12 +165,6 @@ function SlideBoxFooter(props) {
   // Use prop from parent (FormBuilder flow) when available; else fall back to templateData check
   const hasPersonalizationTokenError = hasPersonalizationTokenErrorProp === true || (restrictPersonalization && hasPersonalizationTokens());
 
-  function getSaveButtonLabel() {
-    if (primarySaveButtonMessage) return <FormattedMessage {...primarySaveButtonMessage} />;
-    if (isFullMode) return getFullModeSaveBtn(slidBoxContent, isCreatingTemplate);
-    return <FormattedMessage {...messages.creativesTemplatesSave} />;
-  }
-
   return (
     <div className="template-footer-width">
       {shouldShowErrorInfoNote && (
@@ -195,7 +187,11 @@ function SlideBoxFooter(props) {
                 onClick={onSave}
                 disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons || hasPersonalizationTokenError}
               >
-                {getSaveButtonLabel()}
+                {isFullMode ? (
+                  getFullModeSaveBtn(slidBoxContent, isCreatingTemplate)
+                ) : (
+                  <FormattedMessage {...messages.creativesTemplatesSave} />
+                )}
               </CapButton>
               {showTestAndPreviewButton && (
                 <CapButton
@@ -268,10 +264,6 @@ SlideBoxFooter.propTypes = {
   templateData: PropTypes.object,
   formData: PropTypes.array,
   hasPersonalizationTokenError: PropTypes.bool,
-  primarySaveButtonMessage: PropTypes.shape({
-    id: PropTypes.string,
-    defaultMessage: PropTypes.string,
-  }),
 };
 
 SlideBoxFooter.defaultProps = {
@@ -299,6 +291,5 @@ SlideBoxFooter.defaultProps = {
   selectedEmailCreateMode: '',
   formData: [],
   hasPersonalizationTokenError: false,
-  primarySaveButtonMessage: undefined,
 };
 export default SlideBoxFooter;

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -16,7 +16,6 @@ import { isTraiDLTEnable } from '../../utils/common';
 import { formatString } from '../../utils/Formatter';
 import {
   CAP_SPACE_12,
-  CAP_SPACE_16,
   ICON_SIZE_M,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { WHATSAPP_HELP_DOC_LINK, JOURNEY } from './constants';
@@ -29,7 +28,7 @@ const StyledLabel = styled(CapLabelInline)`
 // the inherited font-size. Pin it to the medium icon size (24px) and center it so
 // the back arrow matches the header title instead of collapsing to a tiny glyph.
 const PrefixWrapper = styled.div`
-  margin-right: ${CAP_SPACE_16};
+  margin-right: 16px;
   display: inline-flex;
   align-items: center;
   font-size: ${ICON_SIZE_M};
@@ -41,25 +40,7 @@ const renderData = (type, value, channel) => (
 );
 
 export function SlideBoxHeader(props) {
-  const {
-    slidBoxContent,
-    templateData,
-    onShowTemplates,
-    creativesMode,
-    isFullMode,
-    showPrefix,
-    shouldShowTemplateName,
-    channel,
-    templateNameRenderProp,
-    weChatTemplateType,
-    onWeChatMaptemplateStepChange,
-    weChatMaptemplateStep,
-    templateStep,
-    smsRegister,
-    handleClose,
-    moduleType,
-    useLocalTemplates = false,
-  } = props;
+  const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, shouldShowTemplateName, channel, templateNameRenderProp, weChatTemplateType, onWeChatMaptemplateStepChange, weChatMaptemplateStep, templateStep, smsRegister, handleClose, moduleType } = props;
   const showTemplateNameHeader = isFullMode && shouldShowTemplateName;
   const mapTemplateCreate = !showTemplateNameHeader && slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
@@ -80,7 +61,7 @@ export function SlideBoxHeader(props) {
   } = templateData || {};
   const templateName = whatsappTemplateName || templateData?.name;
   const showRcsTemplateName = channel.toLowerCase() === RCS && slidBoxContent === 'editTemplate' && !isFullMode && templateName;
-  const showTemplateName = isWhatsappEdit || isZaloEdit;
+  const showTemplateName = isWhatsappEdit || showRcsTemplateName || isZaloEdit;
   const whatsappCategory = whatsappTemplateCategory || get(templateData, `versions.base.content.whatsapp.category`, '');
   const whatsappLanguageCode = whatsappTemplateLanguageCode || get(templateData, `versions.base.content.whatsapp.languages[0].language`, '');
 
@@ -107,9 +88,6 @@ export function SlideBoxHeader(props) {
     window.open(WHATSAPP_HELP_DOC_LINK, '_blank');
   };
 
-  const showCreativesTemplatesBackButton =
-    !isFullMode && (moduleType === JOURNEY || useLocalTemplates);
-
   return (
     <div key="creatives-container-slidebox-header-content">
       {slidBoxContent === 'templates' && !showTemplateNameHeader && (
@@ -118,7 +96,7 @@ export function SlideBoxHeader(props) {
         description={![NO_COMMUNICATION, FTP].includes(channel) &&
           <FormattedMessage {...messages.creativeTemplatesDesc} />
             }
-        prefix={showCreativesTemplatesBackButton &&
+        prefix={!isFullMode && moduleType === JOURNEY &&
           <PrefixWrapper>
             <CapIcons.BackIcon onClick={handleClose} />
           </PrefixWrapper>
@@ -152,12 +130,6 @@ export function SlideBoxHeader(props) {
                   <StyledLabel className='whatsapp-rcs-slidebox-template-name' type="label2">{templateName}</StyledLabel>
                 </>
               ) : ""}
-              {showRcsTemplateName && (
-                <>
-                  {renderData("label1", <FormattedMessage {...globalMessages.creativeNameLabel} />, channel)}
-                  <StyledLabel className='whatsapp-rcs-slidebox-template-name' type="label2">{templateName}</StyledLabel>
-                </>
-              )}
               {isWhatsappEdit && (
                 <>
                   {renderData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
@@ -170,7 +142,7 @@ export function SlideBoxHeader(props) {
               }
             </>
           }
-          prefix={!isFullMode && showPrefix &&
+          prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
             <PrefixWrapper>
               <CapIcons.BackIcon onClick={onShowTemplates} />
             </PrefixWrapper>
@@ -226,8 +198,5 @@ SlideBoxHeader.propTypes = {
   shouldShowTemplateName: PropTypes.bool,
   templateNameRenderProp: PropTypes.func,
   smsRegister: PropTypes.any,
-  handleClose: PropTypes.func,
-  moduleType: PropTypes.string,
-  useLocalTemplates: PropTypes.bool,
 };
 export default SlideBoxHeader;

package/v2Containers/CreativesContainer/constants.js

@@ -73,14 +73,3 @@ export const ALLOWED_CHANNELS_FOR_ANONYMOUS = ['mobilepush', 'webpush'];
 export const ALL_CHANNELS_NEW = [
   'sms', 'email', 'whatsapp', 'facebook', 'line', 'viber', 'rcs', 'zalo', 'inapp', 'call_task', 'ftp',
 ];
-
-export const LOCAL_TEMPLATE_CONFIG_KEYS = ['useLocalTemplates', 'localTemplates', 'localTemplatesLoading', 'localTemplatesFilterContent', 'localTemplatesUseSkeleton', 'localTemplatesOnPageChange'];
-
-/** Keys passed from parents into `Templates` when using local SMS template list (extends `LOCAL_TEMPLATE_CONFIG_KEYS`). */
-export const LOCAL_TEMPLATE_CONFIG_KEYS_FOR_PICK = [
-  ...LOCAL_TEMPLATE_CONFIG_KEYS,
-  'localTemplatesLoadingTip',
-  'localTemplatesFooterContent',
-];
-
-export const DEFAULT_SMS_TEMPLATE_NAME = 'Campaign message SMS content';