@capillarytech/creatives-library 9.0.15-alpha.3 → 9.0.16-beta.0

package/v2Components/SmsFallback/index.js

@@ -1,958 +0,0 @@
-import React, { useCallback, useRef, useEffect, useMemo, useReducer } from 'react';
-import { connect } from 'react-redux';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { injectIntl, FormattedMessage } from 'react-intl';
-import get from 'lodash/get';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import { CapIcons, CapLabel, CapRadio } from '@capillarytech/cap-ui-library';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapDropdown from '@capillarytech/cap-ui-library/CapDropdown';
-import CapMenu from '@capillarytech/cap-ui-library/CapMenu';
-import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
-import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
-import * as Api from '../../services/api';
-import globalMessages from '../../v2Containers/Cap/messages';
-import { isTraiDLTEnable } from '../../utils/common';
-import TemplatesActionBar from '../../v2Containers/Templates/TemplatesActionBar';
-import * as templatesActions from '../../v2Containers/Templates/actions';
-import templatesListMessages from '../../v2Containers/Templates/messages';
-import SmsWrapper from '../../v2Containers/SmsWrapper';
-import SmsTraiEdit from '../../v2Containers/SmsTrai/Edit';
-
-import SmsFallbackLocalSelector from './SmsFallbackLocalSelector';
-import { useLocalTemplateList } from './useLocalTemplateList';
-import {
-  SMS_FALLBACK_VIEW,
-  CHANNELS_TO_HIDE_FOR_SMS_ONLY,
-  EMBEDDED_SMS_CREATIVES_LOCATION,
-  EMBEDDED_SMS_CREATIVES_EDIT_LOCATION,
-  SMS_FALLBACK_ROUTE,
-  SMS_TEMPLATE_DETAILS_API_CHANNEL,
-  SMS_CATEGORY_FILTERS,
-  SMS_FALLBACK_ACTIONS,
-  JS_TYPE_BOOLEAN,
-} from './constants';
-import SlideBoxFooter from '../../v2Containers/CreativesContainer/SlideBoxFooter';
-import CreativesSlideBoxWrapper from '../../v2Containers/CreativesContainer/CreativesSlideBoxWrapper';
-import {
-  computeLiquidFooterUpdateFromFormBuilder,
-  getSlideBoxWrapperMarginFromLiquidErrors,
-} from '../../v2Containers/CreativesContainer/embeddedSlideboxUtils';
-import { SMS } from '../../v2Containers/CreativesContainer/constants';
-import creativesMessages from '../../v2Containers/CreativesContainer/messages';
-import messages from './messages';
-import {
-  buildFallbackDataFromTemplate,
-  buildFallbackDataFromCreativesPayload,
-  mapFallbackValueToEditTemplateData,
-  getBaseFromSmsTraiFormData,
-  getSmsFallbackCardDisplayContent,
-  resolveContentFromTraiBase,
-  filterSmsTemplatesByCategory,
-} from './smsFallbackUtils';
-
-import './index.scss';
-
-// ---------------------------------------------------------------------------
-// Reducer — replaces the 10 individual useState declarations
-// ---------------------------------------------------------------------------
-
-const SLIDEBOX_INITIAL_STATE = {
-  view: null,
-  fetchDetailsLoading: false,
-  pendingFallbackData: null,
-  smsCategoryFilter: SMS_CATEGORY_FILTERS.ALL,
-  isGetFormData: false,
-  liquidErrorMessage: { STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] },
-  isLiquidValidationError: false,
-  isLoadingContent: true,
-  showTestAndPreviewSlidebox: false,
-  isTestAndPreviewMode: false,
-  smsCreateRequiredFieldsInvalid: true,
-};
-
-function slideboxReducer(state, action) {
-  switch (action.type) {
-    case SMS_FALLBACK_ACTIONS.OPEN_SELECTOR:
-      return { ...state, view: SMS_FALLBACK_VIEW.SELECTING };
-    case SMS_FALLBACK_ACTIONS.OPEN_EDITING:
-      return { ...state, view: SMS_FALLBACK_VIEW.EDITING };
-    case SMS_FALLBACK_ACTIONS.OPEN_CREATING:
-      return { ...state, view: SMS_FALLBACK_VIEW.CREATING, fetchDetailsLoading: false, smsCreateRequiredFieldsInvalid: true };
-    case SMS_FALLBACK_ACTIONS.SELECT_TEMPLATE_START:
-      return { ...state, fetchDetailsLoading: true };
-    case SMS_FALLBACK_ACTIONS.SELECT_TEMPLATE_DONE:
-      return { ...state, fetchDetailsLoading: false, pendingFallbackData: action.payload, view: SMS_FALLBACK_VIEW.EDITING };
-    case SMS_FALLBACK_ACTIONS.SET_FETCH_LOADING:
-      return { ...state, fetchDetailsLoading: action.payload };
-    case SMS_FALLBACK_ACTIONS.GO_BACK_TO_LIST:
-      return {
-        ...state,
-        fetchDetailsLoading: false,
-        pendingFallbackData: null,
-        smsCategoryFilter: SMS_CATEGORY_FILTERS.ALL,
-        view: SMS_FALLBACK_VIEW.SELECTING,
-      };
-    case SMS_FALLBACK_ACTIONS.CLOSE:
-      return SLIDEBOX_INITIAL_STATE;
-    case SMS_FALLBACK_ACTIONS.SET_IS_GET_FORM_DATA:
-      return { ...state, isGetFormData: action.payload };
-    case SMS_FALLBACK_ACTIONS.SET_LIQUID_ERROR:
-      return { ...state, liquidErrorMessage: action.liquidErrorMessage, isLiquidValidationError: action.isLiquidValidationError };
-    case SMS_FALLBACK_ACTIONS.SET_LOADING_CONTENT:
-      // Bail out when value is unchanged — prevents re-render loop: SmsCreate calls
-      // setIsLoadingContent(true) in componentWillReceiveProps on any prop change, and a
-      // new state object (even with the same value) would cause SmsFallbackPortalContent
-      // to re-render, giving SmsCreate new prop references and triggering the cycle again.
-      if (state.isLoadingContent === action.payload) return state;
-      return { ...state, isLoadingContent: action.payload };
-    case SMS_FALLBACK_ACTIONS.OPEN_TEST_PREVIEW:
-      return { ...state, showTestAndPreviewSlidebox: true, isTestAndPreviewMode: true };
-    case SMS_FALLBACK_ACTIONS.CLOSE_TEST_PREVIEW:
-      return { ...state, showTestAndPreviewSlidebox: false, isTestAndPreviewMode: false };
-    case SMS_FALLBACK_ACTIONS.SET_CREATE_FIELDS_INVALID:
-      if (state.smsCreateRequiredFieldsInvalid === action.payload) return state;
-      return { ...state, smsCreateRequiredFieldsInvalid: action.payload };
-    case SMS_FALLBACK_ACTIONS.SET_CATEGORY_FILTER:
-      return { ...state, smsCategoryFilter: action.payload };
-    default:
-      return state;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// SmsFallbackEditForm — shared by the inline editor and the EDITING slidebox
-// ---------------------------------------------------------------------------
-
-function SmsFallbackEditForm({
-  skipCloseOnSave,
-  dataSource,
-  value,
-  view,
-  embeddedEditLocation,
-  closeSlidebox,
-  handleEditComplete,
-  isRcsEditFlow,
-  isFullMode,
-  smsRegister,
-  selectedOfferDetails,
-  eventContextTags,
-  onRcsFallbackEditorStateChange,
-}) {
-  const templateData = mapFallbackValueToEditTemplateData(dataSource ?? value);
-  if (!templateData) return null;
-  return (
-    <SmsTraiEdit
-      location={embeddedEditLocation}
-      route={SMS_FALLBACK_ROUTE}
-      /* Required when embedded `module` is `library`: Sms/Create skips TAG fetch without this (see componentWillReceiveProps). */
-      getDefaultTags="outbound"
-      forceFullTagContext
-      handleClose={closeSlidebox}
-      templateData={templateData}
-      getFormSubscriptionData={(formData) => handleEditComplete(formData, skipCloseOnSave)}
-      isRcsSmsFallback
-      isRcsEditFlow={isRcsEditFlow}
-      showPreviewInRcsFallback={view === SMS_FALLBACK_VIEW.EDITING}
-      isFullMode={isFullMode}
-      smsRegister={smsRegister}
-      selectedOfferDetails={selectedOfferDetails}
-      eventContextTags={eventContextTags}
-      onRcsFallbackEditorStateChange={onRcsFallbackEditorStateChange}
-    />
-  );
-}
-
-SmsFallbackEditForm.propTypes = {
-  skipCloseOnSave: PropTypes.bool,
-  dataSource: PropTypes.object,
-  value: PropTypes.object,
-  view: PropTypes.string,
-  embeddedEditLocation: PropTypes.object.isRequired,
-  closeSlidebox: PropTypes.func.isRequired,
-  handleEditComplete: PropTypes.func.isRequired,
-  isRcsEditFlow: PropTypes.bool,
-  isFullMode: PropTypes.bool,
-  smsRegister: PropTypes.any,
-  selectedOfferDetails: PropTypes.object,
-  eventContextTags: PropTypes.array,
-  onRcsFallbackEditorStateChange: PropTypes.func,
-};
-
-// ---------------------------------------------------------------------------
-// SmsFallbackPortalContent — selector + slidebox overlay rendered via portal
-// ---------------------------------------------------------------------------
-
-function SmsFallbackPortalContent({
-  slideboxState,
-  slideboxDispatch,
-  setIsLoadingContent,
-  value,
-  channelsToHide,
-  smsRegister,
-  isFullMode,
-  selectedOfferDetails,
-  eventContextTags,
-  isRcsEditFlow,
-  onRcsFallbackEditorStateChange,
-  intl,
-  embeddedCreateLocation,
-  embeddedEditLocation,
-  templateListForSelector,
-  templateList,
-  scheduleTemplateListSearch,
-  flushTemplateListSearch,
-  slideBoxWrapperMargin,
-  closeSlidebox,
-  goBackToTemplateList,
-  handleSelectTemplate,
-  handleEmbeddedCreativesSave,
-  openSmsCreate,
-  showLiquidErrorInFooter,
-  saveMessage,
-  handleFooterTestAndPreview,
-  handleCloseTestAndPreview,
-  handleEmbeddedSmsFooterValidity,
-  onValidationFail,
-  handleSmsTraiCreateComplete,
-  handleSmsCreateFormSubscription,
-  handleEditComplete,
-  // Stable no-op refs kept in parent with useCallback/useMemo so SmsCreate does not
-  // receive new prop references on every slideboxState change (prevents re-render loop).
-  getLiquidTags,
-  forwardedTags,
-  onPreviewContentClicked,
-  onTestContentClicked,
-}) {
-  const { formatMessage } = intl;
-  const {
-    view,
-    fetchDetailsLoading,
-    pendingFallbackData,
-    smsCategoryFilter,
-    isGetFormData,
-    liquidErrorMessage,
-    isLiquidValidationError,
-    isLoadingContent,
-    showTestAndPreviewSlidebox,
-    isTestAndPreviewMode,
-    smsCreateRequiredFieldsInvalid,
-  } = slideboxState;
-
-  const isTrai = isTraiDLTEnable(isFullMode, smsRegister);
-
-  const getSearchTerm = (input) => {
-    if (typeof input === 'string') return input;
-    return input?.target?.value || '';
-  };
-
-  const dltCategoryFilters = isTrai ? (
-    <CapRadio.CapRadioGroup
-      className="line-filters"
-      value={smsCategoryFilter}
-      onChange={(e) => slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.SET_CATEGORY_FILTER, payload: e.target.value })}
-    >
-      <CapRadio.Button value={SMS_CATEGORY_FILTERS.ALL}>
-        <CapLabel type="label2"><FormattedMessage {...templatesListMessages.all} /></CapLabel>
-      </CapRadio.Button>
-      <CapRadio.Button value={SMS_CATEGORY_FILTERS.PROMOTIONAL}>
-        <CapLabel type="label2"><FormattedMessage {...templatesListMessages.promotional} /></CapLabel>
-      </CapRadio.Button>
-      <CapRadio.Button value={SMS_CATEGORY_FILTERS.SERVICE_EXPLICIT}>
-        <CapLabel type="label2"><FormattedMessage {...templatesListMessages.serviceExplicit} /></CapLabel>
-      </CapRadio.Button>
-      <CapRadio.Button value={SMS_CATEGORY_FILTERS.SERVICE_IMPLICIT}>
-        <CapLabel type="label2"><FormattedMessage {...templatesListMessages.serviceImplicit} /></CapLabel>
-      </CapRadio.Button>
-    </CapRadio.CapRadioGroup>
-  ) : null;
-
-  const filterContent = (
-    <TemplatesActionBar
-      searchValue={templateList.search}
-      onSearchChange={(val) => {
-        const term = getSearchTerm(val);
-        templateList.setSearch(term);
-        scheduleTemplateListSearch(term);
-      }}
-      onSearch={(val) => {
-        const term = typeof val === 'string' ? val : (getSearchTerm(val) || templateList.search);
-        flushTemplateListSearch(term);
-      }}
-      onClear={() => flushTemplateListSearch('')}
-      searchPlaceholder={formatMessage(messages.searchByCreativeName)}
-      ctaClassName="create-new-sms"
-      ctaLabel={formatMessage(isTrai ? messages.uploadNew : messages.createNew)}
-      onCtaClick={openSmsCreate}
-    >
-      {dltCategoryFilters}
-    </TemplatesActionBar>
-  );
-
-  const showSelector =
-    view === SMS_FALLBACK_VIEW.SELECTING ||
-    view === SMS_FALLBACK_VIEW.EDITING ||
-    view === SMS_FALLBACK_VIEW.CREATING;
-
-  const selectorEl = showSelector ? (
-    <SmsFallbackLocalSelector
-      key="sms-fallback-selector"
-      hidden={view !== SMS_FALLBACK_VIEW.SELECTING}
-      fetchDetailsLoading={fetchDetailsLoading}
-      templateList={templateListForSelector}
-      channelsToHide={channelsToHide}
-      smsRegister={smsRegister}
-      onCloseCreatives={closeSlidebox}
-      onSelectTemplate={handleSelectTemplate}
-      filterContent={filterContent}
-      getCreativesData={handleEmbeddedCreativesSave}
-      location={embeddedCreateLocation}
-    />
-  ) : null;
-
-  if (view !== SMS_FALLBACK_VIEW.EDITING && view !== SMS_FALLBACK_VIEW.CREATING) {
-    return <>{selectorEl}</>;
-  }
-
-  let slideHeader = null;
-  let slideContent = null;
-
-  if (view === SMS_FALLBACK_VIEW.CREATING) {
-    slideHeader = (
-      <CapHeader
-        className="support-video-elements sms-fallback-create-slidebox-header"
-        title={(
-          <FormattedMessage
-            {...creativesMessages.createMessageContent}
-            values={{ channel: <FormattedMessage {...creativesMessages.smsHeader} /> }}
-          />
-        )}
-        prefix={
-          !isFullMode ? (
-            <span className="sms-fallback-create-slidebox-header__prefix">
-              <CapIcons.BackIcon onClick={goBackToTemplateList} />
-            </span>
-          ) : null
-        }
-      />
-    );
-    slideContent = (
-      <SmsWrapper
-        isCreateSms
-        embeddedSmsFallback
-        showLiquidErrorInFooter={showLiquidErrorInFooter}
-        setIsLoadingContent={setIsLoadingContent}
-        location={embeddedCreateLocation}
-        route={SMS_FALLBACK_ROUTE}
-        isGetFormData={isGetFormData}
-        getFormSubscriptionData={handleSmsCreateFormSubscription}
-        onValidationFail={onValidationFail}
-        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
-        handleTestAndPreview={handleFooterTestAndPreview}
-        handleCloseTestAndPreview={handleCloseTestAndPreview}
-        isTestAndPreviewMode={isTestAndPreviewMode}
-        /* Same as campaign embedded SMS + library: triggers full /meta/TAG (outbound) instead of partial supportedTags-only path. */
-        getDefaultTags="outbound"
-        forceFullTagContext
-        getLiquidTags={getLiquidTags}
-        isFullMode={isFullMode}
-        forwardedTags={forwardedTags}
-        selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        onTestContentClicked={onTestContentClicked}
-        onCreateComplete={handleSmsTraiCreateComplete}
-        onShowTemplates={closeSlidebox}
-        onEmbeddedSmsFooterValidity={handleEmbeddedSmsFooterValidity}
-        smsRegister={smsRegister}
-        eventContextTags={eventContextTags}
-      />
-    );
-  } else if (view === SMS_FALLBACK_VIEW.EDITING && (pendingFallbackData || value)) {
-    slideHeader = (
-      <CapHeader
-        className="sms-fallback-slidebox-header sms-fallback-slidebox-header--edit"
-        title={formatMessage(messages.editTitle)}
-        description=""
-        prefix={(
-          <div className="sms-fallback-slidebox-header__prefix">
-            <button
-              type="button"
-              className="sms-fallback-slidebox-header__back"
-              onClick={goBackToTemplateList}
-              aria-label={formatMessage(messages.backToTemplates)}
-            >
-              <CapIcon type="arrow-left" />
-            </button>
-          </div>
-        )}
-      />
-    );
-    slideContent = (
-      <SmsFallbackEditForm
-        dataSource={pendingFallbackData || value}
-        value={value}
-        view={view}
-        embeddedEditLocation={embeddedEditLocation}
-        closeSlidebox={closeSlidebox}
-        handleEditComplete={handleEditComplete}
-        isRcsEditFlow={isRcsEditFlow}
-        isFullMode={isFullMode}
-        smsRegister={smsRegister}
-        selectedOfferDetails={selectedOfferDetails}
-        eventContextTags={eventContextTags}
-        onRcsFallbackEditorStateChange={onRcsFallbackEditorStateChange}
-      />
-    );
-  }
-
-  const showSmsFormSlideboxFooter =
-    view === SMS_FALLBACK_VIEW.CREATING &&
-    !isTraiDLTEnable(false, smsRegister) &&
-    !isLoadingContent;
-
-  const smsFormSlideboxFooter = showSmsFormSlideboxFooter ? (
-    <SlideBoxFooter
-      isFullMode={false}
-      primarySaveButtonMessage={globalMessages.save}
-      slidBoxContent="createTemplate"
-      onSave={saveMessage}
-      onDiscard={() => {}}
-      onEditTemplate={() => {}}
-      onCreateNextStep={() => {}}
-      shouldShowContinueFooter={() => false}
-      shouldShowDoneFooter={() => true}
-      fetchingCmsData={false}
-      isTemplateNameEmpty={smsCreateRequiredFieldsInvalid}
-      isLiquidValidationError={isLiquidValidationError}
-      errorMessages={liquidErrorMessage}
-      currentTab=""
-      onTestAndPreview={handleFooterTestAndPreview}
-      showTestAndPreviewButton
-      isContinueButtonDisabled={false}
-      htmlEditorValidationState={{}}
-      isCreatingTemplate={false}
-      currentChannel={SMS}
-      restrictPersonalization={false}
-      isAnonymousType={false}
-      templateData={{}}
-      hasPersonalizationTokenError={false}
-    />
-  ) : null;
-
-  return (
-    <>
-      {selectorEl}
-      <CreativesSlideBoxWrapper
-        slideBoxWrapperMargin={slideBoxWrapperMargin}
-        shouldApplyFooterMargin={false}
-        className={classnames(
-          'add-creatives-section',
-          'creatives-library-mode',
-          view === SMS_FALLBACK_VIEW.CREATING && 'sms-fallback-slidebox--embedded-sms-create',
-        )}
-      >
-        <CapSlideBox
-          key="sms-fallback-edit-slidebox"
-          className="sms-fallback-slidebox rcs-sms-fallback-slidebox"
-          show
-          handleClose={closeSlidebox}
-          header={slideHeader}
-          content={slideContent}
-          footer={smsFormSlideboxFooter}
-          size="size-xl"
-        />
-      </CreativesSlideBoxWrapper>
-    </>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// SmsFallback — main component
-// ---------------------------------------------------------------------------
-
-export function SmsFallback({
-  dispatch,
-  value,
-  onChange,
-  smsRegister,
-  selectedOfferDetails,
-  channelsToHide = CHANNELS_TO_HIDE_FOR_SMS_ONLY,
-  sectionTitle,
-  intl,
-  showAsCard = true,
-  disableSelectTemplate = false,
-  eventContextTags,
-  isFullMode = false,
-  onRcsFallbackEditorStateChange,
-  parentLocation,
-  /** RCS container: true when editing an existing template (Unicode toggle locked in SMS fallback). */
-  isRcsEditFlow = false,
-}) {
-  const { formatMessage } = intl;
-  const [slideboxState, slideboxDispatch] = useReducer(slideboxReducer, SLIDEBOX_INITIAL_STATE);
-  const { view, pendingFallbackData, isLiquidValidationError, liquidErrorMessage } = slideboxState;
-
-  const slideBoxWrapperMargin = useMemo(
-    () => getSlideBoxWrapperMarginFromLiquidErrors(liquidErrorMessage),
-    [liquidErrorMessage],
-  );
-
-  const perPage = 25;
-  const fetchTemplates = useCallback(
-    ({ page, search: searchTerm }) =>
-      new Promise((resolve, reject) => {
-        dispatch(
-          templatesActions.getLocalSmsTemplates(
-            {
-              page,
-              perPage,
-              sortBy: 'Most Recent',
-              name: searchTerm || '',
-              ...(isTraiDLTEnable(isFullMode, smsRegister) ? { traiEnable: true } : {}),
-            },
-            formatMessage(globalMessages.copyOf),
-            ({ channelTemplates }) => {
-              const templates = channelTemplates?.templates || [];
-              const totalCount = channelTemplates?.totalCount || channelTemplates?.total || 0;
-              resolve({ templates, totalCount });
-            },
-            (error) => reject(error),
-          )
-        );
-      }),
-    [dispatch, smsRegister, isFullMode, perPage, formatMessage]
-  );
-
-  const templateList = useLocalTemplateList({ fetchTemplates, perPage });
-
-  /** Same 500ms debounce as `Templates.searchTemplate` (`delay` → `getAllTemplates`). */
-  const SMS_TEMPLATE_LIST_SEARCH_DEBOUNCE_MS = 500;
-  const templateSearchDebounceRef = useRef(null);
-
-  const clearTemplateSearchDebounce = useCallback(() => {
-    if (templateSearchDebounceRef.current != null) {
-      clearTimeout(templateSearchDebounceRef.current);
-      templateSearchDebounceRef.current = null;
-    }
-  }, []);
-
-  const { reset: resetTemplateList } = templateList;
-
-  const flushTemplateListSearch = useCallback(
-    (term) => {
-      clearTemplateSearchDebounce();
-      resetTemplateList(term);
-    },
-    [clearTemplateSearchDebounce, resetTemplateList],
-  );
-
-  const scheduleTemplateListSearch = useCallback(
-    (term) => {
-      clearTemplateSearchDebounce();
-      templateSearchDebounceRef.current = setTimeout(() => {
-        templateSearchDebounceRef.current = null;
-        resetTemplateList(term);
-      }, SMS_TEMPLATE_LIST_SEARCH_DEBOUNCE_MS);
-    },
-    [clearTemplateSearchDebounce, resetTemplateList],
-  );
-
-  useEffect(() => () => clearTemplateSearchDebounce(), [clearTemplateSearchDebounce]);
-
-  const filteredTemplatesForGrid = useMemo(
-    () => filterSmsTemplatesByCategory(templateList.templates, slideboxState.smsCategoryFilter),
-    [templateList.templates, slideboxState.smsCategoryFilter],
-  );
-
-  const templateListForSelector = useMemo(
-    () => ({ ...templateList, templates: filteredTemplatesForGrid }),
-    [templateList, filteredTemplatesForGrid],
-  );
-
-  const embeddedQueryBase = useMemo(() => {
-    const parentQuery = get(parentLocation, 'query', {});
-    const moduleFromParent = parentQuery?.module && parentQuery.module !== 'library'
-      ? parentQuery.module
-      : 'default';
-    return { ...parentQuery, type: 'embedded', module: moduleFromParent };
-  }, [parentLocation]);
-
-  const embeddedCreateLocation = useMemo(() => ({
-    ...EMBEDDED_SMS_CREATIVES_LOCATION,
-    pathname: '/sms/create',
-    query: embeddedQueryBase,
-  }), [embeddedQueryBase]);
-
-  const embeddedEditLocation = useMemo(() => ({
-    ...EMBEDDED_SMS_CREATIVES_EDIT_LOCATION,
-    pathname: '/sms/edit',
-    query: embeddedQueryBase,
-  }), [embeddedQueryBase]);
-
-  /** Bumped when the user dismisses the slidebox or navigates away; in-flight getTemplateDetails ignores stale completions. */
-  const templateDetailsFetchGenerationRef = useRef(0);
-
-  // resetRef: lets the SELECTING useEffect call the latest templateList.reset without
-  // adding it as a dep (which would re-run the effect on every templateList update).
-  const didInitialFetchRef = useRef(false);
-  const resetRef = useRef(templateList.reset);
-  resetRef.current = templateList.reset;
-  useEffect(() => {
-    if (view !== SMS_FALLBACK_VIEW.SELECTING) {
-      didInitialFetchRef.current = false;
-      return;
-    }
-    if (didInitialFetchRef.current) return;
-    didInitialFetchRef.current = true;
-    resetRef.current();
-  }, [view]);
-
-  const openSelector = useCallback(() => {
-    slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.OPEN_SELECTOR });
-  }, []);
-
-  const closeSlidebox = useCallback(() => {
-    clearTemplateSearchDebounce();
-    templateDetailsFetchGenerationRef.current += 1;
-    slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.CLOSE });
-  }, [clearTemplateSearchDebounce]);
-
-  const goBackToTemplateList = useCallback(() => {
-    clearTemplateSearchDebounce();
-    templateDetailsFetchGenerationRef.current += 1;
-    slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.GO_BACK_TO_LIST });
-    templateList.reset();
-  }, [clearTemplateSearchDebounce, templateList]);
-
-  const showLiquidErrorInFooter = useCallback((errorMessagesFromFormBuilder, currentFormBuilderTab) => {
-    const next = computeLiquidFooterUpdateFromFormBuilder(errorMessagesFromFormBuilder, liquidErrorMessage, currentFormBuilderTab, {
-      previousIsLiquidValidationError: isLiquidValidationError,
-      currentChannelUpper: SMS,
-    });
-    if (next == null) return;
-    slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.SET_LIQUID_ERROR, liquidErrorMessage: next.liquidErrorMessage, isLiquidValidationError: next.isLiquidValidationError });
-  }, [isLiquidValidationError, liquidErrorMessage]);
-
-  const onValidationFail = useCallback(() => {
-    slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.SET_IS_GET_FORM_DATA, payload: false });
-  }, []);
-
-  const saveMessage = useCallback(() => {
-    slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.SET_IS_GET_FORM_DATA, payload: true });
-  }, []);
-
-  const handleFooterTestAndPreview = useCallback(() => {
-    slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.OPEN_TEST_PREVIEW });
-  }, []);
-
-  const handleCloseTestAndPreview = useCallback(() => {
-    slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.CLOSE_TEST_PREVIEW });
-  }, []);
-
-  const handleEmbeddedSmsFooterValidity = useCallback((validity) => {
-    const { isTemplateNameEmpty, isMessageEmpty } = validity || {};
-    slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.SET_CREATE_FIELDS_INVALID, payload: !!isTemplateNameEmpty || !!isMessageEmpty });
-  }, []);
-
-  // Stable no-ops for SmsWrapper props that have no meaningful implementation in fallback context.
-  // Must be stable refs — SmsCreate's componentWillReceiveProps calls setIsLoadingContent(true)
-  // whenever it detects a prop reference change, so any inline arrow here restarts the loading cycle.
-  const getLiquidTagsNoop = useCallback(() => {}, []);
-  const onPreviewContentClickedNoop = useCallback(() => {}, []);
-  const onTestContentClickedNoop = useCallback(() => {}, []);
-  const emptyForwardedTags = useMemo(() => ({}), []);
-  const stableEventContextTags = useMemo(() => eventContextTags ?? [], [eventContextTags]);
-
-  // Stable reference required: SmsCreate calls setIsLoadingContent(true) in componentWillReceiveProps
-  // when it detects a prop change. An inline arrow would create a new reference every render,
-  // causing SmsCreate to keep resetting loading to true and the footer to never appear.
-  const setIsLoadingContent = useCallback((v) => {
-    slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.SET_LOADING_CONTENT, payload: v });
-  }, []);
-
-  const openSmsCreate = useCallback(() => {
-    clearTemplateSearchDebounce();
-    templateDetailsFetchGenerationRef.current += 1;
-    slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.OPEN_CREATING });
-  }, [clearTemplateSearchDebounce]);
-
-  const handleSelectTemplate = useCallback(
-    async (template) => {
-      if (!template) return;
-      const templateId = template._id;
-      if (!templateId) {
-        slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.SELECT_TEMPLATE_DONE, payload: buildFallbackDataFromTemplate(template) });
-        return;
-      }
-      const fetchGeneration = ++templateDetailsFetchGenerationRef.current;
-      slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.SELECT_TEMPLATE_START });
-      try {
-        const result = await Api.getTemplateDetails({ id: templateId, channel: SMS_TEMPLATE_DETAILS_API_CHANNEL });
-        if (fetchGeneration !== templateDetailsFetchGenerationRef.current) return;
-        slideboxDispatch({
-          type: SMS_FALLBACK_ACTIONS.SELECT_TEMPLATE_DONE,
-          payload: buildFallbackDataFromTemplate(get(result, 'response', template)),
-        });
-      } catch (err) {
-        if (fetchGeneration !== templateDetailsFetchGenerationRef.current) return;
-        slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.SELECT_TEMPLATE_DONE, payload: buildFallbackDataFromTemplate(template) });
-      } finally {
-        if (fetchGeneration === templateDetailsFetchGenerationRef.current) {
-          slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.SET_FETCH_LOADING, payload: false });
-        }
-      }
-    },
-    []
-  );
-
-  /**
-   * Non-Trai SMS create: FormBuilder submits here. Parent `onChange` updates RCS fallback state.
-   * Do **not** call `onCreateComplete` — in Creatives-embedded Rcs it is `getCreativesData`, which would
-   * finish the whole creative flow and send the user back to the templates list while RCS edit is still open.
-   */
-  const handleSmsCreateFormSubscription = useCallback(
-    (formPayload) => {
-      if (!formPayload?.validity) return;
-      const base = get(formPayload, 'value.base', {});
-      const smsEditor = base['sms-editor'] || '';
-      const templateName = base['template-name'] || base.template_name || '';
-      const nameOk = String(templateName || '').trim();
-      const bodyOk = String(smsEditor || '').trim();
-      if (!nameOk || !bodyOk) {
-        slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.SET_IS_GET_FORM_DATA, payload: false });
-        return;
-      }
-      slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.SET_IS_GET_FORM_DATA, payload: false });
-      onChange({
-        ...(value && typeof value === 'object' ? value : {}),
-        templateName: nameOk,
-        content: smsEditor,
-        templateContent: smsEditor,
-        unicodeValidity: typeof base['unicode-validity'] === JS_TYPE_BOOLEAN
-          ? base['unicode-validity']
-          : true,
-      });
-      closeSlidebox();
-    },
-    [onChange, closeSlidebox, value],
-  );
-
-  const handleSmsTraiCreateComplete = useCallback((uploadedTemplate) => {
-    if (uploadedTemplate) {
-      const base = uploadedTemplate.versions?.base || {};
-      const content = base.template_message || base['sms-editor'] || '';
-      const templateName = uploadedTemplate.name || base.template_name || '';
-      if (content || templateName) {
-        onChange({
-          templateName,
-          content,
-          templateContent: content,
-          unicodeValidity: typeof base['unicode-validity'] === JS_TYPE_BOOLEAN
-            ? base['unicode-validity']
-            : true,
-        });
-      }
-    }
-    closeSlidebox();
-  }, [onChange, closeSlidebox]);
-
-  /** Embedded template picker: map Creatives payload into fallback value. Same rule as create — no `onCreateComplete`. */
-  const handleEmbeddedCreativesSave = useCallback(
-    (creativesData) => {
-      const next = buildFallbackDataFromCreativesPayload(creativesData);
-      if (!next) return;
-      onChange(next);
-      closeSlidebox();
-    },
-    [onChange, closeSlidebox],
-  );
-
-  const handleEditComplete = useCallback(
-    (formData, skipClose) => {
-      const { base } = getBaseFromSmsTraiFormData(formData);
-      const smsEditor = base['sms-editor'] || '';
-      const baseForSave = pendingFallbackData || value;
-      const rcsFallbackVarMappedFromBase = base['rcs-sms-fallback-var-mapped'];
-      onChange({
-        ...baseForSave,
-        content: resolveContentFromTraiBase(base),
-        templateContent: smsEditor,
-        unicodeValidity: typeof base['unicode-validity'] === JS_TYPE_BOOLEAN
-          ? base['unicode-validity']
-          : baseForSave?.unicodeValidity,
-        ...(Object.prototype.hasOwnProperty.call(base, 'rcs-sms-fallback-var-mapped')
-          && rcsFallbackVarMappedFromBase != null
-          && typeof rcsFallbackVarMappedFromBase === 'object'
-          ? { rcsSmsFallbackVarMapped: rcsFallbackVarMappedFromBase }
-          : {}),
-      });
-      if (!skipClose) closeSlidebox();
-    },
-    [onChange, closeSlidebox, value, pendingFallbackData]
-  );
-
-  const handleRemove = useCallback(() => {
-    onChange(null);
-  }, [onChange]);
-
-  const handleEdit = useCallback(() => {
-    if (!value) return;
-    slideboxDispatch({ type: SMS_FALLBACK_ACTIONS.OPEN_EDITING });
-  }, [value]);
-
-  const extra = value
-    ? [
-        <CapDropdown
-          key="more"
-          data-testid="test-rcs-sms-fallback-template-more"
-          overlay={
-            <CapMenu>
-              <CapMenu.Item data-testid="test-rcs-sms-fallback-edit" className="ant-dropdown-menu-item" onClick={handleEdit}>
-                {formatMessage(messages.editTemplate)}
-              </CapMenu.Item>
-              <CapMenu.Item data-testid="test-rcs-sms-fallback-delete" className="ant-dropdown-menu-item" onClick={handleRemove}>
-                {formatMessage(messages.removeTemplate)}
-              </CapMenu.Item>
-            </CapMenu>
-          }
-        >
-          <CapIcon type="more" />
-        </CapDropdown>,
-      ]
-    : [];
-
-  const cardData = value
-    ? {
-        title: value.templateName?.trim()
-          ? value.templateName
-          : formatMessage(messages.fallbackCardUntitled),
-        content: getSmsFallbackCardDisplayContent(value),
-        cardType: SMS,
-        extra,
-      }
-    : null;
-
-  return (
-    <>
-      <CapRow className="sms-fallback-header-row">
-        <CapHeader
-          title={
-            <CapHeading type="h4">
-              {value
-                ? (sectionTitle ?? formatMessage(messages.sectionTitleWithoutOptional))
-                : (sectionTitle ?? formatMessage(messages.sectionTitle))}
-            </CapHeading>
-          }
-        />
-      </CapRow>
-
-      {!value ? (
-        <CapRow className="sms-fallback-select-wrap">
-          <CapButton
-            type="flat"
-            data-testid="test-rcs-sms-fallback-select-template"
-            className="sms-fallback-select-btn rcs-sms-fallback-select-btn"
-            onClick={openSelector}
-            disabled={disableSelectTemplate}
-          >
-            {formatMessage(messages.selectTemplate)}
-          </CapButton>
-        </CapRow>
-      ) : showAsCard ? (
-        <CapRow>
-          <div className="sms-fallback-card-wrap">
-            <CapCustomCard.CapCustomCardList cardList={[cardData]} className="sms-fallback-card rcs-sms-fallback-card" type={SMS} />
-          </div>
-        </CapRow>
-      ) : (
-        <CapRow className="sms-fallback-inline-editor">
-          <SmsFallbackEditForm
-            skipCloseOnSave
-            value={value}
-            view={view}
-            embeddedEditLocation={embeddedEditLocation}
-            closeSlidebox={closeSlidebox}
-            handleEditComplete={handleEditComplete}
-            isRcsEditFlow={isRcsEditFlow}
-            isFullMode={isFullMode}
-            smsRegister={smsRegister}
-            selectedOfferDetails={selectedOfferDetails}
-            eventContextTags={eventContextTags}
-            onRcsFallbackEditorStateChange={onRcsFallbackEditorStateChange}
-          />
-        </CapRow>
-      )}
-
-      {view && ReactDOM.createPortal(
-        <SmsFallbackPortalContent
-          slideboxState={slideboxState}
-          slideboxDispatch={slideboxDispatch}
-          value={value}
-          channelsToHide={channelsToHide}
-          smsRegister={smsRegister}
-          isFullMode={isFullMode}
-          selectedOfferDetails={selectedOfferDetails}
-          eventContextTags={stableEventContextTags}
-          isRcsEditFlow={isRcsEditFlow}
-          onRcsFallbackEditorStateChange={onRcsFallbackEditorStateChange}
-          intl={intl}
-          embeddedCreateLocation={embeddedCreateLocation}
-          embeddedEditLocation={embeddedEditLocation}
-          templateListForSelector={templateListForSelector}
-          templateList={templateList}
-          scheduleTemplateListSearch={scheduleTemplateListSearch}
-          flushTemplateListSearch={flushTemplateListSearch}
-          slideBoxWrapperMargin={slideBoxWrapperMargin}
-          closeSlidebox={closeSlidebox}
-          goBackToTemplateList={goBackToTemplateList}
-          handleSelectTemplate={handleSelectTemplate}
-          handleEmbeddedCreativesSave={handleEmbeddedCreativesSave}
-          openSmsCreate={openSmsCreate}
-          showLiquidErrorInFooter={showLiquidErrorInFooter}
-          saveMessage={saveMessage}
-          handleFooterTestAndPreview={handleFooterTestAndPreview}
-          handleCloseTestAndPreview={handleCloseTestAndPreview}
-          handleEmbeddedSmsFooterValidity={handleEmbeddedSmsFooterValidity}
-          onValidationFail={onValidationFail}
-          handleSmsTraiCreateComplete={handleSmsTraiCreateComplete}
-          handleSmsCreateFormSubscription={handleSmsCreateFormSubscription}
-          handleEditComplete={handleEditComplete}
-          setIsLoadingContent={setIsLoadingContent}
-          getLiquidTags={getLiquidTagsNoop}
-          forwardedTags={emptyForwardedTags}
-          onPreviewContentClicked={onPreviewContentClickedNoop}
-          onTestContentClicked={onTestContentClickedNoop}
-        />,
-        document.body,
-      )}
-    </>
-  );
-}
-
-SmsFallback.propTypes = {
-  dispatch: PropTypes.func,
-  value: PropTypes.object,
-  onChange: PropTypes.func.isRequired,
-  smsRegister: PropTypes.any,
-  selectedOfferDetails: PropTypes.object,
-  onPreviewTemplate: PropTypes.func,
-  channelsToHide: PropTypes.arrayOf(PropTypes.string),
-  sectionTitle: PropTypes.node,
-  templateListTitle: PropTypes.node,
-  templateListDescription: PropTypes.node,
-  intl: PropTypes.object.isRequired,
-  showAsCard: PropTypes.bool,
-  disableSelectTemplate: PropTypes.bool,
-  eventContextTags: PropTypes.array,
-  isFullMode: PropTypes.bool,
-  onRcsFallbackEditorStateChange: PropTypes.func,
-  parentLocation: PropTypes.object,
-  isRcsEditFlow: PropTypes.bool,
-};
-
-export default connect()(injectIntl(SmsFallback));