@redneckz/wildless-cms-uni-blocks 0.14.1029 → 0.14.1030

package/mobile/src/api/getSubmitBody.ts

@@ -73,6 +73,7 @@ export const getSubmitBody = ({ body, endpoint, router }: submitBodyProps) => {
     }),
     ...getRkoTariffName(typeForm),
     ...staticBody,
+    ...getReferalRkoData(body, typeForm),
   };
 };
 
@@ -124,3 +125,19 @@ const getRkoTariffName = (typeForm?: string) =>
         partnerComments: globalThis?.sessionStorage.getItem('rkoTariffName') ?? 'Неизвестный тариф',
       }
     : {};
+
+const getReferalRkoData = (body: LeadRequest, typeForm?: string) => {
+  const params = new URLSearchParams(decodeURIComponent(globalThis.location?.search));
+
+  const partnerComments = params.get('utm_mail');
+  const partner = params.get('utm_source');
+
+  return typeForm === 'REF'
+    ? {
+        name: body.fullName,
+        fullName: undefined,
+        partnerComments,
+        partner,
+      }
+    : {};
+};

package/mobile/src/components/ApplicationForm/ApplicationForm.example.json

@@ -1841,5 +1841,43 @@
         }
       }
     }
+  ],
+  [
+    "Заявка на РКО по ссылке друга",
+    {
+      "content": {
+        "version": "primary",
+        "padding": "",
+        "title": "Открыть счёт РКО",
+        "typeForm": "REF",
+        "endpoint": "sendcorporatelead",
+        "sections": [
+          {
+            "inputs": [{ "name": "fullName", "required": true, "label": "ФИО" }]
+          },
+          {
+            "columns": 2,
+            "inputs": [
+              { "name": "phone", "required": true },
+              { "name": "email", "required": true }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Открыть счет",
+          "version": "primary"
+        },
+        "link": {
+          "text": "условиями передачи данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        },
+        "additionalLink": {
+          "text": "условиями проведения акции",
+          "href": "/promo-link",
+          "target": "_blank"
+        }
+      }
+    }
   ]
 ]

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

@@ -51,6 +51,7 @@ export const ApplicationForm = UniBlock<ApplicationFormProps>(
     sections = [],
     button,
     link,
+    additionalLink,
     endpoint,
     additionalParams,
     withSnowplow,
@@ -117,6 +118,7 @@ export const ApplicationForm = UniBlock<ApplicationFormProps>(
           {renderAgreementSubmit({
             consentDataProcessing,
             link,
+            additionalLink,
             button,
             typeForm,
           })}

package/mobile/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -116,6 +116,16 @@ export type ApplicationFormContent = UniBlockContent &
       /** @default "" */
       target?: Target;
     };
+    /**
+     * @title Условия проведения акции
+     * @required ["text", "href"]
+     */
+    additionalLink?: TextProps & {
+      /** @title URL (href) */
+      href?: string;
+      /** @default "" */
+      target?: Target;
+    };
     typeForm?: FormTypeFieldDef;
     endpoint?: EndpointType;
     /** @title Дополнительные параметры формы */

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

@@ -7,9 +7,10 @@ import { Text } from '../../ui-kit/Text/Text';
 
 type FootnoteProps = TextProps & {
   link?: LinkProps;
+  additionalLink?: LinkProps;
 };
 
-export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
+export const Footnote = JSX<FootnoteProps>(({ text, link, additionalLink }) => (
   <Paragraph size="text-l" font="font-light" color="text-secondary-text">
     {text ? <Text>{text}</Text> : null}
     {link ? (
@@ -17,5 +18,13 @@ export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
         {link.text}
       </Link>
     ) : null}
+    {additionalLink ? (
+      <Text>
+        {' и '}
+        <Link {...additionalLink} ariaLabel="условия проведения акции">
+          {additionalLink.text}
+        </Link>
+      </Text>
+    ) : null}
   </Paragraph>
 ));

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

@@ -14,11 +14,13 @@ const agreementTextPF = 'Нажимая на кнопку, вы подтверж
 export const renderAgreementSubmit = ({
   consentDataProcessing,
   link,
+  additionalLink,
   button,
   typeForm,
 }: {
   consentDataProcessing?: FieldProps<boolean>;
   link?: LinkProps;
+  additionalLink?: LinkProps;
   button?: SubmitButtonProps;
   typeForm?: string;
 }) => (
@@ -32,7 +34,11 @@ export const renderAgreementSubmit = ({
         {renderErrorText(withValidator(consentDataProcessing, agreementValidator).error)}
       </div>
     ) : (
-      <Footnote text={typeForm === 'PF' ? agreementTextPF : agreementText} link={link} />
+      <Footnote
+        text={typeForm === 'PF' ? agreementTextPF : agreementText}
+        link={link}
+        additionalLink={additionalLink}
+      />
     )}
     <SubmitButton className="w-full @xl:w-auto">
       {button?.text ? button.text : 'Отправить заявку'}

package/mobile/src/components/ReferalForm/ReferalForm.example.json

@@ -0,0 +1,8 @@
+{
+  "content": {
+    "link": "https://www.rshb.ru/business/dlya-druga/rko",
+    "button": {
+      "text": "Получить ссылку"
+    }
+  }
+}

package/mobile/src/components/ReferalForm/ReferalForm.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm/useForm';
+import { ApplicationFormLayout } from '../../ui-kit/ApplicationFormLayout/ApplicationFormLayout';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
+import { getFormValidator } from '../../ui-kit/FormField/getObjectValidator';
+import { Link } from '../../ui-kit/Link/Link';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { type Option } from '../../ui-kit/Select/Option';
+import { Text } from '../../ui-kit/Text/Text';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { type FieldDef } from '../ApplicationForm/ApplicationFormContent';
+import { type ReferalFormContent } from './ReferalFormContent';
+import { sections } from './referalFormData';
+import { renderSections } from './renderSections';
+import { ResultLink } from './ResultLink';
+
+export interface FormState {
+  email?: string;
+  dadataPartyInnSelect?: Option;
+}
+
+export interface ReferalFormProps extends ReferalFormContent, UniBlockProps {}
+
+export const ReferalForm = UniBlock<ReferalFormProps>(({ link = '', button, ...rest }) => {
+  const [isShowResultLink, setIsShowResultLink] = useState(false);
+  const [referalLink, setReferalLink] = useState('');
+  const inputs = useMemo(
+    () => (sections?.flatMap((_) => _?.inputs) || []) as FieldDef[],
+    [sections],
+  );
+
+  const formValidator = useMemo(() => getFormValidator(inputs), [inputs]);
+
+  const handleSubmit = useCallback(async (formData: FormState) => {
+    setReferalLink(
+      `${link}?utm_source=${formData.dadataPartyInnSelect?.text}&utm_mail=${formData.email}`,
+    );
+    setIsShowResultLink(true);
+  }, []);
+
+  const [, { field, onSubmit }] = useForm(
+    {},
+    {
+      resetOnSubmit: true,
+      formValidator,
+      onSubmit: handleSubmit,
+    },
+  );
+
+  return (
+    <ApplicationFormLayout
+      className="container space-y-m col-span-12"
+      title={getTitle(isShowResultLink)}
+      {...rest}
+    >
+      {isShowResultLink ? (
+        <ResultLink link={referalLink} />
+      ) : (
+        <form onSubmit={onSubmit}>
+          {renderSections(sections, field)}
+          <Paragraph size="text-l" font="font-light" color="text-secondary-text">
+            <Text>Нажимая кнопку, вы подтверждаете согласие с </Text>
+            <Link href="/privacy-policy" target="_blank" ariaLabel="условия передачи данных">
+              условиями передачи данных
+            </Link>
+          </Paragraph>
+          <SubmitButton className="w-full @xl:w-auto">
+            {button?.text ?? 'Получить ссылку'}
+          </SubmitButton>
+        </form>
+      )}
+    </ApplicationFormLayout>
+  );
+});
+
+const getTitle = (isShowResultLink = false) =>
+  isShowResultLink ? 'Ваша личная ссылка' : 'Как получить бесплатное обслуживание счёта';

package/mobile/src/components/ReferalForm/ReferalForm.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/ReferalForm/ReferalFormContent.ts

@@ -0,0 +1,12 @@
+import { type TextProps } from '../../model/HeadlineType';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+/**
+ * @title Форма для создания реферальной ссылки
+ */
+export type ReferalFormContent = UniBlockContent & {
+  /** @title Адрес страницы с заявкой для реферала */
+  link?: string;
+  /** @title Кнопка */
+  button?: TextProps;
+};

package/mobile/src/components/ReferalForm/ResultLink.tsx

@@ -0,0 +1,20 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+import { renderLinkInput } from './renderLinkInput';
+
+type ResultLinkProps = {
+  link: string;
+};
+
+export const ResultLink = JSX<ResultLinkProps>(({ link }) => {
+  return (
+    <div>
+      <div className="@xl:text-center @xl:col-span-2 mb-m">
+        <Text size="text-h6">Скопируйте ссылку и отправьте другу</Text>
+      </div>
+      {renderLinkInput({
+        value: link,
+      })}
+    </div>
+  );
+});

package/mobile/src/components/ReferalForm/referalFormData.ts

@@ -0,0 +1,18 @@
+import { type SectionsProps } from '../../model/InputSectionsType';
+
+export const sections: SectionsProps[] = [
+  { title: 'Заполните ваши данные и получите персональную ссылку', inputs: [] },
+  {
+    columns: 2,
+    inputs: [
+      {
+        name: 'dadataPartyInnSelect',
+        required: true,
+      },
+      {
+        name: 'email',
+        required: true,
+      },
+    ],
+  },
+];

package/mobile/src/components/ReferalForm/renderLinkInput.tsx

@@ -0,0 +1,37 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { type Picture } from '../../model/Picture';
+import { Img } from '../../ui-kit/Img/Img';
+import { type InputProps } from '../../ui-kit/Input/InputProps';
+import { defaultStyle } from '../../ui-kit/Input/styles';
+import { style } from '../../utils/style';
+
+const icon: Picture = {
+  src: 'CopyIcon.svg',
+  iconVersion: 'normal',
+  size: { width: 20 },
+};
+
+export const renderLinkInput = JSX<InputProps>(({ className, value = '' }) => {
+  const onClick = useCallback(async () => {
+    try {
+      await globalThis.navigator.clipboard.writeText(value);
+    } catch {
+      console.log('Ошибка копирования');
+    }
+  }, []);
+
+  return (
+    <div className={style('relative flex items-center max-w-lg m-auto', className)}>
+      <input
+        className={style('h-14 border-gray text-ellipsis pr-5xl', defaultStyle)}
+        type="text"
+        value={value}
+        disabled={true}
+      />
+      <div role="button" className="absolute right-3" onClick={onClick}>
+        <Img image={icon} />
+      </div>
+    </div>
+  );
+});

package/mobile/src/components/ReferalForm/renderSections.tsx

@@ -0,0 +1,18 @@
+import type { FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import type { SectionsProps } from '../../model/InputSectionsType';
+import { getField } from '../../ui-kit/FormField/getField';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { renderTitle } from '../../ui-kit/FormField/renderTitle';
+import { style } from '../../utils/style';
+import { type FieldDef } from '../ApplicationForm/ApplicationFormContent';
+
+export const renderSections = (
+  sections: SectionsProps[],
+  field: FormFieldRegisterer<Record<string, any>>,
+) =>
+  sections.map((_, i) => (
+    <div key={`section-${i}`} className={style(inputColumnStyles(_.columns), 'grid')}>
+      {renderTitle(_.title)}
+      {(_?.inputs || [])?.map(getField<FieldDef>(field))}
+    </div>
+  ));

package/mobile/src/hooks/useDadataParty.ts

@@ -9,7 +9,7 @@ export interface DaDataPartyHint {
 }
 
 export const useDadataParty = async (searchQuery: string): Promise<DaDataPartyHint[]> =>
-  (await getDaDataHints({ url: INN_DADATA_URL, query: searchQuery })).map((_) => ({
+  (await getDaDataHints({ url: INN_DADATA_URL, query: searchQuery }))?.map((_) => ({
     fullName: _?.value,
     address: _?.data?.address?.value,
     inn: _?.data?.inn,

package/mobile/src/model/FormTypeFieldDef.ts

@@ -27,4 +27,5 @@ export type FormTypeFieldDef =
   | 'PF'
   | 'UNIVERSAL'
   | 'PRACTICE'
-  | 'CALC';
+  | 'CALC'
+  | 'REF';

package/package.json

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

package/src/api/getSubmitBody.ts

@@ -73,6 +73,7 @@ export const getSubmitBody = ({ body, endpoint, router }: submitBodyProps) => {
     }),
     ...getRkoTariffName(typeForm),
     ...staticBody,
+    ...getReferalRkoData(body, typeForm),
   };
 };
 
@@ -124,3 +125,19 @@ const getRkoTariffName = (typeForm?: string) =>
         partnerComments: globalThis?.sessionStorage.getItem('rkoTariffName') ?? 'Неизвестный тариф',
       }
     : {};
+
+const getReferalRkoData = (body: LeadRequest, typeForm?: string) => {
+  const params = new URLSearchParams(decodeURIComponent(globalThis.location?.search));
+
+  const partnerComments = params.get('utm_mail');
+  const partner = params.get('utm_source');
+
+  return typeForm === 'REF'
+    ? {
+        name: body.fullName,
+        fullName: undefined,
+        partnerComments,
+        partner,
+      }
+    : {};
+};

package/src/components/ApplicationForm/ApplicationForm.example.json

@@ -1841,5 +1841,43 @@
         }
       }
     }
+  ],
+  [
+    "Заявка на РКО по ссылке друга",
+    {
+      "content": {
+        "version": "primary",
+        "padding": "",
+        "title": "Открыть счёт РКО",
+        "typeForm": "REF",
+        "endpoint": "sendcorporatelead",
+        "sections": [
+          {
+            "inputs": [{ "name": "fullName", "required": true, "label": "ФИО" }]
+          },
+          {
+            "columns": 2,
+            "inputs": [
+              { "name": "phone", "required": true },
+              { "name": "email", "required": true }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Открыть счет",
+          "version": "primary"
+        },
+        "link": {
+          "text": "условиями передачи данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        },
+        "additionalLink": {
+          "text": "условиями проведения акции",
+          "href": "/promo-link",
+          "target": "_blank"
+        }
+      }
+    }
   ]
 ]

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

@@ -29,6 +29,12 @@ const linkCorpAgent: LinkProps = {
   target: '_blank',
 };
 
+const linkPromo: LinkProps = {
+  text: 'условиями проведения акции',
+  href: '/promo-link',
+  target: '_blank',
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -1151,4 +1157,34 @@ export default {
       <DialogManager />
     </div>
   ),
+  referalRko: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm
+        className="col-span-12"
+        title="Заявка на РКО по ссылке друга"
+        typeForm="REF"
+        endpoint="sendcorporatelead"
+        sections={[
+          {
+            inputs: [{ name: 'fullName', required: true, label: 'ФИО' }],
+          },
+          {
+            columns: 2,
+            inputs: [
+              { name: 'phone', required: true },
+              { name: 'email', required: true },
+            ],
+          },
+        ]}
+        button={{
+          text: 'Открыть счет',
+          version: 'primary',
+        }}
+        link={linkCorp}
+        additionalLink={linkPromo}
+      />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
 };

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -51,6 +51,7 @@ export const ApplicationForm = UniBlock<ApplicationFormProps>(
     sections = [],
     button,
     link,
+    additionalLink,
     endpoint,
     additionalParams,
     withSnowplow,
@@ -117,6 +118,7 @@ export const ApplicationForm = UniBlock<ApplicationFormProps>(
           {renderAgreementSubmit({
             consentDataProcessing,
             link,
+            additionalLink,
             button,
             typeForm,
           })}

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -116,6 +116,16 @@ export type ApplicationFormContent = UniBlockContent &
       /** @default "" */
       target?: Target;
     };
+    /**
+     * @title Условия проведения акции
+     * @required ["text", "href"]
+     */
+    additionalLink?: TextProps & {
+      /** @title URL (href) */
+      href?: string;
+      /** @default "" */
+      target?: Target;
+    };
     typeForm?: FormTypeFieldDef;
     endpoint?: EndpointType;
     /** @title Дополнительные параметры формы */

package/src/components/ApplicationForm/Footnote.tsx

@@ -7,9 +7,10 @@ import { Text } from '../../ui-kit/Text/Text';
 
 type FootnoteProps = TextProps & {
   link?: LinkProps;
+  additionalLink?: LinkProps;
 };
 
-export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
+export const Footnote = JSX<FootnoteProps>(({ text, link, additionalLink }) => (
   <Paragraph size="text-l" font="font-light" color="text-secondary-text">
     {text ? <Text>{text}</Text> : null}
     {link ? (
@@ -17,5 +18,13 @@ export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
         {link.text}
       </Link>
     ) : null}
+    {additionalLink ? (
+      <Text>
+        {' и '}
+        <Link {...additionalLink} ariaLabel="условия проведения акции">
+          {additionalLink.text}
+        </Link>
+      </Text>
+    ) : null}
   </Paragraph>
 ));

package/src/components/ApplicationForm/renderAgreementSubmit.tsx

@@ -14,11 +14,13 @@ const agreementTextPF = 'Нажимая на кнопку, вы подтверж
 export const renderAgreementSubmit = ({
   consentDataProcessing,
   link,
+  additionalLink,
   button,
   typeForm,
 }: {
   consentDataProcessing?: FieldProps<boolean>;
   link?: LinkProps;
+  additionalLink?: LinkProps;
   button?: SubmitButtonProps;
   typeForm?: string;
 }) => (
@@ -32,7 +34,11 @@ export const renderAgreementSubmit = ({
         {renderErrorText(withValidator(consentDataProcessing, agreementValidator).error)}
       </div>
     ) : (
-      <Footnote text={typeForm === 'PF' ? agreementTextPF : agreementText} link={link} />
+      <Footnote
+        text={typeForm === 'PF' ? agreementTextPF : agreementText}
+        link={link}
+        additionalLink={additionalLink}
+      />
     )}
     <SubmitButton className="w-full @xl:w-auto">
       {button?.text ? button.text : 'Отправить заявку'}

package/src/components/Blocks.ts

@@ -38,6 +38,7 @@ import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { OfficesAtmsMap } from './OfficesAtmsMap/OfficesAtmsMap';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { RatesTable } from './RatesTable/RatesTable';
+import { ReferalForm } from './ReferalForm/ReferalForm';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RkoTariffCardsTable } from './RkoTariffCardsTable/RkoTariffCardsTable';
 import { RollupItem } from './RollupItem/RollupItem';
@@ -98,4 +99,5 @@ export const Blocks: BlocksRegistry = {
   CalculatorRko,
   RkoTariffCardsTable,
   RatesTable,
+  ReferalForm,
 };

package/src/components/ReferalForm/ReferalForm.example.json

@@ -0,0 +1,8 @@
+{
+  "content": {
+    "link": "https://www.rshb.ru/business/dlya-druga/rko",
+    "button": {
+      "text": "Получить ссылку"
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import '../../setup-fixture';
+
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import { ReferalForm } from './ReferalForm';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ReferalForm
+        link="https://www.rshb.ru/business/dlya-druga/rko"
+        button={{ text: 'Получить ссылку' }}
+      />
+      <PopupManager />
+    </div>
+  ),
+};

package/src/components/ReferalForm/ReferalForm.fixture.tsx

@@ -0,0 +1,16 @@
+import '../../setup-fixture';
+
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
+import { ReferalForm } from './ReferalForm';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ReferalForm
+        link="https://www.rshb.ru/business/dlya-druga/rko"
+        button={{ text: 'Получить ссылку' }}
+      />
+      <PopupManager />
+    </div>
+  ),
+};