@redneckz/wildless-cms-uni-blocks 0.14.912 → 0.14.914

package/src/components/ApplicationForm/VerifyPhoneDialog.tsx

@@ -0,0 +1,73 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { LeadServiceAPI, type LeadRequest } from '../../api/LeadServiceAPI';
+import type { OnCloseProps } from '../../model/OnCloseProps';
+import { useCountDownTimer } from '../../ui-kit/TimerCircle/useCountDownTimer';
+import { VerifyPhoneDialogLayout } from '../../ui-kit/VerifyPhoneDialogLayout/VerfiyPhoneDialogLayout';
+import { formatPhone } from '../../utils/formatPhone';
+import { noop } from '../../utils/noop';
+import { useVerifyPhoneDialogSubmit } from './useVerifyPhoneDialogSubmit';
+const API = LeadServiceAPI();
+
+const CODE_LENGTH = 4;
+export const TIME_TO_RESEND = 180;
+
+export interface VerifyPhoneDialogProps extends OnCloseProps {
+  phone: string;
+  onSuccess?: (smsCode?: string) => void;
+  formatData?: LeadRequest;
+  reqId?: string;
+}
+
+export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
+  ({ phone, onSuccess = noop, onClose = noop, formatData = {}, reqId }) => {
+    const [values, setValues] = useState<string[]>(Array(CODE_LENGTH).fill('') as string[]);
+    const [requestId, setRequestId] = useState(reqId);
+
+    const {
+      handleSubmit,
+      hasError,
+      errorText,
+      isLoading,
+      timeNextReq,
+      isSubmitButtonDisabled,
+      setTimeNextReq,
+      setErrorText,
+    } = useVerifyPhoneDialogSubmit({
+      values,
+      onSuccess,
+      formatData,
+      reqId: requestId ?? '',
+    });
+
+    const phoneNumber = formatPhone(phone);
+    const restartTimer = useCountDownTimer({ seconds: timeNextReq, onTick: setTimeNextReq });
+
+    const handleSendCode = useCallback(async () => {
+      const response = await API.sendCode({ phone: phoneNumber });
+
+      if (response) {
+        setTimeNextReq(TIME_TO_RESEND);
+        restartTimer(TIME_TO_RESEND);
+        setErrorText('');
+        setRequestId(String(response));
+      }
+    }, [phoneNumber, restartTimer, onClose]);
+
+    return (
+      <VerifyPhoneDialogLayout
+        isSubmitButtonDisabled={isSubmitButtonDisabled}
+        onSubmit={handleSubmit}
+        onSendCode={handleSendCode}
+        timeNextReq={timeNextReq}
+        values={values}
+        onChange={setValues}
+        phone={phone}
+        isLoading={isLoading}
+        errorText={errorText}
+        hasError={hasError}
+        onClose={onClose}
+      />
+    );
+  },
+);

package/src/components/ApplicationForm/useVerifyPhoneDialogSubmit.tsx

@@ -0,0 +1,63 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { LeadServiceAPI, type LeadRequest } from '../../api/LeadServiceAPI';
+import { getTimer } from '../../utils/getTimer';
+const API = LeadServiceAPI();
+
+type useVerifyPhoneDialogSubmitProps = {
+  values: string[];
+  formatData: LeadRequest;
+  reqId: string;
+  onSuccess?: (smsCode?: string) => void;
+};
+
+export const useVerifyPhoneDialogSubmit = ({
+  values,
+  onSuccess,
+  formatData,
+  reqId,
+}: useVerifyPhoneDialogSubmitProps) => {
+  const timer = Math.max(getTimer(Date.now()), 0);
+
+  const [errorText, setErrorText] = useState('');
+  const [isLoading, { setTrue: startLoading, setFalse: endLoading }] = useBool(false);
+  const [timeNextReq, setTimeNextReq] = useState(timer);
+
+  const resetError = useCallback(() => setErrorText(''), []);
+
+  const isSubmitButtonDisabled = !values.every(Boolean);
+
+  const handleSubmit = useCallback(async () => {
+    try {
+      startLoading();
+      const response = await API.checkCode({
+        code: values.join(''),
+        body: formatData,
+        reqId,
+      });
+      if (response?.errorDesc) {
+        setErrorText(response?.errorDesc);
+
+        return;
+      }
+      setTimeNextReq(0);
+      resetError();
+      onSuccess?.(values.join(''));
+    } catch {
+      setErrorText('Неверный код');
+    } finally {
+      endLoading();
+    }
+  }, [values]);
+
+  return {
+    handleSubmit,
+    hasError: Boolean(errorText),
+    errorText,
+    isLoading,
+    timeNextReq,
+    isSubmitButtonDisabled,
+    setTimeNextReq,
+    setErrorText,
+  };
+};

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

