@capillarytech/creatives-library 7.17.140 → 7.17.141

package/package.json

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

package/v2Components/TemplatePreview/index.js

@@ -50,7 +50,7 @@ import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from
 import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 import WhatsappStatusContainer from '../WhatsappStatusContainer';
 import { getWhatsappQuickReply } from '../../v2Containers/Whatsapp/utils';
-import { QUICK_REPLY, WHATSAPP_CATEGORIES } from '../../v2Containers/Whatsapp/constants';
+import { QUICK_REPLY } from '../../v2Containers/Whatsapp/constants';
 import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
 
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
@@ -335,12 +335,12 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
           if (text) {
             renderArray.push(
               <CapLabel type="label21" className="whatsapp-cta-preview">
-                {type !== WHATSAPP_CATEGORIES.authentication && <CapIcon
+                <CapIcon
                   type={
                     (ctaType || type) === 'PHONE_NUMBER' ? 'call' : 'launch'
                   }
                   size="xs"
-                />}
+                />
                 {text}
               </CapLabel>,
             );

package/v2Containers/Email/index.js

@@ -557,12 +557,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const defaultTemplateName = _.get(defaultData, 'template-name', "");
 
     //sync back template name from from editing in create flow to wrapper when  edited
-
-    if (_.isEmpty(templateName) && defaultTemplateName) {
-      syncTemplateName(defaultTemplateName);
-    } else {
-      syncTemplateName(templateName);
+    if (syncTemplateName) {
+      syncTemplateName(_.isEmpty(templateName) && defaultTemplateName ? defaultTemplateName : templateName);
     }
+
     if (defaultData && _.isEmpty(templateName) && defaultTemplateName?.length >1 && isFullMode) {
       formData['template-name'] = defaultTemplateName;
     }

package/v2Containers/Whatsapp/index.js

@@ -9,7 +9,6 @@ import { get, isEmpty, cloneDeep, isEqual } from 'lodash';
 import styled from 'styled-components';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
@@ -851,11 +850,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   const extraSecurityFooter = ({ target: { checked = false } } = {}) => {
     setSecurityWarningReqd(checked);
     setExpiryMinutes(0);
-    if (checked) {
-      setTemplateFooter(formatMessage(messages.codeExpiryNumMinutes));
-    } else {
-      setTemplateFooter("");
-    }
+    setTemplateFooter('');
     const error = templateMessageErrorHandler(templateMessage);
     setTemplateMessageError(error);
   };
@@ -908,7 +903,35 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       </>
     );
   };
