@cloud-ru/uikit-product-calculator 0.33.3

package/src/components/HeaderContainer/index.tsx

@@ -0,0 +1,32 @@
+import { forwardRef, ReactNode } from 'react';
+
+import { LAYOUT_TYPE } from '@cloud-ru/uikit-product-utils';
+
+import { useCalculatorContext } from '../../contexts';
+import styles from './styles.module.scss';
+
+type HeaderContainerProps = {
+  children: ReactNode;
+  dataTestId?: string;
+};
+
+export const HeaderContainer = forwardRef<HTMLDivElement, HeaderContainerProps>(
+  ({ children, dataTestId }: HeaderContainerProps, ref) => {
+    const { layoutType } = useCalculatorContext();
+
+    const isTablet = layoutType !== LAYOUT_TYPE.Desktop && layoutType !== LAYOUT_TYPE.DesktopSmall;
+    const isMobile = layoutType === LAYOUT_TYPE.Mobile;
+
+    return (
+      <div
+        className={styles.header}
+        data-mobile={isMobile || undefined}
+        data-tablet={isTablet || undefined}
+        ref={ref}
+        data-test-id={dataTestId}
+      >
+        {children}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,24 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.header {
+  border-bottom: solid 1px stv.$sys-neutral-decor-default;
+  display: flex;
+  gap: stv.$dimension-2m;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: stv.$dimension-4m;
+  height: 104px;
+
+  &[data-tablet] {
+    flex-direction: column;
+    height: auto;
+    align-items: inherit;
+    justify-content: inherit;
+    padding: stv.$dimension-3m;
+  }
+
+  &[data-mobile] {
+    padding: stv.$dimension-2m;
+  }
+}

package/src/components/PriceSummary/PriceSummary.tsx

@@ -0,0 +1,158 @@
+import cn from 'classnames';
+import { useDeferredValue, useMemo, useRef } from 'react';
+
+import { PlusSVG } from '@cloud-ru/uikit-product-icons';
+import { LAYOUT_TYPE } from '@cloud-ru/uikit-product-utils';
+import { ButtonFilled } from '@snack-uikit/button';
+import { Scroll } from '@snack-uikit/scroll';
+import { Tag } from '@snack-uikit/tag';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+
+import { PLATFORM } from '../../constants';
+import { useCalculatorContext } from '../../contexts';
+import { useProductClick, useProductDelete } from '../../hooks';
+import { formatNumber, getPrice, parseKeyToDataTest } from '../../utils';
+import { PricePeriodSelect, ProductCard, ProductListActions } from './components';
+import { useScrollListToActiveProduct } from './hooks';
+import styles from './styles.module.scss';
+import { getTotalPrice, transformValueToProductCardData } from './utils';
+
+export enum SummaryAppearance {
+  Welcome = 'welcome',
+  Default = 'default',
+}
+
+type PriceSummaryProps = {
+  className?: string;
+  appearance?: SummaryAppearance;
+};
+
+const PlatformSale = {
+  [PLATFORM.Evolution]: 25,
+  [PLATFORM.Advanced]: 25,
+  [PLATFORM.VmWare]: 20,
+};
+
+export function PriceSummary({ className, appearance = SummaryAppearance.Default }: PriceSummaryProps) {
+  const {
+    layoutType,
+    pricePeriod,
+    setCatalogOpen,
+    calculatorType,
+    selectedProduct,
+    products,
+    config: { products: productsProp, platforms },
+    actions: { onCatalogOpen, onStartClick },
+  } = useCalculatorContext();
+  const isMobile = layoutType !== LAYOUT_TYPE.Desktop && layoutType !== LAYOUT_TYPE.DesktopSmall;
+  const isPartners = calculatorType === 'partners';
+  const TitleComponent = isMobile ? Typography.SansTitleL : Typography.SansHeadlineS;
+
+  const total = getPrice({ price: getTotalPrice(products), pricePeriod, partners: isPartners });
+  const productCards = useMemo(() => transformValueToProductCardData(productsProp, products), [products, productsProp]);
+
+  const hasPayaGo = useMemo(() => {
+    const payaProducts = Object.values(productsProp).filter(product => product.hasPayaGo);
+
+    return Object.keys(products).some(productId => payaProducts.find(product => product.id === productId));
+  }, [products, productsProp]);
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const activeRef = useRef<HTMLDivElement>(null);
+
+  useScrollListToActiveProduct({ scrollRef, activeRef });
+
+  const handleProductDelete = useProductDelete();
+  const handleProductClick = useProductClick();
+
+  const deferredTotal = useDeferredValue(total);
+
+  const handleCatalogOpen = () => {
+    onCatalogOpen?.();
+    setCatalogOpen(true);
+  };
+
+  const handleStartCatalog = () => {
+    onStartClick?.();
+    setCatalogOpen(true);
+  };
+
+  const serviceButtonProps = {
+    size: 'm',
+    icon: <PlusSVG />,
+    label: 'Добавить сервис',
+    'data-test-id': parseKeyToDataTest('price', 'summary-button'),
+  } as const;
+
+  return (
+    <div
+      className={cn(styles.priceSummary, className)}
+      data-mobile={isMobile || undefined}
+      data-test-id={parseKeyToDataTest('price', 'summary')}
+    >
+      <div className={styles.headline}>
+        <TitleComponent data-test-id={parseKeyToDataTest('price', 'summary-title')}>Расчет</TitleComponent>
+        {appearance === SummaryAppearance.Welcome && (
+          <ButtonFilled appearance='primary' onClick={handleStartCatalog} {...serviceButtonProps} />
+        )}
+        {appearance === SummaryAppearance.Default && (
+          <ButtonFilled appearance='primary' fullWidth={isMobile} onClick={handleCatalogOpen} {...serviceButtonProps} />
+        )}
+      </div>
+
+      <Scroll className={styles.scroll} ref={scrollRef} data-test-id={parseKeyToDataTest('price', 'summary-products')}>
+        <div className={styles.content}>
+          {Object.entries(productCards)
+            .filter(([, products]) => products.length > 0)
+            .map(([platformId, cards]) => (
+              <div key={platformId} className={styles.platform}>
+                <Typography.SansTitleM data-test-id={parseKeyToDataTest('price', 'summary-platform')}>
+                  Платформа {platforms.find(item => item.id === platformId)?.label}{' '}
+                  {isPartners && <Tag label={`${PlatformSale[platformId]}% скидка`} appearance='red' size='xs' />}
+                </Typography.SansTitleM>
+
+                <div className={styles.body}>
+                  {cards.map(({ id, idx, label }) => (
+                    <div
+                      key={id + idx}
+                      ref={selectedProduct?.id === id && selectedProduct?.idx === idx ? activeRef : undefined}
+                    >
+                      <ProductCard
+                        id={id}
+                        idx={idx}
+                        label={label}
+                        selectedProduct={selectedProduct}
+                        onProductClick={handleProductClick}
+                        onProductDelete={handleProductDelete}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+        </div>
+      </Scroll>
+
+      <div className={styles.footer} data-test-id={parseKeyToDataTest('price', 'summary-footer')}>
+        <div>
+          <div className={styles.caption} data-test-id={parseKeyToDataTest('price', 'summary-title')}>
+            Общая стоимость с&nbsp;НДС
+          </div>
+          <div className={styles.footerHeadline}>
+            <div className={styles.total} data-test-id={parseKeyToDataTest('price', 'summary-footer-total')}>
+              <Typography.SansHeadlineS>
+                <TruncateString text={formatNumber(deferredTotal)} maxLines={1} />
+              </Typography.SansHeadlineS>
+              <Typography.SansTitleL>₽</Typography.SansTitleL>
+            </div>
+
+            <PricePeriodSelect hasPayaGo={hasPayaGo} />
+          </div>
+        </div>
+
+        <ProductListActions disabled={appearance === SummaryAppearance.Welcome} />
+      </div>
+    </div>
+  );
+}

package/src/components/PriceSummary/components/PricePeriodSelect/PricePeriodSelect.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/uikit-product-icons';
+import { AdaptiveDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+import { useCalculatorContext } from '../../../../contexts';
+import { PRICE_PERIOD } from '../../../../types/Price';
+import { parseKeyToDataTest } from '../../../../utils';
+
+export const PRICE_NAME = {
+  [PRICE_PERIOD.Month]: 'В месяц',
+  [PRICE_PERIOD.Day]: 'В день',
+  [PRICE_PERIOD.Hour]: 'В час',
+};
+
+export const PRICE_PERIOD_ITEMS = [
+  {
+    id: PRICE_PERIOD.Month,
+    content: 'В месяц',
+  },
+  {
+    id: PRICE_PERIOD.Day,
+    content: 'В день',
+  },
+  {
+    id: PRICE_PERIOD.Hour,
+    content: 'В час',
+  },
+];
+
+export function PricePeriodSelect({ hasPayaGo }: { hasPayaGo: boolean }) {
+  const { layoutType, pricePeriod, setPricePeriod } = useCalculatorContext();
+  const ref = useRef<HTMLButtonElement>(null);
+  const dataTestAttribute = parseKeyToDataTest('price', 'summary-footer-total');
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (hasPayaGo) {
+      setPricePeriod(PRICE_PERIOD.Month);
+    }
+
+    setOpen(false);
+  }, [hasPayaGo, setPricePeriod]);
+
+  return (
+    <AdaptiveDroplist
+      layoutType={layoutType}
+      size='m'
+      selection={{
+        mode: 'single',
+        value: pricePeriod,
+        onChange: v => {
+          v && setPricePeriod(v);
+          setOpen(false);
+        },
+      }}
+      open={hasPayaGo ? false : open}
+      onOpenChange={setOpen}
+      items={PRICE_PERIOD_ITEMS}
+      triggerElemRef={ref}
+      data-test-id={dataTestAttribute}
+    >
+      <Tooltip
+        tip='Доступен период только в месяц, т.к. в расчет добавлен сервис с методом тарификации PAYA (Pay As You Allocate). Чтобы изменить период расчета, удалите PAYA-сервис из расчета'
+        open={hasPayaGo ? undefined : false}
+      >
+        <ButtonFunction
+          ref={ref}
+          onClick={hasPayaGo ? e => e.stopPropagation() : () => setOpen(v => !v)}
+          label={PRICE_NAME[pricePeriod]}
+          size='m'
+          icon={open && !hasPayaGo ? <ChevronUpSVG /> : <ChevronDownSVG />}
+          disabled={hasPayaGo}
+        />
+      </Tooltip>
+    </AdaptiveDroplist>
+  );
+}

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

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

package/src/components/PriceSummary/components/ProductCard/ProductCard.tsx

@@ -0,0 +1,85 @@
+import { useDeferredValue } from 'react';
+
+import { KebabSVG } from '@cloud-ru/uikit-product-icons';
+import { AdaptiveDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Card } from '@snack-uikit/card';
+
+import { useCalculatorContext } from '../../../../contexts';
+import { formatNumber, getPrice, getValue, parseKeyToDataTest } from '../../../../utils';
+import { PRICE_NAME } from '../PricePeriodSelect';
+import styles from './styles.module.scss';
+
+type ProductCardProps = {
+  id: string;
+  idx: number;
+  label: string;
+
+  selectedProduct: { id: string; idx: number } | null;
+
+  onProductClick(id: string, idx: number): void;
+  onProductDelete(productId: string, idx: number): void;
+};
+
+export function ProductCard({ id, idx, label, selectedProduct, onProductClick, onProductDelete }: ProductCardProps) {
+  const { layoutType, pricePeriod, calculatorType, products } = useCalculatorContext();
+  const isPartners = calculatorType === 'partners';
+  const isChecked = selectedProduct?.id === id && selectedProduct?.idx === idx;
+  const dataTestAttribute = parseKeyToDataTest('price', 'summary-product-card');
+
+  const price = useDeferredValue(getValue(products, `[${id}][${idx}].price`));
+
+  return (
+    <>
+      <Card
+        size='s'
+        onClick={() => {
+          onProductClick(id, idx);
+        }}
+        checked={isChecked}
+        outline
+        key={id + '_' + idx}
+        data-test-id={dataTestAttribute}
+      >
+        <>
+          <div className={styles.wrapper}>
+            <Card.Header
+              truncate={{
+                title: 10,
+                description: 20,
+              }}
+              title={label}
+              description={`${formatNumber(getPrice({ price, pricePeriod, partners: isPartners }))} ₽ ${PRICE_NAME[pricePeriod]}`}
+            />
+            <AdaptiveDroplist
+              layoutType={layoutType}
+              placement='bottom-end'
+              size='m'
+              closeDroplistOnItemClick
+              items={[
+                {
+                  id: 'remove',
+                  content: {
+                    option: 'Удалить',
+                  },
+                  onClick: e => {
+                    e.stopPropagation();
+                    onProductDelete(id, idx);
+                  },
+                },
+              ]}
+            >
+              <ButtonFunction
+                icon={<KebabSVG />}
+                size='m'
+                onClick={e => {
+                  e.stopPropagation();
+                }}
+              />
+            </AdaptiveDroplist>
+          </div>
+        </>
+      </Card>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,7 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: stv.$dimension-1m;
+}

package/src/components/PriceSummary/components/ProductListActions/ProductListActions.tsx

@@ -0,0 +1,118 @@
+import { MouseEventHandler, useEffect, useRef, useState } from 'react';
+
+import { CheckFilledSVG, DownloadSVG, HeadphonesSVG, LinkSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonTonal } from '@snack-uikit/button';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+import { useCalculatorContext } from '../../../../contexts';
+import { parseKeyToDataTest } from '../../../../utils';
+import styles from './styles.module.scss';
+
+type ProductListActionsProps = {
+  disabled?: boolean;
+};
+
+export function ProductListActions({ disabled }: ProductListActionsProps) {
+  const {
+    products,
+    calculatorType,
+    actions: { onShareClick, onDownloadFileClick, onRequestConsultationClick },
+  } = useCalculatorContext();
+
+  const [isChecked, setIsCheckedOpen] = useState(false);
+  const timerId = useRef<NodeJS.Timeout>();
+  const openChecked = () => setIsCheckedOpen(true);
+  const closeChecked = () => setIsCheckedOpen(false);
+
+  const handleShareClick: MouseEventHandler<HTMLButtonElement> = async event => {
+    event.stopPropagation();
+
+    onShareClick?.({
+      products,
+      calculatorType,
+    }).then(() => {
+      openChecked();
+      clearTimeout(timerId.current);
+      timerId.current = setTimeout(closeChecked, 1000);
+    });
+  };
+
+  useEffect(
+    () => () => {
+      closeChecked();
+      clearTimeout(timerId.current);
+    },
+    [],
+  );
+
+  const handleDownloadFileClick = () =>
+    onDownloadFileClick?.({
+      products,
+      calculatorType,
+    });
+
+  const handleRequestConsultationClick = () =>
+    onRequestConsultationClick?.({
+      products,
+      calculatorType,
+    });
+
+  return (
+    <div className={styles.footerLinks} data-test-id={parseKeyToDataTest('price', 'summary-footer')}>
+      {onShareClick && (
+        <Tooltip
+          tip={
+            isChecked ? (
+              <div className={styles.container}>
+                <span className={styles.icon}>
+                  <CheckFilledSVG />
+                </span>
+                Ccылка скопирована
+              </div>
+            ) : (
+              <>Поделиться ссылкой</>
+            )
+          }
+          hoverDelayOpen={600}
+          open={isChecked || undefined}
+        >
+          <ButtonTonal
+            size='m'
+            icon={<LinkSVG />}
+            appearance='neutral'
+            fullWidth
+            onClick={handleShareClick}
+            data-test-id={parseKeyToDataTest('price', 'summary-footer-copy-link')}
+            disabled={disabled}
+          />
+        </Tooltip>
+      )}
+
+      <Tooltip tip='Скачать расчет' hoverDelayOpen={600}>
+        <ButtonTonal
+          size='m'
+          icon={<DownloadSVG />}
+          appearance='neutral'
+          data-test-id={parseKeyToDataTest('price', 'summary-footer-download')}
+          fullWidth
+          onClick={handleDownloadFileClick}
+          disabled={disabled}
+        />
+      </Tooltip>
+
+      {onRequestConsultationClick && (
+        <Tooltip tip='Запросить консультацию' hoverDelayOpen={600}>
+          <ButtonTonal
+            size='m'
+            icon={<HeadphonesSVG />}
+            appearance='neutral'
+            fullWidth
+            onClick={handleRequestConsultationClick}
+            data-test-id={parseKeyToDataTest('price', 'summary-footer-consultation')}
+            disabled={disabled}
+          />
+        </Tooltip>
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,38 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-toaster-toasterUserAction';
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element';
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.footerLinks {
+  display: flex;
+
+  gap: styles-theme-variables.$dimension-1m;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: styles-theme-variables.$sys-green-accent-default;
+
+  svg {
+    width: styles-tokens-element.$icon-xs !important; /* stylelint-disable-line declaration-no-important */
+    height: styles-tokens-element.$icon-xs !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+.label {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-main;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+
+  gap: 4px;
+}

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

@@ -0,0 +1,3 @@
+export * from './PricePeriodSelect';
+export * from './ProductCard';
+export * from './ProductListActions';

package/src/components/PriceSummary/hooks.ts

@@ -0,0 +1,36 @@
+import { RefObject, useEffect } from 'react';
+
+import { useCalculatorContext } from '../../contexts';
+
+type UseScrollListToActiveProductProps = {
+  scrollRef: RefObject<HTMLDivElement>;
+  activeRef: RefObject<HTMLDivElement>;
+};
+
+export function useScrollListToActiveProduct({ scrollRef, activeRef }: UseScrollListToActiveProductProps) {
+  const { selectedProduct, products } = useCalculatorContext();
+
+  function scrollListToActiveProduct() {
+    if (!scrollRef.current) return;
+
+    const activeProduct = activeRef.current;
+    const container = scrollRef.current;
+
+    if (!activeProduct) return;
+
+    const activeProductRect = activeProduct.getBoundingClientRect();
+    const containerRefRect = container.getBoundingClientRect();
+    const currentScrollTop = container.scrollTop;
+    const scrollDistance = activeProductRect.top - containerRefRect.top + currentScrollTop - 320 / 2 + 50;
+
+    container.scroll({
+      top: scrollDistance,
+      behavior: 'smooth',
+    });
+  }
+
+  useEffect(() => {
+    scrollListToActiveProduct();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedProduct, Object.keys(products).length]);
+}

package/src/components/PriceSummary/index.ts

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