@redneckz/wildless-cms-uni-blocks 0.5.4 → 0.5.5

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

@@ -297,7 +297,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
         class="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none"
       >
         <div
-          class="w-[24px] h-[24px]"
+          class="w-6 h-6"
         >
           <img
             alt="Иконка Лупа"
@@ -673,7 +673,7 @@ exports[`Blocks MobileAppTile should render block "MobileAppTile" without conten
 
 exports[`Blocks Navigation should render block "Navigation" without content 1`] = `
 <section
-  class="font-sans text-primary-text rounded-[40px] flex items-center justify-between "
+  class="font-sans text-primary-text flex items-center justify-between "
 >
   <h2
     class="text-xl font-medium m-0"
@@ -873,300 +873,292 @@ exports[`Blocks Recommendation should render block "Recommendation" without cont
 
 exports[`Blocks SafeDepositRental should render block "SafeDepositRental" without content 1`] = `
 <section
-  class="bg-white px-8 py-12 "
+  class=""
 >
   <div
-    class="flex justify-between align-top mb-6"
+    class="bg-white px-8 py-12"
   >
     <div
-      class="flex-1 mr-9"
+      class="flex justify-between align-top mb-6"
     >
       <div
-        class="flex justify-between mb-6"
+        class="flex-1 mr-9"
       >
         <div
-          class="w-full mr-4"
+          class="flex justify-between mb-6"
         >
-          <div>
-            <span
-              class="block text-m-light mb-2"
-            >
-              Город
-            </span>
-            <select
-              class="appearance-none pl-0.5 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>
-            </select>
-          </div>
-        </div>
-        <div
-          class="w-full"
-        >
-          <div>
-            <span
-              class="block text-m-light mb-2"
-            >
-              Отделение
-            </span>
-            <select
-              class="appearance-none pl-0.5 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>
-            </select>
-          </div>
-        </div>
-      </div>
-      <div
-        class="mb-6"
-      >
-        <span
-          class="block text-m-light mb-[3px]"
-        >
-          Срок аренды
-        </span>
-        <div>
-          <label
-            class="block relative"
+          <div
+            class="w-full mr-4"
           >
-            <input
-              class="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:border-main-stroke disabled:bg-main-divider"
-              value="26"
-            />
-            <div
-              class="absolute inset-x-0 -bottom-1 px-4 leading-[18px]"
-            >
-              <input
-                class="box-border w-full m-0 cursor-pointer slider"
-                max="365"
-                min="1"
-                step="1"
-                style="background-size: 6.87% 100%;"
-                type="range"
-                value="26"
+            <div>
+              <span
+                class="block text-m-light mb-2"
+              >
+                Город
+              </span>
+              <select
+                class="appearance-none pl-0.5 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%;"
               />
             </div>
-          </label>
+          </div>
           <div
-            class="flex justify-between my-2"
+            class="w-full"
           >
-            <span
-              class="text-s-light text-secondary-text"
-            >
-              От 1 дня
-            </span>
-            <span
-              class="text-s-light text-secondary-text"
-            >
-              До 365 дней
-            </span>
+            <div>
+              <span
+                class="block text-m-light mb-2"
+              >
+                Отделение
+              </span>
+              <select
+                class="appearance-none pl-0.5 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>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="flex justify-between mb-6"
-      >
         <div
-          class="mr-4 w-full"
+          class="mb-6"
         >
+          <span
+            class="block text-m-light mb-[3px]"
+          >
+            Срок аренды
+          </span>
           <div>
-            <span
-              class="block text-m-light mb-2"
+            <label
+              class="block relative"
             >
-              Размер
-            </span>
-            <select
-              class="appearance-none pl-0.5 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%;"
+              <input
+                class="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:border-main-stroke disabled:bg-main-divider"
+                value="26"
+              />
+              <div
+                class="absolute inset-x-0 -bottom-1 px-4 leading-[18px]"
+              >
+                <input
+                  class="box-border w-full m-0 cursor-pointer slider"
+                  max="365"
+                  min="1"
+                  step="1"
+                  style="background-size: 6.87% 100%;"
+                  type="range"
+                  value="26"
+                />
+              </div>
+            </label>
+            <div
+              class="flex justify-between my-2"
             >
-              <option
-                class=""
-                value=""
+              <span
+                class="text-s-light text-secondary-text"
               >
-                Выберите размер
-              </option>
-            </select>
+                От 1 дня
+              </span>
+              <span
+                class="text-s-light text-secondary-text"
+              >
+                До 365 дней
+              </span>
+            </div>
           </div>
         </div>
         <div
-          class="w-full"
+          class="flex justify-between mb-6"
         >
-          <div>
-            <span
-              class="block text-m-light mb-2"
-            >
-              Параметры ячейки, мм (ВхШхД)
-            </span>
-            <select
-              class="appearance-none pl-0.5 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>
-            </select>
-          </div>
-        </div>
-      </div>
-      <span
-        class="text-secondary-text text-l-light"
-      >
-        Тип договора
-      </span>
-      <div
-        class="flex justify-between items-center mt-5"
-      >
-        <div>
           <div
-            class="mb-2"
+            class="mr-4 w-full"
           >
-            <label
-              class="flex items-center relative cursor-pointer"
-            >
-              <input
-                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"
-              />
+            <div>
               <span
-                class="font-sans ml-3 cursor-pointer"
+                class="block text-m-light mb-2"
               >
-                Простое хранение
+                Размер
               </span>
-            </label>
+              <select
+                class="appearance-none pl-0.5 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>
+              </select>
+            </div>
           </div>
-          <div>
-            <label
-              class="flex items-center relative cursor-pointer"
-            >
-              <input
-                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="option2"
-              />
+          <div
+            class="w-full"
+          >
+            <div>
               <span
-                class="font-sans ml-3 cursor-pointer"
+                class="block text-m-light mb-2"
               >
-                Сделка с недвижимостью
+                Параметры ячейки, мм (ВхШхД)
               </span>
-            </label>
+              <select
+                class="appearance-none pl-0.5 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>
+              </select>
+            </div>
           </div>
         </div>
-        <a
-          class="text-center font-sans select-none border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active rounded-md "
-          role="button"
+        <span
+          class="text-secondary-text text-l-light"
         >
-          <div
-            class="group flex items-center justify-center gap-2 py-4 px-9  "
-          >
+          Тип договора
+        </span>
+        <div
+          class="flex justify-between items-center mt-5"
+        >
+          <div>
+            <div
+              class="mb-2"
+            >
+              <label
+                class="flex items-center relative cursor-pointer"
+              >
+                <input
+                  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"
+                />
+                <span
+                  class="font-sans ml-3 cursor-pointer"
+                >
+                  Простое хранение
+                </span>
+              </label>
+            </div>
             <div>
-              <div
-                class="text-xs-light text-left"
-              />
-              <div
-                class="text-left text-l"
+              <label
+                class="flex items-center relative cursor-pointer"
               >
-                Офисы на карте
-              </div>
+                <input
+                  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="option2"
+                />
+                <span
+                  class="font-sans ml-3 cursor-pointer"
+                >
+                  Сделка с недвижимостью
+                </span>
+              </label>
             </div>
           </div>
-        </a>
+          <a
+            class="text-center font-sans select-none border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active rounded-md "
+            role="button"
+          >
+            <div
+              class="group flex items-center justify-center gap-2 py-4 px-9  "
+            >
+              <div>
+                <div
+                  class="text-xs-light text-left"
+                />
+                <div
+                  class="text-left text-l"
+                >
+                  Офисы на карте
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
       </div>
-    </div>
-    <div
-      class="flex flex-col justify-between"
-    >
       <div
-        class="flex"
+        class="flex flex-col justify-between"
       >
         <div
-          class="mr-11"
+          class="flex"
         >
-          <span
-            class="block text-m-light mb-1"
+          <div
+            class="mr-11"
           >
-            Аренда за
-          </span>
-          <span
-            class="text-h3"
+            <span
+              class="block text-m-light mb-1"
+            >
+              Аренда за
+            </span>
+            <span
+              class="text-h3"
+            >
+              26
+            </span>
+          </div>
+          <div
+            class=""
           >
-            26
-          </span>
+            <span
+              class="block text-m-light mb-1"
+            >
+              Цена
+            </span>
+            <span
+              class="text-h3"
+            >
+              0 ₽
+            </span>
+          </div>
         </div>
         <div
-          class=""
+          class="bg-primary-main px-10 pt-10 pb-4 text-center"
         >
-          <span
-            class="block text-m-light mb-1"
+          <svg
+            aria-hidden="true"
+            class=""
+            height="257"
+            width="290"
           >
-            Цена
-          </span>
+            <title>
+              Иконка PackA4Icon
+            </title>
+            <desc>
+              Иконка PackA4Icon
+            </desc>
+            <use
+              class="text-primary-main "
+              href="icons/PackA4Icon.svg#icon"
+              xlink:href="icons/PackA4Icon.svg#icon"
+            />
+          </svg>
           <span
-            class="text-h3"
+            class="text-s-light text-white opacity-80 mt-2 inline-block"
           >
-            0 ₽
+            На рисунки изображена пачка
+            <br />
+             листов формата А4
           </span>
         </div>
       </div>
-      <div
-        class="bg-primary-main px-10 pt-10 pb-4 text-center"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          height="257"
-          width="290"
-        >
-          <title>
-            Иконка PackA4Icon
-          </title>
-          <desc>
-            Иконка PackA4Icon
-          </desc>
-          <use
-            class="text-primary-main "
-            href="icons/PackA4Icon.svg#icon"
-            xlink:href="icons/PackA4Icon.svg#icon"
-          />
-        </svg>
-        <span
-          class="text-s-light text-white opacity-80 mt-2 inline-block"
-        >
-          На рисунки изображена пачка
-          <br />
-           листов формата А4
-        </span>
-      </div>
     </div>
   </div>
-  <p
-    class="text-s-light text-secondary-text"
-  >
-    Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег или процедуры ипотечной сделки
-  </p>
 </section>
 `;
 

package/mobile/src/hooks/useFetchSafeBoxes.ts

@@ -0,0 +1,44 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSON } from '../utils/fetchJSON';
+
+export interface Tariff {
+  tariffType?: string;
+  tariffValue?: number;
+}
+
+export interface SafeBoxCase {
+  safeBoxCasesSize?: string;
+  tariffs?: Tariff[];
+}
+
+export interface SafeBoxCaseVolume {
+  volume?: string;
+  safeBoxCases?: SafeBoxCase[];
+}
+
+export interface Branch {
+  branchCode?: string;
+  address?: string;
+  gpsLatitude?: number;
+  gpsLongitude?: number;
+  safeBoxCaseVolumes?: SafeBoxCaseVolume[];
+}
+
+const SAFEBOXES_URL = '/api/v1/safeboxes';
+
+export function useFetchSafeBoxes(regionCode?: string) {
+  const { data } = useAsyncData<{ data?: Branch[] }, any, string | null>(
+    regionCode ? `${SAFEBOXES_URL}?regionCode=${regionCode}` : null,
+    fetchSafeBoxes,
+  );
+
+  return data || [];
+}
+
+const fetchSafeBoxes = (url?: string) => {
+  if (!url) {
+    return {};
+  }
+
+  return fetchJSON(url, { method: 'GET' });
+};

package/mobile/src/hooks/useScript.ts

@@ -0,0 +1,97 @@
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+export type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
+export interface UseScriptOptions {
+  shouldPreventLoad?: boolean;
+  removeOnUnmount?: boolean;
+}
+
+const cachedScriptStatuses: Record<string, ScriptStatus | undefined> = {};
+
+function getScriptNode(src: string) {
+  const node: HTMLScriptElement | null = document.querySelector(`script[src="${src}"]`);
+  const status = node?.getAttribute('data-status') as ScriptStatus | undefined;
+
+  return {
+    node,
+    status,
+  };
+}
+
+function getScriptStatus(type) {
+  return type === 'load' ? 'ready' : 'error';
+}
+
+function getInitialValueStatus(src: string | null, options?: UseScriptOptions) {
+  if (!src || options?.shouldPreventLoad) {
+    return 'idle';
+  }
+
+  if (typeof window === 'undefined') {
+    return 'loading';
+  }
+
+  return cachedScriptStatuses[src] ?? 'loading';
+}
+
+export function useScript(src: string | null, options?: UseScriptOptions): ScriptStatus {
+  const [status, setStatus] = useState<ScriptStatus>(getInitialValueStatus(src, options));
+
+  // eslint-disable-next-line complexity
+  useEffect(() => {
+    if (!src || options?.shouldPreventLoad) {
+      return undefined;
+    }
+
+    const cachedScriptStatus = cachedScriptStatuses[src];
+    if (cachedScriptStatus === 'ready' || cachedScriptStatus === 'error') {
+      setStatus(cachedScriptStatus);
+
+      return undefined;
+    }
+
+    const script = getScriptNode(src);
+    let scriptNode = script.node;
+
+    if (!scriptNode) {
+      scriptNode = document.createElement('script');
+      scriptNode.src = src;
+      scriptNode.async = true;
+      scriptNode.setAttribute('data-status', 'loading');
+      document.body.appendChild(scriptNode);
+
+      const setAttributeFromEvent = (event: Event) => {
+        const scriptStatus: ScriptStatus = getScriptStatus(event.type);
+
+        scriptNode?.setAttribute('data-status', scriptStatus);
+      };
+
+      scriptNode.addEventListener('load', setAttributeFromEvent);
+      scriptNode.addEventListener('error', setAttributeFromEvent);
+    } else {
+      setStatus(script.status ?? cachedScriptStatus ?? 'loading');
+    }
+
+    const setStateFromEvent = (event: Event) => {
+      const newStatus = getScriptStatus(event.type);
+      setStatus(newStatus);
+      cachedScriptStatuses[src] = newStatus;
+    };
+
+    scriptNode.addEventListener('load', setStateFromEvent);
+    scriptNode.addEventListener('error', setStateFromEvent);
+
+    return () => {
+      if (scriptNode) {
+        scriptNode.removeEventListener('load', setStateFromEvent);
+        scriptNode.removeEventListener('error', setStateFromEvent);
+      }
+
+      if (scriptNode && options?.removeOnUnmount) {
+        scriptNode.remove();
+      }
+    };
+  }, [src, options?.shouldPreventLoad, options?.removeOnUnmount]);
+
+  return status;
+}