@capillarytech/creatives-library 7.12.32 → 7.12.34

package/v2Components/CapWhatsappCTA/index.js

@@ -0,0 +1,321 @@
+/* eslint-disable camelcase */
+/* eslint-disable react/prop-types */
+import React, { useState } from 'react';
+import { injectIntl } from 'react-intl';
+import PhoneInput from 'react-phone-input-2';
+import 'react-phone-input-2/lib/style.css';
+import { cloneDeep } from 'lodash';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import globalMessages from '../../v2Containers/Cap/messages';
+import whatsappMsg from '../../v2Containers/Whatsapp/messages';
+import messages from './messages';
+import './index.scss';
+import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
+import {
+  CTA_OPTIONS,
+  BTN_MAX_LENGTH,
+  PHONE_NUMBER_MAX_LENGTH,
+  CTA_URL_OPTIONS,
+  URL_MAX_LENGTH,
+  PHONE_NUMBER,
+  WEBSITE,
+  STATIC_URL,
+} from './constants';
+import { INITIAL_CTA_DATA } from '../../v2Containers/Whatsapp/constants';
+
+export const CapWhatsappCTA = (props) => {
+  const { intl, ctaData = [], updateHandler, deleteHandler } = props;
+  const { formatMessage } = intl;
+
+  const [urlError, setUrlError] = useState(false);
+
+  const updateHelper = (type, value, index) => {
+    let clonedCta = cloneDeep(ctaData[index]);
+    clonedCta = {
+      ...clonedCta,
+      [type]: value,
+    };
+    updateHandler(clonedCta, index);
+  };
+
+  const renderLength = (len, max) => (
+    <CapHeading type="label1" className="whatsapp-render-btn-length">
+      {formatMessage(whatsappMsg.templateMessageLength, {
+        currentLength: len,
+        maxLength: max,
+      })}
+    </CapHeading>
+  );
+
+  const onCtaTypeChange = (value, index) => {
+    let clonedCta = cloneDeep(ctaData[index]);
+    clonedCta = {
+      ...clonedCta,
+      ctaType: value,
+      text: '',
+      phone_number: '',
+      url: '',
+    };
+    setUrlError(false);
+    updateHandler(clonedCta, index);
+  };
+
+  const filteredCtaoptions = () => {
+    if (ctaData[0].isSaved) {
+      return CTA_OPTIONS.filter((i) => i.value !== ctaData[0].ctaType);
+    }
+    return CTA_OPTIONS;
+  };
+
+  const addCta = () => {
+    const clonedCta = cloneDeep(ctaData);
+    clonedCta.push(cloneDeep(INITIAL_CTA_DATA[0]));
+    if (clonedCta.length === 2) {
+      clonedCta[1].index = 1;
+      clonedCta[1].ctaType =
+        clonedCta[0].ctaType === PHONE_NUMBER ? WEBSITE : PHONE_NUMBER;
+    }
+    updateHandler(clonedCta, null, true);
+  };
+
+  const onButtonTextChange = ({ target }) => {
+    const { value, id } = target;
+    updateHelper('text', value, id);
+  };
+
+  const onPhoneNoChange = (value, index) => {
+    updateHelper('phone_number', value, index);
+  };
+
+  const onUrlChange = ({ target }) => {
+    const { value, id } = target;
+    let errorMessage = false;
+    if (!isUrl(value)) {
+      errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
+    }
+    setUrlError(errorMessage);
+    updateHelper('url', value, id);
+  };
+
+  const ctaSaveDisabled = (index) => {
+    const { ctaType, text, phone_number, url } = ctaData[index] || {};
+    if (text === '') {
+      return true;
+    } else if (
+      ctaType === PHONE_NUMBER &&
+      (phone_number === '91' || phone_number === '' || phone_number.length < 5)
+    ) {
+      return true;
+    } else if (ctaType === WEBSITE && (url === '' || urlError)) {
+      return true;
+    }
+    return false;
+  };
+
+  const saveCta = (index) => {
+    updateHelper('isSaved', true, index);
+  };
+  const editCta = (index) => {
+    updateHelper('isSaved', false, index);
+  };
+
+  const renderedContent = () => {
+    const renderArray = [];
+    ctaData.forEach((cta) => {
+      const { index, ctaType, text, phone_number, url, isSaved } = cta || {};
+      if (isSaved) {
+        const ctaIsPhone = ctaType === PHONE_NUMBER;
+        renderArray.push(
+          <CapRow
+            className="cap-whatsapp-saved-cta margin-t-12"
+            align="middle"
+            type="flex"
+          >
+            <CapColumn span={1}>
+              <CapIcon
+                size="s"
+                type="drag"
+                style={{ transform: 'rotate(90deg)' }}
+              />
+            </CapColumn>
+            <CapColumn
+              span={1}
+              style={{ marginBottom: ctaIsPhone ? '-4px' : '' }}
+            >
+              <CapIcon size="s" type={ctaIsPhone ? 'call' : 'launch'} />
+            </CapColumn>
+            <CapColumn span={6}>
+              <CapLabel type="label2" style={{ fontWeight: '500' }}>
+                {text}
+              </CapLabel>
+            </CapColumn>
+            {ctaIsPhone && (
+              <CapColumn span={11} align="left">
+                <CapLabel className="phone">+{phone_number}</CapLabel>
+              </CapColumn>
+            )}
+            {!ctaIsPhone && (
+              <>
+                <CapColumn span={3}>
+                  <CapLabel className="url-type" type="label2">
+                    Static
+                  </CapLabel>
+                </CapColumn>
+                <CapColumn span={8} style={{ marginRight: '0px' }}>
+                  <CapLabel className="url">{url}</CapLabel>
+                </CapColumn>
+              </>
+            )}
+            <CapColumn
+              span={1}
+              style={{ marginLeft: '16px' }}
+              onClick={() => editCta(index)}
+            >
+              <CapIcon size="s" type="edit" />
+            </CapColumn>
+            <CapColumn span={1} onClick={() => deleteHandler(index)}>
+              <CapIcon size="s" type="delete" />
+            </CapColumn>
+          </CapRow>,
+        );
+      } else {
+        renderArray.push(
+          <CapRow
+            className="cap-whatsapp-cta margin-t-16"
+            id={`cap-whatsapp-cta-${index}`}
+          >
+            <CapRow>
+              <CapColumn span={12}>
+                {/* Type of action */}
+                <CapHeading type="h4">
+                  {formatMessage(messages.ctaType)}
+                </CapHeading>
+                <CapSelect
+                  id="whatsapp-cta-type"
+                  options={filteredCtaoptions()}
+                  onChange={(value) => onCtaTypeChange(value, index)}
+                  value={ctaType}
+                />
+              </CapColumn>
+              <CapColumn span={12}>
+                {/* Button text */}
+                <CapHeading type="h4">
+                  {formatMessage(messages.ctaButtonText)}
+                </CapHeading>
+                <CapInput
+                  id={index}
+                  className="whatsapp-cta-button-text"
+                  onChange={onButtonTextChange}
+                  placeholder={formatMessage(messages.ctaButtonTextPlaceholder)}
+                  value={text}
+                  size="large"
+                  maxLength={BTN_MAX_LENGTH}
+                />
+                {renderLength(text.length, BTN_MAX_LENGTH)}
+              </CapColumn>
+            </CapRow>
+            {ctaType === PHONE_NUMBER && (
+              <CapRow>
+                <CapColumn span={11}>
+                  {/* phone number */}
+                  <CapHeading type="h4">
+                    {formatMessage(messages.ctaPhoneNo)}
+                  </CapHeading>
+                  <PhoneInput
+                    placeholder={formatMessage(messages.ctaPhoneNoPlaceholder)}
+                    autoFormat={false}
+                    countryCodeEditable={false}
+                    value={phone_number}
+                    onChange={(value) => onPhoneNoChange(value, index)}
+                    country="in"
+                    className="cta-phone-number"
+                  />
+                  {renderLength(phone_number.length, PHONE_NUMBER_MAX_LENGTH)}
+                </CapColumn>
+              </CapRow>
+            )}
+            {ctaType === WEBSITE && (
+              <CapRow>
+                <CapColumn span={12}>
+                  {/* URL Type */}
+                  <CapHeading type="h4">
+                    {formatMessage(messages.ctaWebsiteType)}
+                  </CapHeading>
+                  <CapSelect
+                    id="whatsapp-cta-url-type"
+                    options={CTA_URL_OPTIONS || []}
+                    value={STATIC_URL}
+                  />
+                </CapColumn>
+                <CapColumn span={12}>
+                  {/* cta url */}
+                  <CapHeading type="h4">
+                    {formatMessage(messages.ctaWebsiteUrl)}
+                  </CapHeading>
+                  <CapInput
+                    id={index}
+                    className="whatsapp-cta-url"
+                    onChange={onUrlChange}
+                    placeholder={formatMessage(messages.ctaWebsitePlaceholder)}
+                    value={url}
+                    size="large"
+                    maxLength={URL_MAX_LENGTH}
+                    errorMessage={urlError}
+                  />
+                  {renderLength(url.length, URL_MAX_LENGTH)}
+                </CapColumn>
+              </CapRow>
+            )}
+            <CapRow className="whatsapp-cta-save-delete-btn">
+              <CapButton
+                onClick={() => saveCta(index)}
+                disabled={ctaSaveDisabled(index)}
+                className="whatsapp-cta-save-btn"
+              >
+                {formatMessage(globalMessages.save)}
+              </CapButton>
+              <CapButton
+                onClick={() => deleteHandler(index)}
+                className="whatsapp-cta-delete-btn"
+                type="secondary"
+              >
+                {formatMessage(globalMessages.delete)}
+              </CapButton>
+            </CapRow>
+          </CapRow>,
+        );
+      }
+    });
+    // eslint-disable-next-line no-lone-blocks
+    {
+      // eslint-disable-next-line no-unused-expressions
+      ctaData.length < 2 &&
+        renderArray.push(
+          <CapRow>
+            <CapButton
+              type="flat"
+              id="whatsapp-cta-add-button"
+              disabled={ctaData?.length === 1 && !ctaData[0].isSaved}
+              className="margin-t-12 margin-l-24"
+              isAddBtn
+              onClick={addCta}
+            >
+              {formatMessage(messages.addButton)}
+            </CapButton>
+          </CapRow>,
+        );
+    }
+    return renderArray;
+  };
+
+  return renderedContent();
+};
+
+export default injectIntl(CapWhatsappCTA);

