@redneckz/wildless-cms-uni-blocks 0.7.8 → 0.8.0

package/mobile/src/ui-kit/TopItem/TopItem.tsx

@@ -10,30 +10,27 @@ export interface TopItemContent extends LinkProps {
 export interface TopItemProps extends TopItemContent {
   className?: string;
   flat?: boolean;
-  ariaLabel?: string;
   dataItemName?: string;
   onClick?: () => void;
 }
 
-export const TopItem = JSX<TopItemProps>(
-  ({ className = '', active, flat, ariaLabel, children, ...rest }) => {
-    const link = useLink();
-    const { href, target, text, onClick } = link(rest);
+export const TopItem = JSX<TopItemProps>(({ className = '', active, flat, children, ...rest }) => {
+  const link = useLink();
+  const { href, target, text, onClick } = link(rest);
 
-    return (
-      <a
-        className={`${getLinkStyle(active, flat)} ${className}`}
-        href={href}
-        target={target}
-        onClick={onClick}
-        rel="noopener noreferrer"
-        aria-label={ariaLabel}
-      >
-        <span className={getTextStyle(active, flat)}>{text || children}</span>
-      </a>
-    );
-  },
-);
+  return (
+    <a
+      className={style(getLinkStyle(active, flat), className)}
+      href={href}
+      target={target}
+      onClick={onClick}
+      rel="noopener noreferrer"
+      aria-label={text}
+    >
+      <span className={getTextStyle(active, flat)}>{text || children}</span>
+    </a>
+  );
+});
 
 const getLinkStyle = (active = false, flat = false) =>
   style(

package/mobile/src/utils/adjustHref.ts

@@ -1,15 +1,7 @@
-import { getOrigin } from './url';
+import { projectSettings } from '../ProjectSettings';
+import { isURL } from './url';
 
-export const adjustHref = (
-  href: string | undefined,
-  router: { pathname: string; href?: string },
-) => {
-  if (!href) {
-    return href;
-  }
-
-  const origin = getOrigin(router?.href);
-
-  // Relative URL
-  return origin ? href.replace(origin, '') || '/' : href;
-};
+export const adjustHref = (href: string | undefined) =>
+  href && projectSettings.BASE_PATH && !(isURL(href) || href.startsWith('/'))
+    ? `${projectSettings.BASE_PATH}${href}`
+    : href;

package/mobile/src/utils/url.ts

@@ -1,38 +1,23 @@
-export const isURL = (href?: string) => href?.includes('//');
+import type { Target } from '../model/LinkProps';
+import { projectSettings } from '../ProjectSettings';
 
-export const withoutQuery = (href?: string) => (href || '').replace(/\/?\?.*/, '');
+export const isURL = (href?: string): href is `${string}//${string}` =>
+  Boolean(href?.includes('//'));
 
-export const getOrigin = (href?: string) => {
-  if (!href || !isURL(href)) {
-    return undefined;
-  }
+export const isLocalURL = (href: string | undefined, target?: Target) =>
+  Boolean(
+    href &&
+      !isURL(href) &&
+      (projectSettings.BASE_PATH
+        ? href.startsWith(projectSettings.BASE_PATH)
+        : !href.startsWith('/')) &&
+      (!target || target === '_self'),
+  );
 
-  const url = href;
-  const protoSeparator = '//';
-  const endOfProto = url.indexOf(protoSeparator);
-  const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
+export const isHash = (href?: string): href is `#${string}` => Boolean(href?.startsWith('#'));
 
-  return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
-};
+export const withoutQuery = (href?: string): string => (href || '').replace(/\/?\?.*/, '');
 
-export const getPathname = (href?: string) => {
-  if (!href || !isURL(href)) {
-    return undefined;
-  }
-
-  const url = new URL(href);
-
-  return url.pathname;
-};
-
-export const getHash = (href?: string) => {
-  if (!href || !isURL(href)) {
-    return undefined;
-  }
-
-  const hashIndex = href.indexOf('#');
-
-  return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
-};
-
-export const isHash = (href?: string) => href?.startsWith('#');
+export const getOrigin = (href?: string) => (isURL(href) ? new URL(href).origin : undefined);
+export const getPathname = (href?: string) => (isURL(href) ? new URL(href).pathname : undefined);
+export const getHash = (href?: string) => (isURL(href) ? new URL(href).hash : undefined);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.7.8",
+  "version": "0.8.0",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -188,7 +188,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "47 kB",
+      "limit": "50 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/ProjectSettings.ts

@@ -1,8 +1,8 @@
 export interface ProjectSettings {
   TEST_BRANCH?: string;
   RC_BRANCH?: string;
-  PROD_BRANCH: string;
-  FORCED_DRAFT_FLOW: boolean;
+  PROD_BRANCH?: string;
+  FORCED_DRAFT_FLOW?: boolean;
   ASSIST_PROJECT_ID?: string;
   SITEMAP?: string;
   FOOTER?: string;
@@ -12,11 +12,10 @@ export interface ProjectSettings {
   YANDEX_METRIKA_ID?: string;
 }
 
+const DEFAULT_PROJECT_SETTINGS: ProjectSettings = { PROD_BRANCH: 'master' };
+
 export const projectSettings = new (class implements ProjectSettings {
-  _: ProjectSettings = {
-    PROD_BRANCH: 'master',
-    FORCED_DRAFT_FLOW: false,
-  };
+  _: ProjectSettings = DEFAULT_PROJECT_SETTINGS;
 
   setup(_: ProjectSettings) {
     this._ = _;
@@ -29,7 +28,7 @@ export const projectSettings = new (class implements ProjectSettings {
     return this._.RC_BRANCH;
   }
   get PROD_BRANCH() {
-    return this._.PROD_BRANCH;
+    return this._.PROD_BRANCH || DEFAULT_PROJECT_SETTINGS.PROD_BRANCH;
   }
   get FORCED_DRAFT_FLOW() {
     return this._.FORCED_DRAFT_FLOW;

package/src/api/CorporateLeadAPI.ts

@@ -0,0 +1,36 @@
+interface DaDataSuggestion<T> {
+  value?: string;
+  unrestricted_value?: string;
+  data?: T;
+}
+
+interface DaDataAddress {
+  city?: string | null;
+}
+
+export interface DaDataResult {
+  suggestions?: DaDataSuggestion<DaDataAddress>[];
+}
+
+export function CorporateLeadAPI() {
+  async function send(body: any) {
+    try {
+      const response = await fetch('/api/v1/sendCorporateLead', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        mode: 'cors',
+        body: JSON.stringify(body),
+      });
+
+      const data = (await response.json()) as any;
+
+      return data;
+    } catch (e) {
+      return null;
+    }
+  }
+
+  return {
+    send,
+  };
+}

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

@@ -0,0 +1,43 @@
+import '../../setup-fixture';
+import { ApplicationForm } from './ApplicationForm';
+import type { ApplicationFormContent } from './ApplicationFormContent';
+
+export const ApplicationFormProps: ApplicationFormContent = {
+  title: 'Форма заявки',
+  button: {
+    text: 'Отправить заявку',
+    version: 'primary',
+  },
+  link: {
+    text: 'условиями передачи данных',
+    href: '#',
+  },
+};
+
+export default {
+  credit: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="credit" />
+    </div>
+  ),
+  acquiring: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="acquiring" />
+    </div>
+  ),
+  'business-card': (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="business-card" />
+    </div>
+  ),
+  deposit: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="deposit" />
+    </div>
+  ),
+  wed: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="wed" />
+    </div>
+  ),
+};

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { ApplicationFormAcquiring } from './ApplicationFormAcquiring';
+import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
+import type { ApplicationFormContent } from './ApplicationFormContent';
+import { ApplicationFormCredit } from './ApplicationFormCredit';
+import { ApplicationFormDeposit } from './ApplicationFormDeposit';
+import { ApplicationFormsProps } from './ApplicationFormsProps';
+import { ApplicationFormWed } from './ApplicationFormWed';
+import { ResponseNotification } from './ResponseNotification';
+
+export interface ApplicationFormProps extends ApplicationFormContent, UniBlockProps {}
+
+const COMPONENTS_MAP = {
+  credit: (props: ApplicationFormsProps) => <ApplicationFormCredit {...props} />,
+  acquiring: (props: ApplicationFormsProps) => <ApplicationFormAcquiring {...props} />,
+  'business-card': (props: ApplicationFormsProps) => <ApplicationFormBusinessCard {...props} />,
+  deposit: (props: ApplicationFormsProps) => <ApplicationFormDeposit {...props} />,
+  wed: (props: ApplicationFormsProps) => <ApplicationFormWed {...props} />,
+};
+
+export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
+  const { className = '', title, typeForm = 'credit', button, link, ...rest } = props;
+
+  const [responceType, setResponceType] = useState<'OK' | 'Fail' | ''>('');
+
+  const handleSubmit = useCallback(() => {
+    setResponceType('OK');
+
+    return 'OK';
+  }, []);
+
+  return (
+    <BlockWrapper className={`font-sans bg-white p-[50px] pb-9 ${className}`} {...rest}>
+      <div className="container max-w-[978px]">
+        {title ? <Heading headingType="h3" title={title} className="text-center mb-8" /> : null}
+        {COMPONENTS_MAP[typeForm]({ button, link, handleSubmit })}
+        {responceType ? <ResponseNotification responceType={responceType} /> : null}
+      </div>
+    </BlockWrapper>
+  );
+});

package/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

@@ -0,0 +1,138 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Input } from '../../ui-kit/Input/Input';
+import { useGetRegions } from '../SafeDepositRental/useGetRegions';
+import { ACQUIRING_TYPES } from './acquiringTypes';
+import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import { Footnote } from './Footnote';
+import type { HandleFormStateChange } from './models';
+import { normalizeSelectedRegion } from './normalizeSelectedRegion';
+import { renderSelects } from './renderSelects';
+import { renderSlideCheckboxes } from './renderSlideCheckboxes';
+import { renderSubmitButton } from './renderSubmitButton';
+import { useFormHandlers } from './useFormHandlers';
+
+export interface AcquiringFormState {
+  acquiringType: string;
+  region: string;
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+  onlineСheckout: boolean;
+  posTerminal: boolean;
+}
+
+export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, handleSubmit } = props;
+
+  const [formState, setFormState] = useState<AcquiringFormState>({
+    acquiringType: '',
+    region: '',
+    fullName: '',
+    inn: '',
+    name: '',
+    phone: '',
+    onlineСheckout: false,
+    posTerminal: false,
+  });
+
+  const { acquiringType, region, fullName, inn, name, phone, onlineСheckout, posTerminal } =
+    formState;
+
+  const regions = useGetRegions();
+
+  const { handleChange, onSubmit } = useFormHandlers<AcquiringFormState>({
+    formState,
+    handleSubmit,
+    setFormState,
+    typeForm: 'acqr',
+  });
+
+  const selectedRegion = normalizeSelectedRegion(region, regions);
+
+  useEffect(() => {
+    setFormState((oldState) => ({
+      ...oldState,
+      acquiringType:
+        ACQUIRING_TYPES?.length && ACQUIRING_TYPES[0]?.code ? ACQUIRING_TYPES[0].code : '',
+    }));
+  }, []);
+
+  return (
+    <form onSubmit={onSubmit} className="container">
+      <Heading headingType="h6" title="Вид эквайринга и регион" className="text-center mb-4" />
+      {renderSelects({
+        acquiringType,
+        regions,
+        region: selectedRegion,
+        handleChange,
+      })}
+      <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
+      {renderDataOrganization({ fullName, inn, name, phone, handleChange })}
+      {renderSlideCheckboxes({
+        onlineСheckout,
+        posTerminal,
+        handleChange,
+      })}
+      {renderSubmitButton(button, 'mb-4')}
+      <Footnote link={link} />
+    </form>
+  );
+});
+
+interface RenderDataOrganizationProps {
+  fullName: string;
+  inn: string;
+  name: string;
+  phone: string;
+  handleChange: HandleFormStateChange<AcquiringFormState>;
+}
+
+const renderDataOrganization = ({
+  fullName,
+  inn,
+  name,
+  phone,
+  handleChange,
+}: RenderDataOrganizationProps) => (
+  <div className="flex justify-between gap-5 mb-5">
+    <div className="w-1/2">
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="Наименование организации"
+        label="Наименование организации"
+        value={fullName}
+        onChange={(value) => handleChange({ fullName: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full"
+        type="text"
+        aria-label="Контактное лицо"
+        label="Контактное лицо"
+        value={name}
+        onChange={(value) => handleChange({ name: value })}
+      />
+    </div>
+    <div className="w-1/2">
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        label="ИНН"
+        aria-label="ИНН"
+        value={inn}
+        onChange={(value) => handleChange({ inn: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full"
+        type="text"
+        label="Телефон"
+        aria-label="Телефон"
+        value={phone}
+        onChange={(value) => handleChange({ phone: value })}
+      />
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/ApplicationFormBusinessCard.tsx

@@ -0,0 +1,134 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { Region } from '../../hooks/useRegions';
+import { Input } from '../../ui-kit/Input/Input';
+import { useGetRegions } from '../SafeDepositRental/useGetRegions';
+import type { ApplicationFormsProps } from './ApplicationFormsProps';
+import { Footnote } from './Footnote';
+import type { HandleFormStateChange } from './models';
+import { normalizeSelectedRegion } from './normalizeSelectedRegion';
+import { renderSubmitButton } from './renderSubmitButton';
+import { useFormHandlers } from './useFormHandlers';
+import { WrapperSelect } from './WrapperSelect';
+
+export interface BusinessCardFormState {
+  region: string;
+  name: string;
+  phone: string;
+  inn: string;
+  mail: string;
+}
+
+export const ApplicationFormBusinessCard = JSX<ApplicationFormsProps>((props) => {
+  const { button, link, handleSubmit } = props;
+  const [formState, setFormState] = useState<BusinessCardFormState>({
+    region: '',
+    name: '',
+    phone: '',
+    inn: '',
+    mail: '',
+  });
+
+  const { name, phone, inn, mail } = formState;
+
+  const regions = useGetRegions();
+
+  const { handleChange, onSubmit } = useFormHandlers<BusinessCardFormState>({
+    formState,
+    handleSubmit,
+    setFormState,
+    typeForm: 'bcrd',
+  });
+
+  const selectedRegion = normalizeSelectedRegion(formState.region, regions);
+
+  return (
+    <form onSubmit={onSubmit} className="container">
+      {renderRegion({
+        regions,
+        region: selectedRegion,
+        handleChange,
+      })}
+      {renderDataOrganization({ name, phone, inn, mail, handleChange })}
+      {renderSubmitButton(button, 'mb-4')}
+      <Footnote link={link} />
+    </form>
+  );
+});
+
+interface RenderDataOrganizationProps {
+  name: string;
+  phone: string;
+  mail: string;
+  inn: string;
+  handleChange: HandleFormStateChange<BusinessCardFormState>;
+}
+
+const renderDataOrganization = ({
+  name,
+  phone,
+  mail,
+  inn,
+  handleChange,
+}: RenderDataOrganizationProps) => (
+  <div className="flex justify-between gap-5">
+    <div className="w-1/2">
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="Контактное лицо"
+        label="Контактное лицо"
+        value={name}
+        onChange={(value) => handleChange({ name: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="ИНН"
+        label="ИНН"
+        value={inn}
+        onChange={(value) => handleChange({ inn: value })}
+      />
+    </div>
+    <div className="w-1/2">
+      <Input
+        className="shrink-0 text-l w-full mb-5"
+        type="text"
+        aria-label="Телефон"
+        label="Телефон"
+        value={phone}
+        onChange={(value) => handleChange({ phone: value })}
+      />
+      <Input
+        className="shrink-0 text-l w-full "
+        type="text"
+        aria-label="Электронная почта"
+        label="Электронная почта"
+        value={mail}
+        onChange={(value) => handleChange({ mail: value })}
+      />
+    </div>
+  </div>
+);
+
+interface RenderRegionProps {
+  regions: Region[];
+  region: string;
+  handleChange: HandleFormStateChange<BusinessCardFormState>;
+}
+
+const renderRegion = ({ regions, region, handleChange }: RenderRegionProps) => (
+  <div className="flex justify-between gap-5 mb-5">
+    <div className="w-full">
+      <WrapperSelect
+        data={regions}
+        fieldValue="code"
+        fieldLabel="name"
+        selected={region}
+        setSelected={(value) => handleChange({ region: value })}
+        label="Регион"
+        placeholder="Выберите регион"
+      />
+    </div>
+  </div>
+);

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -0,0 +1,19 @@
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { LinkProps } from '../../model/LinkProps';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Форма заявки
+ */
+export type ApplicationFormContent = HeadlineCommonProps & {
+  /**
+   * @title Вид заявки
+   * @default credit
+   * @enumNames ["Бизнес-карта", "ВЭД", "Депозит", "Кредит", "Эквайринг"]
+   */
+  typeForm?: 'business-card' | 'wed' | 'deposit' | 'credit' | 'acquiring';
+  /** @title Кнопка */
+  button?: ButtonProps;
+  /** @title Условия передачи данных */
+  link?: LinkProps;
+};