@capillarytech/creatives-library 8.0.276 → 8.0.278

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -66,6 +66,7 @@ const useEmailWrapper = ({
   Email,
   templateData,
   params,
+  isEditEmail = true,
 }) => {
   // State management
   const [templateName, setTemplateName] = useState('');
@@ -194,7 +195,10 @@ const useEmailWrapper = ({
       return;
     }
 
-    // New flow: Fetch template details if we're in edit mode and don't have template data yet
+    // New flow: Fetch template details only when editing (not when creating)
+    if (!isEditEmail) {
+      return;
+    }
     const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
     const hasTemplateDetails = Email?.templateDetails && !isEmpty(Email.templateDetails);
     const hasTemplateDataProp = templateData && !isEmpty(templateData);
@@ -207,7 +211,7 @@ const useEmailWrapper = ({
         emailActions.getTemplateDetails(templateId, 'email');
       }
     }
-  }, [params?.id, location?.query?.id, location?.params?.id, location?.pathname, Email?.templateDetails, Email?.getTemplateDetailsInProgress, templateData, emailActions]);
+  }, [isEditEmail, params?.id, location?.query?.id, location?.params?.id, location?.pathname, Email?.templateDetails, Email?.getTemplateDetailsInProgress, templateData, emailActions]);
 
   // Effect to set BEETemplate when template details are loaded for BEE templates
   // This ensures Email component can properly initialize BEE editor
@@ -643,7 +647,7 @@ const useEmailWrapper = ({
           // If template was created in BEE AND BEE is enabled → open in BEE editor
           // Otherwise → open in HTML editor (fallback)
           // IMPORTANT: When supportCKEditor is false, default to HTML editor unless explicitly BEE
-          if (isDragDrop && isBeeEnabled) {
+          if ((isDragDrop && isBeeEnabled)) {
             editorType = 'BEE';
             selectedEditorMode = null; // BEE uses existing flow
           } else {

package/v2Containers/EmailWrapper/index.js

@@ -85,6 +85,7 @@ const EmailWrapper = (props) => {
     createTemplateInProgress,
     fetchingCmsData,
     onHtmlEditorValidationStateChange,
+    isEditEmail = true,
   } = props;
 
   // Pass destructured props to the custom hook
@@ -143,6 +144,7 @@ const EmailWrapper = (props) => {
     Email,
     templateData,
     params,
+    isEditEmail,
   });
 
   // Render using the presentation component with data from the hook
@@ -195,6 +197,7 @@ const EmailWrapper = (props) => {
         setIsLoadingContent={setIsLoadingContent}
         templateData={templateData}
         params={params}
+        isEditEmail={isEditEmail}
         showTemplateName={showTemplateName}
         fetchingLiquidTags={fetchingLiquidTags}
         createTemplateInProgress={createTemplateInProgress}

package/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js

@@ -1025,6 +1025,32 @@ describe('useEmailWrapper', () => {
           expect(mockEmailActions.getTemplateDetails).not.toHaveBeenCalled();
         }, { timeout: 1000 });
       });
+
+      it('should NOT call getTemplateDetails when isEditEmail is false (create flow)', async () => {
+        const templateId = 'create-flow-id';
+        const createFlowProps = {
+          ...newFlowMockProps,
+          isEditEmail: false,
+          params: { id: templateId },
+          location: {
+            pathname: `/email/edit/${templateId}`,
+            query: { id: templateId },
+          },
+          Email: {
+            ...newFlowMockProps.Email,
+            templateDetails: null,
+            getTemplateDetailsInProgress: false,
+          },
+        };
+
+        renderHook((props) => useEmailWrapper(props), {
+          initialProps: createFlowProps,
+        });
+
+        await waitFor(() => {
+          expect(mockEmailActions.getTemplateDetails).not.toHaveBeenCalled();
+        }, { timeout: 1000 });
+      });
     });
   });
 

package/v2Containers/Facebook/Advertisement/index.js

@@ -73,7 +73,7 @@ export const Advertisement = (props) => {
   const FbAdFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
-    bottom: 20px;
+    bottom: 0;
     width: 100%;
     margin-left: -32px;
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};

