@capillarytech/creatives-library 7.17.118 → 7.17.120-alpha.0

package/v2Containers/Viber/index.scss

@@ -0,0 +1,113 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+#viber_input {
+  height: $CAP_SPACE_40;
+}
+.viber-media-radio>label.ant-radio-wrapper {
+  margin-right: $CAP_SPACE_24;
+}
+.viber-render-heading {
+  margin-top: $CAP_SPACE_06;
+  margin-bottom: $CAP_SPACE_06;
+}
+.cap-custom-image-upload {
+  .dragger-button.re-upload {
+    top: -11rem;
+    position: relative;
+    left: 32.75rem;
+    color: $FONT_COLOR_05;
+  }
+}
+.cap-custom-video-upload {
+  padding-top: $CAP_SPACE_20;
+  .dragger-button.re-upload {
+    top: -11rem;
+    position: relative;
+    left: 32.75rem;
+    color: $FONT_COLOR_05;
+  }
+}
+
+.viber-message-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: $CAP_SPACE_24;
+  margin-bottom: $CAP_SPACE_08;
+  .viber-message-header-style {
+    font-weight: 500;
+  }
+}
+
+.viber-button-none {
+  display: inline-grid;
+  margin-top: $CAP_SPACE_16;
+}
+
+.viber-button-cta {
+  display: inline-grid;
+  margin-top: $CAP_SPACE_24;
+}
+
+.viber-render-heading {
+  margin-top: $CAP_SPACE_24;
+  margin-bottom: $CAP_SPACE_06;
+}
+.viber-optional-label {
+  margin-left: $CAP_SPACE_08;
+  color: $FONT_COLOR_03;
+  font-weight: normal;
+  font-size: $CAP_SPACE_12;
+}
+.viber-btn-radio-group {
+  display: grid;
+}
+.button-section {
+  margin-top: $CAP_SPACE_40;
+}
+.button-text {
+  margin-bottom: $CAP_SPACE_08;
+}
+.cta-btn-action {
+  margin-right: $CAP_SPACE_12;
+}
+.cta-actions {
+  margin-top: $CAP_SPACE_16;
+}
+.cta-section {
+  border: 1px solid $CAP_G06;
+  border-radius: $CAP_SPACE_04;
+  padding: $CAP_SPACE_16 $CAP_SPACE_24;
+  margin-left: $CAP_SPACE_24;
+  margin-top: $CAP_SPACE_12;
+}
+.button-url {
+  max-width: 25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.button-edit-icon {
+  margin-left: auto;
+  cursor: pointer;
+}
+.cta-section-saved {
+  display: flex;
+  border: 1px solid $CAP_G06;
+  border-radius: $CAP_SPACE_04;
+  padding: $CAP_SPACE_16 $CAP_SPACE_24;
+  margin-left: $CAP_SPACE_24;
+  margin-top: $CAP_SPACE_12;
+}
+.cta-text {
+  text-align: left;
+  margin-right: $CAP_SPACE_24;
+}
+.cta-text-input {
+  padding-bottom: $CAP_SPACE_12;
+}
+.char-count-viber {
+  display: inline-block;
+  float: right;
+  margin-top: $CAP_SPACE_08;
+}

package/v2Containers/Viber/messages.js

@@ -142,4 +142,72 @@ export default defineMessages({
     id: `${scope}.inValidUrliErrorMessage`,
     defaultMessage: 'Button URL is not valid',
   },
+  mediaLabel: {
+    id: `${scope}.mediaLabel`,
+    defaultMessage: "Media",
+  },
+  mediaText: {
+    id: `${scope}.mediaText`,
+    defaultMessage: 'Text',
+  },
+  mediaImage: {
+    id: `${scope}.mediaImage`,
+    defaultMessage: 'Image',
+  },
+  mediaVideo: {
+    id: `${scope}.mediaVideo`,
+    defaultMessage: 'Video',
+  },
+  videoErrorMessage: {
+    id: `${scope}.videoErrorMessage`,
+    defaultMessage: 'Please upload the video with allowed file extension, size, dimension and aspect ratio',
+  },
+  enterMessage: {
+    id: `${scope}.enterMessage`,
+    defaultMessage: 'Enter message',
+  },
+  charCount: {
+    id: `${scope}.charCount`,
+    defaultMessage: 'Characters count:',
+  },
+  btnLabel: {
+    id: `${scope}.btnLabel`,
+    defaultMessage: 'Buttons',
+  },
+  btnDesc: {
+    id: `${scope}.btnDesc`,
+    defaultMessage: 'These will be show clickable buttons below your message.',
+  },
+  btnTypeNone: {
+    id: `${scope}.btnTypeNone`,
+    defaultMessage: 'None',
+  },
+  btnTypeCTA: {
+    id: `${scope}.btnTypeCTA`,
+    defaultMessage: 'Call to action',
+  },
+  ctaDesc: {
+    id: `${scope}.ctaDesc`,
+    defaultMessage: 'Create a button that lets customers respond to your messages or take action',
+  },
+  buttonTextTooltip: {
+    id: `${scope}.buttonTextTooltip`,
+    defaultMessage: 'Use this to name the button. We would recommend not to use special characters here',
+  },
+  enterButtonText: {
+    id: `${scope}.enterButtonText`,
+    defaultMessage: 'Enter button text',
+  },
+  enterButtonUrl: {
+    id: `${scope}.enterButtonUrl`,
+    defaultMessage: 'Enter button url',
+  },
+  save: {
+    id: `${scope}.save`,
+    defaultMessage: 'Save',
+  },
+  cancel: {
+    id: `${scope}.cancel`,
+    defaultMessage: 'Cancel',
+  },
 });

