@cloud-ru/uikit-product-calculator 0.33.3

package/src/components/PriceSummary/styles.module.scss

@@ -0,0 +1,110 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.scroll {
+  min-height: 320px;
+  height: 100%;
+  padding: stv.$dimension-3m;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: stv.$dimension-1m;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: stv.$dimension-3m;
+}
+
+.headline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: stv.$dimension-2m;
+  padding: 0 stv.$dimension-4m;
+  height: 104px;
+  box-sizing: border-box;
+  border-bottom: solid 1px stv.$sys-neutral-decor-default;
+
+  &[data-mobile] {
+    height: 76px;
+    padding: 0 stv.$dimension-3m;
+
+    @media (max-width: 440px) {
+      height: 60px;
+      padding: 0 stv.$dimension-2m;
+    }
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: stv.$dimension-2m;
+  padding: stv.$dimension-3m;
+  box-sizing: border-box;
+  border-top: solid 1px stv.$sys-neutral-decor-default;
+}
+
+.caption {
+  @include stv.composite-var(stv.$sans-body-s);
+
+  color: stv.$sys-neutral-text-light;
+}
+
+.priceSummary {
+  background-color: stv.$sys-neutral-background1-level;
+
+  display: flex;
+
+  flex-direction: column;
+
+  flex-shrink: 0;
+
+  &[data-mobile] {
+    .headline {
+      flex-direction: column;
+
+      height: auto;
+
+      align-items: inherit;
+      justify-content: inherit;
+    }
+
+    .headline,
+    .scroll,
+    .footer {
+      padding: stv.$dimension-2m;
+    }
+  }
+}
+
+.total {
+  color: stv.$sys-neutral-text-main;
+
+  display: flex;
+  gap: stv.$dimension-1m;
+
+  justify-content: flex-start;
+  align-items: center;
+
+  overflow: hidden;
+
+  * > {
+    min-width: 0;
+  }
+}
+
+.platform {
+  display: flex;
+  flex-direction: column;
+  gap: stv.$dimension-1m;
+}
+
+.footerHeadline {
+  display: flex;
+  gap: stv.$dimension-1m;
+  align-items: center;
+}

package/src/components/PriceSummary/utils/getTotalPrice.ts

@@ -0,0 +1,19 @@
+import { DEFAULT_PRICE } from '../../../constants';
+import { Price } from '../../../types';
+
+export function getTotalPrice(price: Record<string, { price: Price }[]>) {
+  const total = { ...DEFAULT_PRICE };
+
+  Object.values(price).forEach((productPriceArr: { price: Price }[]) => {
+    productPriceArr.forEach(({ price: priceElem = {} as Price }) => {
+      total.priceMonthNds = total.priceMonthNds + priceElem.priceMonthNds;
+      total.priceDayNds = total.priceDayNds + priceElem.priceDayNds;
+      total.priceHourNds = total.priceHourNds + priceElem.priceHourNds;
+      total.pricePartnersDayNds = total.pricePartnersDayNds + priceElem.pricePartnersDayNds;
+      total.pricePartnersHourNds = total.pricePartnersHourNds + priceElem.pricePartnersHourNds;
+      total.pricePartnersMonthNds = total.pricePartnersMonthNds + priceElem.pricePartnersMonthNds;
+    });
+  });
+
+  return total;
+}

package/src/components/PriceSummary/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './getTotalPrice';
+export * from './transformToProductCardData';

package/src/components/PriceSummary/utils/transformToProductCardData.ts

@@ -0,0 +1,36 @@
+import { PLATFORM } from '../../../constants';
+import { ProductsState } from '../../../contexts';
+import { FormValues, PlatformType, Product as ProductConfig, ProductState } from '../../../types';
+
+export type ProductCardType = {
+  label: string;
+  productQuantity: number;
+  id: string;
+  idx: number;
+  formData: FormValues;
+};
+
+export function transformValueToProductCardData(products: Record<string, ProductConfig>, value: ProductsState) {
+  return Object.keys(value).reduce(
+    (res, productId) => {
+      const cards: ProductCardType[] = value[productId].map(({ data }: ProductState, idx: number) => ({
+        idx,
+        id: productId,
+        label: products[productId].label + (value[productId].length > 1 ? ` ${idx + 1}` : ''),
+        productQuantity: data?.productQuantity,
+        formData: data,
+      }));
+
+      res[products[productId].platform] = res[products[productId].platform].concat(cards);
+
+      return res;
+    },
+    {
+      [PLATFORM.Evolution]: [],
+      [PLATFORM.Advanced]: [],
+      [PLATFORM.VmWare]: [],
+      [PLATFORM.MlSpace]: [],
+      [PLATFORM.Test]: [],
+    } as Record<PlatformType, ProductCardType[]>,
+  );
+}