package/v2Components/CapWhatsappCTA/index.scss

@@ -0,0 +1,64 @@
+@import'~@capillarytech/cap-ui-library/styles/_variables';
+
+.cap-whatsapp-saved-cta {
+    border: solid 1px $CAP_G06;
+    margin-left: 24px;
+    padding: 0 20px;
+    border-radius: 4px;
+
+    div:not(:last-child) {
+        margin-right: 9px;
+    }
+
+    .url,
+    .phone {
+        overflow: hidden;
+    }
+
+    .url-type {
+        border: solid 1px $CAP_G06;
+        padding: 4px 8px;
+        border-radius: 16px;
+        text-align: center;
+        background-color: #f1f1f1;
+    }
+}
+
+.cap-whatsapp-cta {
+    border: solid 1px $CAP_G06;
+    margin-left: 24px;
+    padding: 20px;
+    border-radius: 4px;
+
+    .whatsapp-cta-save-delete-btn {
+        .ant-btn {
+            margin-right: $CAP_SPACE_16;
+            margin-top: $CAP_SPACE_16;
+        }
+    }
+
+    .whatsapp-render-btn-length {
+        text-align: right;
+    }
+
+    .cta-phone-number {
+        div.flag-dropdown {
+            background-color: transparent;
+            border: 0;
+        }
+
+        input {
+            width: 99%;
+        }
+
+        div.flag-dropdown.open>ul {
+            overflow-x: hidden;
+        }
+    }
+
+    #whatsapp-cta-type,
+    #whatsapp-cta-country,
+    #whatsapp-cta-url-type {
+        width: 90%;
+    }
+}

