@cloud-ru/ds-uikit-product-price-summary 1.0.0

package/src/components/ContentBlock/ContentBlock.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@cloud-ru/ds-button';
+import { UpdateSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Sun } from '@cloud-ru/ds-loader';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { PropsWithChildren } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { priceSummaryLocale } from '../../locale';
+import styles from './styles.module.scss';
+
+export type ContentBlockProps = {
+  loading?: boolean;
+  dataError?: boolean;
+  onRetry?(): void;
+};
+
+export function ContentBlock({ loading, dataError, onRetry, children }: PropsWithChildren<ContentBlockProps>) {
+  const { t } = priceSummaryLocale.useTranslations();
+
+  if (loading) {
+    return (
+      <div className={styles.loadingBlock} data-test-id={TEST_IDS.loadingBlock}>
+        <Sun size='m' />
+      </div>
+    );
+  }
+
+  if (dataError) {
+    return (
+      <div className={styles.dataErrorBlock}>
+        <Button view='function' icon={<UpdateSVG />} onClick={onRetry} data-test-id={TEST_IDS.contentBlockRetry} />
+
+        <Typography variant={VARIANT.body} size={SIZE.s}>
+          {t('dataError')}
+        </Typography>
+      </div>
+    );
+  }
+
+  return children;
+}

package/src/components/ContentBlock/index.ts

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

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

@@ -0,0 +1,14 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.loadingBlock {
+  display: flex;
+  justify-content: center;
+  padding: base.$sn-primitive-dimension-4;
+}
+
+.dataErrorBlock {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: base.$sn-theme-color-available-version-textTertiary;
+}

package/src/components/PriceSummary/PriceSummary.tsx

@@ -0,0 +1,107 @@
+import { Link, LinkProps } from '@cloud-ru/ds-link';
+import { BACKGROUND_PREDEFINED_FILL, backgroundPredefinedFillToAcrylic } from '@cloud-ru/ds-materials';
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+
+import { priceSummaryLocale } from '../../locale';
+import { DiscountDetails, InvoiceDetails } from '../../types';
+import { ContentBlock, ContentBlockProps } from '../ContentBlock';
+import { DiscountBlock } from './components/DiscountBlock';
+import { HeaderBlock, HeaderBlockProps } from './components/HeaderBlock';
+import { InvoiceBlock } from './components/InvoiceBlock';
+import { TotalValueBlock, TotalValueBlockProps } from './components/TotalValueBlock';
+import styles from './styles.module.scss';
+
+export type PriceSummaryProps = WithSupportProps<
+  // Раскладку (desktop / mobile) внутренние блоки и адаптивные компоненты @ds/* читают из контекста
+  // `@cloud-ru/ds-adaptive` сами — `layoutType` в публичном API не нужен.
+  TotalValueBlockProps &
+    HeaderBlockProps &
+    ContentBlockProps & {
+      /** Блок базовой цены и скидок. */
+      discount?: DiscountDetails;
+      /** Секции детализации заказа в аккордеоне. */
+      invoice?: InvoiceDetails[];
+      /** Начальное состояние раскрытия аккордеона invoice. */
+      invoiceExpandedDefault?: boolean;
+      /** Ссылка «Подробнее о расчёте». */
+      docsLink?: {
+        href?: LinkProps['href'];
+        label?: LinkProps['label'];
+      };
+      /** Дополнительный класс корневого контейнера. */
+      className?: string;
+    }
+>;
+
+export function PriceSummary({
+  value,
+  totalSumType,
+  hint,
+  period,
+  onPeriodChanged,
+  periodOptions,
+  promoBadge,
+  loading,
+  dataError,
+  onRetry,
+  discount,
+  invoice,
+  invoiceExpandedDefault = true,
+  docsLink,
+  className,
+  hintAppearance,
+  showHintTooltip = false,
+  hintTooltipText,
+  hintLink,
+  showHintLink,
+  valueDelta,
+  vatType,
+  ...rest
+}: PriceSummaryProps) {
+  const { t } = priceSummaryLocale.useTranslations();
+  const { appearance, level } = backgroundPredefinedFillToAcrylic(BACKGROUND_PREDEFINED_FILL.NeutralBackground1Level);
+
+  return (
+    <div
+      className={cn(styles.priceSummary, className)}
+      data-acrylic-appearance={appearance}
+      data-acrylic-level={level}
+      {...extractSupportProps(rest)}
+    >
+      <span className={styles.acrylic} aria-hidden data-acrylic-background />
+
+      <div className={styles.content}>
+        <HeaderBlock
+          period={period}
+          onPeriodChanged={onPeriodChanged}
+          periodOptions={periodOptions}
+          promoBadge={promoBadge}
+          vatType={vatType}
+        />
+
+        <ContentBlock loading={loading} dataError={dataError} onRetry={onRetry}>
+          {discount && <DiscountBlock value={discount} />}
+
+          <TotalValueBlock
+            value={value}
+            totalSumType={totalSumType}
+            hint={hint}
+            hintAppearance={hintAppearance}
+            showHintTooltip={showHintTooltip}
+            hintTooltipText={hintTooltipText}
+            hintLink={hintLink}
+            showHintLink={showHintLink}
+            valueDelta={valueDelta}
+          />
+
+          {invoice && invoice.length > 0 && (
+            <InvoiceBlock invoice={invoice} invoiceExpandedDefault={invoiceExpandedDefault} />
+          )}
+
+          {docsLink?.href && <Link label={docsLink.label || t('docsLink')} href={docsLink.href} target='_blank' />}
+        </ContentBlock>
+      </div>
+    </div>
+  );
+}

