@capillarytech/creatives-library 9.0.12 → 9.0.13-alpha.1

package/v2Containers/Viber/index.scss

@@ -106,3 +106,178 @@
 .test-and-preview-button {
   margin-left: 6.25rem;
 }
+
+.viber-remove-row-btn {
+  margin-top: $CAP_SPACE_24;
+}
+
+.viber-add-row-btn {
+  margin-top: $CAP_SPACE_08;
+  color: $FONT_COLOR_05;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: $FONT_COLOR_05;
+    background: transparent;
+    border: none;
+  }
+}
+
+.viber-carousel-section {
+  margin-top: $CAP_SPACE_16;
+}
+
+.viber-carousel-card {
+  border: 1px solid $CAP_G06;
+  border-radius: $CAP_SPACE_04;
+  padding: $CAP_SPACE_16;
+  margin-bottom: $CAP_SPACE_16;
+}
+
+.viber-carousel-card-selector {
+  margin-bottom: $CAP_SPACE_16;
+  border-bottom: 1px solid $CAP_G07;
+}
+
+.viber-carousel-card-selector-btn {
+  min-width: 2.5rem;
+  padding: $CAP_SPACE_12 $CAP_SPACE_20;
+  border: none;
+  background: transparent;
+  color: $FONT_COLOR_04;
+  font-size: $CAP_SPACE_40;
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+}
+
+.viber-carousel-card-selector-btn.active {
+  color: $FONT_COLOR_01;
+  border-bottom-color: currentColor;
+}
+
+.viber-carousel-add-btn {
+  border-left: 1px solid $CAP_G07;
+  margin-left: $CAP_SPACE_16;
+  padding-left: $CAP_SPACE_24;
+  padding-right: $CAP_SPACE_24;
+}
+
+.viber-carousel-image-recommendation {
+  display: block;
+  margin: $CAP_SPACE_08 0 $CAP_SPACE_16 0;
+  color: $FONT_COLOR_03;
+}
+
+.viber-carousel-card-title-header {
+  align-items: center;
+}
+
+.viber-carousel-button {
+  border-top: 1px dashed $CAP_G06;
+  margin-top: $CAP_SPACE_12;
+  padding-top: $CAP_SPACE_12;
+}
+
+.viber-carousel-button-label {
+  margin-top: $CAP_SPACE_16;
+}
+
+.viber-carousel-button-title-header {
+  align-items: center;
+}
+
+.viber-carousel-url-type-select {
+  .ant-select-selection-selected-value {
+    max-width: none;
+    overflow: visible;
+    text-overflow: unset;
+  }
+
+  .ant-select-selection__rendered {
+    margin-right: $CAP_SPACE_24;
+  }
+}
+
+.viber-carousel-url-type-dropdown.ant-select-dropdown {
+  min-width: 12rem;
+}
+
+.viber-carousel-url-type-dropdown .ant-select-dropdown-menu-item {
+  white-space: normal;
+  word-break: break-word;
+  height: auto;
+  line-height: 1.25rem;
+  padding-top: $CAP_SPACE_06;
+  padding-bottom: $CAP_SPACE_06;
+}
+
+.viber-carousel-saved-button {
+  display: flex;
+  align-items: center;
+  border: 1px solid $CAP_G06;
+  border-radius: $CAP_SPACE_04;
+  padding: $CAP_SPACE_12 $CAP_SPACE_16;
+  margin-top: $CAP_SPACE_12;
+  min-height: 2.75rem;
+  box-sizing: border-box;
+}
+
+.viber-carousel-saved-button-icon {
+  margin-right: $CAP_SPACE_12;
+  color: $FONT_COLOR_01;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.viber-carousel-saved-button-text {
+  flex: 1;
+  margin-right: $CAP_SPACE_12;
+  min-width: 0;
+  line-height: 1.25rem;
+}
+
+.viber-carousel-saved-button-actions {
+  display: flex;
+  align-items: center;
+  gap: $CAP_SPACE_24;
+  margin-left: auto;
+  flex-shrink: 0;
+  min-height: 1.5rem;
+
+  .button-edit-icon {
+    margin-left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+}
+
+.viber-carousel-delete-icon {
+  margin-left: 0;
+}
+
+.viber-carousel-delete-icon-btn {
+  margin-left: $CAP_SPACE_08;
+}
+
+.viber-carousel-tab-label-disabled {
+  color: $FONT_COLOR_04;
+  cursor: not-allowed;
+}
+
+.viber-carousel-field-length-top {
+  display: block;
+  text-align: right;
+  margin-top: $CAP_SPACE_04;
+}
+
+.viber-form-error {
+  color: $CAP_RED;
+  display: block;
+  margin-top: $CAP_SPACE_08;
+}

package/v2Containers/Viber/messages.js

@@ -154,6 +154,10 @@ export default defineMessages({
     id: `${scope}.mediaVideo`,
     defaultMessage: 'Video',
   },
+  mediaCarousel: {
+    id: `${scope}.mediaCarousel`,
+    defaultMessage: 'Carousel',
+  },
   videoErrorMessage: {
     id: `${scope}.videoErrorMessage`,
     defaultMessage: 'Please upload the video with allowed file extension, size, dimension and aspect ratio',
@@ -214,4 +218,121 @@ export default defineMessages({
     id: `${scope}.assetIdMissingError`,
     defaultMessage: 'Asset upload initiated but no asset ID was returned from the server. Unable to track processing status.',
   },
+  carouselCardsLabel: {
+    id: `${scope}.carouselCardsLabel`,
+    defaultMessage: 'Carousel cards',
+  },
+  carouselCardHeading: {
+    id: `${scope}.carouselCardHeading`,
+    defaultMessage: 'Card {index}',
+  },
+  carouselCardTextLabel: {
+    id: `${scope}.carouselCardTextLabel`,
+    defaultMessage: 'Title',
+  },
+  carouselCardTextPlaceholder: {
+    id: `${scope}.carouselCardTextPlaceholder`,
+    defaultMessage: 'Enter title',
+  },
+  carouselMediaUrlLabel: {
+    id: `${scope}.carouselMediaUrlLabel`,
+    defaultMessage: 'Card media URL',
+  },
+  carouselMediaUrlPlaceholder: {
+    id: `${scope}.carouselMediaUrlPlaceholder`,
+    defaultMessage: 'https://example.com/image.jpg',
+  },
+  carouselImageRecommendation: {
+    id: `${scope}.carouselImageRecommendation`,
+    defaultMessage:
+      'Supported image types are .jpg, .jpeg, .png. Max size: 10 MB. Recommended resolution: 696 px x 600 px.',
+  },
+  carouselButtonTitleLabel: {
+    id: `${scope}.carouselButtonTitleLabel`,
+    defaultMessage: 'Button title',
+  },
+  carouselButtonTitlePlaceholder: {
+    id: `${scope}.carouselButtonTitlePlaceholder`,
+    defaultMessage: 'Enter button title',
+  },
+  carouselButtonActionLabel: {
+    id: `${scope}.carouselButtonActionLabel`,
+    defaultMessage: 'Button action URL',
+  },
+  carouselButtonUrlTypeLabel: {
+    id: `${scope}.carouselButtonUrlTypeLabel`,
+    defaultMessage: 'URL type',
+  },
+  carouselUrlTypeStatic: {
+    id: `${scope}.carouselUrlTypeStatic`,
+    defaultMessage: 'Static',
+  },
+  carouselUrlTypeDynamic: {
+    id: `${scope}.carouselUrlTypeDynamic`,
+    defaultMessage: 'Dynamic',
+  },
+  carouselButtonActionPlaceholder: {
+    id: `${scope}.carouselButtonActionPlaceholder`,
+    defaultMessage: 'https://example.com/action',
+  },
+  addCarouselCard: {
+    id: `${scope}.addCarouselCard`,
+    defaultMessage: 'Add card',
+  },
+  removeCarouselCard: {
+    id: `${scope}.removeCarouselCard`,
+    defaultMessage: 'Remove card',
+  },
+  addCarouselButton: {
+    id: `${scope}.addCarouselButton`,
+    defaultMessage: 'Add button',
+  },
+  removeCarouselButton: {
+    id: `${scope}.removeCarouselButton`,
+    defaultMessage: 'Remove button',
+  },
+  carouselCardsLimitError: {
+    id: `${scope}.carouselCardsLimitError`,
+    defaultMessage: 'Carousel message requires 2 to 5 cards',
+  },
+  carouselCardError: {
+    id: `${scope}.carouselCardError`,
+    defaultMessage: 'Each card needs text and a valid media URL',
+  },
+  carouselButtonError: {
+    id: `${scope}.carouselButtonError`,
+    defaultMessage: 'Each button needs title and a valid action URL',
+  },
+  characterLimitExceededError: {
+    id: `${scope}.characterLimitExceededError`,
+    defaultMessage: 'Character limit exceeded',
+  },
+  textCannotBeEmptyError: {
+    id: `${scope}.textCannotBeEmptyError`,
+    defaultMessage: "Text can't be empty",
+  },
+  urlCannotBeEmptyError: {
+    id: `${scope}.urlCannotBeEmptyError`,
+    defaultMessage: "URL can't be empty",
+  },
+  carouselButtonUrlMaxLengthError: {
+    id: `${scope}.carouselButtonUrlMaxLengthError`,
+    defaultMessage: 'URL can not exceed 1000 characters',
+  },
+  carouselFirstButtonTitleMaxLengthError: {
+    id: `${scope}.carouselFirstButtonTitleMaxLengthError`,
+    defaultMessage: 'Button text should not exceed 10',
+  },
+  carouselSecondButtonTitleMaxLengthError: {
+    id: `${scope}.carouselSecondButtonTitleMaxLengthError`,
+    defaultMessage: 'Button text should not exceed 12',
+  },
+  carouselCardTitleMinLengthError: {
+    id: `${scope}.carouselCardTitleMinLengthError`,
+    defaultMessage: 'Minimum 2 characters required',
+  },
+  carouselCardTitleMaxLengthError: {
+    id: `${scope}.carouselCardTitleMaxLengthError`,
+    defaultMessage: 'Title can not be more than 38 characters',
+  },
 });

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

@@ -389,4 +389,84 @@ describe('Test Viber container', () => {
     const doneBtn = screen.getByRole('button', { name: /done/i });
     expect(doneBtn).toBeEnabled();
   });
+
+  it('does not show empty URL error on focus or while typing in carousel button action', 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(),
+    });
+
+    fireEvent.click(screen.getByRole('radio', { name: /carousel/i }));
+    const actionInput = await screen.findByPlaceholderText('https://example.com/action');
+
+    fireEvent.focus(actionInput);
+    expect(screen.queryByText("URL can't be empty")).not.toBeInTheDocument();
+
+    fireEvent.change(actionInput, { target: { value: 'https://' } });
+    expect(screen.queryByText("URL can't be empty")).not.toBeInTheDocument();
+  });
+
+  it('shows empty URL error on blur when carousel button action is left empty', 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(),
+    });
+
+    fireEvent.click(screen.getByRole('radio', { name: /carousel/i }));
+    const actionInput = await screen.findByPlaceholderText('https://example.com/action');
+
+    fireEvent.focus(actionInput);
+    fireEvent.blur(actionInput);
+
+    expect(await screen.findByText("URL can't be empty")).toBeInTheDocument();
+  });
+
+  it('shows empty URL error on save when carousel button action is empty', 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(),
+    });
+
+    fireEvent.click(screen.getByRole('radio', { name: /carousel/i }));
+    await screen.findByPlaceholderText('https://example.com/action');
+    fireEvent.click(screen.getByRole('button', { name: /save/i }));
+
+    expect(await screen.findByText("URL can't be empty")).toBeInTheDocument();
+  });
 });