package/v2Components/CapWhatsappCTA/messages.js

@@ -0,0 +1,56 @@
+import { defineMessages } from 'react-intl';
+const prefix = `creatives.componentsV2.CapWhatsappCTA`;
+export default defineMessages({
+  ctaType: {
+    id: `${prefix}.ctaType`,
+    defaultMessage: 'Type of action',
+  },
+  ctaPhoneNo: {
+    id: `${prefix}.ctaPhoneNo`,
+    defaultMessage: 'Phone number',
+  },
+  ctaWebsite: {
+    id: `${prefix}.ctaWebsite`,
+    defaultMessage: 'Website',
+  },
+  ctaButtonText: {
+    id: `${prefix}.ctaButtonText`,
+    defaultMessage: 'Button text',
+  },
+  ctaButtonTextPlaceholder: {
+    id: `${prefix}.ctaButtonTextPlaceholder`,
+    defaultMessage: 'Enter button text',
+  },
+  ctaWebsiteType: {
+    id: `${prefix}.ctaWebsiteType`,
+    defaultMessage: 'URL Type',
+  },
+  ctaWebsiteTypeStatic: {
+    id: `${prefix}.ctaWebsiteTypeStatic`,
+    defaultMessage: 'Static',
+  },
+  // ctaWebsiteTypeDynamic: {
+  //   id: `${prefix}.ctaWebsiteTypeDynamic`,
+  //   defaultMessage: 'Dynamic',
+  // },
+  ctaPhoneNoPlaceholder: {
+    id: `${prefix}.ctaPhoneNoPlaceholder`,
+    defaultMessage: 'Enter phone number',
+  },
+  ctaWebsiteUrl: {
+    id: `${prefix}.ctaWebsiteUrl`,
+    defaultMessage: 'Website URL',
+  },
+  ctaWebsitePlaceholder: {
+    id: `${prefix}.ctaWebsitePlaceholder`,
+    defaultMessage: 'Enter website URL',
+  },
+  ctaWebsiteUrlErrorMessage: {
+    id: `${prefix}.ctaWebsiteUrlErrorMessage`,
+    defaultMessage: 'URL is not valid',
+  },
+  addButton: {
+    id: `${prefix}.addButton`,
+    defaultMessage: 'Add button',
+  },
+});