-
+  
+  const renderExtraSecurityText = () => {
+    const isDisabled =
+      isEditFlow ||
+      templateMessage?.length + UNSUBSCRIBE_TEXT_LENGTH >
+        TEMPLATE_MESSAGE_MAX_LENGTH;
+        
+    return (
+      <>
+        <CapColumn span={12}>
+          <CapCheckbox
+            className={`whatsapp-unsubscribe-checkbox ${
+              isEditFlow
+                ? 'whatsapp-edit-unsubscribe-checkbox'
+                : 'whatsapp-create-unsubscribe-checkbox'
+            }`}
+            onChange={unsubscribeHandler}
+            checked={unsubscribeRequired}
+            disabled={isDisabled}
+            autoFocus={true}
+          >
+              <CapLabel.CapLabelInline type="label9">
+                {formatMessage(messages.templateSecurityDisclaimer)}              
+              </CapLabel.CapLabelInline>
+          </CapCheckbox>
+        </CapColumn>
+      </>
+    );
+  };
   const maxLengthByType = (type) => {
     switch (type) {
       case MESSAGE_TEXT:
@@ -1092,7 +1115,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     if (value === WHATSAPP_CATEGORIES.authentication) {
       setTemplateHeader('');
       setTemplateFooter('');
-      setExpiryMinutes(0);
       setUnsubscribeRequired(false);
       setTemplateMessage(formatMessage(messages.authenticationMsg));
     } else {
@@ -1604,22 +1626,16 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
           </CapHeading>
         }
         suffix={
-          <>
-            {!isAuthenticationTemplate && (
-              <CapButton
-                data-testid="suffix-button"
-                type="flat"
-                isAddBtn
-                onClick={onMessageAddVar}
-                disabled={
-                  (addedVarCount >= 19 || templateMessageError) &&
-                  templateMessage
-                }
-              >
-                {formatMessage(messages.addVar)}
-              </CapButton>
-            )}
-          </>
+          <CapButton
+            type="flat"
+            isAddBtn
+            onClick={onMessageAddVar}
+            disabled={
+              (addedVarCount >= 19 || templateMessageError) && templateMessage
+            }
+          >
+            {formatMessage(messages.addVar)}
+          </CapButton>
         }
       />
       <CapRow className="whatsapp-create-template-message-input">
@@ -1638,7 +1654,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
           value={templateMessage || ""}
           disabled={isAuthenticationTemplate}
         />
-        {renderUnsubscribeText()}
+        {isAuthenticationTemplate ? renderExtraSecurityText() : renderUnsubscribeText()}
       </CapRow>
       {renderMessageLength(MESSAGE_TEXT)}
       {/* this section if for footer in create mode */}
@@ -1664,87 +1680,52 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             }
           />
           <CapRow className="whatsapp-create-template-message-input whatsapp-create-template-header-input">
-            {isAuthenticationTemplate ? (
+            {isAuthenticationTemplate ?
               <CapRow className="whatsapp-extra-security-footer">
                 <CapCheckbox
                   onChange={extraSecurityFooter}
                   checked={securityWarningReqd}
                   disabled={isEditFlow}
                   autoFocus={true}
-                  className="whatsapp-unsubscribe-checkbox"
-                >
-                  <CapLabel.CapLabelInline
-                    type="label2"
-                    className="whatsapp-render-unsubscribe-text"
-                  >
-                    {formatMessage(messages.expirationWarning)}
-                  </CapLabel.CapLabelInline>
-                </CapCheckbox>
-                {securityWarningReqd && (
-                  <>
-                    <CapRow className="whatsapp-extra-security-footer-input">
-                      {formatMessage(messages.codeExpiresIn)}
-                      <CapInput.Number
-                        min={0}
-                        max={90}
-                        placeholder={formatMessage(messages.enterExpiryTime)}
-                        onChange={(event) => changeExpiryMinutes(event)}
-                      />
-                      {formatMessage(messages.minutes)}
-                    </CapRow>
-                    <CapRow className="whatsapp-extra-security-footer-note">
-                      {formatMessage(messages.expiryCodeNote)}
-                      <CapTooltip
-                        title={
-                          <CapHeader
-                            titleClass="whatsapp-tooltip-header"
-                            descriptionClass="whatsapp-tooltip-header"
-                            size="small"
-                            title={formatMessage(
-                              messages.checkExpiryTooltipHeader
-                            )}
-                            description={formatMessage(
-                              messages.checkExpiryTooltipDesc
-                            )}
-                          />
-                        }
-                      >
-                        
-                        <CapButton
-                          type="flat"
-                          className="add-btn"
-                          onClick={() =>
-                            window.open(
-                              `${window.location.origin}${OTP_CONFIG_URI}`,
-                              "_blank"
-                            )
-                          }
-                        >
-                          {formatMessage(messages.checkExpiryCode)}
-                          <CapIcon size="s" type="launch"/>
-                        </CapButton>
-                      </CapTooltip>
-                    </CapRow>
-                  </>
-                )}
-              </CapRow>
-            ) : (
-              <TextArea
-                id="whatsapp-create-template-message-input"
-                autosize={{ minRows: 1, maxRows: 5 }}
-                placeholder={formatMessage(messages.templateMessagePlaceholder)}
-                onChange={onTemplateFooterChanges}
-                errorMessage={
-                  templateFooterError && (
-                    <CapError className="whatsapp-template-message-error">
-                      {templateFooterError}
-                    </CapError>
-                  )
-                }
-                value={templateFooter || ""}
-                disabled={isAuthenticationTemplate}
-              />
-            )}
+                  children={formatMessage(messages.expirationWarning)}
+                  className="whatsapp-extra-security-footer-checkbox"
+                />
+                {securityWarningReqd && <>
+                  <CapRow className='whatsapp-extra-security-footer-input'>
+                    {formatMessage(messages.codeExpiresIn)}
+                    <CapInput.Number min={0} placeholder={formatMessage(messages.enterExpiryTime)} onChange={(event) => changeExpiryMinutes(event)} />
+                    {formatMessage(messages.minutes)}
+                  </CapRow>
+                  <CapRow className='whatsapp-extra-security-footer-note' >
+                    {formatMessage(messages.expiryCodeNote)}
+                    <CapTooltip title={formatMessage(messages.checkExpiryCode)}>
+                      <CapButton type="flat" className="add-btn" onClick={() =>
+                        window.open(
+                          `${window.location.origin}${OTP_CONFIG_URI}`,
+                          '_blank',
+                        )
+                      }>{formatMessage(messages.checkExpiryCode)}
+                      </CapButton>
+                    </CapTooltip>
+                  </CapRow>
+                </>}
+              </CapRow> :
+            <TextArea
+              id="whatsapp-create-template-message-input"
+              autosize={{ minRows: 1, maxRows: 5 }}
+              placeholder={formatMessage(messages.templateMessagePlaceholder)}
+              onChange={onTemplateFooterChanges}
+              errorMessage={
+                templateFooterError && (
+                  <CapError className="whatsapp-template-message-error">
+                    {templateFooterError}
+                  </CapError>
+                )
+              }
+              value={templateFooter || ""}
+              disabled={isAuthenticationTemplate}
+            />
+            }
           </CapRow>
           {renderMessageLength(FOOTER_TEXT)}
         </>
@@ -2177,7 +2158,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             ctaData,
           }),
           ...(isAuthenticationTemplate && {
-            ctaData : [{text: formatMessage(globalMessages.autofill), type: WHATSAPP_CATEGORIES.authentication}]
+            ctaData : [{text: formatMessage(globalMessages.autofill)}]
           }),
           ...(isBtnTypeQuickReply && {
             quickReplyData,

package/v2Containers/Whatsapp/index.scss

@@ -205,7 +205,7 @@
     font-weight: $FONT_WEIGHT_MEDIUM;
   }
   .whatsapp-extra-security-footer {
-    margin-bottom: 1rem;
+    margin-bottom: $CAP_SPACE_04;
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
@@ -213,7 +213,6 @@
     gap: $CAP_SPACE_08;
 
     .whatsapp-extra-security-footer-note {
-      font-size: small;
       margin-top: $CAP_SPACE_04;
       display: inline-flex;
       padding-left: $CAP_SPACE_12;
@@ -221,11 +220,10 @@
       background: $CAP_PURPLE04;
       align-items: center;
       justify-content: space-between;
+      margin-right: $CAP_SPACE_12;
 
       .add-btn {
-        display: flex;
         background-color: inherit;
-        align-items: center;
       }
     }
 
@@ -234,9 +232,9 @@
       align-items: center;
       gap: $CAP_SPACE_04;
     }
-  }
 
