@capillarytech/creatives-library 7.17.137 → 7.17.139

package/package.json

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

package/v2Components/CapWhatsappQuickReply/index.js

@@ -13,6 +13,7 @@ import CapButton from "@capillarytech/cap-ui-library/CapButton";
 import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
 import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
 import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import CapInfoNote from "@capillarytech/cap-ui-library/CapInfoNote";
 import messages from "./messages";
 import "./index.scss";
 import globalMessages from "../../v2Containers/Cap/messages";
@@ -20,7 +21,7 @@ import { BUTTON_TEXT, INITIAL_QUICK_REPLY_DATA } from "../../v2Containers/Whatsa
 import ctaMessages from "../CapWhatsappCTA/messages";
 
 export const CapWhatsappQuickReply = (props) => {
-  const { quickReplyData = [], renderMessageLength, setQuickReplyData, isEditFlow, intl } = props;
+  const { quickReplyData = [], renderMessageLength, setQuickReplyData, isEditFlow, intl,authenticationFlow } = props;
   const { TextArea } = CapInput;
   const { formatMessage } = intl;
   const quickReplyDataLength = quickReplyData?.length;
@@ -77,7 +78,28 @@ export const CapWhatsappQuickReply = (props) => {
       }));
     });
   };
-
+  const quickReplyConfiguredBtn = ({ text, index, authenticationFlow = false }) => (
+    <CapRow className="cap-whatsapp-quick-reply">
+      <CapRow className="whatsapp-quick-reply-save-container">
+        {!authenticationFlow && <CapColumn>
+          <CapIcon type="six-dots" />
+        </CapColumn>}
+        <CapColumn className="text-container">{text}</CapColumn>
+        <CapColumn className={`quick-reply-icon ${authenticationFlow ? 'whatsapp-quick-reply-disabled-icons' : ''}`}>
+          <CapIcon
+            onClick={() => handleSaveAndEditBtn(index, false)}
+            type="edit"
+            aria-label="quick-reply-edit"
+          />
+          <CapIcon
+            onClick={() => handleDelete(index)}
+            type="delete"
+            aria-label="quick-reply-delete"
+          />
+        </CapColumn>
+      </CapRow>
+    </CapRow>
+  )
   const addQuickReply = () => {
     const cloneInitialQuickReplyData = cloneDeep(INITIAL_QUICK_REPLY_DATA);
     cloneInitialQuickReplyData[0].index = quickReplyDataLength || 0;
@@ -92,6 +114,12 @@ export const CapWhatsappQuickReply = (props) => {
     quickReplyDataLength === 1 && !quickReplyData?.[0]?.isSaved;
   return (
     <>
+      {authenticationFlow ? 
+        <>
+          {quickReplyConfiguredBtn({ text: formatMessage(globalMessages.autofill), index: '0', authenticationFlow: true })}
+          <CapInfoNote className="margin-l-26" message={formatMessage(messages.autofillInfo)}/>
+        </> :
+        <>
       {quickReplyDataLength > 0 && !isEditFlow && (
         <CapRow>
           {quickReplyData?.map(({ index, isSaved, text, error }) => {
@@ -174,26 +202,7 @@ export const CapWhatsappQuickReply = (props) => {
             }
             return (
                 //this section render when data is saved and user can edit it
-              <CapRow className="cap-whatsapp-quick-reply">
-                <CapRow className="whatsapp-quick-reply-save-container">
-                  <CapColumn>
-                    <CapIcon type="six-dots" />
-                  </CapColumn>
-                    <CapColumn className="text-conatiner">{text}</CapColumn>
-                      <CapColumn className="quick-reply-icon">
-                        <CapIcon
-                          onClick={() => handleSaveAndEditBtn(index, false)}
-                          type="edit"
-                          data-testid="quick-reply-edit"
-                      />
-                        <CapIcon
-                          onClick={() => handleDelete(index)}
-                          type="delete"
-                          data-testid="quick-reply-delete"
-                      />
-                      </CapColumn>
-                </CapRow>
-              </CapRow>
+                quickReplyConfiguredBtn({text,index})
               );
           })}
         </CapRow>
@@ -229,7 +238,7 @@ export const CapWhatsappQuickReply = (props) => {
             </div>
           </CapTooltip>
         </CapRow>
-      )}
+      )}</>}
     </>
   );
 };
@@ -240,6 +249,7 @@ CapWhatsappQuickReply.propTypes = {
   setQuickReplyData: PropTypes.func,
   isEditFlow: PropTypes.func,
   intl: intlShape.isRequired,
+  authenticationFlow : PropTypes.bool,
 };
 
 export default injectIntl(CapWhatsappQuickReply);

package/v2Components/CapWhatsappQuickReply/index.scss

@@ -24,7 +24,7 @@
         display: flex;
         align-items: center;
         padding: $CAP_SPACE_08 $CAP_SPACE_12;
