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

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

@@ -0,0 +1,42 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.itemGrid {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  column-gap: base.$sn-primitive-dimension-8;
+
+  &[data-discount='true'] {
+    margin-bottom: base.$sn-primitive-dimension-4;
+  }
+}
+
+.labelCell {
+  overflow: hidden;
+  display: flex;
+  gap: base.$sn-primitive-dimension-4;
+}
+
+.priceCell {
+  justify-self: end;
+
+  &[data-price-color='changed'] {
+    color: base.$sn-theme-color-green-accent;
+  }
+}
+
+.labelCell,
+.priceCell,
+.percentCell {
+  &[data-secondary='true'] {
+    color: base.$sn-theme-color-available-version-textTertiary;
+  }
+}
+
+.discountCell {
+  justify-self: end;
+  color: base.$sn-theme-color-red-accent;
+
+  &[data-secondary='true'] {
+    color: base.$sn-theme-color-available-version-textDisabled;
+  }
+}

package/src/components/PriceSummary/components/InvoiceItemLabelCell/InvoiceItemLabelCell.tsx

@@ -0,0 +1,37 @@
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+
+import { formatQuantity } from '../../../../helpers';
+import { InvoiceItem } from '../../../../types';
+import styles from './styles.module.scss';
+
+export type InvoiceItemLabelCellProps = {
+  item: InvoiceItem;
+};
+
+export function InvoiceItemLabelCell({ item }: InvoiceItemLabelCellProps) {
+  const isLabelVisible = 'label' in item && item.label !== undefined;
+
+  if (!isLabelVisible) {
+    return;
+  }
+
+  return (
+    <>
+      <div className={styles.labelCell}>
+        <Typography variant={VARIANT.body} size={SIZE.s} className={styles.label}>
+          {item.labelMaxLines ? <TruncateString text={item.label} maxLines={item.labelMaxLines} /> : item.label}
+        </Typography>
+
+        {item.labelTooltip && <QuestionTooltip tip={item.labelTooltip} />}
+      </div>
+
+      {item.quantity && (
+        <Typography variant={VARIANT.body} size={SIZE.s} className={styles.quantity}>
+          {formatQuantity(item.quantity)}
+        </Typography>
+      )}
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,16 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.labelCell {
+  display: flex;
+  gap: base.$sn-primitive-dimension-2;
+}
+
+.label {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.quantity {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}

package/src/components/PriceSummary/components/PeriodDropdown/PeriodDropdown.tsx

@@ -0,0 +1,54 @@
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { ButtonDropdown } from '@cloud-ru/ds-uikit-product-button-predefined';
+
+import { PERIOD_OPTION_TEST_IDS, TEST_IDS } from '../../../../constants';
+import { usePeriodFormat } from '../../../../hooks';
+import { priceSummaryLocale } from '../../../../locale';
+import { PricePeriod } from '../../../../types';
+import styles from './styles.module.scss';
+
+export type PeriodDropdownProps = {
+  period: PricePeriod;
+  periodOptions: PricePeriod[];
+  onPeriodChanged?(period: PricePeriod): void;
+};
+
+export function PeriodDropdown({ period, onPeriodChanged = () => {}, periodOptions }: PeriodDropdownProps) {
+  const { t } = priceSummaryLocale.useTranslations();
+  const formatPeriod = usePeriodFormat();
+
+  const actions = periodOptions
+    .filter(item => item !== period)
+    .map(item => ({
+      id: item,
+      content: { label: formatPeriod(item) },
+      onClick: () => onPeriodChanged(item),
+      'data-test-id': PERIOD_OPTION_TEST_IDS[item],
+    }));
+
+  return (
+    <div className={styles.period} data-single={actions.length === 0 ? true : undefined}>
+      <Typography variant={VARIANT.body} size={SIZE.m}>
+        {t('total')}
+      </Typography>
+
+      {actions.length === 0 && (
+        <div className={styles.single}>
+          <Typography variant={VARIANT.body} size={SIZE.m}>
+            {formatPeriod(period)}
+          </Typography>
+        </div>
+      )}
+
+      {actions.length > 0 && (
+        <ButtonDropdown
+          size='s'
+          label={formatPeriod(period)}
+          items={actions}
+          closeDroplistOnItemClick
+          data-test-id={TEST_IDS.periodDropdown}
+        />
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,18 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.period {
+  display: flex;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+
+  &[data-single] {
+    gap: base.$sn-primitive-dimension-4;
+  }
+}
+
+.single {
+  display: flex;
+  align-items: center;
+  min-height: base.$sn-primitive-dimension-32;
+  color: base.$sn-theme-color-available-version-textTertiary;
+}

package/src/components/PriceSummary/components/TotalValueBlock/TotalValueBlock.tsx

@@ -0,0 +1,82 @@
+import { Link, ROLE_APPEARANCE } from '@cloud-ru/ds-link';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { SIZE, Typography, VARIANT, WEIGHT } from '@cloud-ru/ds-typography';
+import { ReactNode } from 'react';
+
+import { APPEARANCE_STATE } from '../../../../constants';
+import { formatCurrency } from '../../../../helpers';
+import { priceSummaryLocale } from '../../../../locale';
+import { AppearanceState, PriceDeltaDetails, TotalSumType } from '../../../../types';
+import { getAppearanceIcon } from '../../../../utils';
+import styles from './styles.module.scss';
+
+export type TotalValueBlockProps = {
+  value?: number;
+  valueDelta?: PriceDeltaDetails;
+  totalSumType?: TotalSumType;
+  hint?: string;
+  hintAppearance?: AppearanceState;
+  showHintTooltip?: boolean;
+  hintTooltipText?: ReactNode;
+  hintLink?: {
+    href?: string;
+    label: string;
+  };
+  showHintLink?: boolean;
+};
+
+export function TotalValueBlock({
+  value,
+  totalSumType = 'equal',
+  hint,
+  hintAppearance = APPEARANCE_STATE.Default,
+  showHintTooltip,
+  hintTooltipText,
+  hintLink,
+  showHintLink,
+  valueDelta,
+}: TotalValueBlockProps) {
+  const { t } = priceSummaryLocale.useTranslations();
+
+  const totalSumPrefix = totalSumType === 'from' ? `${t('totalSumFromPrefix')} ` : '';
+
+  return (
+    <div className={styles.content} data-appearance={hintAppearance}>
+      <Typography variant={VARIANT.headline} size={SIZE.s} weight={WEIGHT.thin}>
+        {value !== undefined
+          ? `${totalSumPrefix}${formatCurrency(Number(value))}`
+          : (t as (key: string) => string)('notAvailable')}
+      </Typography>
+
+      {valueDelta && (
+        <Typography variant={VARIANT.body} size={SIZE.s} className={styles.valueDelta}>
+          {`${t(`${valueDelta.type}Price`)} ${formatCurrency(valueDelta.value)}`}
+        </Typography>
+      )}
+
+      <Tooltip
+        open={showHintTooltip && hintTooltipText ? undefined : false}
+        tip={hintTooltipText}
+        placement='left-start'
+      >
+        {hint && (
+          <div className={styles.hint} data-appearance={hintAppearance}>
+            {getAppearanceIcon(hintAppearance, styles.hintIcon)}
+            <Typography variant={VARIANT.body} size={SIZE.s}>
+              {hint}
+            </Typography>
+          </div>
+        )}
+      </Tooltip>
+      {showHintLink && (
+        <Link
+          roleAppearance={ROLE_APPEARANCE.OnAccent}
+          appearance='neutral'
+          href={hintLink?.href}
+          label={hintLink?.label}
+          className={styles.link}
+        />
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,54 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$text-appearance-colors: (
+  'userError': base.$sn-theme-color-red-text,
+  'warning': base.$sn-theme-color-yellow-text,
+  'systemError': base.$sn-theme-color-available-version-textDisabled,
+);
+
+$icon-appearance-colors: (
+  'default': base.$sn-theme-color-neutral-accent,
+  'userError': base.$sn-theme-color-red-accent,
+  'warning': base.$sn-theme-color-yellow-accent,
+  'systemError': base.$sn-theme-color-available-version-textDisabled,
+);
+
+.content {
+  display: flex;
+  flex-direction: column;
+  text-align: start;
+
+  @each $appearance, $color in $text-appearance-colors {
+    &[data-appearance='#{$appearance}'] {
+      color: $color;
+    }
+  }
+}
+
+.hint {
+  display: flex;
+  gap: base.$sn-primitive-dimension-2;
+  align-items: center;
+  color: base.$sn-theme-color-available-version-textTertiary;
+
+  @each $appearance, $color in $text-appearance-colors {
+    &[data-appearance='#{$appearance}'] {
+      color: $color;
+    }
+  }
+}
+
+.hintIcon {
+  flex-shrink: 0;
+  box-sizing: content-box;
+
+  @each $appearance, $color in $icon-appearance-colors {
+    &[data-appearance='#{$appearance}'] {
+      color: $color;
+    }
+  }
+}
+
+.valueDelta {
+  color: base.$sn-theme-color-available-version-textSecondary;
+}

package/src/components/PriceSummary/index.ts

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

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

@@ -0,0 +1,27 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/block.module' as block;
+@use '@cloud-ru/ds-materials' as m;
+
+.acrylic {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.priceSummary {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  color: base.$sn-theme-color-available-version-textMain;
+
+  @include base.composite-var(block.$block, 'anatomy', 'm');
+  @include m.with-material('acrylic', #{acrylic});
+}
+
+.content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-4;
+}

package/src/components/PriceSummarySmall/PriceSummarySmall.tsx

@@ -0,0 +1,89 @@
+import { Button } from '@cloud-ru/ds-button';
+import { NotifierInfoFilledSVG } from '@cloud-ru/ds-icons/interface/system';
+import { LinkProps } from '@cloud-ru/ds-link';
+import { BACKGROUND_PREDEFINED_FILL, backgroundPredefinedFillToAcrylic } from '@cloud-ru/ds-materials';
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { formatCurrency } from '../../helpers';
+import { priceSummaryLocale } from '../../locale';
+import { ContentBlock, ContentBlockProps } from '../ContentBlock';
+import styles from './styles.module.scss';
+
+export type PriceSummarySmallProps = WithSupportProps<
+  ContentBlockProps & {
+    /** Итоговая сумма. */
+    value: number | undefined;
+    /** Function-ссылка внизу блока. */
+    docsLink?: {
+      href?: LinkProps['href'];
+      label?: LinkProps['label'];
+    };
+    /** Контент подсказки для иконки рядом с итоговой суммой. */
+    hintTooltipText?: ReactNode;
+    /** Дополнительный класс корневого контейнера. */
+    className?: string;
+  }
+>;
+
+export function PriceSummarySmall({
+  value = 0,
+  docsLink,
+  hintTooltipText,
+  loading,
+  dataError,
+  onRetry,
+  className,
+  ...rest
+}: PriceSummarySmallProps) {
+  const { t } = priceSummaryLocale.useTranslations();
+  const { appearance, level } = backgroundPredefinedFillToAcrylic(BACKGROUND_PREDEFINED_FILL.NeutralBackground1Level);
+
+  return (
+    <div
+      className={cn(styles.priceSummarySmall, className)}
+      data-acrylic-appearance={appearance}
+      data-acrylic-level={level}
+      {...extractSupportProps(rest)}
+    >
+      <span className={styles.acrylic} aria-hidden data-acrylic-background />
+
+      <div className={styles.content}>
+        <Typography variant={VARIANT.body} size={SIZE.m}>
+          {t('total')}
+        </Typography>
+
+        <ContentBlock loading={loading} dataError={dataError} onRetry={onRetry}>
+          <div className={styles.value}>
+            {hintTooltipText ? (
+              <QuestionTooltip tip={hintTooltipText}>
+                <NotifierInfoFilledSVG size={16} className={styles.icon} />
+              </QuestionTooltip>
+            ) : (
+              <NotifierInfoFilledSVG size={16} className={styles.icon} />
+            )}
+
+            <Typography variant={VARIANT.title} size={SIZE.m}>
+              {formatCurrency(value)}
+            </Typography>
+          </div>
+
+          {docsLink?.href && (
+            <Button
+              as='a'
+              view='function'
+              size='m'
+              label={docsLink.label || t('costLink')}
+              href={docsLink.href}
+              target='_blank'
+              className={styles.docLink}
+            />
+          )}
+        </ContentBlock>
+      </div>
+    </div>
+  );
+}

package/src/components/PriceSummarySmall/index.ts

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

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

@@ -0,0 +1,42 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/block.module' as block;
+@use '@cloud-ru/ds-materials' as m;
+
+.acrylic {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.priceSummarySmall {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  color: base.$sn-theme-color-available-version-textMain;
+
+  @include base.composite-var(block.$block, 'anatomy', 'm');
+  @include m.with-material('acrylic', #{acrylic});
+}
+
+.content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-4;
+}
+
+.value {
+  display: flex;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+}
+
+.icon {
+  flex-shrink: 0;
+  color: base.$sn-theme-color-available-version-textTertiary;
+}
+
+.docLink {
+  align-self: flex-start;
+}

package/src/components/index.ts

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

package/src/constants.ts

@@ -0,0 +1,37 @@
+export const TEST_IDS = {
+  priceSummary: 'price-summary',
+  priceSummarySmall: 'price-summary-small',
+  periodDropdown: 'price-summary-period-dropdown',
+  periodOptionYear: 'price-summary-period-option-year',
+  periodOptionMonth: 'price-summary-period-option-month',
+  periodOptionDay: 'price-summary-period-option-day',
+  periodOptionHour: 'price-summary-period-option-hour',
+  periodOptionMinute: 'price-summary-period-option-minute',
+  contentBlockRetry: 'price-summary-content-block-retry',
+  loadingBlock: 'price-summary-loading-block',
+  orderDetails: 'price-summary-order-details',
+  orderDetailsContent: 'price-summary-order-details-content',
+} as const;
+
+export const APPEARANCE_STATE = {
+  Default: 'default',
+  UserError: 'userError',
+  SystemError: 'systemError',
+  Warning: 'warning',
+} as const;
+
+export const PRICE_PERIOD = {
+  Year: 'year',
+  Month: 'month',
+  Day: 'day',
+  Hour: 'hour',
+  Minute: 'minute',
+} as const;
+
+export const PERIOD_OPTION_TEST_IDS = {
+  [PRICE_PERIOD.Year]: TEST_IDS.periodOptionYear,
+  [PRICE_PERIOD.Month]: TEST_IDS.periodOptionMonth,
+  [PRICE_PERIOD.Day]: TEST_IDS.periodOptionDay,
+  [PRICE_PERIOD.Hour]: TEST_IDS.periodOptionHour,
+  [PRICE_PERIOD.Minute]: TEST_IDS.periodOptionMinute,
+} as const;

package/src/helpers/formatters.ts

@@ -0,0 +1,12 @@
+import { formatNumber } from '@cloud-ru/ft-formatters';
+
+export function formatCurrency(value: number) {
+  return formatNumber(value.toFixed(2), {
+    precision: 2,
+    type: formatNumber.types.Currency,
+  });
+}
+
+export function formatQuantity(value: string | number) {
+  return typeof value === 'string' ? value : `×${value}`;
+}

package/src/helpers/index.ts

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

package/src/hooks/index.ts

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

package/src/hooks/usePeriodFormat.ts

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+
+import { PRICE_PERIOD } from '../constants';
+import { priceSummaryLocale } from '../locale';
+import { PricePeriod } from '../types';
+
+type PeriodLabelKey =
+  | 'pricePeriodYear'
+  | 'pricePeriodMonth'
+  | 'pricePeriodDay'
+  | 'pricePeriodHour'
+  | 'pricePeriodMinute';
+
+const PERIOD_LABEL_KEYS: Record<PricePeriod, PeriodLabelKey> = {
+  [PRICE_PERIOD.Year]: 'pricePeriodYear',
+  [PRICE_PERIOD.Month]: 'pricePeriodMonth',
+  [PRICE_PERIOD.Day]: 'pricePeriodDay',
+  [PRICE_PERIOD.Hour]: 'pricePeriodHour',
+  [PRICE_PERIOD.Minute]: 'pricePeriodMinute',
+};
+
+export function formatPeriodLabel(t: (key: PeriodLabelKey) => string, period: PricePeriod): string {
+  return t(PERIOD_LABEL_KEYS[period]);
+}
+
+export function usePeriodFormat() {
+  const { t } = priceSummaryLocale.useTranslations();
+
+  return useCallback((period: PricePeriod) => formatPeriodLabel(t, period), [t]);
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './constants';
+export * from './hooks';
+export * from './types';
+export * from './locale';

package/src/locale/index.ts

@@ -0,0 +1,59 @@
+import { defineLocale, defineMessages } from '@cloud-ru/ds-locale';
+
+const PRICE_SUMMARY_MESSAGES = defineMessages({
+  'en-GB': {
+    total: 'Total',
+    vat: 'VAT included',
+    vatExcluded: 'VAT excluded',
+    docsLink: 'Calculation details',
+    costLink: 'Cost',
+    dataError: 'Failed to load data',
+    basePrice: 'Base price',
+    discount: 'Discount',
+    orderDetails: 'Order breakdown',
+    price: 'Cost',
+    notAvailable: 'N/A',
+    pricePeriodYear: 'per year',
+    pricePeriodMonth: 'per month',
+    pricePeriodDay: 'per day',
+    pricePeriodHour: 'per hour',
+    pricePeriodMinute: 'per minute',
+    totalSumFromPrefix: 'from',
+    increasedPrice: 'Increased by',
+    decreasedPrice: 'Decreased by',
+    coveredByGrant: 'Covered by grants',
+    notCoveredByGrant: 'Not covered by grant',
+    coveredByGrantTooltip: 'Amount is covered by grant',
+    notCoveredByGrantTooltip: 'Amount is not covered by grant',
+  },
+  'ru-RU': {
+    total: 'Итого',
+    vat: 'с НДС',
+    vatExcluded: 'без НДС',
+    docsLink: 'Подробнее о расчёте',
+    costLink: 'Стоимость',
+    dataError: 'Не удалось загрузить данные',
+    basePrice: 'Базовая цена',
+    discount: 'Скидка',
+    orderDetails: 'Детализация заказа',
+    price: 'Стоимость',
+    notAvailable: 'н/д',
+    pricePeriodYear: 'в год',
+    pricePeriodMonth: 'в месяц',
+    pricePeriodDay: 'в день',
+    pricePeriodHour: 'в час',
+    pricePeriodMinute: 'в минуту',
+    totalSumFromPrefix: 'от',
+    increasedPrice: 'Повышение на',
+    decreasedPrice: 'Снижение на',
+    coveredByGrant: 'Покрывается грантами',
+    notCoveredByGrant: 'Не покрыто грантом',
+    coveredByGrantTooltip: 'Сумма покрыта грантом',
+    notCoveredByGrantTooltip: 'Сумма не покрыта грантом',
+  },
+});
+
+export type PriceSummaryMessages = (typeof PRICE_SUMMARY_MESSAGES)['en-GB'];
+
+/** locale компонента PriceSummary: `priceSummaryLocale.useTranslations()` в коде, `priceSummaryLocale.extend(...)` в сервисе. */
+export const priceSummaryLocale = defineLocale('@cloud-ru/ds-uikit-product-price-summary', PRICE_SUMMARY_MESSAGES);