package/src/components/ProductHeadline/ProductPageHeadline.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useRef } from 'react';
+
+import { LAYOUT_TYPE } from '@cloud-ru/uikit-product-utils';
+import { ButtonTonal } from '@snack-uikit/button';
+import { FieldStepper } from '@snack-uikit/fields';
+import { IconPredefined } from '@snack-uikit/icon-predefined';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+
+import { useCalculatorContext, useProductContext } from '../../contexts';
+import { AnyType, CALCULATOR_TYPE, Product } from '../../types';
+import { getValue, parseKeyToDataTest, setValue } from '../../utils';
+import { HeaderContainer } from '../HeaderContainer';
+import { PriceCount } from './components';
+import styles from './styles.module.scss';
+
+type ProductPageHeadlineProps = {
+  product: Product;
+};
+
+export function ProductPageHeadline({ product }: ProductPageHeadlineProps) {
+  const { icon, label, enableChangeProductQuantity, productQuantityValues, freeTier, disabledProductQuantity } =
+    product;
+  const { min: minProductQuantity = 1, max: maxProductQuantity = 99 } = productQuantityValues ?? {};
+
+  const { value: valueProp, onChange: onChangeProp, price } = useProductContext();
+
+  const value = getValue(valueProp, 'productQuantity');
+
+  const {
+    layoutType,
+    pricePeriod,
+    calculatorType,
+    actions: { onConnectClick },
+    onAnalyticsClick,
+    selectedProduct,
+  } = useCalculatorContext();
+
+  const onChange = (newValue: AnyType) => {
+    setValue(valueProp, 'productQuantity', newValue);
+    onAnalyticsClick(String(newValue), `productQuantity`);
+    onChangeProp(valueProp);
+  };
+
+  const isPartners = calculatorType === CALCULATOR_TYPE.Partners;
+  const isProductType = calculatorType === CALCULATOR_TYPE.Product;
+  const isMobile = layoutType !== LAYOUT_TYPE.Desktop && layoutType !== LAYOUT_TYPE.DesktopSmall;
+  const hasCounter = enableChangeProductQuantity || freeTier;
+  const TitleComponent = isMobile ? Typography.SansTitleM : Typography.SansTitleL;
+  const headerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (headerRef.current && isMobile && !isProductType) {
+      headerRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [selectedProduct, isMobile, isProductType]);
+
+  function ConnectButton() {
+    const dataTestAttribute = parseKeyToDataTest('product', 'connect-button');
+
+    return !isPartners && product.enableConnectToConsole ? (
+      <Tooltip
+        hoverDelayOpen={600}
+        tip='Вы будете перенаправлены в личный кабинет для подключения выбранной конфигурации'
+      >
+        <ButtonTonal
+          fullWidth={isMobile}
+          label='Подключить'
+          size='m'
+          onClick={() => onConnectClick?.(product.id, valueProp)}
+          data-test-id={dataTestAttribute}
+        />
+      </Tooltip>
+    ) : null;
+  }
+
+  return (
+    <HeaderContainer ref={headerRef}>
+      <div className={styles.left}>
+        <IconPredefined
+          icon={icon}
+          size={isMobile ? 's' : 'm'}
+          decor={false}
+          appearance='primary'
+          data-test-id={parseKeyToDataTest('product', 'icon')}
+        />
+
+        <TitleComponent>
+          <TruncateString
+            data-test-id={parseKeyToDataTest('product', 'title')}
+            variant='end'
+            text={label}
+            maxLines={2}
+          />
+        </TitleComponent>
+      </div>
+
+      <div className={styles.right} data-mobile={isMobile || undefined}>
+        <PriceCount
+          price={price}
+          pricePeriod={pricePeriod}
+          freeTier={freeTier}
+          mobile={isMobile}
+          partners={isPartners}
+          hasCounter={hasCounter}
+        />
+
+        {hasCounter && (
+          <div
+            className={styles.counter}
+            data-mobile={isMobile || undefined}
+            data-test-id={parseKeyToDataTest('product', 'counter')}
+          >
+            <FieldStepper
+              size='m'
+              step={1}
+              min={minProductQuantity}
+              max={maxProductQuantity}
+              value={value}
+              onChange={onChange}
+              disabled={freeTier || disabledProductQuantity}
+              allowMoreThanLimits={false}
+            />
+          </div>
+        )}
+
+        {!isMobile && <ConnectButton />}
+      </div>
+
+      {isMobile && <ConnectButton />}
+    </HeaderContainer>
+  );
+}

package/src/components/ProductHeadline/components/PriceCount.tsx