-        .text-conatiner {
+        .text-container {
             padding-left: $CAP_SPACE_12;
         }
         .quick-reply-icon {
@@ -35,6 +35,9 @@
     .whatsapp-button-text-tooltip {
         margin-left: $CAP_SPACE_04;
     }
+    .whatsapp-quick-reply-disabled-icons{
+        color: $FONT_COLOR_04;
+    }
 }
 
 .whatsapp-quick-reply-edit-container {

package/v2Components/CapWhatsappQuickReply/messages.js

@@ -25,4 +25,8 @@ export default defineMessages({
     id: `${prefix}.buttonTextTooltip`,
     defaultMessage: 'Use this to name the button. We would recommend not to use special characters for the button text.'
   },
+  autofillInfo:{
+    id: `${prefix}.autofillInfo`,
+    defaultMessage: 'One-tap autofill buttons are only supported on Android. If you send an authentication template to a WhatsApp user who is using a non-Android device, the WhatsApp client will display a copy code button instead.'
+  }
 });

package/v2Components/Ckeditor/index.js

@@ -15,10 +15,10 @@ import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import './style.scss';
 // import messages from './messages';
 const loadScript = require('load-script');
-// const defaultScriptUrl = `${window.location.origin}/arya/ui/library/ckeditor/ckeditor.js`;
-const defaultScriptUrl = 'https://nightly.intouch.capillarytech.com/arya/ui/library/ckeditor/ckeditor.js';
-// **Uncomment the above line to use CKEDITOR in local
-// */
+const defaultScriptUrl = `${window.location.origin}/arya/ui/library/ckeditor/ckeditor.js`;
+/*const defaultScriptUrl = 'https://nightly.intouch.capillarytech.com/arya/ui/library/ckeditor/ckeditor.js';
+**Uncomment the above line to use CKEDITOR in local
+*/
 const user = localStorage.getItem('user');
 let locale = 'en';
 if (user && JSON.parse(user).lang) {
@@ -173,7 +173,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
       // setTimeout(() => {
       //   this.editorInstance.name = this.id;
       // }, 5000);
-
+      
     }
   }
 
@@ -219,7 +219,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
 
     let html = this.props.content;
     html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"");
-
+    
     this.editorInstance = window.CKEDITOR.appendTo(
       this.node,
       this.state.config,

package/v2Containers/Cap/messages.js

@@ -205,5 +205,9 @@ export default defineMessages({
     id: 'creatives.componentsV2.copyOf',
     defaultMessage: 'Copy of',
   },
+  autofill:{
+    id: 'creatives.componentsV2.autofill',
+    defaultMessage: 'Autofill',
+  },
 });
 

package/v2Containers/EmailWrapper/index.js

@@ -103,9 +103,8 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
   }
   onTemplateNameChange = ({target: {value}}) => {
     const {onEnterTemplateName, onRemoveTemplateName} = this.props;
-    this.setState({ templateName: value });
-    const isEmptyTemplateName = value?.trim()?.length === 0;
-    this.setState({isTemplateNameEmpty: isEmptyTemplateName});
+    const isEmptyTemplateName = !value?.trim();
+    this.setState({templateName: value, isTemplateNameEmpty: isEmptyTemplateName});
     if (value && onEnterTemplateName) {
       onEnterTemplateName();
     } else if (onRemoveTemplateName) {

package/v2Containers/Templates/index.js

@@ -111,7 +111,7 @@ import {
 } from '../Whatsapp/constants';
 import { INAPP_LAYOUT_DETAILS } from '../InApp/constants';
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
-import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply } from '../Whatsapp/utils';
+import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply, getWhatsappAutoFill } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
 import zaloMessages from '../Zalo/messages';
 import globalMessages from '../../v2Containers/Cap/messages';
@@ -1308,6 +1308,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </span>
               {getWhatsappCta(template)}
               {getWhatsappQuickReply(template)}
+              {getWhatsappAutoFill(template)}
             </>
           );
           break;

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -1447,6 +1447,7 @@ Click {{unsubscribe}} to unsubscribe
                             />
                             Visit
                           </CapLabel>
