@capillarytech/creatives-library 9.0.13-alpha.1 → 9.0.13-beta.0

package/v2Containers/Viber/index.scss

@@ -106,178 +106,3 @@
 .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,10 +154,6 @@ 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',
@@ -218,121 +214,4 @@ 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,84 +389,4 @@ 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();
-  });
 });

package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberCarouselPreviewCards.js

@@ -1,132 +0,0 @@
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapImage from '@capillarytech/cap-ui-library/CapImage';
-
-const getTrimmedText = (value = '') => (value ?? '').trim();
-const hasTrimmedText = (value = '') => Boolean(getTrimmedText(value));
-
-const getCarouselButtonsWithTitles = (card) => (
-  (card?.buttons ?? []).filter((button) => hasTrimmedText(button?.title)).slice(0, 2)
-);
-
-const getCarouselButtonSlotCount = (cards = []) => {
-  const buttonCounts = cards.map((card) => getCarouselButtonsWithTitles(card).length);
-  return Math.min(2, Math.max(0, ...buttonCounts, 0));
-};
-
-const ViberCarouselPreviewCards = ({ cards = [] }) => {
-  const previewCards = Array.isArray(cards) && cards.length ? cards : [{}];
-  const carouselButtonSlotCount = useMemo(
-    () => getCarouselButtonSlotCount(previewCards),
-    [previewCards],
-  );
-  const carouselTitleRefs = useRef([]);
-  const [carouselTitleLineCount, setCarouselTitleLineCount] = useState(1);
-
-  carouselTitleRefs.current = previewCards.map(() => null);
-
-  useLayoutEffect(() => {
-    let maxLines = 1;
-    carouselTitleRefs.current.forEach((node) => {
-      if (!node) {
-        return;
-      }
-      const { lineHeight } = window.getComputedStyle(node);
-      const parsedLineHeight = parseFloat(lineHeight) || 18;
-      const lines = Math.min(2, Math.max(1, Math.round(node.scrollHeight / parsedLineHeight)));
-      if (lines > maxLines) {
-        maxLines = lines;
-      }
-    });
-    setCarouselTitleLineCount((prev) => (prev === maxLines ? prev : maxLines));
-  }, [previewCards]);
-
-  return (
-    <CapRow type="flex" noWrap className="viber-carousel-preview-scroll">
-      {previewCards.map((card, index) => {
-        const cardButtons = getCarouselButtonsWithTitles(card);
-        const titleLineClass = `viber-carousel-preview-text-wrap--${carouselTitleLineCount}-line`;
-
-        return (
-          <CapRow type="flex-column" className="viber-carousel-preview-card" key={`viber-carousel-preview-card-${index}`}>
-            {hasTrimmedText(card?.mediaUrl) ? (
-              <CapImage
-                src={card?.mediaUrl}
-                className="viber-carousel-preview-image"
-                alt="Viber carousel card"
-              />
-            ) : (
-              <CapRow className="viber-carousel-preview-image-placeholder" />
-            )}
-            <CapRow className="viber-carousel-preview-card-body">
-              <CapRow className={`viber-carousel-preview-text-wrap ${titleLineClass}`}>
-                {hasTrimmedText(card?.text) ? (
-                  <CapRow
-                    className="viber-carousel-preview-text-inner"
-                    ref={(node) => {
-                      carouselTitleRefs.current[index] = node;
-                    }}
-                  >
-                    <CapLabel type="label15" className="viber-carousel-preview-text">
-                      {card?.text}
-                    </CapLabel>
-                  </CapRow>
-                ) : (
-                  <CapLabel type="label15" className="viber-carousel-preview-text-placeholder" />
-                )}
-              </CapRow>
-              {carouselButtonSlotCount > 0 && (
-                <CapRow className="viber-carousel-preview-buttons">
-                  {Array.from({ length: carouselButtonSlotCount }).map((_, btnIndex) => {
-                    const cardButton = cardButtons[btnIndex];
-                    const trimmedCardButtonTitle = cardButton
-                      ? getTrimmedText(cardButton?.title)
-                      : '';
-
-                    if (!trimmedCardButtonTitle) {
-                      return (
-                        <CapRow
-                          className="viber-carousel-preview-button viber-carousel-preview-button-placeholder"
-                          key={`viber-carousel-preview-btn-placeholder-${index}-${btnIndex}`}
-                          aria-hidden="true"
-                        />
-                      );
-                    }
-
-                    return (
-                      <CapLabel
-                        className={`viber-carousel-preview-button ${btnIndex === 1 ? 'viber-carousel-preview-button-secondary' : ''}`}
-                        key={`viber-carousel-preview-btn-${index}-${btnIndex}-${trimmedCardButtonTitle}`}
-                      >
-                        {trimmedCardButtonTitle}
-                      </CapLabel>
-                    );
-                  })}
-                </CapRow>
-              )}
-            </CapRow>
-          </CapRow>
-        );
-      })}
-    </CapRow>
-  );
-};
-
-ViberCarouselPreviewCards.propTypes = {
-  cards: PropTypes.arrayOf(PropTypes.shape({
-    text: PropTypes.string,
-    mediaUrl: PropTypes.string,
-    buttons: PropTypes.arrayOf(PropTypes.shape({
-      title: PropTypes.string,
-      action: PropTypes.string,
-    })),
-  })),
-};
-
-ViberCarouselPreviewCards.defaultProps = {
-  cards: [],
-};
-
-export default ViberCarouselPreviewCards;

