@capillarytech/creatives-library 7.17.182 → 7.17.183-alpha.1

package/config/app.js

@@ -16,7 +16,7 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
+    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/package.json

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

package/v2Containers/Templates/index.js

@@ -607,7 +607,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const { weCrmAccounts: weCrmAccountsList = [], senderDetails: { hostName = '' } = {} } = get(nextProps, 'Templates', {});
     const weCrmChannels = ['wechat', WHATSAPP_LOWERCASE, ZALO_LOWERCASE];
 
-    if (weCrmAccountsList.length === 1 && this.state.defaultAccount && (weCrmChannels.indexOf(selectedChannel) > -1)) {
+    if (weCrmAccountsList.length === 1 && this.state.defaultAccount && (weCrmChannels.indexOf(selectedChannel) > -1) && !isEmpty(hostName)) {
       let paramsDefault = {};
       if (this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
         paramsDefault = {
@@ -624,7 +624,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       } = configs || {};
       if (weCrmChannels.includes(selectedChannel)) {
           if ([WHATSAPP_LOWERCASE, ZALO_LOWERCASE].includes(selectedChannel)) {
-            if (hostName === '' && selectedChannel === WHATSAPP_LOWERCASE) {
+            if (hostName === '') {
               return;
             }
 
@@ -634,7 +634,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               paramsDefault.username = name;
               paramsDefault.oa_id = sourceAccountIdentifier;
               paramsDefault.token = token;
-              paramsDefault.host = hostName || this.state.hostName || this.props.Templates?.senderDetails?.hostName || this.props.Templates?.selectedZaloAccount?.hostName;
+              paramsDefault.host = hostName || this.props.Templates?.senderDetails?.hostName || this.props.Templates?.selectedZaloAccount?.hostName || this.state.hostName;
             }
           } else {
             paramsDefault.wecrmId = wecrm_app_id;
@@ -705,7 +705,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             params.oa_id = sourceAccountIdentifier;
             params.token = token;
             params.isAccountSelection = true;
-            params.host = this.props.Templates?.senderDetails?.hostName || this.props.Templates?.selectedZaloAccount?.hostName;
+            params.host = this.props.Templates?.senderDetails?.hostName || this.props.Templates?.selectedZaloAccount?.hostName || this.state.hostName;
         }
       }
 
@@ -805,8 +805,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if(this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
         queryParams.name = this.state.searchText;
         queryParams.sortBy = this.state.sortBy;
-      } else {
-        queryParams.host = this.props.Templates?.senderDetails?.hostName || this.props.Templates?.selectedZaloAccount?.hostName;
       }
       queryParams.page = this.state.page;
       queryParams.perPage = this.state.perPageLimit;
@@ -855,7 +853,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (
         this.state.channel.toLowerCase() === ZALO_LOWERCASE &&
         !isEmpty(this.props.Templates?.selectedZaloAccount) && 
-        !params?.isAccountSelection
+        !params?.isAccountSelection && !isEmpty(this.props.Templates?.selectedZaloAccount?.hostName)
       ) {
         const {
           name = "",
@@ -866,7 +864,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         queryParams.username = name;
         queryParams.oa_id = sourceAccountIdentifier;
         queryParams.token = token;
-        queryParams.host = hostName || this.state.hostName || this.props.Templates?.senderDetails?.hostName;
+        queryParams.host = hostName || this.props.Templates?.senderDetails?.hostName ||this.state.hostName;
       }
       this.setState({ page, templatesCount }, () => {
         queryParams.page = page;

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

@@ -87,380 +87,53 @@ exports[`Test Templates container Should render illustration when no templates a
 `;
 
 exports[`Test Templates container Should render temlates when Zalo templates are passed in full mode 1`] = `
-<Fragment>
-  <div
-    className="creatives-templates-list full-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"
-        templateInProgress={false}
-      >
-        <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="zalo-filters"
-            >
-              <CapSelectFilter
-                data={
-                  Array [
-                    Object {
-                      "key": "enable",
-                      "label": <FormattedMessage
-                        defaultMessage="Enable"
-                        id="creatives.containersV2.zalo.ENABLE_STATUS"
-                        values={Object {}}
-                      />,
-                      "value": "ENABLE",
-                    },
-                    Object {
-                      "key": "reject",
-                      "label": <FormattedMessage
-                        defaultMessage="Reject"
-                        id="creatives.containersV2.zalo.REJECT_STATUS"
-                        values={Object {}}
-                      />,
-                      "value": "REJECT",
-                    },
-                    Object {
-                      "key": "disable",
-                      "label": <FormattedMessage
-                        defaultMessage="Disable"
-                        id="creatives.containersV2.zalo.DISABLE_STATUS"
-                        values={Object {}}
-                      />,
-                      "value": "DISABLE",
-                    },
-                    Object {
-                      "key": "reviewPending",
-                      "label": <FormattedMessage
-                        defaultMessage="Review Pending"
-                        id="creatives.containersV2.zalo.PENDING_REVIEW_STATUS"
-                        values={Object {}}
-                      />,
-                      "value": "PENDING_REVIEW",
-                    },
-                  ]
-                }
-                dropdownMaxHeight="320px"
-                dropdownWidth="228px"
-                onSelect={[Function]}
-                placeholder="Status"
-                placement="bottomLeft"
-                selectedValue=""
-                width="90px"
-              />
-            </div>
-            <Component />
-            <Component />
-            <div
-              style={
-                Object {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "justifyContent": "space-between",
-                }
-              }
-            />
-          </div>
-          <CapRow
-            align="middle"
-            className="selected-whatsapp-filters"
-            type="flex"
-          />
-          <CapSpin
-            spinning={false}
-            style={
-              Object {
-                "width": "100%",
-              }
-            }
-            tip="Getting all templates..."
-          >
-            <div>
-              <div
-                className="pagination-container"
-              >
-                <CapCustomCardList
-                  cardList={
-                    Array [
-                      Object {
-                        "content": <CapLabel
-                          className="zalo-listing-content desc"
-                          type="label19"
-                        >
-                          Test1
-                        </CapLabel>,
-                        "extra": Array [
-                          <CapTooltip
-                            title={
-                              <div
-                                className="zalo-view-tooltip"
-                              >
-                                Open preview in new tab
-                              </div>
-                            }
-                          >
-                            <CapIcon
-                              className="view-zalo"
-                              onClick={[Function]}
-                              style={
-                                Object {
-                                  "marginRight": "16px",
-                                }
-                              }
-                              type="eye"
-                            />
-                          </CapTooltip>,
-                          <CapDropdown
-                            overlay={
-                              <CapMenu>
-                                <withItemHOC
-                                  className="duplicate-zalo"
-                                  onClick={[Function]}
-                                >
-                                  <FormattedMessage
-                                    defaultMessage="Duplicate"
-                                    id="creatives.containersV2.Templates.duplicateButton"
-                                    values={Object {}}
-                                  />
-                                </withItemHOC>
-                                <withItemHOC
-                                  className="delete-zalo"
-                                  onClick={[Function]}
-                                >
-                                  <FormattedMessage
-                                    defaultMessage="Delete"
-                                    id="creatives.containersV2.Templates.deleteButton"
-                                    values={Object {}}
-                                  />
-                                </withItemHOC>
-                              </CapMenu>
-                            }
-                          >
-                            <React.Fragment />
-                          </CapDropdown>,
-                        ],
-                        "hoverOption": <CapButton
-                          className="edit-zalo"
-                          isAddBtn={false}
-                          onClick={[Function]}
-                          type="primary"
-                        >
-                          Overview
-                        </CapButton>,
-                        "key": "ZALO-card-Test1",
-                        "title": <CapRow>
-                          <CapLabel
-                            className="zalo-template-name"
-                            type="label1"
-                          >
-                            
-                          </CapLabel>
-                          <CapRow
-                            align="middle"
-                            className="zalo-status-container zalo-status-color"
-                            type="flex"
-                          >
-                            <CapStatus
-                              color=""
-                              height="0.571rem"
-                              labelType="label3"
-                              text=""
-                              type="pending"
-                              width="0.571rem"
-                            />
-                          </CapRow>
-                        </CapRow>,
-                      },
-                      Object {
-                        "content": <CapLabel
-                          className="zalo-listing-content desc"
-                          type="label19"
-                        >
-                          Test2
-                        </CapLabel>,
-                        "extra": Array [
-                          <CapTooltip
-                            title={
-                              <div
-                                className="zalo-view-tooltip"
-                              >
-                                Open preview in new tab
-                              </div>
-                            }
-                          >
-                            <CapIcon
-                              className="view-zalo"
-                              onClick={[Function]}
-                              style={
-                                Object {
-                                  "marginRight": "16px",
-                                }
-                              }
-                              type="eye"
-                            />
-                          </CapTooltip>,
-                          <CapDropdown
-                            overlay={
-                              <CapMenu>
-                                <withItemHOC
-                                  className="duplicate-zalo"
-                                  onClick={[Function]}
-                                >
-                                  <FormattedMessage
-                                    defaultMessage="Duplicate"
-                                    id="creatives.containersV2.Templates.duplicateButton"
-                                    values={Object {}}
-                                  />
-                                </withItemHOC>
-                                <withItemHOC
-                                  className="delete-zalo"
-                                  onClick={[Function]}
-                                >
-                                  <FormattedMessage
-                                    defaultMessage="Delete"
-                                    id="creatives.containersV2.Templates.deleteButton"
-                                    values={Object {}}
-                                  />
-                                </withItemHOC>
-                              </CapMenu>
-                            }
-                          >
-                            <React.Fragment />
-                          </CapDropdown>,
-                        ],
-                        "hoverOption": <CapButton
-                          className="edit-zalo"
-                          isAddBtn={false}
-                          onClick={[Function]}
-                          type="primary"
-                        >
-                          Overview
-                        </CapButton>,
-                        "key": "ZALO-card-Test2",
-                        "title": <CapRow>
-                          <CapLabel
-                            className="zalo-template-name"
-                            type="label1"
-                          >
-                            
-                          </CapLabel>
-                          <CapRow
-                            align="middle"
-                            className="zalo-status-container zalo-status-color"
-                            type="flex"
-                          >
-                            <CapStatus
-                              color=""
-                              height="0.571rem"
-                              labelType="label3"
-                              text=""
-                              type="pending"
-                              width="0.571rem"
-                            />
-                          </CapRow>
-                        </CapRow>,
-                      },
-                    ]
-                  }
-                  fbType="list"
-                  key="ZALO-card-list"
-                  style={
-                    Object {
-                      "marginLeft": "16px",
-                    }
-                  }
-                  type="ZALO"
-                />
-              </div>
-              <div
-                style={
-                  Object {
-                    "height": "calc(100vh - 325px)",
-                    "overflow": "auto",
-                  }
-                }
-              />
-            </div>
-          </CapSpin>
-        </div>
-      </Pagination>
-    </CapRow>
-    <CapRow />
-    <CapRow>
-      <CapSlideBox
-        closeIconPosition="right"
-        closeIconSize="m"
-        closeIconType="close"
-        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}
-      />
-      <InjectIntl(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?
-      </InjectIntl(Wrapper)>
-    </CapRow>
+<CapSpin
+  spinning={false}
+>
+  <div
+    style={
+      Object {
+        "overflowX": "auto",
+        "paddingBottom": "1.142rem",
+      }
+    }
+  >
+    <CapHeader
+      className="select-account-header"
+      description="Choose the account to send content"
+      descriptionClass=""
+      inline={false}
+      size="regular"
+      title="Zalo account"
+      titleClass=""
+    />
+    <CapRadioCard
+      cardHeight="48px"
+      cardWidth="276px"
+      className="select-account"
+      defaultValue=""
+      onChange={[Function]}
+      panes={
+        Array [
+          Object {
+            "icon": <CapIconAvatar
+              backgroundProps={Object {}}
+              height="2rem"
+              labelProps={Object {}}
+              text="c"
+              width="auto"
+            />,
+            "key": "fa66f53ca2bb4b93b02dfc5bd265e2fd",
+            "title": "capillary_zns",
+            "value": "capillary_zns",
+          },
+        ]
+      }
+      selected=""
+      size="small"
+    />
   </div>
-</Fragment>
+</CapSpin>
 `;
 
 exports[`Test Templates container Should render temlates when whatsapp templates are passed 1`] = `
@@ -998,161 +671,53 @@ exports[`Test Templates container Should render temlates when whatsapp templates
 `;
 
 exports[`Test Templates container Should render temlates when zalo templates are passed 1`] = `
-<Fragment>
+<CapSpin
+  spinning={false}
+>
   <div
-    className="creatives-templates-list library-mode"
+    style={
+      Object {
+        "overflowX": "auto",
+        "paddingBottom": "1.142rem",
+      }
+    }
   >
-    <input
-      accept=".zip, .html, .htm"
-      id="filename"
+    <CapHeader
+      className="select-account-header"
+      description="Choose the account to send content"
+      descriptionClass=""
+      inline={false}
+      size="regular"
+      title="Zalo account"
+      titleClass=""
+    />
+    <CapRadioCard
+      cardHeight="48px"
+      cardWidth="276px"
+      className="select-account"
+      defaultValue=""
       onChange={[Function]}
-      style={
-        Object {
-          "display": "none",
-        }
+      panes={
+        Array [
+          Object {
+            "icon": <CapIconAvatar
+              backgroundProps={Object {}}
+              height="2rem"
+              labelProps={Object {}}
+              text="c"
+              width="auto"
+            />,
+            "key": "fa66f53ca2bb4b93b02dfc5bd265e2fd",
+            "title": "capillary_zns",
+            "value": "capillary_zns",
+          },
+        ]
       }
-      type="file"
+      selected=""
+      size="small"
     />
-    <CapRow>
-      <Pagination
-        onPageChange={[Function]}
-        paginationContainer="pagination-container"
-        paginationSelector="pagination-container"
-        templateInProgress={false}
-      >
-        <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="zalo-filters"
-            />
-            <Component />
-            <Component />
-            <div
-              style={
-                Object {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "justifyContent": "space-between",
-                }
-              }
-            />
-          </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",
-                  }
-                }
-              >
-                <CapHeader
-                  description={
-                    <CapLabel
-                      style={
-                        Object {
-                          "textAlign": "center",
-                        }
-                      }
-                      type="label1"
-                    >
-                      Please try searching with another term or apply different filter
-                    </CapLabel>
-                  }
-                  descriptionClass=""
-                  inline={false}
-                  size="large"
-                  title={
-                    <CapHeading
-                      className="channel-specific-illustration-text"
-                      type="h3"
-                    >
-                      Sorry, we couldn’t find any matches
-                    </CapHeading>
-                  }
-                  titleClass=""
-                />
-              </div>
-            </div>
-          </CapSpin>
-        </div>
-      </Pagination>
-    </CapRow>
-    <CapRow />
-    <CapRow>
-      <CapSlideBox
-        closeIconPosition="right"
-        closeIconSize="m"
-        closeIconType="close"
-        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}
-      />
-      <InjectIntl(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?
-      </InjectIntl(Wrapper)>
-    </CapRow>
   </div>
-</Fragment>
+</CapSpin>
 `;
 
 exports[`Test Templates container Test max templates exceeded 1`] = `