@redneckz/wildless-cms-uni-blocks 0.14.25 → 0.14.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.25",
+  "version": "0.14.27",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/api/{CorporateLeadAPI.ts → LeadServiceAPI.ts}

@@ -12,10 +12,12 @@ export interface DaDataResult {
   suggestions?: DaDataSuggestion<DaDataAddress>[];
 }
 
-export function CorporateLeadAPI() {
-  async function send(body: Record<string, string>) {
+export function LeadServiceAPI() {
+  async function send(body: Record<string, string>, isIndividualType?: boolean) {
+    const url = isIndividualType ? '/api/v1/lead' : '/api/v1/sendcorporatelead';
+
     try {
-      const response = await fetch('/api/v1/sendcorporatelead', {
+      const response = await fetch(url, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         mode: 'cors',

package/src/components/ApplicationForm/ApplicationForm.fixture.mobile.tsx

@@ -48,6 +48,14 @@ const ApplicationFormGrantSupport: ApplicationFormContent = {
   },
 };
 
+const ApplicationFormIndividuals: ApplicationFormContent = {
+  formBlock: {
+    ...formBlockProps,
+    formType: 'ApplicationFormIndividuals',
+    product: 'product',
+  },
+};
+
 export default {
   credit: (
     <div className="container grid grid-cols-12">
@@ -85,4 +93,10 @@ export default {
       <PopupManager />
     </div>
   ),
+  individuals: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormIndividuals} />
+      <PopupManager />
+    </div>
+  ),
 };

package/src/components/ApplicationForm/ApplicationForm.fixture.tsx

@@ -48,6 +48,14 @@ const ApplicationFormGrantSupport: ApplicationFormContent = {
   },
 };
 
+const ApplicationFormIndividuals: ApplicationFormContent = {
+  formBlock: {
+    ...formBlockProps,
+    formType: 'ApplicationFormIndividuals',
+    product: 'product',
+  },
+};
+
 export default {
   credit: (
     <div className="container grid grid-cols-12">
@@ -85,4 +93,10 @@ export default {
       <PopupManager />
     </div>
   ),
+  individuals: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormIndividuals} />
+      <PopupManager />
+    </div>
+  ),
 };

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { CorporateLeadAPI } from '../../api/CorporateLeadAPI';
+import { LeadServiceAPI } from '../../api/LeadServiceAPI';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -13,19 +13,22 @@ import { ResponseNotification } from './ResponseNotification';
 
 export interface ApplicationFormProps extends ApplicationFormContent, UniBlockProps {}
 
-const API = CorporateLeadAPI();
+const API = LeadServiceAPI();
 
 export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   const { className, formBlock, ...rest } = props;
 
   const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
 
-  const handleSubmit = useCallback(async (data: Record<string, any>) => {
-    const status = (await API.send(data)) ? 'OK' : 'Fail';
-    setResponseType(status);
+  const handleSubmit = useCallback(
+    async (data: Record<string, any>, isIndividualType?: boolean) => {
+      const status = (await API.send(data, isIndividualType)) ? 'OK' : 'Fail';
+      setResponseType(status);
 
-    return status;
-  }, []);
+      return status;
+    },
+    [],
+  );
 
   return (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
@@ -42,7 +45,10 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
 
 const renderEmbeddedForm = (
   formBlock: ApplicationFormBlockDef,
-  handleSubmit: (data: Record<string, string>) => Promise<'OK' | 'Fail'>,
+  handleSubmit: (
+    data: Record<string, string>,
+    isIndividualType?: boolean,
+  ) => Promise<'OK' | 'Fail'>,
 ) => {
   const type = formBlock?.formType;
   if (!type || !(type in EmbeddableForms)) {

package/src/components/ApplicationForm/ApplicationForm.ui.json

@@ -4,8 +4,11 @@
       "formType": {
         "ui:widget": "hidden"
       },
-      "sourceBookDir": {
-        "ui:widget": "sourceBook"
+      "product": {
+        "ui:widget": "sourceBookDataDropdown",
+        "ui:options": {
+          "sourceName": "products"
+        }
       }
     }
   }

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -74,6 +74,17 @@ export type GrantSupportFormParamsDef = TitleProps & {
   sourceBookDir?: string;
 };
 
+/**
+ * @title Заявка для ФЛ
+ */
+export type IndividualsFormParamsDef = TitleProps & {
+  /** @default ApplicationFormIndividuals */
+  formType: 'ApplicationFormIndividuals';
+  button?: SubmitButtonProps;
+  /** @title Продукт */
+  product?: string;
+};
+
 /**
  * @title Настройки формы
  */
@@ -83,7 +94,8 @@ export type ApplicationFormBlockDef =
   | DepositFormParamsDef
   | CreditFormParamsDef
   | AcquiringFormParamsDef
-  | GrantSupportFormParamsDef;
+  | GrantSupportFormParamsDef
+  | IndividualsFormParamsDef;
 
 /**
  * @title Форма заявки

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -23,9 +23,7 @@ const depositValidator = objectValidator({
   phone: phoneValidator,
 });
 
-export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
-  const { button, link, onSubmit } = props;
-
+export const ApplicationFormDeposit = JSX<ApplicationFormsProps>(({ button, link, onSubmit }) => {
   const handleSubmit = useCallback(
     (formState: DepositFormState) => {
       const { name, phone } = formState;

package/src/components/ApplicationForm/ApplicationFormGrantSupport.tsx

@@ -31,7 +31,7 @@ export const ApplicationFormGrantSupport = JSX<ApplicationFormsProps>((props) =>
           label="Ваш регион"
           placeholder="Выберите регион"
           isSearch={true}
-          options={regions.map(({ name = '' }) => ({ key: name }))}
+          options={regions.map(({ name = '' }) => ({ key: name, text: name }))}
           value={region}
           onChange={setRegion}
         />

package/src/components/ApplicationForm/ApplicationFormIndividuals.tsx

@@ -0,0 +1,74 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess } from '../../validation/validator';
+import { withValidator } from '../../validation/withValidator';
+import { type ApplicationFormsProps } from './ApplicationFormsProps';
+import { Footnote } from './Footnote';
+import { type IndividualsFormState } from './IndividualsFormState';
+import { renderIndividualsFields } from './renderIndividualsFields';
+import { renderSubmitButton } from './renderSubmitButton';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+
+const initialFormState: IndividualsFormState = {
+  surname: '',
+  name: '',
+  middleName: '',
+  phone: '',
+  mail: '',
+  date: undefined,
+  consentDataProcessing: true,
+};
+
+const individualsValidator = objectValidator({
+  surname: nameValidator,
+  name: nameValidator,
+  middleName: nameValidator,
+  phone: phoneValidator,
+  mail: defaultValidator,
+  date: defaultValidator,
+});
+
+export const ApplicationFormIndividuals = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, product, onSubmit } = props;
+
+  const handleSubmit = useCallback(
+    (formState: IndividualsFormState) => {
+      const { surname, name, middleName, phone, mail, date, consentDataProcessing } = formState;
+
+      isValidationSuccess(individualsValidator(formState)) &&
+        onSubmit(
+          {
+            typeForm: 'dpst',
+            surname,
+            name,
+            middleName,
+            mail,
+            consentDataProcessing,
+            phone: phone.replace(/[^+\d]/g, ''),
+            date: date?.toISOString().slice(0, 10) || '',
+            product: product || '',
+          },
+          true,
+        );
+    },
+    [onSubmit],
+  );
+
+  const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+
+  return (
+    <form className="container space-y-s" onSubmit={formProps.onSubmit}>
+      {renderIndividualsFields(field)}
+      <div className="@xl:flex justify-between items-center">
+        <div className="@xl:mb-0 mb-2 flex items-center gap-3">
+          <Checkbox {...withValidator(field('consentDataProcessing'), defaultValidator)} />
+          <Footnote text="Согласен с " link={link} />
+        </div>
+        {renderSubmitButton(button)}
+      </div>
+    </form>
+  );
+});

package/src/components/ApplicationForm/ApplicationFormsProps.ts

@@ -5,5 +5,6 @@ export interface ApplicationFormsProps<S extends Record<string, any> = Record<st
   button?: SubmitButtonProps;
   link?: LinkProps;
   sourceBookDir?: string;
-  onSubmit: (data: S) => void;
+  product?: string;
+  onSubmit: (data: S, isIndividualType?: boolean) => void;
 }

package/src/components/ApplicationForm/DatePickerControl.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DatePicker } from '../../ui-kit/DatePicker/DatePicker';
+import { Text } from '../../ui-kit/Text/Text';
+
+export interface DatePickerControlProps {
+  className: string;
+  label: string;
+  value?: Date;
+  error?: string;
+  onChange?: (value: Date) => void;
+}
+
+export const DatePickerControl = JSX<DatePickerControlProps>(
+  ({ className, label, value = undefined, error, onChange }) => (
+    <div className={className}>
+      {label ? (
+        <div className="mb-xs">
+          <Text size="text-m" font="font-light">
+            {label}
+          </Text>
+        </div>
+      ) : null}
+      <DatePicker value={value} onChange={onChange} valid={Boolean(!error)} />
+      <div className="h-2">
+        {error ? (
+          <Text size="text-xs" font="font-light" color="text-error">
+            {error}
+          </Text>
+        ) : null}
+      </div>
+    </div>
+  ),
+);

package/src/components/ApplicationForm/EmbeddableForms.tsx

@@ -3,6 +3,7 @@ import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
 import { ApplicationFormCredit } from './ApplicationFormCredit';
 import { ApplicationFormDeposit } from './ApplicationFormDeposit';
 import { ApplicationFormGrantSupport } from './ApplicationFormGrantSupport';
+import { ApplicationFormIndividuals } from './ApplicationFormIndividuals';
 import { ApplicationFormWed } from './ApplicationFormWed';
 
 export const EmbeddableForms = {
@@ -12,4 +13,5 @@ export const EmbeddableForms = {
   ApplicationFormCredit,
   ApplicationFormAcquiring,
   ApplicationFormGrantSupport,
+  ApplicationFormIndividuals,
 };

package/src/components/ApplicationForm/Footnote.tsx

@@ -5,12 +5,13 @@ import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 
 interface FootnoteProps {
+  text?: string;
   link?: LinkProps;
 }
 
-export const Footnote = JSX<FootnoteProps>(({ link }) => (
+export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
   <Paragraph size="text-s" font="font-light" color="text-secondary-text">
-    <Text>Нажимая кнопку, вы подтверждаете согласие с </Text>
+    <Text>{text || 'Нажимая кнопку, вы подтверждаете согласие с '}</Text>
     {link ? (
       <Button
         href={link.href}

package/src/components/ApplicationForm/IndividualsFormState.ts

@@ -0,0 +1,9 @@
+export interface IndividualsFormState {
+  surname: string;
+  name: string;
+  middleName: string;
+  phone: string;
+  mail: string;
+  date: Date | undefined;
+  consentDataProcessing: boolean;
+}

package/src/components/ApplicationForm/renderIndividualsFields.tsx

@@ -0,0 +1,46 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import { DatePickerControl } from './DatePickerControl';
+import { type IndividualsFormState } from './IndividualsFormState';
+import { InputControl } from './InputControl';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+
+export const renderIndividualsFields = (field: FormFieldRegisterer<IndividualsFormState>) => (
+  <div className="@xl:flex @xl:justify-between @xl:gap-lg">
+    <div className="@xl:w-1/2 space-y-s">
+      <InputControl
+        className="shrink-0 w-full"
+        label="Фамилия"
+        {...withValidator(field('surname'), nameValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="Отчество"
+        {...withValidator(field('middleName'), nameValidator)}
+      />
+      <PhoneInputControl
+        className="shrink-0 w-full"
+        label="Телефон"
+        {...withValidator(field('phone'), phoneValidator)}
+      />
+    </div>
+    <div className="@xl:w-1/2 space-y-s">
+      <InputControl
+        className="shrink-0 w-full"
+        label="Имя"
+        {...withValidator(field('name'), nameValidator)}
+      />
+      <DatePickerControl
+        className="shrink-0 w-full"
+        label="Дата рождения"
+        {...withValidator(field('date'), defaultValidator)}
+      />
+      <InputControl
+        className="shrink-0 w-full"
+        label="Электронная почта"
+        {...withValidator(field('mail'), defaultValidator)}
+      />
+    </div>
+  </div>
+);

package/src/components/Blocks.mobile.ts

@@ -12,7 +12,6 @@ import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
-import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
@@ -41,7 +40,6 @@ import { StickyBottomMenu } from './StickyBottomMenu/StickyBottomMenu';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
-import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
@@ -58,7 +56,6 @@ export const Blocks: BlocksRegistry = {
   CarouselCatalogCard,
   CarouselLinks,
   CarouselProductCard,
-  CarouselProgramsCard,
   CarouselRecommendationCard,
   CarouselTariffsCard,
   ComparisonTable,
@@ -87,6 +84,5 @@ export const Blocks: BlocksRegistry = {
   Tabs,
   TariffsTable,
   TextBlock,
-  Tile,
   VerticalLayout,
 };

package/src/components/Blocks.ts

@@ -14,7 +14,6 @@ import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselInvestmentCard } from './CarouselInvestmentCard/CarouselInvestmentCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
-import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselRichTextCard } from './CarouselRichTextCard/CarouselRichTextCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
@@ -53,7 +52,6 @@ import { SwipeListControlBlock } from './SwipeListControlBlock/SwipeListControlB
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
-import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 import { Video } from './Video/Video';
 
@@ -73,7 +71,6 @@ export const Blocks: BlocksRegistry = {
   CarouselInvestmentCard,
   CarouselLinks,
   CarouselProductCard,
-  CarouselProgramsCard,
   CarouselRecommendationCard,
   CarouselRichTextCard,
   CarouselTariffsCard,
@@ -112,7 +109,6 @@ export const Blocks: BlocksRegistry = {
   Tabs,
   TariffsTable,
   TextBlock,
-  Tile,
   VerticalLayout,
   Video,
 };

package/src/components/Bonus/Bonus.tsx

@@ -22,12 +22,12 @@ export const Bonus = JSX<BonusProps>(
           headlineVersion="M"
           align={align}
         />
-        <div className="flex flex-wrap w-full">
+        <div className="flex flex-wrap gap-3xl gap-x-m w-full">
           {bonusItems.length > 0
             ? bonusItems.map((_, i) => (
                 <div
                   key={String(i)}
-                  className="mb-3xl last:mb-0 sm:space-y-xs flex flex-col grow w-full p-4xl sm:p-m @xl:w-[49%] border border-gray"
+                  className="w-full @xl:w-[48%] sm:space-y-xs flex flex-col grow w-full p-xl sm:p-m border border-gray"
                 >
                   <div className="grow">
                     <Headline
@@ -59,10 +59,10 @@ const renderBonusItemContent = (bonusItemContent: BonusImageDef | BonusCountDef)
     : renderBonusImage(bonusItemContent as BonusImageDef);
 
 const renderBonusCount = (_: BonusCountDef) => (
-  <div className="w-full pt-default mt-s flex justify-center sm:justify-end items-end">
+  <div className="w-full pt-default @xl:mt-s @xl:mb-4 flex justify-center sm:justify-end items-end">
     {_.bonusCount ? (
       // -mb-10 добавлен для выравнивания bonusCount относительно bonusName, тк шрифт font-mohave неправильно высчитывает line-height
-      <div className="shrink-0 -mb-10">
+      <div className="shrink-0 -mb-6 @xl:-mb-4">
         <span className="font-mohave text-title-large sm:text-title-extra gradient-color-text">
           {_.bonusCount}
         </span>

package/src/components/Calculator/Calculator.mobile.tsx

@@ -12,8 +12,8 @@ import { EmbeddableCalcBlocks } from './EmbeddableCalcBlocks';
 
 export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
 
-export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [] }) => (
-  <BlockWrapper className={className} defaultPadding="p-0">
+export const Calculator = JSX<CalculatorProps>(({ className, calculatorTabs = [], ...rest }) => (
+  <BlockWrapper className={className} defaultPadding="p-0" {...rest}>
     {renderTabs(calculatorTabs)}
   </BlockWrapper>
 ));
@@ -28,7 +28,7 @@ const renderCalculator = (tab: CalculatorTab) => {
   const EmbeddedBlock = EmbeddableCalcBlocks[type];
 
   return (
-    <div>
+    <div className="p-xl">
       {tab?.calculatorBlock?.title ? (
         <Heading className="mb-lg" title={tab?.calculatorBlock?.title} />
       ) : null}
@@ -45,7 +45,7 @@ const renderTabs = (tabs: CalculatorTab[]) => {
   const isSingleTab = tabs.length === 1;
 
   if (isSingleTab) {
-    return <BlockWrapper>{renderCalculator(tabs[0])}</BlockWrapper>;
+    return renderCalculator(tabs[0]);
   }
 
   return tabs.map((tab, index) => (
@@ -54,9 +54,7 @@ const renderTabs = (tabs: CalculatorTab[]) => {
       isFoldButtonOnTop
       unfoldedByDefault={index === 0}
       renderFoldableSection={({ isUnfolded }) => (
-        <FoldableSection isUnfolded={isUnfolded}>
-          <BlockWrapper>{renderCalculator(tab)}</BlockWrapper>
-        </FoldableSection>
+        <FoldableSection isUnfolded={isUnfolded}>{renderCalculator(tab)}</FoldableSection>
       )}
       renderFoldButton={renderFoldButton(tab)}
     />

package/src/components/Carousel/Carousel.fixture.mobile.tsx

@@ -1,7 +1,6 @@
-import '../../setup-fixture';
-
 import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
 import { CARD } from '../CarouselCard/CarouselCard.fixture';
@@ -10,7 +9,7 @@ import {
   PRODUCT_CARD,
   PRODUCT_CARD_SMALL,
 } from '../CarouselProductCard/CarouselProductCard.fixture';
-import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
+import { CAROUSEL_RECOMMENDATION_CARD_BENEFITS } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
 import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
@@ -126,22 +125,22 @@ export default {
       />
     </div>
   ),
-  program: (
+  recommendations: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
-            type: 'CarouselProgramsCard',
-            content: BUSINESS_CARD,
+            type: 'CarouselRecommendationCard',
+            content: CAROUSEL_RECOMMENDATION_CARD,
           }),
         }}
         options={options}
       />
     </div>
   ),
-  recommendations: (
+  recommendationsSecondary: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
@@ -149,22 +148,24 @@ export default {
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselRecommendationCard',
-            content: CAROUSEL_RECOMMENDATION_CARD,
+            content: { version: 'secondary', ...CAROUSEL_RECOMMENDATION_CARD },
           }),
         }}
         options={options}
       />
     </div>
   ),
-  recommendationsSecondary: (
+  recommendationsBenefits: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
+        visibleItemCount={0}
+        cardSize="big"
         block={{
           type: 'Carousel',
-          blocks: new Array(3).fill({
+          blocks: new Array(6).fill({
             type: 'CarouselRecommendationCard',
-            content: { version: 'secondary', ...CAROUSEL_RECOMMENDATION_CARD },
+            content: CAROUSEL_RECOMMENDATION_CARD_BENEFITS,
           }),
         }}
         options={options}