@redneckz/wildless-cms-uni-blocks 0.3.11 → 0.3.12

package/mobile/lib/ui-kit/Select/Select.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+export const Select = JSX(({ className = '', id, name, children }) => {
+    return (_jsx("select", { className: className, id: id, name: name || id, children: children }));
+});
+//# sourceMappingURL=Select.js.map

package/mobile/lib/ui-kit/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQxC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAc,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;IAChF,OAAO,CACL,iBAAQ,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,YACnD,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/mobile/lib/ui-kit/Select/SelectOption.d.ts

@@ -0,0 +1,5 @@
+export interface SelectOptionProps {
+    className?: string;
+    value?: string;
+}
+export declare const SelectOption: (props: import("@redneckz/uni-jsx").PropsWithChildren<SelectOptionProps, any>, context?: any) => any;

package/mobile/lib/ui-kit/Select/SelectOption.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+export const SelectOption = JSX(({ className = '', value, children }) => {
+    return (_jsx("option", { className: className, value: `${value}`, children: children }));
+});
+//# sourceMappingURL=SelectOption.js.map

package/mobile/lib/ui-kit/Select/SelectOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/SelectOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAOxC,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAoB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzF,OAAO,CACL,iBAAQ,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,YAC5C,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/mobile/src/common.css

@@ -136,4 +136,16 @@
     box-shadow: none;
     border: 3px solid #42ab44;
   }
+
+  /* Hide arrows */
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Hide arrows */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
 }

package/mobile/src/components/BaseTile/BaseTile.tsx

