@capillarytech/creatives-library 8.0.316-alpha.3 → 8.0.316

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.316-alpha.3",
+  "version": "8.0.316",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/WebPush/Create/components/MessageSection.js

@@ -12,6 +12,52 @@ import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
 import { MESSAGE_MAX_LENGTH, SHOW_CHARACTER_COUNT } from '../../constants';
 import { useAiraTriggerPosition } from '../hooks/useAiraTriggerPosition';
 
+const InputWrapper = ({
+  children,
+  inputRef,
+  error,
+  value,
+  onChange,
+  isAiContentBotDisabled,
+}) => {
+  const wrapperRef = useRef(null);
+  const airaRootStyle = useAiraTriggerPosition({ wrapperRef, inputRef, error });
+
+  return (
+    <div className="webpush-message-input-wrapper" ref={wrapperRef}>
+      {children}
+      {!isAiContentBotDisabled && (
+        <CapAskAira.ContentGenerationBot
+          text={value || ''}
+          setText={(text) => onChange(text)}
+          iconPlacement="float-br"
+          iconSize="1.6rem"
+          rootStyle={airaRootStyle}
+        />
+      )}
+    </div>
+  );
+};
+
+InputWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  inputRef: PropTypes.oneOfType([
+    PropTypes.shape({ current: PropTypes.any }),
+    PropTypes.func,
+  ]),
+  error: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  isAiContentBotDisabled: PropTypes.bool,
+};
+
+InputWrapper.defaultProps = {
+  inputRef: null,
+  error: '',
+  value: '',
+  isAiContentBotDisabled: false,
+};
+
 /**
  * MessageSection component - Message textarea with tags, emoji picker, and character count
  */
@@ -27,13 +73,6 @@ export const MessageSection = ({
   handleMessageTextAreaRef,
   isAiContentBotDisabled,
 }) => {
-  const messageInputWrapperRef = useRef(null);
-  const airaRootStyle = useAiraTriggerPosition({
-    wrapperRef: messageInputWrapperRef,
-    inputRef: messageTextAreaRef,
-    error,
-  });
-
   const renderCharacterCount = () => {
     if (!SHOW_CHARACTER_COUNT) return null;
 
@@ -60,7 +99,13 @@ export const MessageSection = ({
         <CapHeading type="h4" className="webpush-message">
           <FormattedMessage {...messages.message} />
         </CapHeading>
-        <div className="webpush-message-input-wrapper" ref={messageInputWrapperRef}>
+        <InputWrapper
+          inputRef={messageTextAreaRef}
+          error={error}
+          value={value}
+          onChange={onChange}
+          isAiContentBotDisabled={isAiContentBotDisabled}
+        >
           <CapEmojiPicker.Wrapper
             value={value}
             onChange={onChange}
@@ -84,16 +129,7 @@ export const MessageSection = ({
               }
             />
           </CapEmojiPicker.Wrapper>
-          {!isAiContentBotDisabled && (
-            <CapAskAira.ContentGenerationBot
-              text={value || ''}
-              setText={(text) => onChange(text)}
-              iconPlacement="float-br"
-              iconSize="1.6rem"
-              rootStyle={airaRootStyle}
-            />
-          )}
-        </div>
+        </InputWrapper>
         {renderCharacterCount()}
       </CapRow>
       <CapDivider className="webpush-message-divider" />

package/v2Containers/WebPush/Create/components/MessageSection.test.js

@@ -318,5 +318,33 @@ describe('MessageSection', () => {
       expect(textArea.prop('value')).toBe(longValue);
     });
   });
+
+  describe('InputWrapper', () => {
+    it('should render the wrapper div with correct class', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const inputWrapper = wrapper.find('.webpush-message-input-wrapper');
+      expect(inputWrapper.exists()).toBe(true);
+    });
+
+    it('should render children inside InputWrapper', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} />);
+      const inputWrapper = wrapper.find('.webpush-message-input-wrapper');
+      expect(inputWrapper.find(CapEmojiPicker.Wrapper).exists()).toBe(true);
+    });
+
+    it('should not render aiRA bot inside InputWrapper when disabled', () => {
+      const wrapper = mountWithIntl(<MessageSection {...defaultProps} isAiContentBotDisabled />);
+      const inputWrapper = wrapper.find('.webpush-message-input-wrapper');
+      expect(inputWrapper.find(CapAskAira.ContentGenerationBot).exists()).toBe(false);
+    });
+
+    it('should render aiRA bot inside InputWrapper when enabled', () => {
+      const wrapper = mountWithIntl(
+        <MessageSection {...defaultProps} isAiContentBotDisabled={false} />
+      );
+      const inputWrapper = wrapper.find('.webpush-message-input-wrapper');
+      expect(inputWrapper.find(CapAskAira.ContentGenerationBot).exists()).toBe(true);
+    });
+  });
 });
 