@@ -10,7 +10,7 @@ import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselT
 import { type ProductBlockContent } from '../ProductBlock/ProductBlockContent';
 import { Carousel } from './Carousel';
 
-const catalogImage: Picture = {
+const CATALOG_IMAGE: Picture = {
   src: 'pay-ring.png',
   format: 'webp',
   size: {
@@ -20,7 +20,7 @@ const catalogImage: Picture = {
   title: 'pay-ring',
 };
 
-const productBlock: ProductBlockContent = {
+const PRODUCT_BLOCK: ProductBlockContent = {
   isFullWidthTitle: true,
   version: 'secondary',
   image: {
@@ -39,7 +39,7 @@ const productBlock: ProductBlockContent = {
   ],
 };
 
-const options = {
+const OPTIONS = {
   blocksRegistry: Blocks,
 } as BlockRendererOptions;
 
@@ -53,19 +53,19 @@ export default {
           blocks: [
             {
               type: 'CarouselCatalogCard',
-              content: { ...CATALOG_CARD, image: catalogImage },
+              content: { ...CATALOG_CARD, image: CATALOG_IMAGE },
             },
             {
               type: 'CarouselCatalogCard',
-              content: { ...CATALOG_CARD_NEW, image: catalogImage },
+              content: { ...CATALOG_CARD_NEW, image: CATALOG_IMAGE },
             },
             {
               type: 'CarouselCatalogCard',
-              content: { ...CATALOG_CARD, image: catalogImage },
+              content: { ...CATALOG_CARD, image: CATALOG_IMAGE },
             },
           ],
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),
@@ -90,7 +90,7 @@ export default {
             },
           ],
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),
@@ -105,7 +105,7 @@ export default {
             content: CAROUSEL_RECOMMENDATION_CARD,
           }),
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),
@@ -120,7 +120,7 @@ export default {
             content: { version: 'secondary', ...CAROUSEL_RECOMMENDATION_CARD },
           }),
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),
@@ -137,7 +137,7 @@ export default {
             content: CAROUSEL_RECOMMENDATION_CARD_BENEFITS,
           }),
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),
@@ -153,28 +153,28 @@ export default {
         block={{
           type: 'Carousel',
           blocks: [
-            { type: 'ProductBlock', content: { ...productBlock } },
+            { type: 'ProductBlock', content: { ...PRODUCT_BLOCK } },
             {
               type: 'ProductBlock',
               content: {
-                ...productBlock,
+                ...PRODUCT_BLOCK,
                 title: 'Вклад «Доходный»',
                 description: 'Получайте максимальный доход даже при небольшой сумме вклада',
                 additionalDescription: 'Ставка до 16% годовых',
               },
             },
-            { type: 'ProductBlock', content: { ...productBlock, title: 'Карта Своя' } },
+            { type: 'ProductBlock', content: { ...PRODUCT_BLOCK, title: 'Карта Своя' } },
             {
               type: 'ProductBlock',
               content: {
-                ...productBlock,
+                ...PRODUCT_BLOCK,
                 title: 'Сельская ипотека',
                 additionalDescription: 'до 6 млн. ₽',
               },
             },
           ],
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),

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

@@ -5,6 +5,7 @@ import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { CATALOG_CARD, CATALOG_CARD_NEW } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
 import {
+  CAROUSEL_RECOMMENDATION_CARD_AS_TARIFF,
   CAROUSEL_RECOMMENDATION_CARD_BENEFITS,
   CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
   CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
@@ -14,7 +15,7 @@ import { type ProductBlockContent } from '../ProductBlock/ProductBlockContent';
 import { RICH_CARD } from '../RichTextBlock/RichTextBlock.fixture';
 import { Carousel } from './Carousel';
 
-const cardsListHtml =
+const CARDS_LIST_HTML =
   '<p><strong>IR</strong>cтрана эмитента</p><p><strong>RU</strong>страна риска</p><p><strong>09.03.2022</strong>дата погашения</p><p><strong>Ba3</strong>рейтинг MOODY’S</p>';
 
 const five: Picture = {
@@ -29,11 +30,11 @@ const five: Picture = {
 const INVESTMENT_CARD_WITH_SINGLE_COLUMN: ProductBlockContent = {
   title: 'Borets Finance DAC 17/09/26',
   description: 'Краткосрочная',
-  __html: cardsListHtml,
+  __html: CARDS_LIST_HTML,
   image: five,
 };
 
-const catalogImage: Picture = {
+const CATALOG_IMAGE: Picture = {
   src: 'pay-ring.png',
   format: 'webp',
   size: {
@@ -43,7 +44,7 @@ const catalogImage: Picture = {
   title: 'pay-ring',
 };
 
-const productBlock: ProductBlockContent = {
+const PRODUCT_BLOCK: ProductBlockContent = {
   isFullWidthTitle: true,
   version: 'secondary',
   image: {
@@ -62,7 +63,7 @@ const productBlock: ProductBlockContent = {
   ],
 };
 
-const options = {
+const OPTIONS = {
   blocksRegistry: Blocks,
 } as BlockRendererOptions;
 
@@ -77,19 +78,19 @@ export default {
           blocks: [
             {
               type: 'CarouselCatalogCard',
-              content: { ...CATALOG_CARD, image: catalogImage },
+              content: { ...CATALOG_CARD, image: CATALOG_IMAGE },
             },
             {
               type: 'CarouselCatalogCard',
-              content: { ...CATALOG_CARD_NEW, image: catalogImage },
+              content: { ...CATALOG_CARD_NEW, image: CATALOG_IMAGE },
             },
             {
               type: 'CarouselCatalogCard',
-              content: { ...CATALOG_CARD, image: catalogImage },
+              content: { ...CATALOG_CARD, image: CATALOG_IMAGE },
             },
           ],
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),
@@ -108,7 +109,28 @@ export default {
             })
             .map((_, i) => (i === 1 ? { ..._, content: TARIFFS_CARD_HIT } : _)),
         }}
-        options={options}
+        options={OPTIONS}
+      />
+    </div>
+  ),
+  'tariffs (via recommendation card)': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={0}
+        isGap={false}
+        block={{
+          type: 'Carousel',
+          blocks: Array.from<BlockDef>({ length: 6 })
+            .fill({
+              type: 'CarouselRecommendationCard',
+              content: CAROUSEL_RECOMMENDATION_CARD_AS_TARIFF,
+            })
+            .map((_, i) =>
+              i === 1 ? { ..._, content: { ..._.content, isHighlighting: true } } : _,
+            ),
+        }}
+        options={OPTIONS}
       />
     </div>
   ),
@@ -124,7 +146,7 @@ export default {
             content: INVESTMENT_CARD_WITH_SINGLE_COLUMN,
           }),
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),
@@ -141,7 +163,7 @@ export default {
             content: CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
           }),
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),
@@ -158,7 +180,7 @@ export default {
             content: CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
           }),
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),
@@ -175,7 +197,7 @@ export default {
             content: CAROUSEL_RECOMMENDATION_CARD_BENEFITS,
           }),
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),
@@ -191,7 +213,7 @@ export default {
             content: RICH_CARD,
           }),
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),
@@ -207,28 +229,28 @@ export default {
         block={{
           type: 'Carousel',
           blocks: [
-            { type: 'ProductBlock', content: { ...productBlock } },
+            { type: 'ProductBlock', content: { ...PRODUCT_BLOCK } },
             {
               type: 'ProductBlock',
               content: {
-                ...productBlock,
+                ...PRODUCT_BLOCK,
                 title: 'Вклад «Доходный»',
                 description: 'Получайте максимальный доход даже при небольшой сумме вклада',
                 additionalDescription: 'Ставка до 16% годовых',
               },
             },
-            { type: 'ProductBlock', content: { ...productBlock, title: 'Карта Своя' } },
+            { type: 'ProductBlock', content: { ...PRODUCT_BLOCK, title: 'Карта Своя' } },
             {
               type: 'ProductBlock',
               content: {
-                ...productBlock,
+                ...PRODUCT_BLOCK,
                 title: 'Сельская ипотека',
                 additionalDescription: 'до 6 млн. ₽',
               },
             },
           ],
         }}
-        options={options}
+        options={OPTIONS}
       />
     </div>
   ),

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