package/v2Containers/Viber/style.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import {
+  CAP_SPACE_32,
+  CAP_SPACE_24,
+  CAP_WHITE,
+  CAP_SPACE_16,
+} from '@capillarytech/cap-ui-library/styled/variables';
+export const ViberFooter = styled.div`
+    background-color: ${CAP_WHITE};
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    margin-left: -2rem;
+    padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
+
+    .ant-btn {
+      margin-right: ${CAP_SPACE_16};
+    }
+    }
+`;

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

@@ -0,0 +1,297 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import { browserHistory } from 'react-router';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import configureStore from '../../../store';
+import { Viber } from '../index';
+import { render, screen, fireEvent } from '../../../utils/test-utils';
+import { largeText, templateDetailsImage, templateDetailsText, templateDetailsVideo, templateDetails_ } from './mockData';
+import { metaEntities, getDefaultTags, injectedTags } from '../../Zalo/tests/mockData';
+
+const mockActions = {
+  getTemplateDetails: jest.fn(),
+  editTemplate: jest.fn(),
+  createTemplate: jest.fn(),
+  uploadViberAsset: jest.fn(),
+  clearViberAsset: jest.fn(),
+  clearEditResponse: jest.fn(),
+  clearCreateResponse: jest.fn(),
+};
+const mockGlobalActions = {
+  fetchSchemaForEntity: jest.fn(),
+};
+
+let store;
+beforeAll(() => {
+  store = configureStore({}, browserHistory);
+});
+
+const ComponentToRender = injectIntl(Viber);
+const renderComponent = (props) =>
+  render(
+    <Provider store={store}>
+      <ComponentToRender {...props} />
+    </Provider>,
+  );
+
+describe('Test Viber container', () => {
+  it('test case for Viber template creation flow', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      templateData: {mode: 'create'},
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+      },
+      location: {
+        pathname: "/sms/edit",
+        query: {
+          type: false,
+          module: "default",
+        },
+        search: "",
+      },
+      isFullMode: true,
+      handleClose: jest.fn(),
+    });
+    const inputBox = await screen.findAllByPlaceholderText(
+      'Enter template name',
+    );
+    fireEvent.change(inputBox[0], { target: { value: 'Hello, welcome' } });
+    fireEvent.change(inputBox[0], { target: { value: '' } });
+    fireEvent.change(inputBox[0], { target: { value: 'temp title' } });
+    const imageRadio = screen.getByRole('radio', {name: /image/i});
+    fireEvent.click(imageRadio);
+    const textRadio = screen.getByRole('radio', {name: /text/i});
+    fireEvent.click(textRadio);
+    const videoRadio = screen.getByRole('radio', {name: /video/i});
+    fireEvent.click(videoRadio);
+    fireEvent.click(textRadio);
+    const msgBox = screen.getAllByPlaceholderText(/Enter message/i);
+    msgBox[0].focus();
+    fireEvent.change(msgBox[0], { target: { value: 'temp message' }});
+    fireEvent.change(msgBox[0], { target: { value: '' }});
+    fireEvent.change(msgBox[0], { target: { value: 'test}}' }});
+    fireEvent.change(msgBox[0], { target: { value: largeText }});
+    fireEvent.change(msgBox[0], { target: { value: 'temp message' }});
+    fireEvent.change(inputBox[0], { target: { value: '' } });
+    fireEvent.change(inputBox[0], { target: { value: 'temp title' } });
+    const ctaRadioBtn = screen.getByRole('radio', {
+      name: /call to action create a button that lets customers respond to your messages or take action/i,
+    });
+    fireEvent.click(ctaRadioBtn);
+    const cancelBtn_ = screen.getAllByRole('button', {name: /cancel/i});
+    fireEvent.click(cancelBtn_[0]);
+    fireEvent.click(ctaRadioBtn);
+    const ctaBtnText = await screen.findByPlaceholderText(
+      'Enter button text',
+    );
+    fireEvent.change(ctaBtnText, { target: { value: 'btn text' } });
+    const ctaBtnUrl = await screen.findByPlaceholderText(
+      'Enter button url',
+    );
+    fireEvent.change(ctaBtnUrl, { target: { value: 'https://www.test.com' } });
+    fireEvent.change(ctaBtnUrl, { target: { value: 'not url' } });
+    fireEvent.change(ctaBtnUrl, { target: { value: 'https://www.test.com' } });
+    const saveBtn = await screen.findByRole('button', {
+      name: /save/i,
+    });
+    expect(saveBtn).toBeEnabled();
+    fireEvent.click(saveBtn);
+    const editCta = await screen.findByLabelText(/edit-cta-icon/i);
+    fireEvent.click(editCta);
+    const cancelBtn = screen.getAllByRole('button', {name: /cancel/i});
+    fireEvent.click(cancelBtn[0]);
+    const doneBtn = await screen.findByRole('button', {
+      name: /done/i,
+    });
+    expect(doneBtn).toBeEnabled();
+    fireEvent.click(doneBtn);
+    expect(mockActions.createTemplate).toHaveBeenCalled();
+  });
+  it('test case for Viber template creation flow for image media type', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      templateData: {mode: 'create'},
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+        templateDetails: templateDetailsImage,
+      },
+      location: {
+        pathname: "/sms/edit",
+        query: {
+          type: false,
+          module: "default",
+        },
+        search: "",
+      },
+      isFullMode: true,
+      params: { id: 'test'},
+      handleClose: jest.fn(),
+    });
+    const doneBtn = screen.getByRole('button', {
+      name: /done/i,
+    });
+    expect(doneBtn).toBeEnabled();
+    fireEvent.click(doneBtn);
+    expect(mockActions.editTemplate).toHaveBeenCalled();
+  });
+  it('test case for Viber template creation flow for image not present', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      templateData: {mode: 'create'},
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+        templateDetails: templateDetailsImage,
+      },
+      location: {
+        pathname: "/sms/edit",
+        query: {
+          type: false,
+          module: "default",
+        },
+        search: "",
+      },
+      isFullMode: true,
+      params: { id: 'test'},
+      handleClose: jest.fn(),
+    });
+    const reupload = screen.getByRole('button', {
+      name: /reupload/i,
+    });
+    fireEvent.click(reupload);
+    const doneBtn = screen.getByRole('button', {
+      name: /done/i,
+    });
+    expect(doneBtn).toBeDisabled();
+  });
+  it('test case for Viber template creation flow for video media type', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      templateData: {mode: 'create'},
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+        templateDetails: templateDetailsVideo,
+      },
+      location: {
+        pathname: "/sms/edit",
+        query: {
+          type: false,
+          module: "default",
+        },
+        search: "",
+      },
+      isFullMode: true,
+      params: { id: 'test'},
+      handleClose: jest.fn(),
+      metaEntities,
+      getDefaultTags,
+      injectedTags,
+    });
+    const doneBtn = screen.getByRole('button', {
+      name: /done/i,
+    });
+    expect(doneBtn).toBeEnabled();
+    fireEvent.click(doneBtn);
+    expect(mockActions.editTemplate).toHaveBeenCalled();
+  });
+  it('test case for Viber template creation flow for text type', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      templateData: {mode: 'create'},
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+        templateDetails: templateDetailsText,
+      },
+      location: {
+        pathname: "/sms/edit",
+        query: {
+          type: false,
+          module: "default",
+        },
+        search: "",
+      },
+      isFullMode: true,
+      params: { id: 'test'},
+      handleClose: jest.fn(),
+      metaEntities,
+      getDefaultTags,
+      injectedTags,
+    });
+    const doneBtn = screen.getByRole('button', {
+      name: /done/i,
+    });
+    expect(doneBtn).toBeEnabled();
+    fireEvent.click(doneBtn);
+    expect(mockActions.editTemplate).toHaveBeenCalled();
+  });
+  it('test case for Viber template creation flow for video not present', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      templateData: {mode: 'create'},
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+        templateDetails: templateDetailsVideo,
+      },
+      location: {
+        pathname: "/sms/edit",
+        query: {
+          type: false,
+          module: "default",
+        },
+        search: "",
+      },
+      params: { id: 'test'},
+      handleClose: jest.fn(),
+      metaEntities,
+      getDefaultTags,
+      injectedTags,
+    });
+    const reupload = screen.getByRole('button', {
+      name: /re upload/i,
+    });
+    fireEvent.click(reupload);
+    const doneBtn = screen.getByRole('button', {
+      name: /done/i,
+    });
+    expect(doneBtn).toBeDisabled();
+  });
+  it('test case for Viber template for error cases', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      viber: {
+        uploadedAssetData: {},
+        createTemplateInProgress: false,
+        templateDetails: templateDetails_,
+      },
+      location: {
+        pathname: "/sms/edit",
+        query: {
+          type: true,
+          module: "default",
+        },
+        search: "",
+      },
+      isFullMode: true,
+      params: { id: 'test'},
+      handleClose: jest.fn(),
+    });
+    const doneBtn = screen.getByRole('button', {
+      name: /done/i,
+    });
+    expect(doneBtn).toBeDisabled();
+  });
+});

