@redneckz/wildless-cms-uni-blocks 0.4.6 → 0.4.8

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -1,14 +1,14 @@
-import type { UniBlockProps } from '../../types';
+import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
+import { Tariff } from './SafeDepositRentalContent';
 
-export type SafeDepositRentalTotalProps = UniBlockProps;
-
-type Days = {
+export interface SafeDepositRentalTotalProps {
   days: number;
-};
+  tariffs?: Tariff[];
+}
 
-export const SafeDepositRentalTotal = ({ days }: Days) => {
-  const price = calculatePrice(days);
+export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days, tariffs = [] }) => {
+  const price = calculatePrice(days, tariffs);
 
   return (
     <div className="flex flex-col justify-between">
@@ -25,9 +25,9 @@ export const SafeDepositRentalTotal = ({ days }: Days) => {
       </div>
     </div>
   );
-};
+});
 
-const renderTotal = (label, total, className = '') => {
+const renderTotal = (label: string, total: string | number, className = '') => {
   return (
     <div className={className}>
       <span className="block text-m-light mb-1">{label}</span>
@@ -36,22 +36,30 @@ const renderTotal = (label, total, className = '') => {
   );
 };
 
-const calculatePrice = (days: number) => {
-  let TariffType = 1;
+const calculatePrice = (days: number, tariffs: Tariff[]) => {
+  const tariffType = getTariffType(days);
+
+  const tariffValue = tariffs?.find((_) => _.tariffType === String(tariffType))?.tariffValue || 0;
+
+  return days * tariffValue;
+};
+
+const getTariffType = (days) => {
+  let tariffType = 1;
 
   switch (true) {
     case days > 30 && days <= 90:
-      TariffType = 2;
+      tariffType = 2;
       break;
 
     case days > 90 && days <= 180:
-      TariffType = 3;
+      tariffType = 3;
       break;
 
     case days > 180 && days <= 365:
-      TariffType = 4;
+      tariffType = 4;
       break;
   }
 
-  return days * TariffType;
+  return tariffType;
 };

package/mobile/src/components/SafeDepositRental/WrapperSelect.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Select } from '../../ui-kit/Select/Select';
+import { SelectOption } from '../../ui-kit/Select/SelectOption';
+
+interface WrapperSelectProps {
+  data: Record<string, any>[];
+  fieldLabel: string;
+  fieldValue?: string;
+  selected: string;
+  setSelected: (value: string) => void;
+  label: string;
+  placeholder?: string;
+}
+
+export const WrapperSelect = JSX<WrapperSelectProps>(
+  ({
+    data,
+    fieldLabel,
+    fieldValue,
+    selected,
+    placeholder = 'Выберите значение',
+    setSelected,
+    label,
+  }) => {
+    return (
+      <div>
+        <span className="block text-m-light mb-2">{label}</span>
+        <Select
+          className={`h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer ${
+            !selected ? 'text-secondary-text' : ''
+          }`}
+          value={selected}
+          onChange={(_) => setSelected(_)}
+        >
+          <SelectOption value="">{placeholder}</SelectOption>
+          {data.map((_, i) => (
+            <SelectOption key={String(i)} value={_?.[fieldValue || fieldLabel]}>
+              {_?.[fieldLabel]}
+            </SelectOption>
+          ))}
+        </Select>
+      </div>
+    );
+  },
+);

package/mobile/src/components/SafeDepositRental/fetchBranches.ts

@@ -0,0 +1,21 @@
+import { Branch } from './SafeDepositRentalContent';
+
+const BRANCHES_URL = '/api/v1/safeboxes';
+
+export async function fetchBranches(regionCode: string): Promise<Branch[]> {
+  try {
+    const response = await fetch(BRANCHES_URL + `?regionCode=${regionCode}`, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    const result = await response.json();
+
+    return Promise.resolve(result);
+  } catch (err) {
+    console.error(err);
+
+    return Promise.reject();
+  }
+}

package/mobile/src/components/SafeDepositRental/useGetRegions.ts

@@ -0,0 +1,16 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSONUnsafe } from '../../utils/fetchJSON';
+
+const REGIONS_URL = '/api/v1/admin/regions';
+
+export interface Region {
+  id?: number;
+  code?: string;
+  name?: string;
+}
+
+export function useGetRegions(): Region[] {
+  const { data } = useAsyncData<Region[]>(REGIONS_URL, fetchJSONUnsafe);
+
+  return data || [];
+}

package/mobile/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -41,7 +41,7 @@ exports[`Blocks BonusBenefitsBlock should render block "BonusBenefitsBlock" with
 
 exports[`Blocks Calculator should render block "Calculator" without content 1`] = `
 <section
-  class="box-border overflow-hidden relative font-sans w-100 text-primary-text "
+  class="box-border overflow-hidden relative font-sans w-100 text-primary-text bg-white "
 >
   <div
     class="bg-white"
@@ -82,7 +82,7 @@ exports[`Blocks CardTransfer should render block "CardTransfer" without content
         class="h-[56px] relative flex items-center"
       >
         <input
-          class="text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke"
+          class="text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text"
           max="300000"
           min="0"
           name="amount"
@@ -145,6 +145,17 @@ exports[`Blocks ComparisonTable should render block "ComparisonTable" without co
 </section>
 `;
 
+exports[`Blocks ErrorBlock should render block "ErrorBlock" without content 1`] = `
+<section
+  class="flex flex-col justify-center items-center "
+  role="listitem"
+>
+  <div
+    class="flex justify-center mb-7"
+  />
+</section>
+`;
+
 exports[`Blocks ExchangeRateTile should render block "ExchangeRateTile" without content 1`] = `
 <section
   class="bg-white text-primary-text font-sans p-9 box-border "
@@ -163,7 +174,9 @@ exports[`Blocks ExchangeRateTile should render block "ExchangeRateTile" without
       <div
         class="flex flex-col justify-between w-full"
       >
-        <div>
+        <div
+          class="h-full"
+        >
           <div
             class="flex"
           >
@@ -272,7 +285,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
         />
       </svg>
       <span
-        class="text-black font-light ml-2.5"
+        class="text-primary-text font-medium ml-2.5"
       >
         Россельхозбанк
       </span>
@@ -305,7 +318,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
       </div>
       <input
         class="h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none pr-[6%] border-main-divider focus:border-primary-text h-full"
+              outline-none pr-[6%] border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text h-full"
         id="search-bar-input"
         name="search-bar-input"
         type="text"
@@ -475,7 +488,7 @@ exports[`Blocks Header should render block "Header" without content 1`] = `
           />
         </svg>
         <span
-          class="text-black font-light ml-2.5"
+          class="text-primary-text font-medium ml-2.5"
         >
           Россельхозбанк
         </span>
@@ -639,7 +652,9 @@ exports[`Blocks MobileAppTile should render block "MobileAppTile" without conten
       <div
         class="flex flex-col justify-between w-full"
       >
-        <div>
+        <div
+          class="h-full"
+        >
           <div
             class="flex flex-1 items-center"
           >
@@ -666,6 +681,12 @@ exports[`Blocks Navigation should render block "Navigation" without content 1`]
 </section>
 `;
 
+exports[`Blocks OfficeServicesBlock should render block "OfficeServicesBlock" without content 1`] = `
+<section
+  class="font-sans bg-white p-12 flex flex-col "
+/>
+`;
+
 exports[`Blocks OtherProducts should render block "OtherProducts" without content 1`] = `
 <section
   class="font-sans text-primary-text "
@@ -748,7 +769,9 @@ exports[`Blocks ProductBlock should render block "ProductBlock" without content
           <div
             class="flex flex-col justify-between w-full"
           >
-            <div />
+            <div
+              class="h-full"
+            />
           </div>
         </div>
       </div>
@@ -808,7 +831,9 @@ exports[`Blocks PromoTile should render block "PromoTile" without content 1`] =
       <div
         class="flex flex-col justify-between w-full"
       >
-        <div>
+        <div
+          class="h-full"
+        >
           <div
             class="mt-1.5"
           >
@@ -869,20 +894,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Город
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="Москва"
+                value=""
               >
-                Москва
-              </option>
-              <option
-                class=""
-                value="Краснодар"
-              >
-                Краснодар
+                Выберите значение
               </option>
             </select>
           </div>
@@ -897,32 +917,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Отделение
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="выберите отделение"
-              >
-                выберите отделение
-              </option>
-              <option
-                class=""
-                value="МоскваОфис1"
-              >
-                МоскваОфис1
-              </option>
-              <option
-                class=""
-                value="МоскваОфис2"
+                value=""
               >
-                МоскваОфис2
-              </option>
-              <option
-                class=""
-                value="МоскваОфис3"
-              >
-                МоскваОфис3
+                Выберите отделение
               </option>
             </select>
           </div>
@@ -985,29 +988,18 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
             <span
               class="block text-m-light mb-2"
             >
-              Размер ячейки
+              Размер
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="маленькая"
+                value=""
               >
-                маленькая
-              </option>
-              <option
-                class=""
-                value="средняя"
-              >
-                средняя
-              </option>
-              <option
-                class=""
-                value="большая"
-              >
-                большая
+                Выберите размер
               </option>
             </select>
           </div>
@@ -1022,26 +1014,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Параметры ячейки, мм (ВхШхД)
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="125x225x375"
-              >
-                125x225x375
-              </option>
-              <option
-                class=""
-                value="200x300x400"
-              >
-                200x300x400
-              </option>
-              <option
-                class=""
-                value="300x400x500"
+                value=""
               >
-                300x400x500
+                Выберите параметр ячейки
               </option>
             </select>
           </div>
@@ -1063,7 +1044,8 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               class="flex items-center relative cursor-pointer"
             >
               <input
-                class="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+                checked=""
+                class="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
                 name="contractType"
                 type="radio"
                 value="option1"
@@ -1080,8 +1062,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               class="flex items-center relative cursor-pointer"
             >
               <input
-                checked=""
-                class="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+                class="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
                 name="contractType"
                 type="radio"
                 value="option2"
@@ -1146,7 +1127,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           <span
             class="text-h3"
           >
-            26 ₽
+            0 ₽
           </span>
         </div>
       </div>
@@ -1230,7 +1211,9 @@ exports[`Blocks Tile should render block "Tile" without content 1`] = `
       <div
         class="flex flex-col justify-between w-full"
       >
-        <div />
+        <div
+          class="h-full"
+        />
       </div>
     </div>
   </div>

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BenefitItemProps, BenefitItemCommonProps } from './BenefitItemProps';
-import { Img } from '../Img/Img';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { Img } from '../Img/Img';
+import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
@@ -25,15 +25,18 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
   } = props;
 
   const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
+  const listItemAlign = description ? 'items-start' : 'items-center';
 
   return (
-    <div className={`flex items-start gap-5 ${className}`}>
+    <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
-        <Img
-          className={renderBenefitIconBgStyle(version, benefitsVersion)}
-          image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
-          asSVG
-        />
+        <div className={renderBenefitIconBgStyle(version, benefitsVersion)}>
+          <Img
+            className="w-[24px] h-[24px]"
+            image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
+            asSVG
+          />
+        </div>
       ) : null}
       <div className="gap-0.5">
         {label ? <div className={`text-h6 ${titleStyleMap[version]}`}>{label}</div> : null}
@@ -54,5 +57,5 @@ function renderBenefitIconBgStyle(version, benefitsVersion) {
     bgColorStyle = 'bg-secondary-light text-primary-main';
   }
 
-  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border flex items-center justify-center ${bgColorStyle}`;
 }

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

@@ -55,7 +55,7 @@ export const CurrencyInput = JSX<CurrencyInputProps>(
         <div className="h-[56px] relative flex items-center">
           <input
             type="number"
-            className="text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke"
+            className="text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text"
             onChange={handleChange}
             value={value}
             min={minValue}

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

@@ -45,7 +45,7 @@ export const Foldable = JSX<FoldableProps>(
 
     const buttonClassName =
       foldButtonClasses ||
-      'border-none bg-primary-main hover:bg-primary-hover px-0 py-[26px] mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
+      'border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
     const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
 
     return blocks ? (
@@ -58,7 +58,16 @@ export const Foldable = JSX<FoldableProps>(
             onClick={handleToggle}
           >
             <span className="pr-3">{getFoldButtonLabel}</span>
-            {icon ? <Icon name={icon} iconVersion="white" width="20" height="20" asSVG /> : null}
+            {icon ? (
+              <Icon
+                className="my-auto"
+                name={icon}
+                iconVersion="white"
+                width="20"
+                height="20"
+                asSVG
+              />
+            ) : null}
           </button>
         ) : null}
       </div>

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

@@ -10,7 +10,7 @@ export const Input = JSX<InputProps>(
 
     return (
       <input
-        className={className}
+        className={`border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text ${className}`}
         id={id}
         name={name || id}
         type={type}

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

@@ -41,7 +41,7 @@ export const InputRange = JSX<InputRangeProps>(
     return (
       <div className={className}>
         <label className="block relative">
-          {title ? <span className="text-m font-light">{title}</span> : null}
+          {title ? <span className="text-m-light">{title}</span> : null}
           <input
             className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
                         outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`}

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

@@ -5,7 +5,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
   <div className={className}>
     <label className="flex items-center relative cursor-pointer">
       <input
-        className="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
         type="radio"
         value={value}
         name={name}

package/mobile/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -34,7 +34,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
       <input
         id="search-bar-input"
         className={`h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none pr-[6%] border-main-divider focus:border-primary-text ${SearchBarInputClassName}`}
+              outline-none pr-[6%] border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`}
         value={term}
         onChange={(e) => setTerm(e.target.value as string)}
         type="text"

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

@@ -22,6 +22,7 @@ export const Select = JSX<SelectProps>(
         name={name || id}
         value={value}
         onChange={(e) => onChange(e.target.value as string)}
+        placeholder=""
       >
         {children}
       </select>

package/mobile/src/ui-kit/Select/SelectOption.tsx

@@ -4,12 +4,13 @@ export interface SelectOptionProps {
   className?: string;
   value?: string;
   selected?: boolean;
+  disabled?: boolean;
 }
 
 export const SelectOption = JSX<SelectOptionProps>(
-  ({ className = '', value, selected, children }) => {
+  ({ className = '', value, selected, disabled = false, children }) => {
     return (
-      <option className={className} value={`${value}`} selected={selected}>
+      <option className={className} value={`${value}`} selected={selected} disabled={disabled}>
         {children}
       </option>
     );

package/package.json

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

package/src/common.css

@@ -72,7 +72,7 @@ html {
     width: 100%;
   }
 
-  .calc-rate-text {
+  .gradient-color-text {
     background: linear-gradient(180deg, #42ab44 0%, #f6db7d 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

package/src/components/BaseTile/BaseTile.tsx

@@ -11,8 +11,8 @@ export const BaseTile = JSX<BaseTileProps>(
         {title}
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">
-            <div>{children}</div>
-            {buttons ? <div className="mt-auto">{buttons}</div> : null}
+            <div className="h-full">{children}</div>
+            {buttons ? <div className="mt-auto pt-8">{buttons}</div> : null}
           </div>
           {image}
         </div>

package/src/components/BlockContent.ts

@@ -13,6 +13,7 @@ import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
 import type { NavigationContent } from './Navigation/NavigationContent';
+import type { OfficeServicesBlockContent } from './OfficeServicesBlock/OfficeServicesBlockContent';
 import type { PictureTextContent } from './PictureText/PictureTextContent';
 import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
 import type { ProductBlockContent } from './ProductBlock/ProductBlockContent';
@@ -25,6 +26,7 @@ import type { TabsContent } from './Tabs/TabsContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
+import type { ErrorBlockContent } from './ErrorBlock/ErrorBlockContent';
 
 /**
  * @hidden
@@ -56,4 +58,6 @@ export type BlockContent =
   | LinkListContent
   | BonusBenefitsBlockContent
   | SafeDepositRentalContent
-  | TabsContent;
+  | TabsContent
+  | ErrorBlockContent
+  | OfficeServicesBlockContent;