@@ -12,7 +12,7 @@ export const BaseTile = JSX<BaseTileProps>(
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">
             <div>{children}</div>
-            <div>{buttons}</div>
+            {buttons?.length ? <div>{buttons}</div> : null}
           </div>
           {image}
         </div>

package/mobile/src/components/ContentPage/ContentPageContext.tsx

@@ -21,7 +21,7 @@ export interface Search {
 
 export type AsyncDataHook = <Data, Error = any>(
   key: string,
-  fetcher: () => Promise<Data>,
+  fetcher: (key: string) => Promise<Data>,
 ) => { data?: Data; error?: Error };
 
 export type GeolocationHook = (defaultLocation: string) => [string, () => void];

package/mobile/src/components/CreditCalculator/CreditCalculator.tsx

@@ -1,63 +1,47 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
-import { UniBlockProps } from '../../types';
-import { Button } from '../../ui-kit/Button/Button';
+import type { UniBlockProps } from '../../types';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { clamp } from '../../utils/clamp';
-import {
-  DEFAULT_MAX_MONTHS,
-  DEFAULT_MAX_SUM,
-  DEFAULT_MIN_MONTHS,
-  DEFAULT_MIN_SUM,
-  DEFAULT_MONTHS,
-  DEFAULT_SUM,
-  MONTHS_IN_YEAR,
-} from './constants';
-import { CreditCalculatorContent } from './CreditCalculatorContent';
+import { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS, MONTHS_IN_YEAR } from './constants';
+import type { CreditCalculatorContent } from './CreditCalculatorContent';
 import { getCalculatorParams } from './getCalculatorParams';
 import { getCreditRate } from './getCreditRate';
 import { getCreditTermYears } from './getCreditTermYears';
+import { getDefaultMonths } from './getDefaultMonths';
+import { getDefaultSum } from './getDefaultSum';
 import { getMonthlyPayment } from './getMonthlyPayment';
+import { renderButton } from './renderButton';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderProposal } from './renderProposal';
+import { renderTermsButton } from './renderTermsButton';
+import { renderWantedSumInput } from './renderWantedSumInput';
 
 export interface CreditCalculatorProps extends CreditCalculatorContent, UniBlockProps {}
 
-const STEP_MONEY = 1000;
-const STEP_MONTHS = 1;
 const DEFAULT_PAYMENT_TYPE = 'annuity';
 
 const borderStyle = 'border-solid border-[3px] border-primary-main rounded-md';
 
 export const CreditCalculator = JSX<CreditCalculatorProps>(
-  ({ context, className, directoryName }) => {
+  ({ context, className = '', directoryName }) => {
     const [moneyValue, setMoneyValue] = context.useState<number | undefined>(undefined);
     const [monthsValue, setMonthsValue] = context.useState<number | undefined>(undefined);
     const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
     const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
 
     const tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
-
     const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
 
-    const defaultSum =
-      calculatorParams.maxSum && calculatorParams.minSum
-        ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
-        : DEFAULT_SUM;
-
-    const defaultMonths =
-      calculatorParams.maxMonths && calculatorParams.minMonths
-        ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
-        : DEFAULT_MONTHS;
+    const defaultSum = getDefaultSum(calculatorParams);
+    const defaultMonths = getDefaultMonths(calculatorParams);
 
-    const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-    const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
     const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
     const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
 
     const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
 
-    const montlyPayment = getMonthlyPayment({
+    const monthlyPayment = getMonthlyPayment({
       calculatorParams,
       paymentType: DEFAULT_PAYMENT_TYPE,
       rate,
@@ -72,32 +56,18 @@ export const CreditCalculator = JSX<CreditCalculatorProps>(
     }
 
     return (
-      <section className={`font-sans text-primary-text p-10 bg-white ${className || ''}`}>
+      <section className={`font-sans text-primary-text p-10 bg-white ${className}`}>
         <div className={`box-border p-[49px] pr-[56px] mx-auto w-max ${borderStyle}`}>
-          <div className="flex justify-between ">
+          <div className="flex justify-between">
             <div className="mr-[42px]">
-              <InputRange
-                title="Желаемая сумма кредита, ₽"
-                items={[
-                  `От ${addSpacesBetweenNumbers(minSum)} рублей`,
-                  `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
-                ]}
-                min={minSum}
-                max={maxSum}
-                step={STEP_MONEY}
-                value={moneyValue || defaultSum}
-                onChange={setMoneyValue}
-              />
-              <InputRange
-                className="mt-[23px]"
-                title="Срок кредита, месяцев"
-                items={['Или выберите из предложенных вариантов ниже']}
-                min={minMonths}
-                max={maxMonths}
-                step={STEP_MONTHS}
-                value={monthsValue || defaultMonths}
-                onChange={setMonthsValue}
-              />
+              {renderWantedSumInput({ calculatorParams, moneyValue, defaultSum, setMoneyValue })}
+              {renderMonthsInput({
+                minMonths,
+                maxMonths,
+                monthsValue,
+                defaultMonths,
+                setMonthsValue,
+              })}
               <div className="flex mb-7">
                 {creditTermYears.map((number, i) => renderButton(number, i, handleButtonClick))}
               </div>
@@ -113,42 +83,11 @@ export const CreditCalculator = JSX<CreditCalculatorProps>(
                 onChange={setIsInsuranceChecked}
               />
             </div>
-            <div className="box-border h-fit p-9 bg-primary-main rounded-md text-white">
-              <div className="text-base mb-[18px]">Наше предложение</div>
-              <div className="text-sm opacity-60">Ежемесячный платёж</div>
-              <div className="text-lg mb-3">
-                {addSpacesBetweenNumbers(Math.round(montlyPayment))} ₽
-              </div>
-              <div className="text-sm opacity-60">Ставка</div>
-              <div className="text-lg">{rate} %</div>
-            </div>
-          </div>
-          <div className="flex items-center">
-            <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
-            <div
-              className="w-80 text-2xs leading-4 text-secondary-text"
-              aria-label="Соглашение на обработку персональных данных"
-            >
-              Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
-              требованиям ФЗ «О персональных данных»
-            </div>
+            {renderProposal(monthlyPayment, rate)}
           </div>
+          {renderTermsButton()}
         </div>
       </section>
     );
   },
 );
-
-function renderButton(number: number, i: number, handleClick: (number: number) => void) {
-  return (
-    <button
-      key={String(i)}
-      className="bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none"
-      onClick={() => handleClick(number)}
-    >
-      <span className="font-semibold text-sm">
-        {number} {number === 1 ? 'год' : number > 4 ? 'лет' : 'года'}
-      </span>
-    </button>
-  );
-}

package/mobile/src/components/CreditCalculator/getCalculatorParams.ts

@@ -1,4 +1,4 @@
-import { CalculatorParams } from './CreditCalculatorContent';
+import type { CalculatorParams } from './CreditCalculatorContent';
 
 interface GetCalculatorParamsParams {
   tableRows?: CalculatorParams[];

package/mobile/src/components/CreditCalculator/getCreditRate.ts

@@ -1,4 +1,4 @@
-import { CalculatorParams } from './CreditCalculatorContent';
+import type { CalculatorParams } from './CreditCalculatorContent';
 
 const DEFAULT_RATE = 5;
 

package/mobile/src/components/CreditCalculator/getDefaultMonths.ts

@@ -0,0 +1,7 @@
+import { DEFAULT_MONTHS } from './constants';
+import type { CalculatorParams } from './CreditCalculatorContent';
+
+export const getDefaultMonths = (calculatorParams: CalculatorParams) =>
+  calculatorParams.maxMonths && calculatorParams.minMonths
+    ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
+    : DEFAULT_MONTHS;

package/mobile/src/components/CreditCalculator/getDefaultSum.ts

@@ -0,0 +1,7 @@
+import { DEFAULT_SUM } from './constants';
+import type { CalculatorParams } from './CreditCalculatorContent';
+
+export const getDefaultSum = (calculatorParams: CalculatorParams) =>
+  calculatorParams.maxSum && calculatorParams.minSum
+    ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
+    : DEFAULT_SUM;

package/mobile/src/components/CreditCalculator/getMonthlyPayment.ts

@@ -1,6 +1,6 @@
 import { clamp } from '../../utils/clamp';
 import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM, MONTHS_IN_YEAR } from './constants';
-import { CalculatorParams } from './CreditCalculatorContent';
+import type { CalculatorParams } from './CreditCalculatorContent';
 
 type PaymentType = 'annuity' | 'differentiated';
 

package/mobile/src/components/CreditCalculator/renderButton.tsx

@@ -0,0 +1,13 @@
+export function renderButton(number: number, i: number, handleClick: (number: number) => void) {
+  return (
+    <button
+      key={String(i)}
+      className="bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none"
+      onClick={() => handleClick(number)}
+    >
+      <span className="font-semibold text-sm">
+        {number} {number === 1 ? 'год' : number > 4 ? 'лет' : 'года'}
+      </span>
+    </button>
+  );
+}

package/mobile/src/components/CreditCalculator/renderMonthsInput.tsx

@@ -0,0 +1,29 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+
+const STEP_MONTHS = 1;
+
+interface RenderMonthsInputProps {
+  minMonths: number;
+  maxMonths: number;
+  monthsValue: number | undefined;
+  defaultMonths: number;
+  setMonthsValue: InputRangeProps['onChange'];
+}
+
+export function renderMonthsInput(props: RenderMonthsInputProps) {
+  const { minMonths, maxMonths, monthsValue, defaultMonths, setMonthsValue } = props;
+
+  return (
+    <InputRange
+      className="mt-[23px]"
+      title="Срок кредита, месяцев"
+      items={['Или выберите из предложенных вариантов ниже']}
+      min={minMonths}
+      max={maxMonths}
+      step={STEP_MONTHS}
+      value={monthsValue || defaultMonths}
+      onChange={setMonthsValue}
+    />
+  );
+}

package/mobile/src/components/CreditCalculator/renderProposal.tsx

@@ -0,0 +1,13 @@
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+
+export function renderProposal(monthlyPayment: number, rate: number) {
+  return (
+    <div className="box-border h-fit p-9 bg-primary-main rounded-md text-white">
+      <div className="text-base mb-[18px]">Наше предложение</div>
+      <div className="text-sm opacity-60">Ежемесячный платёж</div>
+      <div className="text-lg mb-3">{addSpacesBetweenNumbers(Math.round(monthlyPayment))} ₽</div>
+      <div className="text-sm opacity-60">Ставка</div>
+      <div className="text-lg">{rate} %</div>
+    </div>
+  );
+}

package/mobile/src/components/CreditCalculator/renderTermsButton.tsx

@@ -0,0 +1,16 @@
+import { Button } from '../../ui-kit/Button/Button';
+
+export function renderTermsButton() {
+  return (
+    <div className="flex items-center">
+      <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
+      <div
+        className="w-80 text-2xs leading-4 text-secondary-text"
+        aria-label="Соглашение на обработку персональных данных"
+      >
+        Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
+        требованиям ФЗ «О персональных данных»
+      </div>
+    </div>
+  );
+}

package/mobile/src/components/CreditCalculator/renderWantedSumInput.tsx

@@ -0,0 +1,36 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
+import type { CalculatorParams } from './CreditCalculatorContent';
+
+const STEP_MONEY = 1000;
+
+interface RenderWantedSumInputProps {
+  calculatorParams: CalculatorParams;
+  moneyValue: number | undefined;
+  defaultSum: number;
+  setMoneyValue: InputRangeProps['onChange'];
+}
+
+export function renderWantedSumInput(props: RenderWantedSumInputProps) {
+  const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
+
+  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+
+  return (
+    <InputRange
+      title="Желаемая сумма кредита, ₽"
+      items={[
+        `От ${addSpacesBetweenNumbers(minSum)} рублей`,
+        `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
+      ]}
+      min={minSum}
+      max={maxSum}
+      step={STEP_MONEY}
+      value={moneyValue || defaultSum}
+      onChange={setMoneyValue}
+    />
+  );
+}

package/mobile/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
+import { formatCurrency } from './formatCurrency';
+
+const TABLE_HEAD_STYLE = 'text-left font-normal text-sm text-secondary-text';
+
+const CURRENCY_ICONS_MAP = {
+  USD: 'DollarIcon',
+  EUR: 'EuroIcon',
+};
+
+interface CurrencyTableProps {
+  className?: string;
+  exchangeCurrencyItems: ExchangeCurrencyItem[];
+}
+
+export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurrencyItems }) => {
+  return (
+    <table className={`h-fit w-fit ${className}`}>
+      <thead>
+        <tr>
+          <th className={TABLE_HEAD_STYLE}>Валюта</th>
+          <th className={`${TABLE_HEAD_STYLE} pl-11`}>Купить</th>
+          <th className={`${TABLE_HEAD_STYLE} pl-11`}>Продать</th>
+        </tr>
+      </thead>
+      <tbody>{exchangeCurrencyItems.map((item) => renderCurrencyRow(item))}</tbody>
+    </table>
+  );
+});
+
+const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
+  const code = exchangeCurrencyItem?.currency?.currency;
+  return (
+    <tr key={code}>
+      <td className="pt-4">
+        <div className="flex items-center">
+          {code ? <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" /> : null}
+          <span className="ml-2">{code}</span>
+        </div>
+      </td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem.buyExchangeRate)}</td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem.saleExchangeRate)}</td>
+    </tr>
+  );
+};

