@capillarytech/creatives-library 8.0.353-alpha.3 → 8.0.353-alpha.5

package/v2Containers/Viber/index.scss

@@ -123,151 +123,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;
-}
-
-.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,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',
@@ -214,118 +210,6 @@ 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,84 +383,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/v2Containers/WebPush/Create/index.js

@@ -45,6 +45,8 @@ import {
   ACTION_TYPES,
   NOTIFICATION_TITLE_MAX_LENGTH,
   MESSAGE_MAX_LENGTH,
+  EXTERNAL_URL,
+  SITE_URL,
 } from '../constants';
 import * as actions from '../actions';
 import {
@@ -73,6 +75,9 @@ 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(({
@@ -182,6 +187,7 @@ 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);
@@ -569,6 +575,67 @@ 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 && 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);
@@ -1040,14 +1107,23 @@ const WebPushCreate = ({
           formatMessage={formatMessage}
           messages={messages}
         />
-        <FormActions
-          onSave={handleSave}
-          isSaveDisabled={isSaveDisabled}
-          errorText={errorText}
-          accountErrorText={accountErrorText}
-          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>
       </CapColumn>
       <CapColumn className="preview-section" span={10}>
         <WebPushPreview
@@ -1059,6 +1135,13 @@ 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,5 +135,12 @@
       font-family: 'Roboto', open-sans, sans-serif;
     }
   }
+
+  .webpush-test-preview-action {
+    display: flex;
+    .webpush-test-preview-btn {
+      margin-left: $CAP_SPACE_12;
+    }
+  }
 }