@capillarytech/creatives-library 7.12.38 → 7.12.39

package/package.json

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

package/v2Components/CapWhatsappCTA/messages.js

@@ -64,7 +64,7 @@ export default defineMessages({
   },
   ctaButtonTextTooltip: {
     id: `${prefix}.ctaButtonTextTooltip`,
-    defaultMessage: 'Needs to be updated',
+    defaultMessage: 'Use this to name the button. We would recommend not to use special characters for the button text.',
   },
   ctaOptionDisabledTooltip: {
     id: `${prefix}.ctaOptionDisabledTooltip`,

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -266,6 +266,7 @@
     margin: 8px 0;
   }
   .whatsapp-cta-preview{
+    font-family: 'Roboto';
     font-size: 10px;
     text-align: center;
   }

package/v2Containers/Whatsapp/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-boolean-value */
 /* eslint-disable camelcase */
 /* eslint-disable no-undef */
 import React, { useState, useEffect } from 'react';
@@ -21,6 +22,7 @@ import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
+import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
 import moment from 'moment';
 import {
   CAP_SPACE_04,
@@ -109,6 +111,7 @@ export const Whatsapp = (props) => {
   const [accessToken, setAccessToken] = useState('');
   const [accountName, setAccountName] = useState('');
   const [spin, setSpin] = useState(false);
+  const [unsubscribeRequired, setUnsubscribeRequired] = useState(false);
   //for edit only
   const [isEditFlow, setEditFlow] = useState(false);
   const [templateDate, setTemplateDate] = useState('');
@@ -519,23 +522,33 @@ export const Whatsapp = (props) => {
     </CapHeading>
   );
 
+  const unsubscribeHandler = ({ target: { checked } }) => {
+    setUnsubscribeRequired(checked);
+  };
+
   const renderUnsubscribeText = () => (
     <>
       <CapColumn span={12}>
-        <CapTooltip
-          placement="bottom"
-          title={!isEditFlow && formatMessage(messages.unsubscribeTextTooltip)}
+        <CapCheckbox
+          className={`whatsapp-create-unsubscribe-checkbox ${
+            isEditFlow ? '' : 'whatsapp-create-unsubscribe'
+          }`}
+          onChange={unsubscribeHandler}
+          checked={unsubscribeRequired}
+          disabled={isEditFlow}
+          autoFocus={true}
         >
-          <CapHeading
-            className={
-              !isEditFlow
-                ? 'whatsapp-create-render-unsubscribe-text'
-                : 'whatsapp-edit-render-unsubscribe-text'
+          <CapTooltip
+            placement="bottom"
+            title={
+              !isEditFlow && formatMessage(messages.unsubscribeTextTooltip)
             }
           >
-            {formatMessage(messages.templateMessageUnsubscribeText)}
-          </CapHeading>
-        </CapTooltip>
+            <span className="whatsapp-render-unsubscribe-text">
+              {formatMessage(messages.templateMessageUnsubscribeText)}
+            </span>
+          </CapTooltip>
+        </CapCheckbox>
       </CapColumn>
       <CapColumn span={12}></CapColumn>
     </>
@@ -1113,9 +1126,7 @@ export const Whatsapp = (props) => {
         placement="bottom"
         title={formatMessage(messages.disabledButtonsSection)}
       >
-        <CapRow>
-          {renderButtonsSection()}
-        </CapRow>
+        <CapRow>{renderButtonsSection()}</CapRow>
       </CapTooltip>
     </>
   );

package/v2Containers/Whatsapp/index.scss

@@ -10,13 +10,23 @@
     margin-bottom: 6px;
   }
 
-  .whatsapp-create-render-unsubscribe-text {
-    color: $FONT_COLOR_02;
+  .whatsapp-create-unsubscribe-checkbox {
+    .ant-checkbox-inner {
+      height: 16px;
+      width: 16px;
+    }
+  }
+
+  .whatsapp-create-unsubscribe {
     margin: $CAP_SPACE_08 0px $CAP_SPACE_08 16px;
   }
 
-  .whatsapp-edit-render-unsubscribe-text {
+  .whatsapp-render-unsubscribe-text {
     color: $FONT_COLOR_02;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 24px;
+    margin-left: -8px;
   }
 
   .whatsapp-render-message-length {