@capillarytech/creatives-library 8.0.358 → 8.0.359-alpha.0

package/v2Containers/Viber/index.scss

@@ -123,3 +123,151 @@
 .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;
+}
+
+.viber-carousel-saved-button-icon {
+  margin-right: $CAP_SPACE_12;
+  color: $FONT_COLOR_01;
+}
+
+.viber-carousel-saved-button-text {
+  flex: 1;
+  margin-right: $CAP_SPACE_12;
+}
+
+.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',
@@ -210,6 +214,118 @@ export default defineMessages({
     id: `${scope}.cancel`,
     defaultMessage: 'Cancel',
   },
+  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',
+  },
+  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',
+  },
   assetIdMissingError: {
     id: `${scope}.assetIdMissingError`,
     defaultMessage: 'Asset upload initiated but no asset ID was returned from the server. Unable to track processing status.',

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

@@ -383,4 +383,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();
+  });
 });

package/v2Containers/WebPush/Create/index.js

@@ -45,8 +45,6 @@ import {
   ACTION_TYPES,
   NOTIFICATION_TITLE_MAX_LENGTH,
   MESSAGE_MAX_LENGTH,
-  EXTERNAL_URL,
-  SITE_URL,
 } from '../constants';
 import * as actions from '../actions';
 import {
@@ -75,9 +73,6 @@ import {
 import './index.scss';
 import { WEBPUSH } from '../../CreativesContainer/constants';
 import { isAiContentBotDisabled } from '../../../utils/common';
-import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
-import creativesMessages from '../../CreativesContainer/messages';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
 
 // Memoized TagList wrapper components for better performance
 const MemoizedTagList = memo(({
@@ -187,7 +182,6 @@ const WebPushCreate = ({
   const [redirectUrlError, setRedirectUrlError] = useState('');
   const [activeUploadField, setActiveUploadField] = useState(null);
   const [templateIdError, setTemplateIdError] = useState('');
-  const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
 
   // Refs
   const titleCountRef = useRef(null);
@@ -575,67 +569,6 @@ const WebPushCreate = ({
     return !(templateNameInvalid || titleValidation || messageValidation);
   };
 
-  const getTemplateContent = useCallback(() => {
-    let cta = null;
-    if (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL && redirectUrl) {
-      cta = { type: EXTERNAL_URL, actionLink: redirectUrl?.trim() };
-    } else if (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL && websiteLink) {
-      cta = { type: SITE_URL, actionLink: websiteLink };
-    }
-
-    const hasImage = mediaType === WEBPUSH_MEDIA_TYPES.IMAGE && imageSrc;
-    const hasCtas = buttons?.length > 0;
-    let expandableDetails = null;
-    if (hasImage || hasCtas) {
-      expandableDetails = {
-        media: hasImage ? [{ url: imageSrc, type: WEBPUSH_MEDIA_TYPES.IMAGE }] : [],
-        ctas: hasCtas ? buttons.map((btn) => ({
-          type: EXTERNAL_URL,
-          action: '',
-          title: btn.text || '',
-          actionLink: btn.url || '',
-        })) : [],
-      };
-    }
-
-    const iconImageUrl = brandIconOption !== BRAND_ICON_OPTIONS.DONT_SHOW && brandIconSrc ? brandIconSrc : undefined;
-
-    return {
-      channel: WEBPUSH,
-      accountId,
-      content: {
-        title: notificationTitle || '',
-        message: message || '',
-        ...(iconImageUrl ? { iconImageUrl } : {}),
-        ...(cta ? { cta } : {}),
-        ...(expandableDetails ? { expandableDetails } : {}),
-      },
-      messageSubject: templateName || notificationTitle || '',
-      offers: [],
-    };
-  }, [
-    notificationTitle,
-    message,
-    accountId,
-    mediaType,
-    imageSrc,
-    brandIconOption,
-    brandIconSrc,
-    buttons,
-    onClickBehaviour,
-    redirectUrl,
-    websiteLink,
-    templateName,
-  ]);
-
-  const handleTestAndPreview = useCallback(() => {
-    setShowTestAndPreviewSlidebox(true);
-  }, []);
-
-  const handleCloseTestAndPreview = useCallback(() => {
-    setShowTestAndPreviewSlidebox(false);
-  }, []);
-
   const isFormValid = () => {
     const templateNameInvalid = isFullMode && validateTemplateName(templateName);
     const titleValidation = validateTitle(notificationTitle);
@@ -1107,23 +1040,14 @@ const WebPushCreate = ({
           formatMessage={formatMessage}
           messages={messages}
         />
-        <CapRow className="webpush-test-preview-action">
-          <FormActions
-            onSave={handleSave}
-            isSaveDisabled={isSaveDisabled}
-            errorText={errorText}
-            accountErrorText={accountErrorText}
-            formatMessage={formatMessage}
-            messages={messages}
-          />
-          <CapButton
-            type="secondary"
-            onClick={handleTestAndPreview}
-            className="webpush-test-preview-btn"
-          >
-            {formatMessage(creativesMessages.testAndPreview)}
-          </CapButton>
-        </CapRow>
+        <FormActions
+          onSave={handleSave}
+          isSaveDisabled={isSaveDisabled}
+          errorText={errorText}
+          accountErrorText={accountErrorText}
+          formatMessage={formatMessage}
+          messages={messages}
+        />
       </CapColumn>
       <CapColumn className="preview-section" span={10}>
         <WebPushPreview
@@ -1135,13 +1059,6 @@ const WebPushCreate = ({
           buttons={buttons}
         />
       </CapColumn>
-      <TestAndPreviewSlidebox
-        show={showTestAndPreviewSlidebox}
-        onClose={handleCloseTestAndPreview}
-        content={getTemplateContent()}
-        currentChannel={WEBPUSH}
-        accountId={accountId || null}
-      />
     </CapRow>
   );
 };

package/v2Containers/WebPush/Create/index.scss

@@ -135,12 +135,5 @@
       font-family: 'Roboto', open-sans, sans-serif;
     }
   }
-
-  .webpush-test-preview-action {
-    display: flex;
-    .webpush-test-preview-btn {
-      margin-left: $CAP_SPACE_12;
-    }
-  }
 }
 

package/v2Components/CommonTestAndPreview/UnifiedPreview/WebPushPreviewContent.js

@@ -1,169 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapModal from '@capillarytech/cap-ui-library/CapModal';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-import PreviewControls from '../../../v2Containers/WebPush/Create/preview/PreviewControls';
-import PreviewContent from '../../../v2Containers/WebPush/Create/preview/PreviewContent';
-import DevicePreviewContent from '../../../v2Containers/WebPush/Create/preview/DevicePreviewContent';
-import {
-  OS_OPTIONS,
-  DEFAULT_OS,
-  DEFAULT_BROWSER,
-} from '../../../v2Containers/WebPush/Create/preview/constants';
-import { getBrowserOptionsForOS } from '../../../v2Containers/WebPush/Create/preview/config/notificationMappings';
-import messages from '../messages';
-
-const WebPushPreviewContent = ({
-  notificationTitle,
-  notificationBody,
-  imageSrc,
-  brandIconSrc,
-  buttons,
-  url,
-  isUpdating,
-  error,
-  isFullscreenOpen,
-  setIsFullscreenOpen,
-  selectedCustomer,
-}) => {
-  const [selectedOS, setSelectedOS] = useState(DEFAULT_OS);
-  const [selectedBrowser, setSelectedBrowser] = useState(DEFAULT_BROWSER);
-
-  const browserOptionsForOS = getBrowserOptionsForOS(selectedOS);
-
-  // Coerce browser when OS change removes current browser from available options
-  useEffect(() => {
-    const isValid = browserOptionsForOS.some((opt) => opt.value === selectedBrowser);
-    if (!isValid && browserOptionsForOS.length) {
-      setSelectedBrowser(browserOptionsForOS[0].value);
-    }
-  }, [browserOptionsForOS, selectedBrowser]);
-
-  const handleOSChange = (value) => {
-    setSelectedOS(value);
-  };
-
-  const handleBrowserChange = (value) => {
-    setSelectedBrowser(value);
-  };
-
-  const handleCloseFullscreen = () => {
-    setIsFullscreenOpen(false);
-  };
-
-  if (isUpdating) {
-    return null;
-  }
-
-  if (error) {
-    return null;
-  }
-
-  return (
-    <CapRow className="webpush-test-preview-container webpush-preview-container">
-      <CapRow className="webpush-preview-panel">
-        <PreviewControls
-          selectedOS={selectedOS}
-          selectedBrowser={selectedBrowser}
-          osOptions={OS_OPTIONS}
-          browserOptions={browserOptionsForOS}
-          onOSChange={handleOSChange}
-          onBrowserChange={handleBrowserChange}
-          layoutMode="newRow"
-          showStateDropdown={false}
-        />
-
-        <PreviewContent
-          notificationTitle={notificationTitle}
-          notificationBody={notificationBody}
-          url={url}
-          selectedOS={selectedOS}
-          selectedBrowser={selectedBrowser}
-          notificationState="Collapsed"
-          imageSrc={imageSrc}
-          brandIconSrc={brandIconSrc}
-          buttons={buttons}
-        />
-      </CapRow>
-
-      <CapModal
-        visible={isFullscreenOpen}
-        onCancel={handleCloseFullscreen}
-        width="90%"
-        centered
-        closable={false}
-        footer={null}
-        title={null}
-        maskClosable
-        className="webpush-fullscreen-modal webpush-preview-container"
-      >
-        <CapRow className="webpush-preview-header">
-          <div className="webpush-heading-container">
-            <CapRow type="flex" className="preview-for">
-              <CapLabel type="label16">
-                <FormattedMessage {...messages.previewFor} />
-              </CapLabel>
-              <CapLabel type="label2">
-                {selectedCustomer ? selectedCustomer.name : <FormattedMessage {...messages.defaultPreview} />}
-              </CapLabel>
-            </CapRow>
-            <CapIcon
-              type="collapse2"
-              onClick={() => handleCloseFullscreen()}
-              className="webpush-fullscreen-close-icon"
-            />
-          </div>
-        </CapRow>
-        <CapDivider className="webpush-fullscreen-divider" />
-        <DevicePreviewContent
-          notificationTitle={notificationTitle}
-          notificationBody={notificationBody}
-          url={url}
-          imageSrc={imageSrc}
-          brandIconSrc={brandIconSrc}
-          buttons={buttons}
-        />
-      </CapModal>
-    </CapRow>
-  );
-};
-
-WebPushPreviewContent.propTypes = {
-  notificationTitle: PropTypes.string,
-  notificationBody: PropTypes.string,
-  imageSrc: PropTypes.string,
-  brandIconSrc: PropTypes.string,
-  buttons: PropTypes.arrayOf(
-    PropTypes.shape({
-      text: PropTypes.string,
-      url: PropTypes.string,
-      type: PropTypes.string,
-    })
-  ),
-  url: PropTypes.string,
-  isUpdating: PropTypes.bool,
-  error: PropTypes.string,
-  isFullscreenOpen: PropTypes.bool,
-  setIsFullscreenOpen: PropTypes.func,
-  selectedCustomer: PropTypes.object,
-};
-
-WebPushPreviewContent.defaultProps = {
-  notificationTitle: '',
-  notificationBody: '',
-  imageSrc: '',
-  brandIconSrc: '',
-  buttons: [],
-  url: '',
-  isUpdating: false,
-  error: null,
-  isFullscreenOpen: false,
-  setIsFullscreenOpen: () => {},
-  selectedCustomer: null,
-};
-
-export default WebPushPreviewContent;