@capillarytech/creatives-library 7.12.66 → 7.12.68

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Test SlideBoxContent container Should render correct component for rcs channel create mode 1`] = `
+exports[`Test SlideBoxContent container campaign message, add creative click rcs 1`] = `
 <CreativesContainer__SlideBoxWrapper
   className="add-creatives-section creatives-library-mode "
 >
@@ -71,7 +71,7 @@ exports[`Test SlideBoxContent container Should render correct component for rcs
 </CreativesContainer__SlideBoxWrapper>
 `;
 
-exports[`Test SlideBoxContent container Should render correct component for whatsapp channel create mode 1`] = `
+exports[`Test SlideBoxContent container campaign message, add creative click whatsapp 1`] = `
 <CreativesContainer__SlideBoxWrapper
   className="add-creatives-section creatives-library-mode "
 >
@@ -142,7 +142,80 @@ exports[`Test SlideBoxContent container Should render correct component for what
 </CreativesContainer__SlideBoxWrapper>
 `;
 
-exports[`Test SlideBoxContent container Should render correct component for whatsapp channel edit mode 1`] = `
+exports[`Test SlideBoxContent container campaign message, whatsapp edit all data 1`] = `
+<CreativesContainer__SlideBoxWrapper
+  className="add-creatives-section creatives-library-mode "
+>
+  <CapSlideBox
+    closeIconSize="m"
+    content={
+      <SlideBoxContent
+        currentChannel="WHATSAPP"
+        getFormData={[Function]}
+        handleClose={[Function]}
+        onCallTaskSubmit={[Function]}
+        onChannelChange={[Function]}
+        onCreateComplete={[MockFunction]}
+        onCreateNew={[Function]}
+        onCreateNextStep={[Function]}
+        onEmailModeChange={[Function]}
+        onEnterTemplateName={[Function]}
+        onFTPSubmit={[MockFunction]}
+        onFacebookSubmit={[MockFunction]}
+        onMobilepushModeChange={[Function]}
+        onPreviewTemplate={[Function]}
+        onRemoveTemplateName={[Function]}
+        onResetStep={[Function]}
+        onSelectTemplate={[Function]}
+        onShowTemplates={[Function]}
+        onValidationFail={[Function]}
+        onWeChatMaptemplateStepChange={[Function]}
+        onWechatTemplateChange={[Function]}
+        saveMessage={[Function]}
+        setIsLoadingContent={[Function]}
+        showTemplateName={[Function]}
+        slidBoxContent="editTemplate"
+        templateStep="modeSelection"
+        weChatMaptemplateStep={0}
+        weChatTemplateType=""
+      />
+    }
+    footer={
+      <SlideBoxFooter
+        currentChannel="WHATSAPP"
+        onCreateNextStep={[Function]}
+        onDiscard={[Function]}
+        onEditTemplate={[Function]}
+        onSave={[Function]}
+        shouldShowContinueFooter={[Function]}
+        shouldShowDoneFooter={[Function]}
+        slidBoxContent="editTemplate"
+        templateStep="modeSelection"
+      />
+    }
+    handleClose={[Function]}
+    header={
+      <SlideBoxHeader
+        channel="WHATSAPP"
+        isLoadingContent={true}
+        onShowTemplates={[Function]}
+        onWeChatMaptemplateStepChange={[Function]}
+        showPrefix={true}
+        slidBoxContent="editTemplate"
+        templateNameRenderProp={[Function]}
+        templateStep="modeSelection"
+        weChatMaptemplateStep={0}
+        weChatTemplateType=""
+      />
+    }
+    position="right"
+    show={false}
+    size="size-xl"
+  />
+</CreativesContainer__SlideBoxWrapper>
+`;
+
+exports[`Test SlideBoxContent container campaign message, whatsapp edit min data 1`] = `
 <CreativesContainer__SlideBoxWrapper
   className="add-creatives-section creatives-library-mode "
 >

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

@@ -6,11 +6,12 @@ import mockdata from '../../mockdata';
 
 const {
   whatsappTemplates,
+  whatsappGetCreativeData1,
+  whatsappGetCreativeData2,
+  whatsappGetTemplateData1,
+  whatsappGetTemplateData2,
   rcsTemplates,
-  whatsappGetCreativeData,
-  whatsappGetTemplateData,
   rcsEditTemplateData,
-  whatsappGetCreativeData2,
 } = mockdata;
 
 jest.mock('../../../v2Components/FormBuilder', () => ({
@@ -44,19 +45,33 @@ describe('Test SlideBoxContent container', () => {
     );
   };
 
-  it('Should render correct component for whatsapp channel create mode', () => {
+  it('campaign message, add creative click whatsapp', () => {
     renderFunction('WHATSAPP', 'createTemplate', whatsappTemplates, {
       mode: 'create',
     });
     expect(renderedComponent).toMatchSnapshot();
   });
 
-  it('Should render correct component for whatsapp channel edit mode', () => {
+  it('campaign message, whatsapp edit min data', () => {
+    renderFunction(
+      'WHATSAPP',
+      'editTemplate',
+      whatsappTemplates,
+      whatsappGetTemplateData1,
+    );
+    renderedComponent.instance().onEditTemplate();
+    renderedComponent.find('CapSlideBox').props().content.props.handleClose();
+    expect(renderedComponent).toMatchSnapshot();
+    expect(handleCloseCreatives).toHaveBeenCalledTimes(1);
+    expect(handleCloseCreatives).toHaveBeenCalledWith(true);
+  });
+
+  it('campaign message, whatsapp edit all data', () => {
     renderFunction(
       'WHATSAPP',
       'editTemplate',
       whatsappTemplates,
-      whatsappGetTemplateData,
+      whatsappGetTemplateData2,
     );
     renderedComponent.instance().onEditTemplate();
     renderedComponent.find('CapSlideBox').props().content.props.handleClose();
@@ -65,19 +80,18 @@ describe('Test SlideBoxContent container', () => {
     expect(handleCloseCreatives).toHaveBeenCalledWith(true);
   });
 
-  it('Text getCreatives data for whatsapp', () => {
-    console.log('abcRcb');
+  it('Text getCreatives data for whatsapp, data from creatives done to campaigns', () => {
     renderFunction(
       'WHATSAPP',
       'editTemplate',
       whatsappTemplates,
-      whatsappGetCreativeData,
+      whatsappGetCreativeData1,
     );
     renderedComponent.instance().onEditTemplate();
     renderedComponent
       .find('CapSlideBox')
       .props()
-      .content.props.getFormData(whatsappGetCreativeData);
+      .content.props.getFormData(whatsappGetCreativeData1);
     renderedComponent
       .find('CapSlideBox')
       .props()
@@ -85,12 +99,12 @@ describe('Test SlideBoxContent container', () => {
     expect(getCreativesData).toHaveBeenCalledTimes(2);
   });
 
-  it('Should render correct component for rcs channel create mode', () => {
+  it('campaign message, add creative click rcs', () => {
     renderFunction('RCS', 'createTemplate', rcsTemplates, { mode: 'create' });
     expect(renderedComponent).toMatchSnapshot();
   });
 
-  it('Text getCreatives data for rcs', () => {
+  it('Text getCreatives data for rcs, data from creatives done to campaigns', () => {
     renderFunction('RCS', 'editTemplate', rcsTemplates, rcsEditTemplateData);
     renderedComponent.instance().onEditTemplate();
     renderedComponent

package/v2Containers/Templates/_templates.scss

@@ -592,4 +592,24 @@
   width: 100%;
   max-height: 123px;
   margin-bottom: 4px;
+}
+.whatsapp-rcs-template-name {
+  max-width: 170px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.whatsapp-message-with-image {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.whatsapp-message-without-image {
+  display: -webkit-box;
+  -webkit-line-clamp: 10;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }

package/v2Containers/Templates/index.js

@@ -1069,22 +1069,32 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case WHATSAPP: {
           const { whatsappImageSrc = '', templateMsg} = getWhatsappContent(template);
           templateData.title = (
-            <CapRow className="whatsapp-card-title">
-              <CapLabel>{template.name}</CapLabel>
+            <CapRow>
+              <CapLabel className="whatsapp-rcs-template-name">{template.name}</CapLabel>
               <WhatsappStatusContainer template={template} />
             </CapRow>
           );
           templateData.content = (
             <>
-              {whatsappImageSrc && <CapImage src={whatsappImageSrc} className="whatsapp-image" />}
-              {templateMsg}
+              {whatsappImageSrc && (
+                <CapImage src={whatsappImageSrc} className="whatsapp-image" />
+              )}
+              <span
+                className={`${
+                  whatsappImageSrc
+                    ? 'whatsapp-message-with-image'
+                    : 'whatsapp-message-without-image'
+                }`}
+              >
+                {templateMsg}
+              </span>
               {getWhatsappCta(template)}
             </>
           );
           break;
         }
         case RCS: {
-          templateData.title = template.name;
+          templateData.title = <CapLabel className="whatsapp-rcs-template-name">{template.name}</CapLabel>;
           templateData.content = getRCSContent(template);
           break;
         }

package/v2Containers/Templates/sagas.js

@@ -157,7 +157,7 @@ export function* getSenderDetails({
     if (!apiResponse?.errors?.length) {
       yield put({
         type: types.GET_SENDER_DETAILS_SUCCESS,
-        payload: apiResponse.entity.WHATSAPP[0].domainProperties.hostName,
+        payload: apiResponse?.entity?.WHATSAPP[0]?.domainProperties?.hostName || '',
       });
     } else {
       yield put({

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

@@ -13,250 +13,15 @@ exports[`Test Templates container Should render correct component for whatsapp c
 `;
 
 exports[`Test Templates container Should render illustration when no templates are passed 1`] = `