package/v2Components/CommonTestAndPreview/UnifiedPreview/_viberCarouselPreviewCards.scss

@@ -1,132 +0,0 @@
-// Shared Viber carousel card row (Test & Preview device preview)
-.viber-carousel-preview-scroll {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: stretch;
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding-right: $CAP_SPACE_12;
-  scrollbar-width: none;
-  -webkit-overflow-scrolling: touch;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .viber-carousel-preview-card {
-    flex: 0 0 68%;
-    min-width: 80%;
-    margin-right: $CAP_SPACE_08;
-    background: $CAP_G09;
-    border: 1px solid $CAP_G07;
-    border-radius: $CAP_SPACE_12;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-self: stretch;
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    .viber-carousel-preview-card-body {
-      flex: 1;
-      padding: $CAP_SPACE_08;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-    }
-
-    .viber-carousel-preview-text-wrap {
-      flex-shrink: 0;
-      width: 100%;
-
-      &--1-line {
-        min-height: 1.3em;
-      }
-
-      &--2-line {
-        min-height: 2.6em;
-      }
-    }
-
-    .viber-carousel-preview-text-inner {
-      width: 100%;
-    }
-
-    .viber-carousel-preview-buttons {
-      display: flex;
-      flex-direction: column;
-      gap: $CAP_SPACE_06;
-      margin-top: auto;
-      width: 100%;
-      flex-shrink: 0;
-    }
-
-    .viber-carousel-preview-image {
-      width: 100%;
-      height: 10rem;
-      object-fit: cover;
-      border-radius: 0;
-    }
-
-    .viber-carousel-preview-image-placeholder {
-      width: 100%;
-      height: 10rem;
-      border-radius: 0;
-      background: $CAP_G07;
-    }
-
-    .viber-carousel-preview-text {
-      color: $CAP_G01;
-      line-height: 1.3;
-      white-space: normal;
-      word-break: break-word;
-      display: block;
-      width: 100%;
-      margin: 0;
-    }
-
-    .viber-carousel-preview-text-placeholder {
-      width: 100%;
-      height: 0.875rem;
-      border-radius: $CAP_SPACE_04;
-      background: $CAP_G07;
-      min-height: 0.875rem;
-      display: block;
-    }
-
-    .viber-carousel-preview-button {
-      color: $CAP_WHITE;
-      background: $CAP_PURPLE01;
-      border-radius: $CAP_SPACE_12;
-      text-align: center;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 1.5rem;
-      padding: $CAP_SPACE_06 $CAP_SPACE_08;
-      white-space: normal;
-      box-sizing: border-box;
-    }
-
-    .viber-carousel-preview-button-placeholder {
-      visibility: hidden;
-      pointer-events: none;
-      padding: 0;
-      background: transparent;
-      border: none;
-    }
-
-    .viber-carousel-preview-button-secondary {
-      color: $CAP_PURPLE01;
-      background: transparent;
-      border: none;
-    }
-  }
-}