@capillarytech/creatives-library 7.12.67 → 7.12.68

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

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

@@ -6,12 +6,15 @@ import mockdata from '../../mockdata';
 
 const { whatsappTemplates: TemplatesProp, getCreativesParamsOutput } = mockdata;
 
-jest.mock("../../CreativesContainer", () => ({
+jest.mock('../../CreativesContainer', () => ({
   __esModule: true,
-  default: (props) => <div className="creatives-container-mock" {...props}>CreativesContainer</div>,
+  default: (props) => (
+    <div className="creatives-container-mock" {...props}>
+      CreativesContainer
+    </div>
+  ),
 }));
 
-
 describe('Test Templates container', () => {
   const getWeCrmAccounts = jest.fn();
   const setChannelAccount = jest.fn();
@@ -39,7 +42,7 @@ describe('Test Templates container', () => {
           getSenderDetails,
         }}
         location={{
-          pathname: "/whatsapp",
+          pathname: '/whatsapp',
           query: {},
           search: '',
         }}
@@ -50,14 +53,13 @@ describe('Test Templates container', () => {
         intl={{
           formatMessage: () => {},
         }}
-      />
+      />,
     );
   };
 
   it('Should render correct component for whatsapp channel', () => {
     renderFunction();
     expect(renderedComponent).toMatchSnapshot();
-
     expect(getSenderDetails).toHaveBeenCalledTimes(1);
     expect(getSenderDetails).toHaveBeenCalledWith({
       channel: 'WHATSAPP',
@@ -65,54 +67,56 @@ describe('Test Templates container', () => {
     });
   });
 
-
   it('Should render temlates when whatsapp templates are passed', () => {
     renderFunction();
-    renderedComponent.setProps({TemplatesList: TemplatesProp.templates});
+    renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
     expect(renderedComponent).toMatchSnapshot();
   });
 
-
   it('Should render illustration when no templates are passed', () => {
     renderFunction();
-    renderedComponent.setProps({TemplatesList: []});
+    renderedComponent.setProps({
+      TemplatesList: [],
+      Templates: {},
+    });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render temlates when whatsapp templates are passed in full mode', () => {
     renderFunction(true);
-    renderedComponent.setProps({TemplatesList: TemplatesProp.templates});
-    renderedComponent.setState({selectedWhatsappStatus: 'approved'});
+    renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
+    renderedComponent.setState({ selectedWhatsappStatus: 'approved' });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Test getCreatives params in edit mode', () => {
     renderFunction();
-    renderedComponent.setProps({TemplatesList: TemplatesProp.templates});
-    renderedComponent.setState({routeParams: { pathname: '/edit'}});
-    expect(renderedComponent.instance().getCreativesParams()).toEqual(getCreativesParamsOutput);
+    renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
+    renderedComponent.setState({ routeParams: { pathname: '/edit' } });
+    expect(renderedComponent.instance().getCreativesParams()).toEqual(
+      getCreativesParamsOutput,
+    );
   });
 
   const getFilterContainer = () => {
     const FilterContainer = () =>
-      renderedComponent.find(".selected-whatsapp-filters").props().children;
+      renderedComponent.find('.selected-whatsapp-filters').props().children;
     return shallowWithIntl(<FilterContainer />);
   };
   it('Test removing single filter', () => {
     renderFunction();
-    renderedComponent.setProps({TemplatesList: TemplatesProp.templates});
-    renderedComponent.setState({selectedWhatsappStatus: 'approved'});
+    renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
+    renderedComponent.setState({ selectedWhatsappStatus: 'approved' });
     getFilterContainer().find('CapTag').props().onClose();
     expect(renderedComponent).toMatchSnapshot();
   });
 
-
   it('Test removing all whatsapp filterss', () => {
     renderFunction();
-    renderedComponent.setProps({TemplatesList: TemplatesProp.templates});
+    renderedComponent.setProps({ TemplatesList: TemplatesProp.templates });
 
-    renderedComponent.setState({selectedWhatsappStatus: 'approved'});
-    renderedComponent.setState({selectedWhatsappCategory: 'ALERT_UPDATE'});
+    renderedComponent.setState({ selectedWhatsappStatus: 'approved' });
+    renderedComponent.setState({ selectedWhatsappCategory: 'ALERT_UPDATE' });
     expect(renderedComponent).toMatchSnapshot();
 
     //remove all filters
@@ -122,19 +126,25 @@ describe('Test Templates container', () => {
 
   it('Test max templates not exceeded', () => {
     renderFunction(true);
-    renderedComponent.setProps({TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 260 }]});
+    renderedComponent.setProps({
+      TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 260 }],
+    });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Test max templates exceeded', () => {
     renderFunction(true);
-    renderedComponent.setProps({TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 1510 }]});
+    renderedComponent.setProps({
+      TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 1510 }],
+    });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Test max templates warning', () => {
     renderFunction(true);
-    renderedComponent.setProps({TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 248 }]});
+    renderedComponent.setProps({
+      TemplatesList: [{ ...TemplatesProp.templates[0], totalCount: 248 }],
+    });
     expect(renderedComponent).toMatchSnapshot();
   });
 });