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

package/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/src/components/ReferalForm/ReferalForm.ui.json

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

package/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/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/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/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/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/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/src/model/FormTypeFieldDef.ts

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