-<Fragment>
-  <div
-    className="creatives-templates-list library-mode"
-  >
-    <input
-      accept=".zip, .html, .htm"
-      id="filename"
-      onChange={[Function]}
-      style={
-        Object {
-          "display": "none",
-        }
-      }
-      type="file"
-    />
-    <CapRow>
-      <Pagination
-        onPageChange={[Function]}
-        paginationContainer="pagination-container"
-        paginationSelector="pagination-container"
-      >
-        <div>
-          <div
-            className="action-container"
-          >
-            <_class
-              className="search-text"
-              disabled={false}
-              labelPosition="top"
-              onChange={[Function]}
-              onClear={[Function]}
-              onScroll={[Function]}
-              placeholder="Search"
-              style={
-                Object {
-                  "width": "210px",
-                }
-              }
-              value=""
-            />
-            <div
-              className="whatsapp-filters"
-            >
-              <CapSelectFilter
-                data={
-                  Array [
-                    Object {
-                      "key": "transactional",
-                      "label": <FormattedMessage
-                        defaultMessage="Transactional"
-                        id="creatives.containersV2.Whatsapp.transactional"
-                        values={Object {}}
-                      />,
-                      "tagColor": "#f2e7fe",
-                      "tagTextColor": "#a451ff",
-                      "tooltipLabel": <FormattedMessage
-                        defaultMessage="Send account updates, order updates, alerts, and more to share important information."
-                        id="creatives.containersV2.Whatsapp.transactionalTooltip"
-                        values={Object {}}
-                      />,
-                      "value": "TRANSACTIONAL",
-                    },
-                    Object {
-                      "key": "marketing",
-                      "label": <FormattedMessage
-                        defaultMessage="Marketing"
-                        id="creatives.containersV2.Whatsapp.marketing"
-                        values={Object {}}
-                      />,
-                      "tagColor": "#ffe5d2",
-                      "tagTextColor": "#f87d23",
-                      "tooltipLabel": <FormattedMessage
-                        defaultMessage="Send promotional offers, product announcements, and more to increase awareness and engagement."
-                        id="creatives.containersV2.Whatsapp.marketingTooltip"
-                        values={Object {}}
-                      />,
-                      "value": "MARKETING",
-                    },
-                    Object {
-                      "key": "otp",
-                      "label": <FormattedMessage
-                        defaultMessage="Otp"
-                        id="creatives.containersV2.Whatsapp.otp"
-                        values={Object {}}
-                      />,
-                      "tagColor": "#ecf7ec",
-                      "tagTextColor": "#6bb56b",
-                      "tooltipLabel": <FormattedMessage
-                        defaultMessage="Send codes that allow your customers to securely access their accounts."
-                        id="creatives.containersV2.Whatsapp.otpTooltip"
-                        values={Object {}}
-                      />,
-                      "value": "OTP",
-                    },
-                  ]
-                }
-                dropdownMaxHeight="320px"
-                dropdownWidth="228px"
-                onSelect={[Function]}
-                overlayStyle={
-                  Object {
-                    "overflowY": "hidden",
-                  }
-                }
-                placeholder="Category"
-                placement="bottomLeft"
-                selectedValue=""
-                showBadge={true}
-                width="105px"
-              />
-            </div>
-            <Component />
-            <Component />
-            <div
-              style={
-                Object {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "justifyContent": "space-between",
-                }
-              }
-            >
-              <CapLink
-                className="create-new-link"
-                disabled={false}
-                onClick={[Function]}
-                suffix={
-                  <CapIcon
-                    size="s"
-                    type="open-in-new"
-                  />
-                }
-                title="Create new template"
-              />
-            </div>
-          </div>
-          <CapRow
-            align="middle"
-            className="selected-whatsapp-filters"
-            type="flex"
-          />
-          <CapSpin
-            spinning={false}
-            style={
-              Object {
-                "width": "100%",
-              }
-            }
-            tip="Getting all templates..."
-          >
-            <div>
-              <div
-                style={
-                  Object {
-                    "height": "calc(100vh - 325px)",
-                    "overflow": "auto",
-                  }
-                }
-              >
-                <Wrapper
-                  buttonClassName="create-new-whatsapp"
-                  buttonLabel={
-                    <FormattedMessage
-                      defaultMessage="Add new Whatsapp {template}"
-                      id="creatives.containersV2.Templates.newWhatsappTemplate"
-                      values={
-                        Object {
-                          "template": "",
-                        }
-                      }
-                    />
-                  }
-                  description={
-                    <FormattedMessage
-                      defaultMessage="These templates can be reused when creating a
-new message content."
-                      id="creatives.containersV2.Templates.whatsappDescIllustration"
-                      values={Object {}}
-                    />
-                  }
-                  descriptionClassName="illustration-desc"
-                  descriptionPosition="bottom"
-                  illustrationImage="test-file-stub"
-                  onClick={[Function]}
-                  title={
-                    <FormattedMessage
-                      defaultMessage="Add a new Whatsapp creative {template}"
-                      id="creatives.containersV2.Templates.whatsappTitleIllustration"
-                      values={
-                        Object {
-                          "template": "",
-                        }
-                      }
-                    />
-                  }
-                />
-              </div>
-            </div>
-          </CapSpin>
-        </div>
-      </Pagination>
-    </CapRow>
-    <CapRow />
-    <CapRow>
-      <CapSlideBox
-        closeIconSize="m"
-        content={
-          <CardGrid
-            className=""
-            colNumber={2}
-            gutterSize={16}
-            isLoading={false}
-            listItem={Array []}
-            onHoverItem={[Function]}
-            onItemClick={[Function]}
-          />
-        }
-        handleClose={[Function]}
-        header={
-          <h3>
-            Select layout
-          </h3>
-        }
-        loadingText="Loading EDM Templates"
-        position="right"
-        show={false}
-        size="size-r"
-        width={60}
-      />
-      <Wrapper
-        centered={true}
-        className="delete-template-confirm"
-        closeText="Cancel"
-        okText="Yes, delete"
-        onCancel={[Function]}
-        onOk={[Function]}
-        title="Confirm delete template"
-        visible={false}
-      >
-        Are you sure you wish to delete this template?
-      </Wrapper>
-    </CapRow>
-  </div>
-</Fragment>
+<CapSpin
+  spinning={false}
+>
+  <FormattedMessage
+    defaultMessage="Whatsapp accounts are not setup for your brand"
+    id="creatives.containersV2.Templates.noAccountsPresentWhatsapp"
+    values={Object {}}
+  />
+</CapSpin>
 `;
 
 exports[`Test Templates container Should render temlates when whatsapp templates are passed 1`] = `