@@ -0,0 +1,93 @@
+import { Divider } from '@snack-uikit/divider';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+
+import { Price, PRICE_PERIOD, PricePeriod } from '../../../types';
+import { formatNumber, getPrice, parseKeyToDataTest } from '../../../utils';
+import styles from './styles.module.scss';
+
+const PRICE_NAME: Record<PricePeriod, string> = {
+  [PRICE_PERIOD.Month]: 'В месяц',
+  [PRICE_PERIOD.Day]: 'В день',
+  [PRICE_PERIOD.Hour]: 'В час',
+};
+
+type PriceCountProps = {
+  price?: Price;
+  pricePeriod: PricePeriod;
+  partners?: boolean;
+  freeTier?: boolean;
+  mobile?: boolean;
+  hasCounter?: boolean;
+};
+
+export function BasePriceCount({ price, pricePeriod, freeTier, mobile }: PriceCountProps) {
+  const total = getPrice({ price, pricePeriod });
+  const dataTestAttribute = parseKeyToDataTest('product', 'price');
+
+  if (freeTier && !total)
+    return (
+      <div className={styles.price} data-mobile={mobile || undefined}>
+        Бесплатно
+        <br />
+        навсегда
+      </div>
+    );
+
+  return (
+    <div className={styles.price} data-mobile={mobile || undefined} data-test-id={dataTestAttribute}>
+      <div className={styles.total}>
+        <Typography.SansTitleM>
+          <TruncateString text={formatNumber(total)} maxLines={1} />
+        </Typography.SansTitleM>
+        <Typography.SansBodyL>₽</Typography.SansBodyL>
+      </div>
+      <div className={styles.caption}>{`${PRICE_NAME[pricePeriod]} c НДС`}</div>
+    </div>
+  );
+}
+
+export function PartnersPriceCount({ price, pricePeriod, mobile, hasCounter }: PriceCountProps) {
+  const total = getPrice({ price, pricePeriod });
+  const partnersTotal = getPrice({ price, pricePeriod, partners: true });
+  const mobileWithCounter = mobile && hasCounter;
+
+  const dataTestAttribute = parseKeyToDataTest('product', 'price-partners');
+  const partnersSale = `-${100 - Math.trunc((partnersTotal / total) * 100 + 0.1)}%`;
+
+  return (
+    <div
+      className={styles.partnersWrapper}
+      data-mobile-with-counter={mobileWithCounter || undefined}
+      data-test-id={dataTestAttribute}
+    >
+      <div className={styles.price} data-mobile={mobile || undefined}>
+        <div className={styles.caption}>Рыночная цена</div>
+        <div className={styles.total}>
+          <Typography.SansTitleM>
+            <TruncateString text={formatNumber(total)} maxLines={1} />
+          </Typography.SansTitleM>
+          <Typography.SansBodyL>₽</Typography.SansBodyL>
+        </div>
+      </div>
+
+      <Divider orientation={mobileWithCounter ? 'horizontal' : 'vertical'} className={styles.divider} />
+
+      <div className={styles.price} data-mobile={mobile || undefined}>
+        <div className={styles.caption}>
+          Партнерская цена {total > 0 && <span className={styles.sale}>{partnersSale}</span>}
+        </div>
+        <div className={styles.total}>
+          <Typography.SansTitleM>
+            <TruncateString text={formatNumber(partnersTotal)} maxLines={1} />
+          </Typography.SansTitleM>
+          <Typography.SansBodyL>₽</Typography.SansBodyL>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function PriceCount({ partners, ...props }: PriceCountProps) {
+  return partners ? <PartnersPriceCount {...props} /> : <BasePriceCount {...props} />;
+}

package/src/components/ProductHeadline/components/index.ts

@@ -0,0 +1 @@
+export * from './PriceCount';

package/src/components/ProductHeadline/components/styles.module.scss

@@ -0,0 +1,52 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.price {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  text-align: end;
+  width: 160px;
+
+  .total {
+    color: stv.$sys-neutral-text-main;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    display: flex;
+    gap: stv.$dimension-050m;
+
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .caption {
+    @include stv.composite-var(stv.$sans-body-s);
+    color: stv.$sys-neutral-text-support;
+  }
+
+  &[data-mobile],
+  &[data-mobile] > .total {
+    justify-content: flex-start;
+    text-align: left;
+  }
+}
+
+.sale {
+  color: stv.$sys-red-text-support;
+}
+
+.partnersWrapper {
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  box-sizing: border-box;
+
+  gap: stv.$dimension-1m;
+
+  &[data-mobile-with-counter] {
+    flex: 1;
+    grid-template-columns: 1fr;
+    padding-right: stv.$dimension-1m;
+    border-right: solid 1px stv.$sys-neutral-decor-default;
+  }
+}

package/src/components/ProductHeadline/index.ts

@@ -0,0 +1 @@
+export * from './ProductPageHeadline';

package/src/components/ProductHeadline/styles.module.scss

@@ -0,0 +1,32 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.left,
+.right {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.left {
+  gap: stv.$dimension-1m;
+}
+
+.right {
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: stv.$dimension-2m;
+
+  &[data-mobile] {
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+}
+
+.counter {
+  max-width: 140px;
+  min-width: 100px;
+
+  &[data-mobile] {
+    width: 100px;
+  }
+}

package/src/components/ProductPage/ProductPage.tsx

@@ -0,0 +1,105 @@
+import deepmerge from 'deepmerge';
+import { useDeferredValue, useEffect } from 'react';
+import useSWR from 'swr';
+
+import { useValueControl } from '@snack-uikit/utils';
+
+import { ProductContext, ProductsState, useCalculatorContext } from '../../contexts';
+import { useAdaptive } from '../../hooks';
+import { AnyType } from '../../types';
+import { getValue, parseKeyToDataTest, setValue } from '../../utils';
+import { CONTROL } from '../Controls';
+import { Control } from '../Controls/Control';
+import { ProductPageHeadline } from '../ProductHeadline';
+import styles from './styles.module.scss';
+
+type ProductPageProps = {
+  selectedProduct: { id: string; idx: number };
+
+  className?: string;
+};
+
+export function ProductPage({ className, selectedProduct }: ProductPageProps) {
+  const { calculatorType, config, products, setProducts, fetcherFn } = useCalculatorContext();
+
+  const { isMobile } = useAdaptive();
+
+  const baseAccessorKey = `${selectedProduct.id}[${selectedProduct.idx}]`;
+
+  const accessorKey = {
+    data: `${baseAccessorKey}.data`,
+    price: `${baseAccessorKey}.price`,
+    priceList: `${baseAccessorKey}.priceList`,
+  };
+
+  const [formData, setFormData] = useValueControl({
+    value: getValue(products, accessorKey.data),
+    onChange: newFormData => {
+      setProducts((value: AnyType) => {
+        setValue(value, accessorKey.data, newFormData);
+
+        return value;
+      });
+    },
+  });
+
+  const deferredFormData = useDeferredValue(JSON.stringify(formData));
+  const deferredSelectedProductId = useDeferredValue(selectedProduct.id);
+
+  const { data } = useSWR(
+    {
+      productId: deferredSelectedProductId,
+      formData: deferredFormData,
+      calculatorType: calculatorType,
+    },
+    fetcherFn,
+  );
+
+  useEffect(() => {
+    if (data) {
+      setProducts((oldValue: ProductsState) => {
+        data?.price && setValue(oldValue, accessorKey.price, data.price);
+
+        if (data?.values) {
+          const oldProductData = getValue(oldValue, accessorKey.data);
+
+          setValue(oldValue, accessorKey.data, deepmerge(oldProductData, data.values));
+        }
+
+        data?.priceList && setValue(oldValue, accessorKey.priceList, data.priceList);
+
+        return { ...oldValue };
+      });
+    }
+  }, [data, setProducts, accessorKey.price, accessorKey.priceList, accessorKey.data]);
+
+  const deferredPrice = useDeferredValue(getValue(products, accessorKey.price));
+  const deferredPriceList = useDeferredValue(getValue(products, accessorKey.priceList));
+  const dataTestAttribute = parseKeyToDataTest('configurator');
+
+  return (
+    <ProductContext.Provider
+      value={{
+        value: { ...getValue(products, accessorKey.data) },
+        onChange: setFormData,
+
+        price: deferredPrice,
+        priceList: deferredPriceList,
+      }}
+    >
+      <div className={className} data-test-id={dataTestAttribute}>
+        <ProductPageHeadline product={config.products[selectedProduct.id]} />
+
+        <div className={styles.content} data-mobile={isMobile || undefined}>
+          <Control
+            formControl={{
+              type: CONTROL.Object,
+              ui: config.products[selectedProduct.id].formConfig?.ui ?? [],
+              controls: config.products[selectedProduct.id].formConfig?.controls ?? {},
+            }}
+          />
+        </div>
+      </div>
+    </ProductContext.Provider>
+  );
+}

package/src/components/ProductPage/index.ts

@@ -0,0 +1 @@
+export * from './ProductPage';

package/src/components/ProductPage/styles.module.scss

@@ -0,0 +1,13 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.content {
+  padding: stv.$dimension-3m;
+  display: flex;
+  gap: stv.$dimension-3m;
+  flex-direction: column;
+
+  &[data-mobile] {
+    padding: stv.$dimension-2m;
+    gap: stv.$dimension-2m;
+  }
+}