-}
-.whatsapp-tooltip-header{
-  color: $CAP_G10;
+    .whatsapp-extra-security-footer-checkbox {
+      margin-right: auto;
+    }
+  }
 }

package/v2Containers/Whatsapp/messages.js

@@ -674,7 +674,7 @@ export default defineMessages({
   },
   checkExpiryCode: {
     id: `${prefix}.checkExpiryCode`,
-    defaultMessage: 'OTP settings',
+    defaultMessage: 'Check here',
   },
   expiryCodeNote:{
     id: `${prefix}.expiryCodeNote`,
@@ -686,7 +686,7 @@ export default defineMessages({
   },
   minutes:{
     id: `${prefix}.minutes`,
-    defaultMessage: 'minutes',
+    defaultMessage: 'Minutes',
   },
   codeExpiryNumMinutes:{
     id: `${prefix}.codeExpiryNumMinutes`,
@@ -707,13 +707,5 @@ export default defineMessages({
   enterExpiryTime:{
     id: `${prefix}.enterExpiryTime`,
     defaultMessage: "Enter expiry time"
-  },
-  checkExpiryTooltipHeader: {
-    id: `${prefix}.checkExpiryTooltipHeader`,
-    defaultMessage: 'Open OTP settings in new tab',
-  },
-  checkExpiryTooltipDesc: {
-    id: `${prefix}.checkExpiryTooltipDesc`,
-    defaultMessage: 'To check the configured expiry time that is same for all OTPs',
-  },
+  }
 });