@capillarytech/creatives-library 7.17.141 → 7.17.142

package/v2Containers/Whatsapp/index.js

@@ -9,6 +9,7 @@ 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';
@@ -850,7 +851,11 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   const extraSecurityFooter = ({ target: { checked = false } } = {}) => {
     setSecurityWarningReqd(checked);
     setExpiryMinutes(0);
-    setTemplateFooter('');
+    if (checked) {
+      setTemplateFooter(formatMessage(messages.codeExpiryNumMinutes).replace(formatMessage(messages.numMinutes), ''));
+    } else {
+      setTemplateFooter("");
+    }
     const error = templateMessageErrorHandler(templateMessage);
     setTemplateMessageError(error);
   };
@@ -903,35 +908,7 @@ 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:
@@ -1115,7 +1092,10 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     if (value === WHATSAPP_CATEGORIES.authentication) {
       setTemplateHeader('');
       setTemplateFooter('');
+      setExpiryMinutes(0);
       setUnsubscribeRequired(false);
+      setCtadata({});
+      setQuickReplyData({});
       setTemplateMessage(formatMessage(messages.authenticationMsg));
     } else {
       setTemplateMessage('');
@@ -1626,16 +1606,22 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
           </CapHeading>
         }
         suffix={
-          <CapButton
-            type="flat"
-            isAddBtn
-            onClick={onMessageAddVar}
-            disabled={
-              (addedVarCount >= 19 || templateMessageError) && templateMessage
-            }
-          >
-            {formatMessage(messages.addVar)}
-          </CapButton>
+          <>
+            {!isAuthenticationTemplate && (
+              <CapButton
+                data-testid="suffix-button"
+                type="flat"
+                isAddBtn
+                onClick={onMessageAddVar}
+                disabled={
+                  (addedVarCount >= 19 || templateMessageError) &&
+                  templateMessage
+                }
+              >
+                {formatMessage(messages.addVar)}
+              </CapButton>
+            )}
+          </>
         }
       />
       <CapRow className="whatsapp-create-template-message-input">
@@ -1654,7 +1640,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
           value={templateMessage || ""}
           disabled={isAuthenticationTemplate}
         />
-        {isAuthenticationTemplate ? renderExtraSecurityText() : renderUnsubscribeText()}
+        {renderUnsubscribeText()}
       </CapRow>
       {renderMessageLength(MESSAGE_TEXT)}
       {/* this section if for footer in create mode */}
@@ -1680,52 +1666,87 @@ 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}
-                  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}
-            />
-            }
+                  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="regular"
+                            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}
+              />
+            )}
           </CapRow>
           {renderMessageLength(FOOTER_TEXT)}
         </>
@@ -2158,7 +2179,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             ctaData,
           }),
           ...(isAuthenticationTemplate && {
-            ctaData : [{text: formatMessage(globalMessages.autofill)}]
+            ctaData : [{text: formatMessage(globalMessages.autofill), type: WHATSAPP_CATEGORIES.authentication}]
           }),
           ...(isBtnTypeQuickReply && {
             quickReplyData,

package/v2Containers/Whatsapp/index.scss

@@ -205,7 +205,7 @@
     font-weight: $FONT_WEIGHT_MEDIUM;
   }
   .whatsapp-extra-security-footer {
-    margin-bottom: $CAP_SPACE_04;
+    margin-bottom: 1rem;
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
@@ -213,6 +213,7 @@
     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;
@@ -220,10 +221,11 @@
       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;
       }
     }
 
@@ -232,9 +234,9 @@
       align-items: center;
       gap: $CAP_SPACE_04;
     }
-
-    .whatsapp-extra-security-footer-checkbox {
-      margin-right: auto;
-    }
   }
+
+}
+.whatsapp-tooltip-header{
+  color: $CAP_G10;
 }

package/v2Containers/Whatsapp/messages.js

@@ -305,7 +305,7 @@ export default defineMessages({
   },
   btnDesc: {
     id: `${prefix}.btnDesc`,
-    defaultMessage: 'These will be show clickable buttons below your message.',
+    defaultMessage: 'These will be clickable buttons below your message.',
   },
   btnTypeNone: {
     id: `${prefix}.btnTypeNone`,
@@ -674,7 +674,7 @@ export default defineMessages({
   },
   checkExpiryCode: {
     id: `${prefix}.checkExpiryCode`,
-    defaultMessage: 'Check here',
+    defaultMessage: 'OTP settings',
   },
   expiryCodeNote:{
     id: `${prefix}.expiryCodeNote`,
@@ -686,7 +686,7 @@ export default defineMessages({
   },
   minutes:{
     id: `${prefix}.minutes`,
-    defaultMessage: 'Minutes',
+    defaultMessage: 'minutes',
   },
   codeExpiryNumMinutes:{
     id: `${prefix}.codeExpiryNumMinutes`,
@@ -707,5 +707,13 @@ 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',
+  },
 });