@cloud-ru/uikit-product-calculator 0.33.3

package/src/config/utils/obs.ts

@@ -0,0 +1,100 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { CONTROL, ObjectControl, SelectSingleControl, StepperControl } from '../../components';
+
+export const UnitsOfCalculationItem = {
+  Gb: 'gb',
+  Tb: 'tb',
+};
+
+export const unitsOfCalculationItems = [
+  {
+    value: UnitsOfCalculationItem.Gb,
+    label: 'ГБ',
+  },
+  {
+    value: UnitsOfCalculationItem.Tb,
+    label: 'ТБ',
+  },
+];
+
+type GetObsProps = {
+  space: Pick<
+    Partial<StepperControl>,
+    'defaultValue' | 'accessorKey' | 'uiProps' | 'watchedControls' | 'relateFn' | 'onChangeFn'
+  > & {
+    label?: string;
+  };
+  units: Pick<
+    Partial<SelectSingleControl>,
+    'accessorKey' | 'items' | 'uiProps' | 'watchedControls' | 'relateFn' | 'onChangeFn'
+  > & {
+    defaultValue?: ValueOf<typeof UnitsOfCalculationItem>;
+  };
+};
+
+export function getObs({ space, units }: GetObsProps): ObjectControl {
+  const {
+    accessorKey: spaceKey = 'obs.space',
+    label: spaceLabel = 'Объем хранилища',
+    uiProps: spaceUiProps,
+    defaultValue: spaceDefaultValue = 0,
+    ...restSpace
+  } = space;
+
+  const {
+    accessorKey: unitsKey = 'obs.unitsOfCalculation',
+    items: unitsItems = unitsOfCalculationItems,
+    uiProps: unitUiProps,
+    defaultValue: unitsDefaultValue = UnitsOfCalculationItem.Gb,
+    ...restUnits
+  } = units;
+  return {
+    type: CONTROL.Object,
+    ui: [{ controls: ['space', 'unitsOfCalculation'] }],
+    controls: {
+      space: {
+        type: CONTROL.Stepper,
+        decoratorProps: {
+          label: spaceLabel,
+        },
+        accessorKey: spaceKey,
+        defaultValue: spaceDefaultValue,
+        uiProps: {
+          min: 0,
+          max: 9_999_999_900,
+          postfix: 'ГБ',
+          showHint: false,
+          ...spaceUiProps,
+        },
+        watchedControls: { unitsOfCalculation: unitsKey },
+        relateFn: ({ unitsOfCalculation }) => {
+          if (unitsOfCalculation === UnitsOfCalculationItem.Tb) {
+            return {
+              uiProps: {
+                max: 9_765_620,
+                postfix: 'ТБ',
+              },
+            };
+          }
+        },
+        ...restSpace,
+      },
+      unitsOfCalculation: {
+        type: CONTROL.SelectSingle,
+        accessorKey: unitsKey,
+        decoratorProps: {
+          label: '',
+        },
+        defaultValue: unitsDefaultValue,
+        items: unitsItems,
+        uiProps: {
+          showClearButton: false,
+          searchable: false,
+          ...unitUiProps,
+        },
+        ...restUnits,
+      },
+    },
+  };
+}

package/src/constants.ts

@@ -0,0 +1,56 @@
+import { Price } from './types';
+
+export const PLATFORM = {
+  Advanced: 'advanced',
+  MlSpace: 'mlspace',
+  VmWare: 'vmware',
+  Evolution: 'evolution',
+  Test: 'test',
+};
+
+export const DEFAULT_PRICE: Price = {
+  priceHourNds: 0,
+  priceDayNds: 0,
+  priceMonthNds: 0,
+  pricePartnersHourNds: 0,
+  pricePartnersDayNds: 0,
+  pricePartnersMonthNds: 0,
+};
+
+export const CATEGORY = {
+  Popular: 'popular',
+  FreeTier: 'free-tier',
+  Computations: 'computations',
+  Network: 'network',
+  Containerization: 'containerization',
+  Storage: 'storage',
+  Database: 'database',
+  Development: 'development',
+  Analytic: 'analytic',
+  ML: 'ml-ai-tools',
+} as const;
+
+export const DEFAULT_CATEGORY = CATEGORY.Popular;
+
+export const CALCULATOR_DATA_TEST_ID = 'calculator';
+
+export enum WorkingHoursSpecification {
+  Hour = 'hour',
+  Day = 'day',
+  Month = 'month',
+}
+
+export const WORKING_HOURS_ITEMS = [
+  {
+    value: WorkingHoursSpecification.Month,
+    label: 'Месяц',
+  },
+  {
+    value: WorkingHoursSpecification.Day,
+    label: 'День',
+  },
+  {
+    value: WorkingHoursSpecification.Hour,
+    label: 'Час',
+  },
+];