package/src/components/PriceSummary/components/CoveredByGrantLabel/CoveredByGrantLabel.tsx

@@ -0,0 +1,32 @@
+import { PromoTag, ROLE_APPEARANCE } from '@cloud-ru/ds-promo-tag';
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import cn from 'classnames';
+
+import { priceSummaryLocale } from '../../../../locale';
+import styles from './styles.module.scss';
+
+export type CoveredByGrantLabelProps = {
+  covered: boolean;
+  className?: string;
+};
+
+export function CoveredByGrantLabel({ covered, className }: CoveredByGrantLabelProps) {
+  const { t } = priceSummaryLocale.useTranslations();
+
+  return (
+    <div className={cn(styles.coveredByGrant, className)}>
+      <PromoTag
+        appearance={covered ? 'green' : 'neutral'}
+        roleAppearance={ROLE_APPEARANCE.Decor}
+        label={covered ? t('coveredByGrant') : t('notCoveredByGrant')}
+      />
+      <QuestionTooltip
+        tip={covered ? t('coveredByGrantTooltip') : t('notCoveredByGrantTooltip')}
+        size='xs'
+        placement='top'
+        trigger='hover'
+        tabIndex={-1}
+      />
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,8 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.coveredByGrant {
+  display: flex;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+  height: base.$sn-primitive-dimension-32;
+}

package/src/components/PriceSummary/components/DiscountBlock/DiscountBlock.tsx

@@ -0,0 +1,42 @@
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { Fragment } from 'react';
+
+import { formatCurrency } from '../../../../helpers';
+import { priceSummaryLocale } from '../../../../locale';
+import { DiscountDetails } from '../../../../types';
+import { DiscountPercentCell } from '../DiscountPercentCell';
+import styles from './styles.module.scss';
+
+export type DiscountBlockProps = {
+  value: DiscountDetails;
+};
+
+export function DiscountBlock({ value }: DiscountBlockProps) {
+  const { t } = priceSummaryLocale.useTranslations();
+
+  return (
+    <>
+      <div className={styles.discountGrid}>
+        <Typography variant={VARIANT.body} size={SIZE.s} as='div'>
+          {t('basePrice')}
+        </Typography>
+
+        <Typography variant={VARIANT.label} size={SIZE.m} as='div' className={styles.priceCell}>
+          {formatCurrency(value.price)}
+        </Typography>
+      </div>
+
+      <div className={styles.discountGrid}>
+        {value.discounts.map((discount, index) => (
+          <Fragment key={index}>
+            <DiscountPercentCell discount={discount} />
+
+            <Typography variant={VARIANT.label} size={SIZE.m} as='div' className={styles.discountCell}>
+              {formatCurrency(-Math.abs(discount.value))}
+            </Typography>
+          </Fragment>
+        ))}
+      </div>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,17 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.discountGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: base.$sn-primitive-dimension-8;
+  color: base.$sn-theme-color-available-version-textSecondary;
+}
+
+.priceCell {
+  justify-self: end;
+}
+
+.discountCell {
+  justify-self: end;
+  color: base.$sn-theme-color-red-text;
+}

package/src/components/PriceSummary/components/DiscountPercentCell/DiscountPercentCell.tsx

@@ -0,0 +1,30 @@
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+
+import { formatNumber } from '@cloud-ru/ft-formatters';
+
+import { priceSummaryLocale } from '../../../../locale';
+import { DiscountItem } from '../../../../types';
+import styles from './styles.module.scss';
+
+export type DiscountPercentCellProps = {
+  discount: DiscountItem;
+};
+
+export function DiscountPercentCell({ discount }: DiscountPercentCellProps) {
+  const { t } = priceSummaryLocale.useTranslations();
+
+  return (
+    <div className={styles.percentCell}>
+      {discount.percent && (
+        <>
+          <Typography variant={VARIANT.body} size={SIZE.s}>
+            {t('discount')} {formatNumber(-Math.abs(discount.percent))}%
+          </Typography>
+
+          {discount.tooltip && <QuestionTooltip tip={discount.tooltip} />}
+        </>
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,7 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.percentCell {
+  display: flex;
+  gap: base.$sn-primitive-dimension-2;
+  align-items: center;
+}

package/src/components/PriceSummary/components/Divider/Divider.tsx

@@ -0,0 +1,5 @@
+import styles from './styles.module.scss';
+
+export function Divider() {
+  return <div className={styles.divider} />;
+}

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

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

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

@@ -0,0 +1,8 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.divider {
+  width: 100%;
+  height: 0;
+  margin: base.$sn-primitive-dimension-4 0;
+  border-top: base.$sn-primitive-strokeWeight-strokeRegular dashed base.$sn-theme-color-neutral-decor;
+}

package/src/components/PriceSummary/components/HeaderBlock/HeaderBlock.tsx

@@ -0,0 +1,41 @@
+import { PromoTag, PromoTagProps } from '@cloud-ru/ds-promo-tag';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+
+import { priceSummaryLocale } from '../../../../locale';
+import { PeriodDropdown, PeriodDropdownProps } from '../PeriodDropdown';
+import { VAT_TYPE } from './constants';
+import styles from './styles.module.scss';
+import { VatType } from './types';
+
+export type HeaderBlockProps = PeriodDropdownProps & {
+  vatType?: VatType;
+  promoBadge?: Pick<PromoTagProps, 'label' | 'appearance'> | string;
+};
+
+export function HeaderBlock({
+  period,
+  onPeriodChanged,
+  periodOptions,
+  promoBadge,
+  vatType = VAT_TYPE.Including,
+}: HeaderBlockProps) {
+  const { t } = priceSummaryLocale.useTranslations();
+
+  return (
+    <>
+      {promoBadge && (
+        <div className={styles.promoBadge}>
+          <PromoTag {...(typeof promoBadge === 'string' ? { label: promoBadge } : promoBadge)} />
+        </div>
+      )}
+
+      <div className={styles.headline}>
+        <PeriodDropdown period={period} onPeriodChanged={onPeriodChanged} periodOptions={periodOptions} />
+
+        <Typography variant={VARIANT.body} size={SIZE.m} className={styles.vat}>
+          {t(vatType === VAT_TYPE.Including ? 'vat' : 'vatExcluded')}
+        </Typography>
+      </div>
+    </>
+  );
+}

package/src/components/PriceSummary/components/HeaderBlock/constants.ts

@@ -0,0 +1,4 @@
+export const VAT_TYPE = {
+  Including: 'including',
+  Excluding: 'excluding',
+} as const;

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

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

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

@@ -0,0 +1,16 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.headline {
+  display: flex;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.vat {
+  color: base.$sn-theme-color-available-version-textTertiary;
+}
+
+.promoBadge {
+  display: flex;
+}

package/src/components/PriceSummary/components/HeaderBlock/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+
+import { VAT_TYPE } from './constants';
+
+export type VatType = ValueOf<typeof VAT_TYPE>;

package/src/components/PriceSummary/components/InvoiceBlock/InvoiceBlock.tsx

@@ -0,0 +1,37 @@
+import { Accordion } from '@cloud-ru/ds-accordion';
+import { useId } from 'react';
+
+import { TEST_IDS } from '../../../../constants';
+import { priceSummaryLocale } from '../../../../locale';
+import { InvoiceDetails } from '../../../../types';
+import { InvoiceDetailsBlock } from '../InvoiceDetailsBlock';
+import styles from './styles.module.scss';
+
+export type InvoiceBlockProps = {
+  invoice: InvoiceDetails[];
+  invoiceExpandedDefault?: boolean;
+};
+
+export function InvoiceBlock({ invoice, invoiceExpandedDefault }: InvoiceBlockProps) {
+  const { t } = priceSummaryLocale.useTranslations();
+
+  const invoiceBlockId = useId();
+
+  return (
+    <div className={styles.accordion}>
+      <Accordion expandedDefault={invoiceExpandedDefault ? invoiceBlockId : undefined}>
+        <Accordion.CollapseBlockTertiary
+          id={invoiceBlockId}
+          title={t('orderDetails')}
+          data-test-id={TEST_IDS.orderDetails}
+        >
+          <div className={styles.accordionContent} data-test-id={TEST_IDS.orderDetailsContent}>
+            {invoice.map((invoice, index) => (
+              <InvoiceDetailsBlock key={index} invoice={invoice} />
+            ))}
+          </div>
+        </Accordion.CollapseBlockTertiary>
+      </Accordion>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,15 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.accordion {
+  --space-accordion-collapse-block-secondary-horizontal-padding: 0;
+  --space-accordion-collapse-block-secondary-vertical-padding: #{base.$sn-primitive-dimension-8};
+  --space-accordion-collapse-block-secondary-gap: #{base.$sn-primitive-dimension-8};
+  --border-width-accordion-collapse-block-secondary: 0;
+  --accordion-header-padding-vertical: 0;
+}
+
+.accordionContent {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-8;
+}

package/src/components/PriceSummary/components/InvoiceDetailsBlock/InvoiceDetailsBlock.tsx

@@ -0,0 +1,63 @@
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+
+import { formatCurrency, formatQuantity } from '../../../../helpers';
+import { priceSummaryLocale } from '../../../../locale';
+import { InvoiceDetails } from '../../../../types';
+import { CoveredByGrantLabel } from '../CoveredByGrantLabel';
+import { Divider } from '../Divider';
+import { InvoiceItemBlock } from '../InvoiceItemBlock';
+import styles from './styles.module.scss';
+
+export type InvoiceDetailsBlockProps = {
+  invoice: InvoiceDetails;
+};
+
+export function InvoiceDetailsBlock({ invoice }: InvoiceDetailsBlockProps) {
+  const { t } = priceSummaryLocale.useTranslations();
+
+  const primaryItems = invoice.items.filter(item => item.primary);
+  const firstValue = primaryItems[0]?.coveredByGrant;
+  const allSameValue = primaryItems.length > 0 && primaryItems.every(item => item.coveredByGrant === firstValue);
+
+  const showBlockLabel = allSameValue && firstValue !== undefined;
+  const showItemLabels = !showBlockLabel;
+
+  return (
+    <div className={styles.main}>
+      {showBlockLabel && <CoveredByGrantLabel covered={firstValue} />}
+
+      {invoice.title && (
+        <>
+          <div className={styles.header}>
+            <Typography variant={VARIANT.label} size={SIZE.m}>
+              {invoice.title}
+            </Typography>
+            {invoice.quantity && (
+              <Typography variant={VARIANT.label} size={SIZE.m}>
+                {formatQuantity(invoice.quantity)}
+              </Typography>
+            )}
+          </div>
+
+          <Divider />
+        </>
+      )}
+
+      {invoice.items.map((item, index) => (
+        <InvoiceItemBlock key={index} item={item} index={index} showCoveredByGrantLabel={showItemLabels} />
+      ))}
+
+      {invoice.price !== undefined && (
+        <>
+          <Divider />
+
+          <div className={styles.footer}>
+            <Typography variant={VARIANT.label} size={SIZE.m}>
+              {t('price')}: {formatCurrency(invoice.price)}
+            </Typography>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,18 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.main {
+  padding: base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-8;
+  border: base.$sn-primitive-strokeWeight-strokeRegular dashed base.$sn-theme-color-neutral-decor;
+  border-radius: base.$sn-brand-anatomy-radius-block-m;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

package/src/components/PriceSummary/components/InvoiceItemBlock/InvoiceItemBlock.tsx

@@ -0,0 +1,82 @@
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+
+import { formatCurrency } from '../../../../helpers';
+import { priceSummaryLocale } from '../../../../locale';
+import { InvoiceItem } from '../../../../types';
+import { CoveredByGrantLabel } from '../CoveredByGrantLabel';
+import { DiscountPercentCell } from '../DiscountPercentCell';
+import { Divider } from '../Divider';
+import { InvoiceItemLabelCell } from '../InvoiceItemLabelCell';
+import styles from './styles.module.scss';
+
+export type InvoiceItemBlockProps = {
+  item: InvoiceItem;
+  index: number;
+  showCoveredByGrantLabel?: boolean;
+};
+
+export function InvoiceItemBlock({ item, index, showCoveredByGrantLabel }: InvoiceItemBlockProps) {
+  const { t } = priceSummaryLocale.useTranslations();
+  const isEven = (index + 1) % 2 === 0;
+
+  const isSecondary = item.primary === undefined ? isEven : !item.primary;
+
+  const getPriceItem = () => {
+    if (item.hidePrice) {
+      return undefined;
+    }
+
+    return item.price !== undefined ? formatCurrency(item.price) : (t as (key: string) => string)('notAvailable');
+  };
+
+  return (
+    <>
+      {item.topDivider && <Divider />}
+
+      {item.coveredByGrant !== undefined && showCoveredByGrantLabel && (
+        <CoveredByGrantLabel covered={item.coveredByGrant} />
+      )}
+
+      <div className={styles.itemGrid} data-discount={Boolean(item.discount)}>
+        {'label' in item && item.label !== undefined && (
+          <>
+            <div className={styles.labelCell} data-secondary={isSecondary}>
+              <InvoiceItemLabelCell item={item} />
+            </div>
+
+            <Typography
+              variant={VARIANT.body}
+              size={SIZE.s}
+              as='div'
+              className={styles.priceCell}
+              data-secondary={isSecondary}
+              data-price-color={item.priceColor ?? 'default'}
+            >
+              {getPriceItem()}
+            </Typography>
+          </>
+        )}
+
+        {item.discount && (
+          <>
+            <div className={styles.percentCell} data-secondary={isSecondary}>
+              <DiscountPercentCell discount={item.discount} />
+            </div>
+
+            <Typography
+              variant={VARIANT.body}
+              size={SIZE.s}
+              as='div'
+              className={styles.discountCell}
+              data-secondary={isSecondary}
+            >
+              {formatCurrency(-Math.abs(item.discount.value))}
+            </Typography>
+          </>
+        )}
+      </div>
+
+      {item.bottomDivider && <Divider />}
+    </>
+  );
+}

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

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