@capillarytech/creatives-library 7.17.138 → 7.17.140

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.138",
+  "version": "7.17.140",
   "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/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 } from '../../v2Containers/Whatsapp/constants';
+import { QUICK_REPLY, WHATSAPP_CATEGORIES } 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">
-                <CapIcon
+                {type !== WHATSAPP_CATEGORIES.authentication && <CapIcon
                   type={
                     (ctaType || type) === 'PHONE_NUMBER' ? 'call' : 'launch'
                   }
                   size="xs"
-                />
+                />}
                 {text}
               </CapLabel>,
             );

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/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";