package/src/contexts/CalculatorContext.tsx

@@ -0,0 +1,193 @@
+import { createContext, PropsWithChildren, useContext, useState } from 'react';
+
+import { LAYOUT_TYPE, LayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { CalculatorProps } from '../components';
+import { getDefaultValues } from '../components/Controls/utils';
+import { DEFAULT_CATEGORY, DEFAULT_PRICE, PLATFORM } from '../constants';
+import { CatalogConfig, FetcherFn, FormValues, PlatformType, PRICE_PERIOD, PricePeriod, ProductState } from '../types';
+import { CALCULATOR_TYPE, CalculatorType } from '../types/CalculatorType';
+
+export type SelectedProduct = { id: string; idx: number } | null;
+
+export type ProductsState = Record<string, ProductState[]>;
+
+type CalculatorContextType = {
+  selectedPlatform: PlatformType;
+  setSelectedPlatform(platform: PlatformType): void;
+
+  selectedCategory: string;
+  setSelectedCategory(category: string): void;
+
+  catalogOpen: boolean;
+  setCatalogOpen(open: boolean): void;
+
+  pricePeriod: PricePeriod;
+  setPricePeriod(period: PricePeriod): void;
+
+  selectedProduct: SelectedProduct;
+  setSelectedProduct(value: SelectedProduct): void;
+
+  layoutType: LayoutType;
+  calculatorType: CalculatorType;
+
+  config: CatalogConfig;
+
+  fetcherFn: FetcherFn;
+
+  products: ProductsState;
+  setProducts(products: FormValues): void;
+
+  actions: CalculatorProps['actions'];
+  onAnalyticsClick: NonNullable<CalculatorProps['onAnalyticsClick']>;
+};
+
+const noop = () => {};
+
+export const CalculatorContext = createContext<CalculatorContextType>({
+  selectedCategory: DEFAULT_CATEGORY,
+  setSelectedCategory: noop,
+
+  selectedPlatform: PLATFORM.Evolution,
+  setSelectedPlatform: noop,
+
+  catalogOpen: false,
+  setCatalogOpen: noop,
+
+  pricePeriod: PRICE_PERIOD.Month,
+  setPricePeriod: noop,
+
+  selectedProduct: null,
+  setSelectedProduct: noop,
+
+  calculatorType: CALCULATOR_TYPE.Main,
+  layoutType: LAYOUT_TYPE.Desktop,
+
+  config: {} as CatalogConfig,
+  fetcherFn: (async () => undefined) as unknown as FetcherFn,
+
+  products: {} as ProductsState,
+  setProducts: noop,
+
+  actions: {},
+  onAnalyticsClick: noop,
+});
+
+export const useCalculatorContext = () => useContext(CalculatorContext);
+
+type CalculatorContextProviderProps = PropsWithChildren<
+  Pick<
+    CalculatorProps,
+    | 'actions'
+    | 'calculatorType'
+    | 'fetcherFn'
+    | 'iniState'
+    | 'initialActiveProduct'
+    | 'config'
+    | 'layoutType'
+    | 'onAnalyticsClick'
+  >
+>;
+
+export function CalculatorContextProvider({
+  layoutType = LAYOUT_TYPE.Desktop,
+  calculatorType = CALCULATOR_TYPE.Main,
+
+  fetcherFn,
+
+  config,
+  iniState,
+  initialActiveProduct,
+
+  actions,
+  onAnalyticsClick,
+
+  children,
+}: CalculatorContextProviderProps) {
+  const [selectedPlatform, setSelectedPlatform] = useState<PlatformType>(() => {
+    if (initialActiveProduct) {
+      return config.products?.[initialActiveProduct].platform;
+    }
+
+    return config.platforms[0].id;
+  });
+  const [selectedCategory, setSelectedCategory] = useState<string>(config.catalog[selectedPlatform][0].id);
+  const [selectedProduct, setSelectedProduct] = useState<SelectedProduct | null>(() => {
+    if (iniState && Object.keys(iniState).length > 0) {
+      return { id: Object.keys(iniState)[0], idx: 0 };
+    }
+
+    if (initialActiveProduct) {
+      return { id: initialActiveProduct, idx: 0 };
+    }
+
+    return null;
+  });
+  const [open, setOpen] = useState<boolean>(false);
+
+  const [pricePeriod, setPricePeriod] = useState<PricePeriod>(PRICE_PERIOD.Month);
+
+  const [products, setProducts] = useState<ProductsState>(() => {
+    if (iniState && Object.keys(iniState).length > 0) {
+      return iniState;
+    }
+
+    if (initialActiveProduct) {
+      const controls = config.products[initialActiveProduct].formConfig?.controls;
+
+      if (controls) {
+        return {
+          [initialActiveProduct]: [
+            {
+              data: { ...getDefaultValues(controls ?? {}), productQuantity: 1 },
+              price: DEFAULT_PRICE,
+            },
+          ],
+        };
+      }
+    }
+
+    return {};
+  });
+
+  const onAnalyticsClickCalculator = (value: string, control: string) => {
+    if (selectedProduct && onAnalyticsClick) {
+      onAnalyticsClick(value, `${control}-${selectedProduct.id}`);
+    }
+  };
+
+  return (
+    <CalculatorContext.Provider
+      value={{
+        selectedCategory,
+        setSelectedCategory,
+
+        selectedPlatform,
+        setSelectedPlatform,
+
+        pricePeriod,
+        setPricePeriod,
+
+        selectedProduct,
+        setSelectedProduct,
+
+        catalogOpen: open,
+        setCatalogOpen: setOpen,
+
+        layoutType,
+        calculatorType,
+        config,
+
+        fetcherFn,
+
+        products,
+        setProducts,
+
+        actions,
+        onAnalyticsClick: onAnalyticsClickCalculator,
+      }}
+    >
+      {children}
+    </CalculatorContext.Provider>
+  );
+}

package/src/contexts/ProductContext.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+
+import { DEFAULT_PRICE } from '../constants';
+import { AnyType } from '../types';
+import { Price } from '../types/Price';
+
+type ProductPageContextType = {
+  value: AnyType;
+  onChange(value: AnyType): void;
+
+  price?: Price;
+  priceList?: Record<string, Price>;
+};
+
+const noop = () => {};
+
+export const ProductContext = createContext<ProductPageContextType>({
+  value: {},
+  onChange: noop,
+
+  price: DEFAULT_PRICE,
+  priceList: {},
+});
+
+export const useProductContext = () => useContext(ProductContext);

package/src/contexts/index.ts

@@ -0,0 +1,2 @@
+export * from './CalculatorContext';
+export * from './ProductContext';

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './useAdaptive';
+
+export * from './useCatalogCardClick';
+
+export * from './useProductClick';
+export * from './useProductDelete';

package/src/hooks/useAdaptive.ts

@@ -0,0 +1,20 @@
+import { LAYOUT_TYPE } from '@cloud-ru/uikit-product-utils';
+
+import { useCalculatorContext } from '../contexts';
+
+export function useAdaptive() {
+  const { layoutType } = useCalculatorContext();
+
+  const isMobile = layoutType === LAYOUT_TYPE.Mobile;
+  const isTablet = layoutType === LAYOUT_TYPE.Tablet;
+  const isDesktopSmall = layoutType === LAYOUT_TYPE.DesktopSmall;
+  const isDesktop = layoutType === LAYOUT_TYPE.Desktop;
+
+  return {
+    layoutType,
+    isMobile,
+    isTablet,
+    isDesktopSmall,
+    isDesktop,
+  };
+}

package/src/hooks/useCatalogCardClick.ts

@@ -0,0 +1,37 @@
+import { getDefaultValues } from '../components/Controls/utils';
+import { DEFAULT_CATEGORY, DEFAULT_PRICE } from '../constants';
+import { ProductsState, useCalculatorContext } from '../contexts';
+
+export function useCatalogCardClick() {
+  const {
+    setSelectedProduct,
+    config,
+    setCatalogOpen,
+    products,
+    setProducts,
+    setSelectedCategory,
+    actions: { onProductSelect },
+  } = useCalculatorContext();
+
+  return (productId: string) => {
+    onProductSelect?.(productId);
+
+    setProducts((oldValue: ProductsState) => ({
+      ...oldValue,
+      [productId]: (oldValue[productId] ?? []).concat([
+        {
+          data: { ...getDefaultValues(config.products[productId].formConfig?.controls ?? {}), productQuantity: 1 },
+          price: DEFAULT_PRICE,
+        },
+      ]),
+    }));
+
+    setSelectedProduct({
+      id: productId,
+      idx: products[productId]?.length || 0,
+    });
+
+    setSelectedCategory(DEFAULT_CATEGORY);
+    setCatalogOpen(false);
+  };
+}

package/src/hooks/useProductClick.ts

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+
+import { useCalculatorContext } from '../contexts';
+
+export function useProductClick() {
+  const { setSelectedProduct } = useCalculatorContext();
+
+  return useCallback(
+    (productId: string, idx: number) => {
+      setSelectedProduct({ id: productId, idx });
+    },
+    [setSelectedProduct],
+  );
+}

package/src/hooks/useProductDelete.ts

@@ -0,0 +1,46 @@
+import { useCalculatorContext } from '../contexts';
+import { FormValues } from '../types';
+import { filterNonEmptyArrays } from '../utils/filterNonEmptyArrays';
+
+const deleteItem = (productId: string, idx: number) => (oldValue: FormValues) => {
+  const oldArrayValue = oldValue[productId ?? 0];
+
+  if (!oldArrayValue) {
+    return oldValue;
+  }
+
+  oldArrayValue.splice(idx ?? 0, 1);
+
+  const newValue = {
+    ...oldValue,
+    [productId]: oldArrayValue,
+  };
+
+  return { ...filterNonEmptyArrays(newValue) };
+};
+
+export function useProductDelete() {
+  const {
+    setSelectedProduct,
+    selectedProduct,
+    products,
+    setProducts,
+    actions: { onProductDelete },
+  } = useCalculatorContext();
+
+  return (productId: string, idx: number) => {
+    setProducts(deleteItem(productId, idx));
+
+    onProductDelete?.(productId);
+
+    if (selectedProduct?.id === productId && selectedProduct?.idx === idx) {
+      const newProductId = Object.keys(products).find(productId => products[productId].length > 0);
+
+      if (newProductId) {
+        setSelectedProduct({ id: newProductId, idx: 0 });
+      } else {
+        setSelectedProduct(null);
+      }
+    }
+  };
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './constants';
+export * from './types';
+export * from './config';
+export * from './services';
+export * from './config';

package/src/services/constants.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_BACKEND_HOST = 'https://api.cloud.ru';
+export const DEFAULT_BASE_URL = 'https://cloud.ru';
+export const DEFAULT_HEADERS = {
+  'Content-Type': 'application/json;charset=utf-8',
+};

package/src/services/getFetcherFn.ts

@@ -0,0 +1,57 @@
+import { CALCULATOR_TYPE, FetcherFnProps } from '../types';
+import { DEFAULT_BACKEND_HOST, DEFAULT_HEADERS } from './constants';
+
+const kebabRegex = /[A-Z]+(?![a-z])|[A-Z]/g;
+
+function convertToKebab(value: string) {
+  return value.replaceAll(kebabRegex, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
+}
+
+function prepareProductType(productName: string) {
+  if (!productName) throw new Error(`no productName`);
+
+  switch (productName) {
+    case 'cloudContainerKubernetes':
+      return 'cloud-container-engine';
+    case 'ruGpt_3':
+      return 'rugpт-3'; // мб rugpt-3?
+    case 'ruDallЕ':
+      return 'rudall-е';
+
+    default:
+      return convertToKebab(productName);
+  }
+}
+
+const CALCULATOR_PRICES_URL = '/calculator/v2/prices/';
+
+type GetFetcherFnParams = {
+  headers?: HeadersInit;
+};
+
+/**
+ *
+ * Функция для отправки запросов на цены
+ * @function helper
+ */
+export function getFetcherFn(backendHost: string = DEFAULT_BACKEND_HOST, params: GetFetcherFnParams = {}) {
+  return async function fetcherFn({ formData, productId, calculatorType }: FetcherFnProps) {
+    if (!formData) return undefined;
+
+    const productTypeKebab = prepareProductType(productId);
+
+    let url = backendHost + CALCULATOR_PRICES_URL + productTypeKebab;
+    if (calculatorType === CALCULATOR_TYPE.Partners) url = url + '?calculator_type=partners';
+
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: { ...DEFAULT_HEADERS, ...params.headers },
+      body: formData,
+    });
+
+    if (!res.ok) throw new Error(`fetcher`);
+    const response = await res.json();
+    if (!response.success) throw new Error(`fetcher - success false`);
+    return response.data;
+  };
+}

package/src/services/getInitPrice.ts

@@ -0,0 +1,64 @@
+import { CALCULATOR_TYPE, FetcherFn, FormValues, Price, ProductState } from '../types';
+
+/**
+ *
+ * Функция для получения стартовой цены
+ * @function helper
+ */
+export async function getInitPrice(products: Record<string, Partial<ProductState>[] | null>, fetcherFn: FetcherFn) {
+  const productsWithData = Object.entries(products).filter(([, items]) => items && items?.length > 0) as [
+    string,
+    ProductState[],
+  ][];
+
+  const productPrices = (await Promise.all(
+    productsWithData.map(async ([id, items]) => {
+      const priceItems = await Promise.all(
+        items.map(async ({ data }) => {
+          const state: { price?: Price; priceList?: FormValues; data?: FormValues } = {};
+
+          try {
+            const res = (await fetcherFn({
+              formData: JSON.stringify(data),
+              productId: id,
+              calculatorType: CALCULATOR_TYPE.Main,
+            })) as
+              | {
+                  price: Price;
+                  priceList?: FormValues;
+                  values?: FormValues;
+                }
+              | undefined;
+
+            if (res?.price) state.price = res?.price;
+            if (res?.priceList) state.priceList = res.priceList;
+            if (res?.values) state.data = res.priceList;
+          } catch {
+            /* empty */
+          }
+
+          return state;
+        }),
+      );
+
+      return [id, priceItems];
+    }),
+  )) as [string, ProductState[]][];
+
+  return productsWithData.reduce(
+    (res, [id, items], idx) => {
+      res[id] = items.map((item, id) => {
+        const priceItem = productPrices[idx][1][id];
+
+        return {
+          ...item,
+          ...priceItem,
+          data: { ...item.data, ...priceItem.data },
+        };
+      });
+
+      return res;
+    },
+    {} as Record<string, ProductState[]>,
+  );
+}

package/src/services/getOnDownloadFileClick.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @cloud-ru/ssr-safe-react/domApi */
+import { State } from '../types';
+import { DEFAULT_BACKEND_HOST, DEFAULT_HEADERS } from './constants';
+
+const DOWNLOADED_FILENAME = 'Расчет_стоимости_CloudRu.xlsx';
+const CALCULATOR_RESULT_EXCEL_URL = '/calculator-result/v2/excel';
+
+/**
+ *
+ * Функция для выгрузки расчета по ценам
+ * @function helper
+ */
+export function getOnDownloadFileClick(backendHost: string = DEFAULT_BACKEND_HOST) {
+  return async function onDownloadFileClick(state: State) {
+    const urlBe = backendHost + CALCULATOR_RESULT_EXCEL_URL;
+
+    const res = await fetch(urlBe, {
+      method: 'POST',
+      headers: DEFAULT_HEADERS,
+      body: JSON.stringify(state),
+    });
+
+    if (!res.ok) throw new Error(`fetcher`);
+
+    const blob = await res.blob();
+
+    const a = document.createElement('a');
+    document.body.appendChild(a);
+
+    const url = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = DOWNLOADED_FILENAME;
+    a.click();
+    window.URL.revokeObjectURL(url);
+    a.remove();
+  };
+}