package/v2Containers/Viber/tests/mockData.js

@@ -0,0 +1,134 @@
+export const largeText =
+  "test viber message test edit test viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edit test viber message test edit test viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edit test viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test edittest viber message test ittest viber message test";
+export const templateDetailsImage = {
+  _id: "664670d929ce5e6fd17c355f",
+  name: "test temp_1",
+  type: "VIBER",
+  versions: {
+    history: [],
+    base: {
+      content: {
+        destinations: [
+          {
+            to: {
+              phoneNumber: "{{viber_user_id}}",
+            },
+          },
+        ],
+        content: {
+          text: "test msg",
+          image: {
+            url: "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/19e1c698-7be8-4f03-beb5-c96b11a3.jpg",
+          },
+          button: {
+            text: "test button",
+            url: "https://www.figma.com/file/2iksCNafQinyHxqAoKYR0z/Badges-in-Campaigns-and-Journeys?type=design&node-id=10-66632&mode=design&t=J0LMbSnho0paUjJK-0",
+          },
+        },
+      },
+    },
+  },
+  isActive: true,
+  orgId: 1231,
+  createdBy: "50685415",
+  updatedBy: "50685415",
+  createdAt: "2024-05-16T20:47:21.488Z",
+  updatedAt: "2024-05-17T13:25:49.078Z",
+};
+export const templateDetailsVideo = {
+  _id: "6646ef8af3c82f686462cf91",
+  name: "test temp_2",
+  type: "VIBER",
+  versions: {
+    history: [],
+    base: {
+      content: {
+        destinations: [
+          {
+            to: {
+              phoneNumber: "{{viber_user_id}}",
+            },
+          },
+        ],
+        content: {
+          text: "test video message test video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video message test video message test video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest overrrrrrrrr",
+          video: {
+            url: "https://crm-nightly-new-fileservice.s3.amazonaws.com/video_screenshot_assets__1715924855107.png/1040",
+            thumbnailUrl: "https://crm-nightly-new-fileservice.s3.amazonaws.com/video_screenshot_assets__1715924855107.png/1040",
+            duration: "",
+          },
+          button: {
+            text: "test button",
+            url: "https://www.test.com/file/",
+          },
+        },
+      },
+    },
+  },
+  isActive: true,
+  orgId: 1231,
+  createdBy: "50685415",
+  updatedBy: "50685415",
+  createdAt: "2024-05-17T05:47:54.636Z",
+  updatedAt: "2024-05-17T12:05:52.950Z",
+};
+export const templateDetails_ = {
+  _id: "6646ef8af3c82f686462cf91",
+  name: "test temp_2",
+  type: "VIBER",
+  versions: {
+    history: [],
+    base: {
+      content: {
+        destinations: [
+          {
+            to: {
+              phoneNumber: "{{viber_user_id}}",
+            },
+          },
+        ],
+        content: {
+          video: {
+            url: "https://crm-nightly-new-fileservice.s3.amazonaws.com/video_screenshot_assets__1715924855107.png/1040",
+            thumbnailUrl: "https://crm-nightly-new-fileservice.s3.amazonaws.com/video_screenshot_assets__1715924855107.png/1040",
+            duration: "",
+          },
+        },
+      },
+    },
+  },
+  isActive: true,
+  orgId: 1231,
+  createdBy: "50685415",
+  updatedBy: "50685415",
+  createdAt: "2024-05-17T05:47:54.636Z",
+  updatedAt: "2024-05-17T12:05:52.950Z",
+};
+export const templateDetailsText = {
+  _id: "6646ef8af3c82f686462cf91",
+  name: "test temp_2",
+  type: "VIBER",
+  versions: {
+    history: [],
+    base: {
+      content: {
+        destinations: [
+          {
+            to: {
+              phoneNumber: "{{viber_user_id}}",
+            },
+          },
+        ],
+        content: {
+          text: 'test',
+        },
+      },
+    },
+  },
+  isActive: true,
+  orgId: 1231,
+  createdBy: "50685415",
+  updatedBy: "50685415",
+  createdAt: "2024-05-17T05:47:54.636Z",
+  updatedAt: "2024-05-17T12:05:52.950Z",
+};