+                          <React.Fragment />
                         </React.Fragment>,
                         "extra": Array [
                           <CapTooltip
@@ -1891,6 +1892,7 @@ Click {{unsubscribe}} to unsubscribe
                             />
                             Visit
                           </CapLabel>
+                          <React.Fragment />
                         </React.Fragment>,
                         "extra": Array [
                           <CapTooltip
@@ -2335,6 +2337,7 @@ Click {{unsubscribe}} to unsubscribe
                             />
                             Visit
                           </CapLabel>
+                          <React.Fragment />
                         </React.Fragment>,
                         "extra": Array [
                           <CapTooltip

package/v2Containers/Whatsapp/constants.js

@@ -526,3 +526,5 @@ export const LANGUAGE_OPTIONS = [
     label: <FormattedMessage {...messages.zulu} />,
   },
 ];
+
+export const OTP_CONFIG_URI = "/org/setup/configurations/OTPConfigurations";

package/v2Containers/Whatsapp/index.js

@@ -5,7 +5,7 @@ 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';
@@ -25,7 +25,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 +75,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 +151,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 +410,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 +705,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 +836,41 @@ 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 previewUrlHandler = ({ target: { checked } }) => {
-    setShowUrlPreview(checked);
+  const extraSecurityFooter = ({ target: { checked = false } } = {}) => {
+    setSecurityWarningReqd(checked);
+    setExpiryMinutes(0);
+    setTemplateFooter('');
+    const error = templateMessageErrorHandler(templateMessage);
+    setTemplateMessageError(error);
+  };
+
+  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,16 +895,43 @@ export const Whatsapp = (props) => {
               }
             >
               <span className="whatsapp-render-unsubscribe-text">
-                {formatMessage(messages.templateMessageUnsubscribeText, { unsubscribe: '{{unsubscribe}}'})}
+                {messageFooter}
               </span>
             </CapTooltip>
           </CapCheckbox>
         </CapColumn>
-        <CapColumn span={12}></CapColumn>
       </>
     );
   };
-
+  
+  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:
@@ -897,21 +953,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 +1112,14 @@ export const Whatsapp = (props) => {
   };
 
   const onTemplateCategoryChange = (value) => {
+    if (value === WHATSAPP_CATEGORIES.authentication) {
+      setTemplateHeader('');
+      setTemplateFooter('');
+      setUnsubscribeRequired(false);
+      setTemplateMessage(formatMessage(messages.authenticationMsg));
+    } else {
+      setTemplateMessage('');
+    }
     setTemplateCategory(value);
   };
 
@@ -1127,6 +1195,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 +1262,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 +1371,9 @@ export const Whatsapp = (props) => {
               },
               ...(isEditFlow && !isFullMode && {
                 isPreviewUrl: showUrlPreview
-              })
+              }),
+              securityRecommendation: unsubscribeRequired,
+              codeExpiryMinutes: expiryMinutes,
             },
           },
         },
@@ -1364,7 +1438,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 +1465,9 @@ export const Whatsapp = (props) => {
       return true;
     }
 
+    if(isAuthenticationTemplate && securityWarningReqd && !expiryMinutes){
+      return true;
+    }
     if (isBtnTypeQuickReply) {
       return !quickReplyData.every((quickReply) => quickReply?.isSaved === true);    
     }
@@ -1399,14 +1476,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 +1549,7 @@ export const Whatsapp = (props) => {
       {renderMediaSection()}
       {renderMediaComponent()}
       {/* this section is for header section in create mode */}
-      {isMediaTypeText && isHostIsNotTwilio && (
+      {isMediaTypeText && isHostIsNotTwilio && !isAuthenticationTemplate && (
         <>
           <CapHeader
             title={
@@ -1574,8 +1652,9 @@ export const Whatsapp = (props) => {
             )
           }
           value={templateMessage || ""}
+          disabled={isAuthenticationTemplate}
         />
-        {renderUnsubscribeText()}
+        {isAuthenticationTemplate ? renderExtraSecurityText() : renderUnsubscribeText()}
       </CapRow>
       {renderMessageLength(MESSAGE_TEXT)}
       {/* this section if for footer in create mode */}
@@ -1601,6 +1680,36 @@ export const Whatsapp = (props) => {
             }
           />
           <CapRow className="whatsapp-create-template-message-input whatsapp-create-template-header-input">
+            {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 }}
@@ -1614,7 +1723,9 @@ export const Whatsapp = (props) => {
                 )
               }
               value={templateFooter || ""}
+              disabled={isAuthenticationTemplate}
             />
+            }
           </CapRow>
           {renderMessageLength(FOOTER_TEXT)}
         </>
@@ -1959,10 +2070,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 +2114,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 +2157,9 @@ export const Whatsapp = (props) => {
           ...(isBtnTypeCta && {
             ctaData,
           }),
+          ...(isAuthenticationTemplate && {
+            ctaData : [{text: formatMessage(globalMessages.autofill)}]
+          }),
           ...(isBtnTypeQuickReply && {
             quickReplyData,
           }),

package/v2Containers/Whatsapp/index.scss

@@ -204,4 +204,37 @@
     font-size: $FONT_SIZE_M;
     font-weight: $FONT_WEIGHT_MEDIUM;
   }
+  .whatsapp-extra-security-footer {
+    margin-bottom: $CAP_SPACE_04;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    padding-left: $CAP_SPACE_16;
+    gap: $CAP_SPACE_08;
+
+    .whatsapp-extra-security-footer-note {
+      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;
+      margin-right: $CAP_SPACE_12;
+
+      .add-btn {
+        background-color: inherit;
+      }
+    }
+
+    .whatsapp-extra-security-footer-input {
+      display: inline-flex;
+      align-items: center;
+      gap: $CAP_SPACE_04;
+    }
+
+    .whatsapp-extra-security-footer-checkbox {
+      margin-right: auto;
+    }
+  }
 }