@capillarytech/creatives-library 9.0.36-alpha.0 → 9.0.36

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/AppRoot.js

@@ -1,124 +0,0 @@
-import React, { useMemo, useEffect, useRef } from 'react';
-import { StyleSheetManager } from 'styled-components';
-import { Provider } from 'react-redux';
-import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
-import { createBrowserHistory } from 'history';
-import ConfigProvider from 'antd/lib/config-provider';
-import { getCapThemeConfig, loadCapUI } from '@capillarytech/cap-ui-library/utils';
-
-import LanguageProvider from 'v2Containers/LanguageProvider';
-import App from './containers/App';
-import './styles/main.scss';
-import { initialReducer } from './initialReducer';
-import { translationMessages } from './i18n';
-import initialState from './initialState';
-import pathConfig from './config/path';
-import { isMFEMode } from './utils/mfeDetect';
-import { emitFirstPaintReadyIfNotDataLanding } from './utils/mfeFirstPaintReady';
-import rebaseHistory from './utils/mfeHistory';
-import { MFEEventBus } from '@capillarytech/cap-ui-utils';
-import appConfig from './app-config';
-
-// Module-scope SDK init — MUST run before configureStore.
-loadCapUI();
-
-const AppRoot = ({ basename: _basename = '/creatives/ui', history: hostHistory }) => {
-  const { store, history } = useMemo(() => {
-    const hist = hostHistory
-      ? rebaseHistory(hostHistory, pathConfig.publicPath)
-      : createBrowserHistory({ basename: pathConfig.publicPath });
-    const st = configureStore(initialState, initialReducer, hist);
-    return { store: st, history: hist };
-  }, [hostHistory]);
-
-  // MFE style isolation: route THIS remote's styled-components output (including any
-  // createGlobalStyle) into a tagged <div data-mfe-app> in <head>, instead of the shared
-  // default styled-components <style>. On unmount the container is removed, so all of this
-  // remote's styled-components CSS goes with it — no global-style leak into other remotes.
-  // Standalone (non-MFE) is untouched: styles inject into <head> as usual.
-  const styleTarget = useMemo(() => {
-    if (!isMFEMode() || typeof document === 'undefined') return null;
-    const el = document.createElement('div');
-    el.setAttribute('data-mfe-app', 'creatives/ui');
-    document.head.appendChild(el);
-    return el;
-  }, []);
-
-  useEffect(() => () => {
-    if (styleTarget) styleTarget.remove();
-  }, [styleTarget]);
-
-  const fcpReported = useRef(false);
-  useEffect(() => {
-    if (isMFEMode() && !fcpReported.current) {
-      fcpReported.current = true;
-      requestAnimationFrame(() => {
-        MFEEventBus.emit('mfe:segment', {
-          action: 'stop',
-          appId: appConfig.appName,
-          type: 'fcp',
-          timestamp: performance.now(),
-        });
-      });
-    }
-  }, []);
-
-  // Non-landing routes (anything outside the TemplatesV2 listing pages) never emit
-  // the data-settled 'lcp'; emit it at first paint so the host drops the skeleton
-  // overlay immediately instead of waiting out the grace timer.
-  useEffect(() => {
-    emitFirstPaintReadyIfNotDataLanding();
-  }, []);
-
-  useEffect(() => {
-    if (!isMFEMode()) {
-      const { startStandalone } = require('locize');
-      startStandalone();
-    }
-  }, []);
-
-  useEffect(() => {
-    if (isMFEMode()) {
-      MFEEventBus.emit('gtm:init', {
-        appId: appConfig.appName,
-        containerId: appConfig.gtm.trackingId,
-      });
-    }
-  }, []);
-
-  // In MFE mode the HOST's index.html is served, not creatives' — so BeePlugin.js
-  // (declared in creatives/index.html) is never loaded. Inject it here so BeeEditor works.
-  useEffect(() => {
-    if (isMFEMode() && !window.BeePlugin && !document.querySelector('script[src*="BeePlugin.js"]')) {
-      const script = document.createElement('script');
-      script.src = 'https://app-rsrc.getbee.io/plugin/BeePlugin.js';
-      script.type = 'text/javascript';
-      document.head.appendChild(script);
-    }
-  }, []);
-
-  useEffect(() => {
-    const unsub = MFEEventBus.on('creatives:navigate', ({ path }) => {
-      if (path) history.push(path);
-    });
-    return unsub;
-  }, [history]);
-
-  const tree = (
-    <Provider store={store}>
-      <LanguageProvider messages={translationMessages}>
-        <ConfigProvider theme={getCapThemeConfig()}>
-          <App history={history} />
-        </ConfigProvider>
-      </LanguageProvider>
-    </Provider>
-  );
-
-  return styleTarget ? (
-    <StyleSheetManager target={styleTarget}>{tree}</StyleSheetManager>
-  ) : (
-    tree
-  );
-};
-
-export default AppRoot;

package/app-config.js

@@ -1,61 +0,0 @@
-module.exports = {
-  appName: 'cap-creatives-ui',
-  intouchBaseUrl: 'nightly.intouch.capillarytech.com',
-  prefix: '/creatives/ui',
-  isHostedOnPlatform: false,
-  appType: 'native',
-  bugsnag: {
-    useBugsnag: false,
-    apiKey: '',
-    retainSourceMaps: false,
-  },
-  useSourceMaps: true,
-  i18n: {
-    useI18n: true,
-    customI18n: false,
-    localI18n: false,
-    appNames: ['cap_creatives_ui'],
-    locales: [],
-    defaultLocale: null,
-  },
-  gtm: {
-    useGTM: true,
-    trackingId: 'GTM-MC4TRPX',
-    projectId: 'GTM-MC4TRPX',
-  },
-  useNavigationComponent: true,
-  useTestSetup: true,
-  newrelic: {
-    enabled: true,
-    licenseKey: '082da40fff',
-    environments: {
-      nightly: {
-        appId: '718411553',
-      },
-      staging: {
-        appId: '718413027',
-      },
-      ushc: {
-        appId: '718413124',
-      },
-      apac: {
-        appId: '718413134',
-      },
-      'north-america': {
-        appId: '718413144',
-      },
-      apac2: {
-        appId: '718413155',
-      },
-      tata: {
-        appId: '718413165',
-      },
-      sea: {
-        appId: '718413175',
-      },
-      eu: {
-        appId: '718413185',
-      },
-    },
-  },
-};