@capillarytech/creatives-library 7.12.15 → 7.12.16

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -22,6 +22,7 @@ import LineContainer from '../Line/Container';
 import FTP from '../FTP';
 import Viber from '../Viber';
 import Whatsapp from '../Whatsapp';
+import Rcs from '../Rcs';
 import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
 const CreativesWrapper = styled.div`
@@ -174,9 +175,11 @@ export function SlideBoxContent(props) {
 
 
   const isCreate = slidBoxContent === 'createTemplate';
+  const isEdit = slidBoxContent === 'editTemplate';
   const isCreateSms = isCreate && channel === constants.SMS;
   const isCreateFacebook = isCreate && channel === constants.FACEBOOK;
   const isCreateWhatsapp = isCreate && channel === constants.WHATSAPP;
+  const isCreateRcs = isCreate && channel === constants.RCS;
   const isCreateMPush = isCreate && channel === constants.MOBILE_PUSH;
   const isCreateCallTask = isCreate && channel === constants.CALL_TASK;
   let isEditSms = false;
@@ -190,32 +193,34 @@ export function SlideBoxContent(props) {
   let isEditFacebook = false;
   let isEditFTP = false;
   let isEditWhatsapp = false;
+  let isEditRcs = false;
   const isEmailCreate = isCreate && channel === constants.EMAIL;
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
-    isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
-    isEditCallTask = slidBoxContent === 'editTemplate' && channel === constants.CALL_TASK;
-    isEditMPush = slidBoxContent === 'editTemplate' && channel === constants.MOBILE_PUSH;
-    isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
-    isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
-    isEditFacebook = slidBoxContent === 'editTemplate' && channel === constants.FACEBOOK;
-    isEditWhatsapp = slidBoxContent === 'editTemplate' && channel === constants.WHATSAPP;
-    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE || channel === constants.VIBER || channel === constants.FACEBOOK || channel === constants.WHATSAPP);
+    isEditSms = isEdit && channel === constants.SMS;
+    isEditCallTask = isEdit && channel === constants.CALL_TASK;
+    isEditMPush = isEdit && channel === constants.MOBILE_PUSH;
+    isEditEmailWithId = isEdit && channel === constants.EMAIL && templateData._id;
+    isEmailEditWithContent = isEdit && channel === constants.EMAIL && !templateData._id;
+    isEditFacebook = isEdit && channel === constants.FACEBOOK;
+    isEditWhatsapp = isEdit && channel === constants.WHATSAPP;
+    isEditRcs = isEdit && channel === constants.RCS;
+    isPreview = slidBoxContent === 'preview' && [constants.SMS, constants.LINE, constants.WHATSAPP, constants.FACEBOOK, constants.VIBER, constants.RCS].includes(channel);
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
-    isEditFTP = slidBoxContent === 'editTemplate' && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
+    isEditFTP = isEdit && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
   }
+  const isDltEnabled = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
 
   const getChannelPreviewContent = (templateDataObject) => {
     switch (templateDataObject.type.toUpperCase()) {
       case constants.SMS: {
-        const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
         const updatedSmsEditor = get(
           templateDataObject,
           `versions.base['updated-sms-editor']`,
           '',
         );
-        if (!isTraiDlt || updatedSmsEditor === '') {
+        if (!isDltEnabled || updatedSmsEditor === '') {
           return get(templateDataObject, `versions.base['sms-editor']`);
         }
         return updatedSmsEditor.join('');
@@ -332,11 +337,32 @@ export function SlideBoxContent(props) {
           ...getWhatsappContent(templateDataObject, true),
         };
       }
+      case constants.RCS: {
+        const template = cloneDeep(templateDataObject);
+        const { description = "", media: { mediaUrl = "" } = {}, title = "" } = get(template, 'versions.base.content.RCS.cardContent[0]', {});
+        return {
+          rcsPreviewContent: {
+            rcsImageSrc: mediaUrl,
+            rcsTitle: title,
+            rcsDesc: description,
+          },
+        };
+      }
       default:
         return get(templateDataObject, `versions.base.content`);
     }
   };
 
+  const rcsCommonProps = {
+    isFullMode,
+    isDltEnabled,
+    smsRegister,
+    getDefaultTags: type,
+    onCreateComplete,
+    selectedOfferDetails,
+    getFormData,
+  };
+
   return (
     <CreativesWrapper>
       {!isFullMode && slidBoxContent === 'templates' && (
@@ -715,6 +741,27 @@ export function SlideBoxContent(props) {
         }}/>
       )}
 
+      {isCreateRcs && (<Rcs
+        {...rcsCommonProps}
+        location={{
+          pathname: `/rcs/create`,
+          query,
+          search: '',
+        }} />
+      )}
+      {isEditRcs && (<Rcs
+        {...rcsCommonProps}
+        templateData={templateData}
+        params={{
+          id: templateData._id,
+        }}
+        location={{
+          pathname: `/rcs/edit`,
+          query,
+          search: '',
+        }} />
+      )}
+
     </CreativesWrapper>
   );
 }

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -7,10 +7,10 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import messages from './messages';
 import whatsppMsg from '../Whatsapp/messages';
-import { LANGUAGE_OPTIONS } from '../Whatsapp/constants'
-import globalMessages from '../Cap/messages'
+import { LANGUAGE_OPTIONS } from '../Whatsapp/constants';
+import globalMessages from '../Cap/messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
-import { NO_COMMUNICATION, FTP, WHATSAPP } from '../App/constants';
+import { NO_COMMUNICATION, FTP, WHATSAPP, RCS } from '../App/constants';
 import { isTraiDLTEnable } from '../../utils/common';
 import { formatString } from '../../utils/Formatter';
 import {
@@ -37,6 +37,7 @@ export function SlideBoxHeader(props) {
   const mapTemplateCreate = !showTemplateNameHeader && slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   const showCreateTraiSMSHeader = isTraiDlt && channel.toLowerCase() === "sms";
+  const showTemplateName = [WHATSAPP, RCS].includes(channel.toLowerCase()) & slidBoxContent === 'editTemplate' & !isFullMode;
   const isWhatsappEdit = channel.toLowerCase() === WHATSAPP && slidBoxContent === 'editTemplate';
   const isWhatsappCreate = channel.toLowerCase() === WHATSAPP && slidBoxContent === 'createTemplate';
   const whatsappOverview = isWhatsappEdit && isFullMode;
@@ -46,7 +47,7 @@ export function SlideBoxHeader(props) {
     whatsappTemplateCategory,
     whatsappTemplateLanguageCode,
   } = templateData || {};
-  const whatsappName = whatsappTemplateName || templateData?.name;
+  const templateName = whatsappTemplateName || templateData?.name;
   const whatsappCategory = whatsappTemplateCategory || get(templateData, `versions.base.content.whatsapp.category`, '');
   const whatsappLanguageCode = whatsappTemplateLanguageCode || get(templateData, `versions.base.content.whatsapp.languages[0].language`, '');
 
@@ -59,13 +60,14 @@ export function SlideBoxHeader(props) {
       no_communication: 'NO_COMMUNICATION',
       ftp: 'FTP',
       whatsapp: <FormattedMessage {...messages.whatsappTemplate} />,
+      rcs: <FormattedMessage {...messages.rcsCreative} />,
     };
     return labels[currentChannel.toLowerCase()];
   };
 
   const openWhatsappHelpDoc = () => {
-    window.open(WHATSAPP_HELP_DOC_LINK, '_blank')
-  }
+    window.open(WHATSAPP_HELP_DOC_LINK, '_blank');
+  };
 
   return (
     <div key="creatives-container-slidebox-header-content">
@@ -92,28 +94,35 @@ export function SlideBoxHeader(props) {
           />
         )}
       {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (
-      <CapHeader
-        title={<FormattedMessage {...headerMessage} values={{channel: getChannelLabel(channel)}}/>}
+        <CapHeader
+          title={<FormattedMessage {...headerMessage} values={{ channel: getChannelLabel(channel) }} />}
           description={
-            isWhatsappEdit && (
-              <>
-                {renderWhatsappData("label1", <FormattedMessage {...globalMessages.templateNameLabel} />)}
-                {renderWhatsappData("label2", whatsappName)}
-                {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
-                {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.templateCategoryLabel} />)}
-                {renderWhatsappData("label2", formatString(whatsappCategory))}
-                {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
-                {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.languageLabel} />)}
-                {renderWhatsappData("label2", LANGUAGE_OPTIONS?.find(option => option.value === whatsappLanguageCode)?.label)}
-              </>)
+            <>
+              {showTemplateName ? (
+                <>
+                  {renderWhatsappData("label1", <FormattedMessage {...globalMessages.templateNameLabel} />)}
+                  {renderWhatsappData("label2", templateName)}
+                </>
+              ) : ""}
+              {isWhatsappEdit && (
+                <>
+                  {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
+                  {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.templateCategoryLabel} />)}
+                  {renderWhatsappData("label2", formatString(whatsappCategory))}
+                  {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
+                  {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.languageLabel} />)}
+                  {renderWhatsappData("label2", LANGUAGE_OPTIONS?.find((option) => option.value === whatsappLanguageCode)?.label)}
+                </>)
+              }
+            </>
           }
-        prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
-          <PrefixWrapper>
-            <CapIcons.backIcon onClick={onShowTemplates} />
-          </PrefixWrapper>
-            }
-          />
-        )}
+          prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
+            <PrefixWrapper>
+              <CapIcons.backIcon onClick={onShowTemplates} />
+            </PrefixWrapper>
+          }
+        />
+      )}
       {!showTemplateNameHeader && slidBoxContent === 'createTemplate' && ( templateStep === 'modeSelection' || (templateStep === "createTemplateContent" && weChatTemplateType !== MAP_TEMPLATE) ) && (
       <CapHeader
         title={<FormattedMessage {...(showCreateTraiSMSHeader ? messages.UploadSMStemplates : messages.createMessageContent)} values={{channel: getChannelLabel(channel)}}/>}
@@ -124,12 +133,12 @@ export function SlideBoxHeader(props) {
             }
           />
         )}
-        {isWhatsappCreate && (
-          <CapLink 
-            onClick={openWhatsappHelpDoc} 
-            title={<FormattedMessage {...messages.learnTips} />} 
-            suffix={<CapIcon type="open-in-new" size="s" />}
-            className="learn-tips-link"
+      {isWhatsappCreate && (
+      <CapLink
+        onClick={openWhatsappHelpDoc}
+        title={<FormattedMessage {...messages.learnTips} />}
+        suffix={<CapIcon type="open-in-new" size="s" />}
+        className="learn-tips-link"
           />
         )}
       {mapTemplateCreate && (

package/v2Containers/CreativesContainer/constants.js

@@ -17,6 +17,7 @@ export const FTP = "FTP";
 export const NO_COMMUNICATION = "NO_COMMUNICATION";
 export const VIBER = "VIBER";
 export const WHATSAPP = "WHATSAPP";
+export const RCS = "RCS";
 
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";

package/v2Containers/CreativesContainer/index.js

@@ -366,7 +366,7 @@ export class Creatives extends React.Component {
           break;
         }
         case constants.WHATSAPP: {
-          const { 
+          const {
             templateConfigs: {
               id,
               name,
@@ -403,6 +403,29 @@ export class Creatives extends React.Component {
           };
           break;
         }
+        case constants.RCS: {
+          const {
+            rcsContent = {},
+            smsFallBackContent = {},
+            creativeName = "",
+            channel = constants.RCS,
+          } = templateData || {};
+          creativesTemplateData = {
+            type: channel,
+            edit: true,
+            name: creativeName,
+            versions: {
+              base: {
+                content: {
+                  RCS: {
+                    ...rcsContent,
+                    smsFallBackContent,
+                  },
+                },
+              },
+            },
+          };
+        }
         default:
           break;
       }
@@ -615,6 +638,35 @@ export class Creatives extends React.Component {
         }
       }
         break;
+      case constants.RCS: {
+        if (template.value) {
+          const {name = "", versions = {}, type = ""} = {
+          } = template.value || {};
+          const {
+            cardContent = [],
+            cardSettings = {},
+            smsFallBackContent = {},
+            contentType = "",
+            cardType = "",
+          } = get(versions, 'base.content.RCS');
+          const rcsContent = {
+            contentType,
+            cardType,
+            cardSettings,
+            cardContent,
+          };
+          templateData = {
+            channel,
+            creativeName: name,
+            rcsContent,
+          };
+
+          if (smsFallBackContent.message) {
+            templateData.smsFallBackContent = smsFallBackContent;
+          }
+        }
+      }
+        break;
       default:
         break;
     }

package/v2Containers/CreativesContainer/messages.js

@@ -318,4 +318,8 @@ export default defineMessages({
     id: `${scope}.learnTips`,
     defaultMessage: `Learn tips to get approved`,
   },
+  "rcsCreative": {
+    id: `${scope}.rcsCreative`,
+    defaultMessage: `RCS creative`,
+  },
 });

package/v2Containers/CreativesContainer/tests/SlideBoxContent.test.js

@@ -4,7 +4,7 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 import { SlideBoxContent } from '../SlideBoxContent';
 import mockdata from '../../mockdata';
 
-const { editTemplateData, previewTemplateData } = mockdata;
+const { whatsappEditTemplateData, whatsappPreviewTemplateData, rcsEditTemplateData, rcsPreviewTemplateData } = mockdata;
 
 jest.mock("../../../v2Components/FormBuilder", () => ({
   __esModule: true,
@@ -31,14 +31,13 @@ describe('Test SlideBoxContent container', () => {
     expect(renderedComponent).toMatchSnapshot();
   });
 
-
   it('Should render correct component for whatsapp channel edit mode', () => {
-    renderFunction("WHATSAPP", "editTemplate", editTemplateData);
+    renderFunction("WHATSAPP", "editTemplate", whatsappEditTemplateData);
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render correct component for whatsapp channel preview mode', () => {
-    renderFunction("WHATSAPP", "preview", previewTemplateData);
+    renderFunction("WHATSAPP", "preview", whatsappPreviewTemplateData);
     expect(renderedComponent).toMatchSnapshot();
   });
 
@@ -46,4 +45,25 @@ describe('Test SlideBoxContent container', () => {
     renderFunction("WHATSAPP", "templates");
     expect(renderedComponent).toMatchSnapshot();
   });
+
+  it('Should render correct component for rcs channel create mode', () => {
+    renderFunction("RCS", "createTemplate", { mode: "create" });
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Should render correct component for rcs channel edit mode', () => {
+    renderFunction("RCs", "editTemplate", rcsEditTemplateData);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Should render correct component for rcs channel preview mode', () => {
+    renderFunction("RCS", "preview", rcsPreviewTemplateData);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Should render correct component for rcs channel templates mode', () => {
+    renderFunction("RCS", "templates");
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
 });

package/v2Containers/CreativesContainer/tests/SlideBoxHeader.test.js

@@ -4,7 +4,7 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 import { SlideBoxHeader } from '../SlideBoxHeader';
 import mockdata from '../../mockdata';
 
-const { editTemplateData, previewTemplateData } = mockdata;
+const { whatsappEditTemplateData, rcsEditTemplateData, whatsappPreviewTemplateData, rcsPreviewTemplateData } = mockdata;
 
 jest.mock("../../../v2Components/FormBuilder", () => ({
   __esModule: true,
@@ -32,14 +32,13 @@ describe('Test SlideBoxHeader container', () => {
     expect(renderedComponent).toMatchSnapshot();
   });
 
-
   it('Should render correct component for whatsapp channel edit mode', () => {
-    renderFunction("WHATSAPP", "editTemplate", editTemplateData, true);
+    renderFunction("WHATSAPP", "editTemplate", whatsappEditTemplateData, true);
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render correct component for whatsapp channel preview mode', () => {
-    renderFunction("WHATSAPP", "preview", previewTemplateData);
+    renderFunction("WHATSAPP", "preview", whatsappPreviewTemplateData);
     expect(renderedComponent).toMatchSnapshot();
   });
 
@@ -47,4 +46,24 @@ describe('Test SlideBoxHeader container', () => {
     renderFunction("WHATSAPP", "templates");
     expect(renderedComponent).toMatchSnapshot();
   });
+
+  it('Should render correct component for rcs channel create mode', () => {
+    renderFunction("RCS", "createTemplate", { mode: "create" });
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Should render correct component for rcs channel edit mode', () => {
+    renderFunction("RCS", "editTemplate", rcsEditTemplateData, true);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Should render correct component for rcs channel preview mode', () => {
+    renderFunction("RCS", "preview", rcsPreviewTemplateData);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('Should render correct component for rcs channel templates mode', () => {
+    renderFunction("RCS", "templates");
+    expect(renderedComponent).toMatchSnapshot();
+  });
 });

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap

@@ -1,5 +1,149 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Test SlideBoxContent container Should render correct component for rcs channel create mode 1`] = `
+<SlideBoxContent__CreativesWrapper>
+  <Connect(UserIsAuthenticated(Connect(InjectIntl(CreativesCommon))))
+    getDefaultTags=""
+    location={
+      Object {
+        "pathname": "/rcs/create",
+        "query": Object {
+          "isEditFromCampaigns": undefined,
+          "module": "library",
+          "type": "embedded",
+        },
+        "search": "",
+      }
+    }
+    onCreateComplete={[MockFunction]}
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
+exports[`Test SlideBoxContent container Should render correct component for rcs channel edit mode 1`] = `
+<SlideBoxContent__CreativesWrapper>
+  <Connect(UserIsAuthenticated(Connect(InjectIntl(CreativesCommon))))
+    getDefaultTags=""
+    location={
+      Object {
+        "pathname": "/rcs/edit",
+        "query": Object {
+          "isEditFromCampaigns": undefined,
+          "module": "library",
+          "type": "embedded",
+        },
+        "search": "",
+      }
+    }
+    onCreateComplete={[MockFunction]}
+    params={
+      Object {
+        "id": "620e213d39bd394c58aeaaca",
+      }
+    }
+    templateData={
+      Object {
+        "_id": "620e213d39bd394c58aeaaca",
+        "channel": "RCS",
+        "mode": "edit",
+        "modeType": "",
+        "type": "RCS",
+        "validity": true,
+      }
+    }
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
+exports[`Test SlideBoxContent container Should render correct component for rcs channel preview mode 1`] = `
+<SlideBoxContent__CreativesWrapper>
+  <InjectIntl(TemplatePreview)
+    channel="rcs"
+    charCounterEnabled={false}
+    content={
+      Object {
+        "rcsPreviewContent": Object {
+          "rcsDesc": "Desc",
+          "rcsImageSrc": "",
+          "rcsTitle": "title",
+        },
+      }
+    }
+    showCount={true}
+    templateData={
+      Object {
+        "_id": "620e213d39bd394c58aeaaca",
+        "createdAt": "2022-02-17T10:19:42.211Z",
+        "createdBy": "15000449",
+        "isActive": true,
+        "mode": "preview",
+        "name": "amit123456",
+        "orgId": 50371,
+        "totalCount": 12,
+        "type": "RCS",
+        "updatedAt": "2022-02-17T10:19:42.211Z",
+        "updatedBy": "15000449",
+        "updatedByName": "Ashish Karan fd",
+        "versions": Object {
+          "$init": true,
+          "base": Object {
+            "content": Object {
+              "RCS": Object {
+                "cardContent": Array [
+                  Object {
+                    "description": "Desc",
+                    "media": Object {
+                      "height": "MEDIUM",
+                      "mediaUrl": "",
+                    },
+                    "mediaType": "NONE",
+                    "title": "title",
+                  },
+                ],
+                "cardSettings": Object {
+                  "cardOrientation": "VERTICAL",
+                  "mediaAlignment": "RIGHT",
+                },
+                "cardType": "STANDALONE",
+                "contentType": "RICHCARD",
+                "smsFallBackContent": Object {
+                  "message": "123",
+                },
+              },
+            },
+          },
+          "history": Array [],
+        },
+      }
+    }
+    viberBrandName=""
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
+exports[`Test SlideBoxContent container Should render correct component for rcs channel templates mode 1`] = `
+<SlideBoxContent__CreativesWrapper>
+  <Connect(UserIsAuthenticated(Connect(InjectIntl(withStyles__StyledComponent))))
+    FTPMode="create"
+    channel="rcs"
+    location={
+      Object {
+        "pathname": "/sms/edit",
+        "query": Object {
+          "isEditFromCampaigns": undefined,
+          "module": "library",
+          "type": "embedded",
+        },
+        "search": "",
+      }
+    }
+    messageDetails={Object {}}
+    onCreateComplete={[MockFunction]}
+    slidBoxContent="templates"
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
 exports[`Test SlideBoxContent container Should render correct component for whatsapp channel create mode 1`] = `
 <SlideBoxContent__CreativesWrapper>
   <Connect(UserIsAuthenticated(Connect(InjectIntl(CreativesCommon))))
@@ -51,17 +195,18 @@ exports[`Test SlideBoxContent container Should render correct component for what
     charCounterEnabled={false}
     content={
       Object {
+        "charCount": 46,
         "templateMsg": <React.Fragment>
           <CapLabel
             type="label5"
           >
             1234567890
+
           </CapLabel>
           <CapLabel
             type="label11"
           >
-            
-Click {{unsubscribe}} to unsubscribe
+            Click {{unsubscribe}} to unsubscribe
           </CapLabel>
         </React.Fragment>,
       }