@@ -5,7 +5,7 @@ import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonConten
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
 import { type CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
-const icon: Picture = {
+const ICON: Picture = {
   src: 'product-basket.png',
   format: 'webp',
   size: {
@@ -15,7 +15,7 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
-const iconCoin: Picture = {
+const ICON_COIN: Picture = {
   src: 'coin.png',
   format: 'webp',
   size: {
@@ -24,7 +24,7 @@ const iconCoin: Picture = {
   title: 'money',
 };
 
-const benefits: BenefitItemContent[] = [
+const BENEFITS: BenefitItemContent[] = [
   {
     label: 'От 16 до 81',
     description: 'платежей',
@@ -35,7 +35,7 @@ const benefits: BenefitItemContent[] = [
   },
 ];
 
-const socialMediaWithText: LinkButtonContent[] = [
+const SOCIAL_MEDIA_WITH_TEXT: LinkButtonContent[] = [
   {
     href: 'https://t.me',
     text: 'Telegram',
@@ -50,7 +50,7 @@ const socialMediaWithText: LinkButtonContent[] = [
   },
 ];
 
-const socialMediaWithoutText: LinkButtonContent[] = [
+const SOCIAL_MEDIA_WITHOUT_TEXT: LinkButtonContent[] = [
   {
     href: 'https://t.me',
   },
@@ -62,7 +62,7 @@ const socialMediaWithoutText: LinkButtonContent[] = [
   },
 ];
 
-const __html = `
+const HTML = `
   <ul>
     <li>Бесплатное подключение и обслуживание</li>
     <li>Вход и подписание документов по биометрии</li>
@@ -73,38 +73,38 @@ const __html = `
 export const CAROUSEL_RECOMMENDATION_CARD: CarouselRecommendationCardContent = {
   title: 'Подключаем мобильный банк для управления бизнесом',
   description: 'Все возможности банка для бизнеса в вашем смартфоне',
-  __html,
-  icon,
-  socialMedia: socialMediaWithText,
+  __html: HTML,
+  icon: ICON,
+  socialMedia: SOCIAL_MEDIA_WITH_TEXT,
 };
 
 export const CAROUSEL_RECOMMENDATION_CARD_SIMPLE: CarouselRecommendationCardContent = {
   title: 'Подключаем мобильный банк для управления бизнесом',
   description: 'Все возможности банка для бизнеса в вашем смартфоне',
-  __html,
-  icon,
-  socialMedia: socialMediaWithoutText,
+  __html: HTML,
+  icon: ICON,
+  socialMedia: SOCIAL_MEDIA_WITHOUT_TEXT,
 };
 export const CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST: CarouselRecommendationCardContent = {
   title: 'Подключаем мобильный банк для управления бизнесом',
   description: 'Все возможности банка для бизнеса в вашем смартфоне',
-  icon,
-  socialMedia: socialMediaWithoutText,
+  icon: ICON,
+  socialMedia: SOCIAL_MEDIA_WITHOUT_TEXT,
 };
 
 export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardContent = {
   title: 'Россельхозбанк',
   description: 'Описание',
   align: 'text-left',
-  icon,
+  icon: ICON,
   __html: `
     <ul>
       <li>Свежие новости</li>
-      <li>Акции и предложения</li> 
+      <li>Акции и предложения</li>
       <li>Ставки и катировки</li>
     </ul>`,
   version: 'secondary',
-  socialMedia: socialMediaWithoutText,
+  socialMedia: SOCIAL_MEDIA_WITHOUT_TEXT,
 };
 
 export const CAROUSEL_RECOMMENDATION_CARD_BENEFITS: CarouselRecommendationCardContent = {
@@ -112,8 +112,8 @@ export const CAROUSEL_RECOMMENDATION_CARD_BENEFITS: CarouselRecommendationCardCo
   imageOptions: {
     directionRight: false,
   },
-  icon: iconCoin,
-  benefits: benefits,
+  icon: ICON_COIN,
+  benefits: BENEFITS,
 };
 
 export default {