package/v2Containers/Line/Container/_lineCreate.scss

@@ -40,6 +40,7 @@
 .create-msg,
 .cancel-msg {
   position: fixed;
+  bottom: 20px;
 }
 .cancel-msg {
   margin-left: 100px;

package/v2Containers/Line/Container/style.js

@@ -38,7 +38,7 @@ export default css`
     .action-section {
       background-color: ${CAP_WHITE};
       position: fixed;
-      bottom: 20px;
+      bottom: 0;
       width: 100%;
       margin-left: -32px;
       padding: ${CAP_SPACE_32} ${CAP_SPACE_24};

package/v2Containers/MobilePush/Edit/index.js

@@ -167,7 +167,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       };
       this.props.actions.getMobilepushTemplatesList('mobilepush', params);
     }
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema)) {
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema) && _.isEmpty(this.state.formData)) {
       this.setState({fullSchema: nextProps.metaEntities.layouts[0].definition, schema: (nextProps.location.query.module === 'loyalty') ? nextProps.metaEntities.layouts[0].definition.textSchema : {}}, () => {
         this.handleEditSchemaOnPropsChange(nextProps, selectedWeChatAccount);
         const templateId = get(this, "props.params.id");
@@ -388,11 +388,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         }
       });
     } else {
-      selectedAccount = accounts[0];
+      selectedAccount = accounts?.length > 0 ? accounts[0] : {};
       formData['mobilepush-accounts'] = selectedAccount?.id;
     }
     this.props.actions.setWeChatAccount(selectedAccount);
-    this.setState({formData, accountsOptions: accounts.map((acc) => ({key: acc.id, label: acc.name, value: acc.id}))});
+    this.setState({formData, accountsOptions: accounts?.length > 0 ? accounts.map((acc) => ({key: acc.id, label: acc.name, value: acc.id})) : []});
   };
 
   createDefinition = (account) => ({
@@ -2023,7 +2023,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         <CapSpin spinning={spinning}>
           <CapRow>
             <CapColumn>
-              {!this.props.isLoadingMetaEntities && <FormBuilder
+              <FormBuilder
+                key={!_.isEmpty(schema) ? 'has-schema' : 'no-schema'}
                 channel={MOBILE_PUSH}
                 schema={schema}
                 showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
@@ -2058,7 +2059,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
-              />}
+              />
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
               <CapSlideBox

package/v2Containers/SmsTrai/Create/index.scss

@@ -98,5 +98,5 @@
 }
 
 .create-dlt-msg {
-  margin-left: 120px;
+  margin-left: 170px;
 }

package/v2Containers/SmsTrai/Edit/index.js

@@ -106,7 +106,6 @@ export const SmsTraiEdit = (props) => {
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
     position: fixed;
     bottom: 2rem;
-    margin-left: -2rem;
     .ant-btn {
       margin-right: ${CAP_SPACE_16};
     }
@@ -688,17 +687,24 @@ export const SmsTraiEdit = (props) => {
           <CapButton
             onClick={handleTestAndPreview}
             type="secondary"
-            className="create-msg create-dlt-msg"
+            className="create-msg"
           >
             <FormattedMessage {...messages.testAndPreviewButtonLabel} />
           </CapButton>
           <CapButton
             onClick={isLiquidSupportFeatureEnabled ? onSubmitWrapper : onDoneCallback}
-            className="create-msg"
+            className="create-msg create-dlt-msg"
             disabled={isTagValidationError || (isLiquidSupportFeatureEnabled && !isObject(metaEntities?.tagLookupMap))}
           >
             <FormattedMessage {...messages.saveButtonLabel} />
           </CapButton>
+          <CapButton
+            onClick={handleClose}
+            className="cancel-dlt-msg"
+            type="secondary"
+          >
+            <FormattedMessage {...messages.cancelButtonLabel} />
+          </CapButton>
         </SMSTraiFooter>
         <TestAndPreviewSlidebox
           show={showTestAndPreviewSlidebox}