@redneckz/wildless-cms-uni-blocks 0.14.898 → 0.14.900

package/src/components/ExchangeRateTile/formatCurrency.ts

@@ -0,0 +1,8 @@
+import { Currency } from './CurrencyProps';
+
+const currencyNumberFormat = new Intl.NumberFormat('ru', {
+  style: 'currency',
+  currency: Currency.RUB,
+});
+
+export const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');

package/src/components/ExchangeRateTile/renderInput.tsx

@@ -0,0 +1,43 @@
+import { type ControlProps } from '../../model/ControlProps';
+import { type PlaceholderProps } from '../../model/PlaceholderProps';
+import { Input } from '../../ui-kit/Input/Input';
+import { type Option } from '../../ui-kit/Select/Option';
+import { Select } from '../../ui-kit/Select/Select';
+import { type Currency } from './CurrencyProps';
+import { type ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
+
+interface InputProps extends PlaceholderProps, ControlProps<string> {
+  rates: ExchangeCurrencyItem[];
+  selected: string;
+  setSelected: (value: Currency) => void;
+}
+
+export function renderInput(props: InputProps) {
+  const { placeholder, rates, selected, value, onChange, setSelected } = props;
+  const ratesOptions: Option[] = rates.map((_) => ({
+    key: _?.currency?.currency ?? '',
+    text: _?.currency?.currency ?? '',
+  }));
+  const selectedValue: Option = { key: selected, text: selected };
+
+  return (
+    <div className="relative flex">
+      <Input
+        className="shrink-0 text-l w-full appearance-none -mr-20"
+        placeholder={placeholder}
+        type="text"
+        value={value}
+        onChange={onChange}
+      />
+      {ratesOptions.length ? (
+        <Select
+          className="absolute right-0"
+          isBorder={false}
+          onChange={(_) => setSelected(_.key as Currency)}
+          options={ratesOptions}
+          value={selectedValue}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/components/ExchangeRateTile/useFetchExchangeRateData.ts

@@ -0,0 +1,25 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { API_BASE_URI } from '../../api/apiBaseUrl';
+import { type ExchangeCurrencyItem } from '../../components/ExchangeRateTile/ExchangeCurrencyCalculator';
+import { type Region } from '../../hooks/useRegions';
+import { fetchJSONUnsafe, type FetchJSONUnsafeType } from '../../utils/fetchJSON';
+
+export interface ExchangeData {
+  exchangeRate?: {
+    currencies?: ExchangeCurrencyItem[];
+  };
+  address?: string;
+}
+
+const EXCHANGE_RATES_URL = `${API_BASE_URI}/exchangerates`;
+
+export function useFetchExchangeRateData(currentRegion: Region) {
+  const regionCode = currentRegion?.code || '000';
+
+  const { data } = useAsyncData(
+    EXCHANGE_RATES_URL + `?regionCode=${regionCode}`,
+    fetchJSONUnsafe as FetchJSONUnsafeType<ExchangeData>,
+  );
+
+  return data || {};
+}

package/src/components/OfficesAtmsMap/FiltrationForm.tsx

@@ -8,8 +8,32 @@ import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { Text } from '../../ui-kit/Text/Text';
 
 const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
+const VISIBLE_FILTERS = [
+  'workingSaturday',
+  'premiumService',
+  'privateBanking',
+  'remoteWorkplace',
+  'serviceDisabledPeople',
+  'transferringDataToBiometricSystem',
+];
+const PRECIOUS_METALS_FILTERS = [
+  'sellingCoins',
+  'buyingCoins',
+  'bullionOperations',
+  'preciousMetalsOperations',
+];
+const DISABLED_SERVICE_FILTERS = [
+  'hasAccessibilitySign',
+  'equippedWithRamp',
+  'equippedWithLift',
+  'equippedWithElevator',
+  'equippedWithStairclimber',
+  'hasHelpMeButton',
+];
+const VISIBLE_ATMS_FILTERS_NUM = 6;
 
 export interface RenderFiltrationFormProps {
   filters: string[];
@@ -18,18 +42,25 @@ export interface RenderFiltrationFormProps {
   labels: Record<string, string>;
 }
 
-export const FiltrationForm = JSX<RenderFiltrationFormProps>(
-  ({ filters, field: { field, reset }, onlyOffice, labels }) => {
-    const visibleFiltersNum = onlyOffice ? 5 : 6;
+type getFilterProps = {
+  onlyOffice?: boolean;
+  filtersCheckbox?: filtersCheckboxType[];
+};
 
-    const filtersCheckbox = (filters || []).map((key) => (
+type filtersCheckboxType = {
+  key: string;
+};
+
+export const FiltrationForm = JSX<RenderFiltrationFormProps>(
+  ({ filters = [], field: { field, reset }, onlyOffice, labels }) => {
+    const filtersCheckbox = filters.map((key) => (
       <Checkbox key={key} text={labels[key]} {...field(key)} />
     ));
 
-    const [visibleFilters, hiddenFilters] =
-      visibleFiltersNum > 0
-        ? [filtersCheckbox.slice(0, visibleFiltersNum), filtersCheckbox.slice(visibleFiltersNum)]
-        : [filtersCheckbox, []];
+    const [visibleFilters, hiddenPreciousMetalsFilters, hiddenDisabledServiceFilters] = getFilters({
+      onlyOffice,
+      filtersCheckbox,
+    });
 
     const [isUnfolded, { toggle }] = useBool(false);
 
@@ -40,11 +71,8 @@ export const FiltrationForm = JSX<RenderFiltrationFormProps>(
             <Foldable>
               <div>
                 <div className={COMMON_FILTERS_STYLES}>{visibleFilters}</div>
-                <FoldableSection className={COMMON_FILTERS_STYLES} isUnfolded={isUnfolded}>
-                  {hiddenFilters}
-                </FoldableSection>
               </div>
-              <div className="flex space-x-lg">
+              <div className="flex space-x-lg pb-2xl">
                 {onlyOffice ? (
                   <DefaultFoldButton
                     label={isUnfolded ? 'Меньше фильтров' : 'Больше фильтров'}
@@ -59,6 +87,15 @@ export const FiltrationForm = JSX<RenderFiltrationFormProps>(
                   <Icon name="CloseIcon" size="small" />
                 </Button>
               </div>
+              <div>
+                <FoldableSection isUnfolded={isUnfolded}>
+                  {renderFoldableSubsection('Драгоценные металлы', hiddenPreciousMetalsFilters)}
+                  {renderFoldableSubsection(
+                    'Специальные возможности',
+                    hiddenDisabledServiceFilters,
+                  )}
+                </FoldableSection>
+              </div>
             </Foldable>
           </div>
         ) : null}
@@ -66,3 +103,45 @@ export const FiltrationForm = JSX<RenderFiltrationFormProps>(
     );
   },
 );
+
+const getFilters = ({ onlyOffice = false, filtersCheckbox = [] }: getFilterProps) => {
+  return onlyOffice ? getOfficeFilters(filtersCheckbox) : getAtmsFilters(filtersCheckbox);
+};
+
+const getOfficeFilters = (filtersCheckbox: filtersCheckboxType[]) => {
+  const visibleFilters: filtersCheckboxType[] = [];
+  const preciousMetalsFilters: filtersCheckboxType[] = [];
+  const disabledServiceFilters: filtersCheckboxType[] = [];
+
+  for (const item of filtersCheckbox) {
+    if (VISIBLE_FILTERS.includes(item.key)) {
+      visibleFilters.push(item);
+    }
+    if (PRECIOUS_METALS_FILTERS.includes(item.key)) {
+      preciousMetalsFilters.push(item);
+    }
+    if (DISABLED_SERVICE_FILTERS.includes(item.key)) {
+      disabledServiceFilters.push(item);
+    }
+  }
+
+  return [visibleFilters, preciousMetalsFilters, disabledServiceFilters];
+};
+
+const getAtmsFilters = (filtersCheckbox: filtersCheckboxType[]) => [
+  filtersCheckbox.slice(0, VISIBLE_ATMS_FILTERS_NUM),
+  filtersCheckbox.slice(VISIBLE_ATMS_FILTERS_NUM),
+];
+
+const renderFoldableSubsection = (text: string, filters: filtersCheckboxType[] = []) => {
+  return (
+    <div>
+      {filters.length > 0 ? (
+        <div className="space-y-s">
+          <Text>{text}</Text>
+          <div className={COMMON_FILTERS_STYLES}>{filters}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/components/OfficesAtmsMap/OfficesAtmsMapProps.tsx

@@ -82,6 +82,12 @@ export interface Branch {
   preciousMetalsOperations?: false;
   transferringDataToBiometricSystem?: false;
   serviceDisabledPeople?: false;
+  hasAccessibilitySign?: boolean;
+  equippedWithRamp?: boolean;
+  equippedWithLift?: boolean;
+  equippedWithElevator?: boolean;
+  equippedWithStairclimber?: boolean;
+  hasHelpMeButton?: boolean;
 }
 
 export interface RemoteWorkplace extends DescriptionProps {

package/src/components/OfficesAtmsMap/filters.ts

@@ -18,6 +18,12 @@ export const INITIAL_FILTRATION_STATE = {
   bullionOperations: false,
   preciousMetalsOperations: false,
   transferringDataToBiometricSystem: false,
+  hasAccessibilitySign: false,
+  equippedWithRamp: false,
+  equippedWithLift: false,
+  equippedWithElevator: false,
+  equippedWithStairclimber: false,
+  hasHelpMeButton: false,
   ...ATMS_INITIAL_FILTRATION_STATE,
 };
 
@@ -39,6 +45,12 @@ export const FILTRATION_LABELS = {
   serviceDisabledPeople: 'Для маломобильных граждан',
   workAllTime: 'Круглосуточно',
   workingSaturday: 'Открыты по субботам',
+  hasAccessibilitySign: 'Без барьеров',
+  equippedWithRamp: 'Есть пандус',
+  equippedWithLift: 'Есть подъёмник',
+  equippedWithElevator: 'Есть лифт',
+  equippedWithStairclimber: 'Есть лестницеход',
+  hasHelpMeButton: 'Есть кнопка «HELP ME»',
 };
 
 const FILTRATION_PREDICATES_ATMS = {
@@ -71,4 +83,16 @@ export const FILTRATION_PREDICATES = {
     Boolean('preciousMetalsOperations' in item && item.preciousMetalsOperations),
   transferringDataToBiometricSystem: (item: Branch | RemoteWorkplace) =>
     Boolean('transferringDataToBiometricSystem' in item && item.transferringDataToBiometricSystem),
+  hasAccessibilitySign: (item: Branch | RemoteWorkplace) =>
+    Boolean('hasAccessibilitySign' in item && item.hasAccessibilitySign),
+  equippedWithRamp: (item: Branch | RemoteWorkplace) =>
+    Boolean('equippedWithRamp' in item && item.equippedWithRamp),
+  equippedWithLift: (item: Branch | RemoteWorkplace) =>
+    Boolean('equippedWithLift' in item && item.equippedWithLift),
+  equippedWithElevator: (item: Branch | RemoteWorkplace) =>
+    Boolean('equippedWithElevator' in item && item.equippedWithElevator),
+  equippedWithStairclimber: (item: Branch | RemoteWorkplace) =>
+    Boolean('equippedWithStairclimber' in item && item.equippedWithStairclimber),
+  hasHelpMeButton: (item: Branch | RemoteWorkplace) =>
+    Boolean('hasHelpMeButton' in item && item.hasHelpMeButton),
 };