package/v2Containers/WebPush/Create/components/__snapshots__/MessageSection.test.js.snap

@@ -18,8 +18,12 @@ exports[`MessageSection Rendering should render correctly with default props 1`]
         values={Object {}}
       />
     </CapHeading>
-    <div
-      className="webpush-message-input-wrapper"
+    <InputWrapper
+      error=""
+      inputRef={null}
+      isAiContentBotDisabled={true}
+      onChange={[MockFunction]}
+      value="Test Message"
     >
       <InjectIntl(Wrapper)
         onChange={[MockFunction]}
@@ -43,7 +47,7 @@ exports[`MessageSection Rendering should render correctly with default props 1`]
           value="Test Message"
         />
       </InjectIntl(Wrapper)>
-    </div>
+    </InputWrapper>
     <CapLabel
       className="webpush-character-count"
       type="label2"

package/v2Containers/Whatsapp/index.js

@@ -2957,12 +2957,13 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   };
 
   const isEditDoneDisabled = () => {
+    const isBlankInput = (inputValue) => !String(inputValue ?? '').trim();
     let carouselDisableCheck = false;
     if (isMediaTypeCarousel) {
       carouselDisableCheck = carouselData.some((data) => {
 				return (
 					data.carouselTagValidationErr ||
-					Object.values(data.varMap).some((inputValue) => inputValue === "") ||
+					Object.values(data.varMap).some((inputValue) => isBlankInput(inputValue)) ||
           computeTextLength(CAROUSEL_TEXT, data) > TEMPLATE_MESSAGE_MAX_LENGTH ||
           (carouselMediaType === IMAGE.toLowerCase() && !data.imageSrc) ||
 					(carouselMediaType === VIDEO.toLowerCase() && !data.videoSrc) ||
@@ -2972,8 +2973,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     }
     return (isTagValidationError ||
     isHeaderTagValidationError ||
-    Object.values(varMap).some((inputValue) => inputValue === "") ||
-    Object.values(headerVarMappedData).some((inputValue) => inputValue === "") ||
+    Object.values(varMap).some((inputValue) => isBlankInput(inputValue)) ||
+    Object.values(headerVarMappedData).some((inputValue) => isBlankInput(inputValue)) ||
     computeTextLength(MESSAGE_TEXT) > TEMPLATE_MESSAGE_MAX_LENGTH ||
     computeTextLength(HEADER_TEXT) > TEMPLATE_HEADER_MAX_LENGTH ||
     (isBtnTypeCta && ctaData.some((btn) => btn?.url?.includes("{{1}}"))) || isMediatypeValid()) || carouselDisableCheck;

package/v2Containers/Whatsapp/tests/index.test.js

@@ -1354,3 +1354,175 @@ describe('Haptic carousel file handle mapping', () => {
     expect(cd[0].karixFileHandle).toBe('');
   });
 });
+
+describe('WhatsApp edit Done button whitespace validation', () => {
+  let renderedComponent;
+
+  const createWhatsappTemplate = jest.fn();
+  const getFormData = jest.fn();
+  const clearCreateResponse = jest.fn();
+  const getTemplateDetails = jest.fn();
+  const resetEditTemplate = jest.fn();
+  const fetchSchemaForEntity = jest.fn();
+  const handleClose = jest.fn();
+  const onCreateComplete = jest.fn();
+  const formatMessage = jest.fn();
+  const getMetaTags = jest.fn();
+  const resetMetaTags = jest.fn();
+
+  const mountEditFlow = (editData, accountData = mockData.accountData1) => {
+    renderedComponent = mountWithIntl(
+      <Provider store={store}>
+        <Whatsapp
+          actions={{
+            createWhatsappTemplate,
+            clearCreateResponse,
+            getTemplateDetails,
+            resetEditTemplate,
+            getMetaTags,
+            resetMetaTags,
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          getFormData={getFormData}
+          params={{ id: editData?.templateDetails?._id || 'edit-whitespace-id' }}
+          editData={editData}
+          accountData={accountData}
+          location={mockData.location}
+          intl={{ formatMessage }}
+          isFullMode={false}
+          isEditFlow
+          loadingTags={false}
+          metaEntities={[]}
+          getDefaultTags
+          Templates={{
+            senderDetails: {
+              status: 'SUCCESS',
+              domainProperties: [
+                {
+                  domainProperties: {
+                    connectionProperties: {
+                      sourceAccountIdentifier: '2000222347',
+                      baseUrl: 'https://api.gupshup.io/whatsapp/v1',
+                    },
+                  },
+                },
+              ],
+            },
+          }}
+        />
+      </Provider>,
+    );
+  };
+
+  const getDoneButton = () => renderedComponent.find('CapButton.whatsapp-create-btn').at(0);
+
+  const getFirstVariableTextarea = () => renderedComponent
+    .find('textarea.TextArea__StyledTextArea-sc-177dfyt-2')
+    .at(0);
+
+  it('keeps Done disabled for whitespace-only message variable', () => {
+    const editData = {
+      templateDetails: {
+        _id: 'edit-msg-whitespace',
+        name: 'msg_whitespace',
+        type: 'WHATSAPP',
+        versions: {
+          base: {
+            content: {
+              whatsapp: {
+                status: 'approved',
+                category: 'ALERT_UPDATE',
+                mediaType: 'TEXT',
+                buttonType: 'NONE',
+                varMapped: {},
+                languages: [{ language: 'en', content: 'Your code is {{1}}' }],
+              },
+            },
+          },
+        },
+      },
+    };
+
+    mountEditFlow(editData);
+    getFirstVariableTextarea().simulate('change', { target: { value: ' ', id: '{{1}}_3' } });
+    renderedComponent.update();
+
+    expect(getDoneButton().props().disabled).toBe(true);
+  });
+
+  it('keeps Done disabled for whitespace-only header variable', () => {
+    const editData = {
+      templateDetails: {
+        _id: 'edit-header-whitespace',
+        name: 'header_whitespace',
+        type: 'WHATSAPP',
+        versions: {
+          base: {
+            content: {
+              whatsapp: {
+                status: 'approved',
+                category: 'ALERT_UPDATE',
+                mediaType: 'TEXT',
+                buttonType: 'NONE',
+                varMapped: {},
+                whatsappMedia: {
+                  header: 'Hi {{1}}',
+                  footer: '',
+                  headerVarMapped: {},
+                },
+                languages: [{ language: 'en', content: 'Simple message without vars' }],
+              },
+            },
+          },
+        },
+      },
+    };
+
+    mountEditFlow(editData);
+    getFirstVariableTextarea().simulate('change', { target: { value: ' ', id: '{{1}}_1' } });
+    renderedComponent.update();
+
+    expect(getDoneButton().props().disabled).toBe(true);
+  });
+
+  it('keeps Done disabled for whitespace-only carousel variable', () => {
+    const editData = {
+      templateDetails: {
+        _id: 'edit-carousel-whitespace',
+        name: 'carousel_whitespace',
+        type: 'WHATSAPP',
+        versions: {
+          base: {
+            content: {
+              whatsapp: {
+                status: 'approved',
+                category: 'MARKETING',
+                mediaType: 'CAROUSEL',
+                buttonType: 'NONE',
+                varMapped: {},
+                languages: [{ language: 'en', content: 'Main message' }],
+                carouselData: [
+                  {
+                    mediaType: 'image',
+                    imageUrl: 'https://cdn.example.com/card.jpg',
+                    bodyText: 'Card body {{1}}',
+                    varMap: {},
+                    buttons: [],
+                  },
+                ],
+              },
+            },
+          },
+        },
+      },
+    };
+
+    mountEditFlow(editData, mockData.accountData2);
+    getFirstVariableTextarea().simulate('change', { target: { value: ' ', id: '{{1}}_2' } });
+    renderedComponent.update();
+
+    expect(getDoneButton().props().disabled).toBe(true);
+  });
+});