@capillarytech/creatives-library 8.0.319 → 8.0.321

package/v2Components/SmsFallback/index.js

@@ -0,0 +1,956 @@
+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,
+} 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 'OPEN_SELECTOR':
+      return { ...state, view: SMS_FALLBACK_VIEW.SELECTING };
+    case 'OPEN_EDITING':
+      return { ...state, view: SMS_FALLBACK_VIEW.EDITING };
+    case 'OPEN_CREATING':
+      return { ...state, view: SMS_FALLBACK_VIEW.CREATING, fetchDetailsLoading: false, smsCreateRequiredFieldsInvalid: true };
+    case 'SELECT_TEMPLATE_START':
+      return { ...state, fetchDetailsLoading: true };
+    case 'SELECT_TEMPLATE_DONE':
+      return { ...state, fetchDetailsLoading: false, pendingFallbackData: action.payload, view: SMS_FALLBACK_VIEW.EDITING };
+    case 'SET_FETCH_LOADING':
+      return { ...state, fetchDetailsLoading: action.payload };
+    case 'GO_BACK_TO_LIST':
+      return {
+        ...state,
+        fetchDetailsLoading: false,
+        pendingFallbackData: null,
+        smsCategoryFilter: SMS_CATEGORY_FILTERS.ALL,
+        view: SMS_FALLBACK_VIEW.SELECTING,
+      };
+    case 'CLOSE':
+      return SLIDEBOX_INITIAL_STATE;
+    case 'SET_IS_GET_FORM_DATA':
+      return { ...state, isGetFormData: action.payload };
+    case 'SET_LIQUID_ERROR':
+      return { ...state, liquidErrorMessage: action.liquidErrorMessage, isLiquidValidationError: action.isLiquidValidationError };
+    case '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 'OPEN_TEST_PREVIEW':
+      return { ...state, showTestAndPreviewSlidebox: true, isTestAndPreviewMode: true };
+    case 'CLOSE_TEST_PREVIEW':
+      return { ...state, showTestAndPreviewSlidebox: false, isTestAndPreviewMode: false };
+    case 'SET_CREATE_FIELDS_INVALID':
+      if (state.smsCreateRequiredFieldsInvalid === action.payload) return state;
+      return { ...state, smsCreateRequiredFieldsInvalid: action.payload };
+    case '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: '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: 'OPEN_SELECTOR' });
+  }, []);
+
+  const closeSlidebox = useCallback(() => {
+    clearTemplateSearchDebounce();
+    templateDetailsFetchGenerationRef.current += 1;
+    slideboxDispatch({ type: 'CLOSE' });
+  }, [clearTemplateSearchDebounce]);
+
+  const goBackToTemplateList = useCallback(() => {
+    clearTemplateSearchDebounce();
+    templateDetailsFetchGenerationRef.current += 1;
+    slideboxDispatch({ type: 'GO_BACK_TO_LIST' });
+    templateList.reset();
+  }, [clearTemplateSearchDebounce, templateList]);
+
+  const showLiquidErrorInFooter = useCallback((errorMessagesFromFormBuilder, currentFormBuilderTab) => {
+    const next = computeLiquidFooterUpdateFromFormBuilder(errorMessagesFromFormBuilder, currentFormBuilderTab, {
+      previousIsLiquidValidationError: isLiquidValidationError,
+      currentChannelUpper: SMS,
+    });
+    if (next == null) return;
+    slideboxDispatch({ type: 'SET_LIQUID_ERROR', liquidErrorMessage: next.liquidErrorMessage, isLiquidValidationError: next.isLiquidValidationError });
+  }, [isLiquidValidationError]);
+
+  const onValidationFail = useCallback(() => {
+    slideboxDispatch({ type: 'SET_IS_GET_FORM_DATA', payload: false });
+  }, []);
+
+  const saveMessage = useCallback(() => {
+    slideboxDispatch({ type: 'SET_IS_GET_FORM_DATA', payload: true });
+  }, []);
+
+  const handleFooterTestAndPreview = useCallback(() => {
+    slideboxDispatch({ type: 'OPEN_TEST_PREVIEW' });
+  }, []);
+
+  const handleCloseTestAndPreview = useCallback(() => {
+    slideboxDispatch({ type: 'CLOSE_TEST_PREVIEW' });
+  }, []);
+
+  const handleEmbeddedSmsFooterValidity = useCallback((validity) => {
+    const { isTemplateNameEmpty, isMessageEmpty } = validity || {};
+    slideboxDispatch({ type: '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: 'SET_LOADING_CONTENT', payload: v });
+  }, []);
+
+  const openSmsCreate = useCallback(() => {
+    clearTemplateSearchDebounce();
+    templateDetailsFetchGenerationRef.current += 1;
+    slideboxDispatch({ type: 'OPEN_CREATING' });
+  }, [clearTemplateSearchDebounce]);
+
+  const handleSelectTemplate = useCallback(
+    async (template) => {
+      if (!template) return;
+      const templateId = template._id;
+      if (!templateId) {
+        slideboxDispatch({ type: 'SELECT_TEMPLATE_DONE', payload: buildFallbackDataFromTemplate(template) });
+        return;
+      }
+      const fetchGeneration = ++templateDetailsFetchGenerationRef.current;
+      slideboxDispatch({ type: 'SELECT_TEMPLATE_START' });
+      try {
+        const result = await Api.getTemplateDetails({ id: templateId, channel: SMS_TEMPLATE_DETAILS_API_CHANNEL });
+        if (fetchGeneration !== templateDetailsFetchGenerationRef.current) return;
+        slideboxDispatch({
+          type: 'SELECT_TEMPLATE_DONE',
+          payload: buildFallbackDataFromTemplate(get(result, 'response', template)),
+        });
+      } catch (err) {
+        if (fetchGeneration !== templateDetailsFetchGenerationRef.current) return;
+        slideboxDispatch({ type: 'SELECT_TEMPLATE_DONE', payload: buildFallbackDataFromTemplate(template) });
+      } finally {
+        if (fetchGeneration === templateDetailsFetchGenerationRef.current) {
+          slideboxDispatch({ type: '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: 'SET_IS_GET_FORM_DATA', payload: false });
+        return;
+      }
+      slideboxDispatch({ type: 'SET_IS_GET_FORM_DATA', payload: false });
+      onChange({
+        ...(value && typeof value === 'object' ? value : {}),
+        templateName: nameOk,
+        content: smsEditor,
+        templateContent: smsEditor,
+        unicodeValidity: typeof base['unicode-validity'] === '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'] === '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'] === 'boolean'
+          ? base['unicode-validity']
+          : baseForSave?.unicodeValidity,
+        ...(Object.prototype.hasOwnProperty.call(base, 'rcs-sms-fallback-var-mapped')
+          && rcsFallbackVarMappedFromBase != null
+          && typeof rcsFallbackVarMappedFromBase === 'object'
+          ? { rcsSmsFallbackVarMapped: rcsFallbackVarMappedFromBase }
+          : {}),
+      });
+      slideboxDispatch({ type: 'SET_PENDING_FALLBACK_DATA', payload: null });
+      if (!skipClose) closeSlidebox();
+    },
+    [onChange, closeSlidebox, value, pendingFallbackData]
+  );
+
+  const handleRemove = useCallback(() => {
+    onChange(null);
+  }, [onChange]);
+
+  const handleEdit = useCallback(() => {
+    if (!value) return;
+    slideboxDispatch({ type: 'OPEN_EDITING' });
+  }, [value]);
+
+  const extra = value
+    ? [
+        <CapDropdown
+          key="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));