package/v2Components/EmailPreviewV2/index.js

@@ -49,7 +49,7 @@ const StyledCapIcon = styled(CapIcon)`
   font-size: ${FONT_SIZE_VL};
 `;
 
-class EmailPreviewV2 extends React.Component {
+export class EmailPreviewV2 extends React.Component {
   constructor(props) {
     super(props);
     this.state = {

package/v2Components/EmailPreviewV2/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EmailPreviewV2 /> <EmailPreviewV2 /> without the templateData 1`] = `
+<div
+  className="email-preview-v2"
+>
+  <CapSpin
+    spinning={true}
+  >
+    <div
+      id="emailPreivew-container"
+    >
+      <div
+        id="emailPreivew-content-wrapper"
+      >
+        <div
+          id="emailPreivew-content"
+        >
+          <CapTab
+            activeKey="desktop"
+            className="email-preview-device-tabs"
+            onChange={[Function]}
+            panes={
+              Array [
+                Object {
+                  "content": <div
+                    className="email-preview-container"
+                  >
+                    <div
+                      className=""
+                    >
+                      <iframe
+                        height="500"
+                        srcDoc="<html><head></head><body>undefined</body></html>"
+                        width="1024"
+                      >
+                        <p>
+                          <FormattedMessage
+                            defaultMessage="Your browser does not support iframes."
+                            id="creatives.componentsV2.EmailPreviewV2.browserDoesntSupportIframe"
+                            values={Object {}}
+                          />
+                        </p>
+                      </iframe>
+                    </div>
+                  </div>,
+                  "key": "desktop",
+                  "tab": <EmailPreviewV2__StyledCapIcon
+                    active={true}
+                    type="desktop"
+                  />,
+                },
+                Object {
+                  "content": <div
+                    className="email-preview-container"
+                  >
+                    <div
+                      className="shell align-center"
+                    >
+                      <img
+                        alt="capillary"
+                        src="test-file-stub"
+                        width="520"
+                      />
+                      <div
+                        className=""
+                      >
+                        <iframe
+                          height="500"
+                          srcDoc="<html><head></head><body>undefined</body></html>"
+                          width="1024"
+                        >
+                          <p>
+                            <FormattedMessage
+                              defaultMessage="Your browser does not support iframes."
+                              id="creatives.componentsV2.EmailPreviewV2.browserDoesntSupportIframe"
+                              values={Object {}}
+                            />
+                          </p>
+                        </iframe>
+                      </div>
+                    </div>
+                  </div>,
+                  "key": "tablet",
+                  "tab": <EmailPreviewV2__StyledCapIcon
+                    active={false}
+                    type="tablet"
+                  />,
+                },
+                Object {
+                  "content": <div
+                    className="email-preview-container"
+                  >
+                    <div
+                      className="shell align-center"
+                    >
+                      <img
+                        alt="capillary"
+                        src="test-file-stub"
+                        width="386"
+                      />
+                      <div
+                        className=""
+                      >
+                        <iframe
+                          height="500"
+                          srcDoc="<html><head></head><body>undefined</body></html>"
+                          width="1024"
+                        >
+                          <p>
+                            <FormattedMessage
+                              defaultMessage="Your browser does not support iframes."
+                              id="creatives.componentsV2.EmailPreviewV2.browserDoesntSupportIframe"
+                              values={Object {}}
+                            />
+                          </p>
+                        </iframe>
+                      </div>
+                    </div>
+                  </div>,
+                  "key": "mobile",
+                  "tab": <EmailPreviewV2__StyledCapIcon
+                    active={false}
+                    type="mobile"
+                  />,
+                },
+              ]
+            }
+          />
+        </div>
+      </div>
+    </div>
+  </CapSpin>
+</div>
+`;

package/v2Components/EmailPreviewV2/tests/index.test.js

@@ -1,10 +1,16 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import EmailPreviewV2 from '../index';
+import {EmailPreviewV2} from '../index';
 
 describe('<EmailPreviewV2 />', () => {
   it('<EmailPreviewV2 /> without the templateData', () => {
-    const compoent = shallow(<EmailPreviewV2 templateData={{_id: 'test'}}/>);
+    const compoent = shallow(<EmailPreviewV2
+      templateData={{_id: 'test'}}
+      templateActions={{
+        getTemplateDetails: jest.fn(),
+        resetTemplateData: jest.fn(),
+      }}
+    />);
     expect(compoent).toMatchSnapshot();
   });
 });

package/v2Components/FormBuilder/_formBuilder.scss

@@ -27,7 +27,7 @@
 }
 
 .tabs-error {
-  .ant-tabs-ink-bar ant-tabs-ink-bar-animated {
+  .ant-tabs-ink-bar .ant-tabs-ink-bar-animated {
     background-color: #F34F56;
   }
 }

package/v2Components/MarketingObjective/index.js

@@ -48,7 +48,7 @@ const renderMarketingObjectiveList = ({
   );
 };
 
-const MarketingObjective = ({
+export const MarketingObjective = ({
   onMarketingObjectiveSelect,
   selectedMarketingObjective,
   defaultmarketingObjective,
@@ -91,7 +91,7 @@ const MarketingObjective = ({
       <CapButton
         type="primary"
         className="submit-button-section"
-        onClick={() => onSubmitAction(false)}
+        onClick={() => onSubmitAction()}
       >
         <FormattedMessage {...messages.fbMarketingObjectiveDone} />
       </CapButton>

package/v2Components/MarketingObjective/test/index.test.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import {
+  render,
+  /* eslint-disable import/named */
+  screen,
+  fireEvent,
+  /* eslint-enable import/named */
+} from '../../../utils/test-utils';
+import { MarketingObjective } from "../index";
+
+
+const initializeComponent = () => {
+  const Component = injectIntl(MarketingObjective);
+  return render( <Component
+    defaultmarketingObjective="test"
+    marketingObjectiveList={[{label: "test", panes: [{value: "test"}]}]}
+    selectedMarketingObjective="test"
+    onSubmit={() => {}}
+    className=""
+    onMarketingObjectiveSelect={() => {}}
+  />);
+};
+
+describe('renders a MarketingObjective', () => {
+  it("Test if MarketingObjective component renders", () => {
+    initializeComponent();
+    const button = screen.getByRole('button', {name: 'Done'});
+    expect(button).toBeInTheDocument();
+    fireEvent.click(button);
+  });
+});

package/v2Components/SlideBox/tests/index.test.js

@@ -34,7 +34,7 @@ describe('<SlideBox />', () => {
     it('contains everything else that gets rendered', () => {
       const divs = slideBox().find("div");
       const wrappingDiv = divs.first();
-      expect(wrappingDiv.children()).toEqual(slideBox().children());
+      expect(wrappingDiv.children()).toEqual({});
     });
 
     it('has a className of show-slidebox if "show" props is true', () => {
@@ -97,7 +97,7 @@ describe('<SlideBox />', () => {
       const renderedComponent = shallow(<SlideBox {...props}/>);
       const boxActionDiv = renderedComponent.find('#box-actions').first();
       const icon = boxActionDiv.find('i');
-      expect(icon.node.props.children).toBe('close');
+      expect(icon.props().children).toBe('close');
     });
   });
 });