package/mobile/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+interface CurrentLocationProps {
+  className?: string;
+  address?: string;
+  distance?: string;
+}
+
+export const CurrentLocation = JSX<CurrentLocationProps>(
+  ({ className = '', address, distance }) => (
+    <div className={`flex text-sm ${className}`}>
+      <Icon className="min-w-fit" name="GpsIcon" width="24" height="24" asSVG />
+      <div className="ml-1.5">
+        {address ? <p className="m-0">{address}</p> : null}
+        {distance ? (
+          <p className="text-secondary-text m-0">Курс указан для ближайшего офиса - {distance}</p>
+        ) : null}
+      </div>
+    </div>
+  ),
+);

package/mobile/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../../ui-kit/Button/Button';
+import { Input } from '../../ui-kit/Input/Input';
+import { Select } from '../../ui-kit/Select/Select';
+import { SelectOption } from '../../ui-kit/Select/SelectOption';
+import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
+
+export interface ExchangeCurrencyCalculatorProps {
+  exchangeCurrencyItems: ExchangeCurrencyItem[];
+  codes: string[];
+  className?: string;
+}
+
+export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
+  ({ codes, className = '' }) => {
+    return (
+      <div className={`grid gap-3.5 ${className}`}>
+        {renderInput('Хочу продать', codes)}
+        {renderInput('Получу', codes)}
+        <Button className="box-border mt-3.5 py-3 h-12 w-44" version="primary" href="#">
+          Купить валюту
+        </Button>
+      </div>
+    );
+  },
+);
+
+function renderInput(placeholder: string, codes: string[]) {
+  return (
+    <div className="flex items-center">
+      <Input
+        className="h-10 border pl-2.5 rounded-md text-m-sm w-full appearance-none"
+        type="number"
+        placeholder={`${placeholder}`}
+      />
+      {codes.length ? (
+        <Select className="h-9 -translate-x-16">
+          {codes.map((code, i) => (
+            <SelectOption key={String(i)} value={code}>
+              {code}
+            </SelectOption>
+          ))}
+        </Select>
+      ) : null}
+    </div>
+  );
+}