@capillarytech/creatives-library 7.17.138 → 7.17.140

package/v2Containers/Whatsapp/index.js

@@ -5,10 +5,11 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import { get, isEmpty, cloneDeep } from 'lodash';
+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';
@@ -25,7 +26,7 @@ import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
 import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
 import CapLink from '@capillarytech/cap-ui-library/CapLink';
 import moment from 'moment';
-import debounce from 'lodash/debounce';
+
 import {
   CAP_SPACE_04,
   CAP_SPACE_16,
@@ -75,7 +76,9 @@ import {
   HEADER_TEXT,
   FOOTER_TEXT,
   MESSAGE_TEXT,
-  BUTTON_TEXT
+  BUTTON_TEXT,
+  OTP_CONFIG_URI,
+  WHATSAPP_CATEGORIES,
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
@@ -149,6 +152,8 @@ export const Whatsapp = (props) => {
   const [host, setHost] = useState('');
   const [spin, setSpin] = useState(false);
   const [unsubscribeRequired, setUnsubscribeRequired] = useState(false);
+  const [securityWarningReqd, setSecurityWarningReqd] = useState(false);
+  const [expiryMinutes, setExpiryMinutes] = useState(0);
   const [whatsappImageSrc, setWhatsappImageSrc] = useState('');
   const [whatsappVideoSrcAndPreview, setWhatsappVideoSrcAndPreview] = useState({
     whatsappVideoSrc: '',
@@ -406,7 +411,10 @@ export const Whatsapp = (props) => {
       }
       setUnsubscribeRequired(true);
     }
-    //conerting msg string to variable arr
+    if(msg?.includes(formatMessage(messages.securitySuffix))){
+      setUnsubscribeRequired(true);
+    }
+    //converting msg string to variable arr
     const templateMessageArray = converStringToVarArr(validVarArr, msg);
     updateTempMsgArray(templateMessageArray.filter((i) => i === 0 || i));
   };
@@ -698,7 +706,7 @@ export const Whatsapp = (props) => {
       disabled: host === HOST_TWILIO,
     },
   ];
-
+const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.authentication);
   const onChangeButtonType = ({ target: { value } }) => {
     setButtonType(value);
     setCtadata(INITIAL_CTA_DATA);
@@ -829,19 +837,45 @@ export const Whatsapp = (props) => {
 
   const unsubscribeHandler = ({ target: { checked } }) => {
     setUnsubscribeRequired(checked);
+    if (isAuthenticationTemplate) {
+      if (checked && !templateMessage?.includes(formatMessage(messages.securitySuffix))) {
+        setTemplateMessage(`${templateMessage}${formatMessage(messages.securitySuffix)}`);
+      } else {
+        setTemplateMessage(formatMessage(messages.authenticationMsg));
+      }
+    }
+    const error = templateMessageErrorHandler(templateMessage);
+    setTemplateMessageError(error);
+  };
+
+  const extraSecurityFooter = ({ target: { checked = false } } = {}) => {
+    setSecurityWarningReqd(checked);
+    setExpiryMinutes(0);
+    if (checked) {
+      setTemplateFooter(formatMessage(messages.codeExpiryNumMinutes));
+    } else {
+      setTemplateFooter("");
+    }
     const error = templateMessageErrorHandler(templateMessage);
     setTemplateMessageError(error);
   };
 
-  const previewUrlHandler = ({ target: { checked } }) => {
-    setShowUrlPreview(checked);
+  const changeExpiryMinutes =(event) => {
+    setExpiryMinutes(event);
+    const footerContent =`${formatMessage(
+      messages.codeExpiryNumMinutes,
+    )}` ;
+    setTemplateFooter(footerContent.replace(formatMessage(messages.numMinutes), event));
   }
 
   const renderUnsubscribeText = () => {
     const isDisabled =
       isEditFlow ||
-      templateMessage.length + UNSUBSCRIBE_TEXT_LENGTH >
+      templateMessage?.length + UNSUBSCRIBE_TEXT_LENGTH >
         TEMPLATE_MESSAGE_MAX_LENGTH;
+    const messageFooter = isAuthenticationTemplate ?
+      formatMessage(messages.templateSecurityDisclaimer):
+      formatMessage(messages.templateMessageUnsubscribeText, { unsubscribe: '{{unsubscribe}}' });
     return (
       <>
         <CapColumn span={12}>
@@ -866,12 +900,11 @@ export const Whatsapp = (props) => {
               }
             >
               <span className="whatsapp-render-unsubscribe-text">
-                {formatMessage(messages.templateMessageUnsubscribeText, { unsubscribe: '{{unsubscribe}}'})}
+                {messageFooter}
               </span>
             </CapTooltip>
           </CapCheckbox>
         </CapColumn>
-        <CapColumn span={12}></CapColumn>
       </>
     );
   };
@@ -897,21 +930,25 @@ export const Whatsapp = (props) => {
             <CapHeading type="h4">
               {formatMessage(messages.btnLabel)}
             </CapHeading>
-            <CapHeading className="whatsapp-optional-label">
+            {!isAuthenticationTemplate && <CapHeading className="whatsapp-optional-label">
               {formatMessage(messages.optional)}
-            </CapHeading>
+            </CapHeading>}
           </CapRow>
         }
         description={
           <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
         }
       />
-      <CapRadioGroup
-        options={buttonRadioOptions}
-        value={buttonType}
-        onChange={onChangeButtonType}
-        className="whatsapp-btn-radio-group"
-      />
+      {isAuthenticationTemplate ?
+        <CapWhatsappQuickReply
+          authenticationFlow={true}
+        /> :
+        <CapRadioGroup
+          options={buttonRadioOptions}
+          value={buttonType}
+          onChange={onChangeButtonType}
+          className="whatsapp-btn-radio-group"
+        />}
     </>
   );
 
@@ -1052,6 +1089,15 @@ export const Whatsapp = (props) => {
   };
 
   const onTemplateCategoryChange = (value) => {
+    if (value === WHATSAPP_CATEGORIES.authentication) {
+      setTemplateHeader('');
+      setTemplateFooter('');
+      setExpiryMinutes(0);
+      setUnsubscribeRequired(false);
+      setTemplateMessage(formatMessage(messages.authenticationMsg));
+    } else {
+      setTemplateMessage('');
+    }
     setTemplateCategory(value);
   };
 
@@ -1127,6 +1173,10 @@ export const Whatsapp = (props) => {
     } else {
       errorMessage = variableErrorHandling(value, MESSAGE_TEXT);
     }
+    //we are not allowing user input incase of authentication flow 
+    if(isAuthenticationTemplate){
+      errorMessage = false;
+    }
     return errorMessage;
   };
 
@@ -1190,7 +1240,7 @@ export const Whatsapp = (props) => {
       }
       //campaigns edit flow + unsubscribeNotRequired
       return updatedSmsEditor.join('');
-    } else if (unsubscribeRequired) {
+    } else if (unsubscribeRequired && !isAuthenticationTemplate) {
       //creatives create and edit flow + unsubscribeRequired
       return `${templateMessage}\n${formatMessage(
         messages.modifiedUnsubscribeText,
@@ -1299,7 +1349,9 @@ export const Whatsapp = (props) => {
               },
               ...(isEditFlow && !isFullMode && {
                 isPreviewUrl: showUrlPreview
-              })
+              }),
+              securityRecommendation: unsubscribeRequired,
+              codeExpiryMinutes: expiryMinutes,
             },
           },
         },
@@ -1364,7 +1416,7 @@ export const Whatsapp = (props) => {
       return true;
     }
     //if template message is not entered
-    if (templateMessage.trim() === '' || templateMessageError) {
+    if (templateMessage?.trim() === '' || templateMessageError) {
       return true;
     }
     //if media type is image, video or document and the mediaType file is not uploaded
@@ -1391,6 +1443,9 @@ export const Whatsapp = (props) => {
       return true;
     }
 
+    if(isAuthenticationTemplate && securityWarningReqd && !expiryMinutes){
+      return true;
+    }
     if (isBtnTypeQuickReply) {
       return !quickReplyData.every((quickReply) => quickReply?.isSaved === true);    
     }
@@ -1399,14 +1454,15 @@ export const Whatsapp = (props) => {
 
   const renderMediaSection = () => (
     <>
-      {renderLabel('mediaLabel')}
-      <CapRadioGroup
-        id="whatsapp-media-radio"
-        options={mediaRadioOptions}
-        value={templateMediaType}
-        onChange={onTemplateMediaTypeChange}
-        className="whatsapp-media-radio"
-      />
+      {!isAuthenticationTemplate && <>{renderLabel('mediaLabel')}
+        <CapRadioGroup
+          id="whatsapp-media-radio"
+          options={mediaRadioOptions}
+          value={templateMediaType}
+          onChange={onTemplateMediaTypeChange}
+          className="whatsapp-media-radio"
+        />
+      </>}
     </>
   );
 
@@ -1471,7 +1527,7 @@ export const Whatsapp = (props) => {
       {renderMediaSection()}
       {renderMediaComponent()}
       {/* this section is for header section in create mode */}
-      {isMediaTypeText && isHostIsNotTwilio && (
+      {isMediaTypeText && isHostIsNotTwilio && !isAuthenticationTemplate && (
         <>
           <CapHeader
             title={
@@ -1548,16 +1604,22 @@ export const Whatsapp = (props) => {
           </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">
@@ -1574,6 +1636,7 @@ export const Whatsapp = (props) => {
             )
           }
           value={templateMessage || ""}
+          disabled={isAuthenticationTemplate}
         />
         {renderUnsubscribeText()}
       </CapRow>
@@ -1601,20 +1664,87 @@ export const Whatsapp = (props) => {
             }
           />
           <CapRow className="whatsapp-create-template-message-input whatsapp-create-template-header-input">
-            <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 || ""}
-            />
+            {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}
+              />
+            )}
           </CapRow>
           {renderMessageLength(FOOTER_TEXT)}
         </>
@@ -1959,10 +2089,17 @@ export const Whatsapp = (props) => {
             <CapLabel type="label15">
               {isBtnTypeCta
                 ? formatMessage(messages.btnTypeCTA)
-                : formatMessage(messages.btnTypeNone)}
+                : !isAuthenticationTemplate && formatMessage(messages.btnTypeNone)}
             </CapLabel>
           </>
         )}
+        {isAuthenticationTemplate && (
+          <CapLabel type="label15">
+            <CapWhatsappQuickReply
+              authenticationFlow={true}
+            />
+          </CapLabel>
+        )}
         {isBtnTypeCta && (
           <CapWhatsappCTA
             ctaData={ctaData}
@@ -1996,7 +2133,7 @@ export const Whatsapp = (props) => {
         <CapLabel type="label5">
           {isEditFlow ? updatedSmsEditor.join("") : templateMessage}
         </CapLabel>
-        {unsubscribeRequired && (
+        {unsubscribeRequired &&  !isAuthenticationTemplate  && (
           <CapLabel type="label5">
             {formatMessage(messages.templateMessageUnsubscribeText)}
           </CapLabel>
@@ -2039,6 +2176,9 @@ export const Whatsapp = (props) => {
           ...(isBtnTypeCta && {
             ctaData,
           }),
+          ...(isAuthenticationTemplate && {
+            ctaData : [{text: formatMessage(globalMessages.autofill), type: WHATSAPP_CATEGORIES.authentication}]
+          }),
           ...(isBtnTypeQuickReply && {
             quickReplyData,
           }),

package/v2Containers/Whatsapp/index.scss

@@ -204,4 +204,39 @@
     font-size: $FONT_SIZE_M;
     font-weight: $FONT_WEIGHT_MEDIUM;
   }
+  .whatsapp-extra-security-footer {
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    padding-left: $CAP_SPACE_16;
+    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;
+      border-radius: $CAP_SPACE_04 0px 0px 0px;
+      background: $CAP_PURPLE04;
+      align-items: center;
+      justify-content: space-between;
+
+      .add-btn {
+        display: flex;
+        background-color: inherit;
+        align-items: center;
+      }
+    }
+
+    .whatsapp-extra-security-footer-input {
+      display: inline-flex;
+      align-items: center;
+      gap: $CAP_SPACE_04;
+    }
+  }
+
+}
+.whatsapp-tooltip-header{
+  color: $CAP_G10;
 }

package/v2Containers/Whatsapp/messages.js

@@ -664,4 +664,56 @@ export default defineMessages({
     id: `${prefix}.showUrlPreview`,
     defaultMessage: 'Show URL preview',
   },
+  templateSecurityDisclaimer: {
+    id: `${prefix}.templateSecurityDisclaimer`,
+    defaultMessage: 'Add security disclaimer to your message',
+  },
+  expirationWarning: {
+    id: `${prefix}.expirationWarning`,
+    defaultMessage: 'Add expiry warning for code',
+  },
+  checkExpiryCode: {
+    id: `${prefix}.checkExpiryCode`,
+    defaultMessage: 'OTP settings',
+  },
+  expiryCodeNote:{
+    id: `${prefix}.expiryCodeNote`,
+    defaultMessage: 'We suggest using the same expiry time as specified in the OTP settings.',
+  },
+  codeExpiresIn:{
+    id: `${prefix}.codeExpiresIn`,
+    defaultMessage: 'This code expires in',
+  },
+  minutes:{
+    id: `${prefix}.minutes`,
+    defaultMessage: 'minutes',
+  },
+  codeExpiryNumMinutes:{
+    id: `${prefix}.codeExpiryNumMinutes`,
+    defaultMessage: 'This code expires in <num_minutes> minutes.',
+  },
+  authenticationMsg:{
+    id: `${prefix}.authenticationMsg`,
+    defaultMessage: "{{verification_code}} is your verification code.",
+  },
+  securitySuffix:{
+    id: `${prefix}.securitySuffix`,
+    defaultMessage: 'For your security, do not share this code.',
+  },
+  numMinutes:{
+    id: `${prefix}.numMinutes`,
+    defaultMessage: '<num_minutes>',
+  },
+  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',
+  },
 });

package/v2Containers/Whatsapp/styles.scss

@@ -69,4 +69,9 @@
 
 .whatsapp-list-view-divider {
   margin: 0;
+}
+
+.whatsapp-autofill-btn {
+  text-align: center;
+  margin-top: $CAP_SPACE_12;
 }