@@ -1021,12 +786,16 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                             className="whatsapp-image"
                             src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
                           />
-                          <CapLabel
-                            type="label9"
+                          <span
+                            className="whatsapp-message-with-image"
                           >
-                            Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
+                            <CapLabel
+                              type="label9"
+                            >
+                              Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
 Click {{unsubscribe}} to unsubscribe
-                          </CapLabel>
+                            </CapLabel>
+                          </span>
                           <CapLabel
                             style={
                               Object {
@@ -1113,10 +882,9 @@ Click {{unsubscribe}} to unsubscribe
                           Overview
                         </CapButton>,
                         "key": "WHATSAPP-card-creatives_whatsapp6",
-                        "title": <CapRow
-                          className="whatsapp-card-title"
-                        >
+                        "title": <CapRow>
                           <CapLabel
+                            className="whatsapp-rcs-template-name"
                             type="label1"
                           >
                             creatives_whatsapp6
@@ -1452,12 +1220,16 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                             className="whatsapp-image"
                             src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
                           />
-                          <CapLabel
-                            type="label9"
+                          <span
+                            className="whatsapp-message-with-image"
                           >
-                            Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
+                            <CapLabel
+                              type="label9"
+                            >
+                              Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
 Click {{unsubscribe}} to unsubscribe
-                          </CapLabel>
+                            </CapLabel>
+                          </span>
                           <CapLabel
                             style={
                               Object {
@@ -1544,10 +1316,9 @@ Click {{unsubscribe}} to unsubscribe
                           Overview
                         </CapButton>,
                         "key": "WHATSAPP-card-creatives_whatsapp6",
-                        "title": <CapRow
-                          className="whatsapp-card-title"
-                        >
+                        "title": <CapRow>
                           <CapLabel
+                            className="whatsapp-rcs-template-name"
                             type="label1"
                           >
                             creatives_whatsapp6
@@ -1883,12 +1654,16 @@ exports[`Test Templates container Test max templates warning 1`] = `
                             className="whatsapp-image"
                             src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
                           />
-                          <CapLabel
-                            type="label9"
+                          <span
+                            className="whatsapp-message-with-image"
                           >
-                            Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
+                            <CapLabel
+                              type="label9"
+                            >
+                              Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
 Click {{unsubscribe}} to unsubscribe
-                          </CapLabel>
+                            </CapLabel>
+                          </span>
                           <CapLabel
                             style={
                               Object {
@@ -1975,10 +1750,9 @@ Click {{unsubscribe}} to unsubscribe
                           Overview
                         </CapButton>,
                         "key": "WHATSAPP-card-creatives_whatsapp6",
-                        "title": <CapRow
-                          className="whatsapp-card-title"
-                        >
+                        "title": <CapRow>
                           <CapLabel
+                            className="whatsapp-rcs-template-name"
                             type="label1"
                           >
                             creatives_whatsapp6