@cloud-ru/uikit-product-price-summary 0.5.3

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

@@ -0,0 +1,20 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.accordion {
+  --space-accordion-collapse-block-secondary-horizontal-padding: 0;
+  --space-accordion-collapse-block-secondary-vertical-padding: #{styles-theme-variables.$dimension-1m};
+  --space-accordion-collapse-block-secondary-gap: #{styles-theme-variables.$dimension-1m};
+  --border-width-accordion-collapse-block-secondary: 0;
+  --accordion-header-padding-vertical: 0;
+}
+
+.accordionHeaderTitle {
+  color: styles-theme-variables.$sys-neutral-text-support;
+  padding: 2px 0;
+}
+
+.accordionContent {
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-1m;
+}

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

@@ -0,0 +1,48 @@
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+
+import { formatCurrency, formatQuantity } from '../../../../helpers';
+import { InvoiceDetails } from '../../../../types';
+import { Divider } from '../Divider';
+import { InvoiceItemBlock } from '../InvoiceItemBlock';
+import styles from './styles.module.scss';
+
+export type InvoiceDetailsBlockProps = WithLayoutType<{
+  invoice: InvoiceDetails;
+}>;
+
+export function InvoiceDetailsBlock({ invoice, layoutType }: InvoiceDetailsBlockProps) {
+  const { t } = useLocale('PriceSummary');
+
+  return (
+    <div className={styles.main}>
+      {invoice.title && (
+        <>
+          <div className={styles.header}>
+            <Typography.SansLabelM>{invoice.title}</Typography.SansLabelM>
+            {invoice.quantity && <Typography.SansLabelM>{formatQuantity(invoice.quantity)}</Typography.SansLabelM>}
+          </div>
+
+          <Divider />
+        </>
+      )}
+
+      {invoice.items.map((item, index) => (
+        <InvoiceItemBlock key={index} item={item} index={index} layoutType={layoutType} />
+      ))}
+
+      {invoice.price !== undefined && (
+        <>
+          <Divider />
+
+          <div className={styles.footer}>
+            <Typography.SansLabelM>
+              {t('price')}: {formatCurrency(invoice.price)}
+            </Typography.SansLabelM>
+          </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 '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.main {
+  border-radius: styles-theme-variables.$dimension-050m;
+  padding: styles-theme-variables.$dimension-050m styles-theme-variables.$dimension-1m;
+  border: 1px dashed styles-theme-variables.$sys-neutral-decor-default;
+}
+
+.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,62 @@
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+
+import { formatCurrency } from '../../../../helpers';
+import { InvoiceItem } from '../../../../types';
+import { DiscountPercentCell } from '../DiscountPercentCell';
+import { Divider } from '../Divider';
+import { InvoiceItemLabelCell } from '../InvoiceItemLabelCell';
+import styles from './styles.module.scss';
+
+export type InvoiceItemBlockProps = WithLayoutType<{
+  item: InvoiceItem;
+  index: number;
+}>;
+
+export function InvoiceItemBlock({ item, index, layoutType }: InvoiceItemBlockProps) {
+  const isEven = (index + 1) % 2 === 0;
+
+  const isSecondary = item.primary === undefined ? isEven : !item.primary;
+
+  const getPriceItem = () => {
+    if (item.hidePrice === false) {
+      return item.price !== undefined ? formatCurrency(item.price) : 'n/a';
+    }
+
+    return item.price !== undefined ? formatCurrency(item.price) : undefined;
+  };
+
+  return (
+    <>
+      {item.topDivider && <Divider />}
+
+      <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} layoutType={layoutType} />
+            </div>
+
+            <Typography.SansBodyS tag='div' className={styles.priceCell} data-secondary={isSecondary}>
+              {getPriceItem()}
+            </Typography.SansBodyS>
+          </>
+        )}
+
+        {item.discount && (
+          <>
+            <div className={styles.percentCell} data-secondary={isSecondary}>
+              <DiscountPercentCell discount={item.discount} layoutType={layoutType} />
+            </div>
+
+            <Typography.SansBodyS tag='div' className={styles.discountCell} data-secondary={isSecondary}>
+              {formatCurrency(-Math.abs(item.discount.value))}
+            </Typography.SansBodyS>
+          </>
+        )}
+      </div>
+
+      {item.bottomDivider && <Divider />}
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,38 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.itemGrid {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  column-gap: styles-theme-variables.$dimension-1m;
+
+  &[data-discount='true'] {
+    margin-bottom: styles-theme-variables.$dimension-050m;
+  }
+}
+
+.labelCell {
+  display: flex;
+  overflow: hidden;
+  gap: styles-theme-variables.$dimension-050m;
+}
+
+.priceCell {
+  justify-self: end;
+}
+
+.labelCell,
+.priceCell,
+.percentCell {
+  &[data-secondary='true'] {
+    color: styles-theme-variables.$sys-neutral-text-light;
+  }
+}
+
+.discountCell {
+  justify-self: end;
+  color: styles-theme-variables.$sys-red-accent-default;
+
+  &[data-secondary='true'] {
+    color: styles-theme-variables.$sys-red-text-disabled;
+  }
+}

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

@@ -0,0 +1,39 @@
+import { AdaptiveQuestionTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+
+import { formatQuantity } from '../../../../helpers';
+import { InvoiceItem } from '../../../../types';
+import styles from './styles.module.scss';
+
+export type InvoiceItemLabelCellProps = WithLayoutType<{
+  item: InvoiceItem;
+}>;
+
+export function InvoiceItemLabelCell({ item, layoutType }: InvoiceItemLabelCellProps) {
+  return (
+    'label' in item &&
+    item.label !== undefined && (
+      <>
+        <div className={styles.labelCell}>
+          <Typography.SansBodyS className={styles.label}>
+            {item.labelMaxLines ? <TruncateString text={item.label} maxLines={item.labelMaxLines} /> : item.label}
+          </Typography.SansBodyS>
+
+          {item.labelTooltip && (
+            <AdaptiveQuestionTooltip
+              layoutType={layoutType}
+              tip={item.labelTooltip}
+              trigger={layoutType === 'mobile' ? 'click' : 'hover'}
+            />
+          )}
+        </div>
+
+        {item.quantity && (
+          <Typography.SansBodyS className={styles.quantity}>{formatQuantity(item.quantity)}</Typography.SansBodyS>
+        )}
+      </>
+    )
+  );
+}

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,14 @@
+.labelCell {
+  display: flex;
+  gap: 2px;
+}
+
+.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,48 @@
+import { ButtonDropdown } from '@cloud-ru/uikit-product-button-predefined';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+
+import { usePeriodFormat } from '../../../../hooks';
+import { PricePeriod } from '../../../../types';
+import styles from './styles.module.scss';
+
+export type PeriodDropdownProps = WithLayoutType<{
+  period: PricePeriod;
+  periodOptions: PricePeriod[];
+  onPeriodChanged?: (period: PricePeriod) => void;
+}>;
+
+export function PeriodDropdown({ period, onPeriodChanged = () => {}, periodOptions, layoutType }: PeriodDropdownProps) {
+  const { t } = useLocale('PriceSummary');
+  const formatPeriod = usePeriodFormat();
+
+  const actions = periodOptions
+    .filter(item => item !== period)
+    .map(item => ({
+      content: { option: formatPeriod(item) },
+      onClick: () => onPeriodChanged(item),
+    }));
+
+  return (
+    <div className={styles.period} data-single={actions.length === 0 ? true : undefined}>
+      <Typography.SansBodyM>{t('total')}</Typography.SansBodyM>
+
+      {actions.length === 0 && (
+        <div className={styles.single}>
+          <Typography.SansBodyM>{formatPeriod(period)}</Typography.SansBodyM>
+        </div>
+      )}
+
+      {actions.length > 0 && (
+        <ButtonDropdown
+          size='s'
+          label={formatPeriod(period)}
+          items={actions}
+          closeDroplistOnItemClick
+          layoutType={layoutType}
+        />
+      )}
+    </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 '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.period {
+  display: flex;
+  align-items: center;
+  gap: styles-theme-variables.$dimension-1m;
+
+  &[data-single] {
+    gap: styles-theme-variables.$dimension-050m;
+  }
+}
+
+.single {
+  min-height: styles-theme-variables.$size-button-s;
+  display: flex;
+  align-items: center;
+  color: styles-theme-variables.$sys-neutral-text-light;
+}

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

@@ -0,0 +1,104 @@
+import { ReactNode } from 'react';
+
+import { InfoFilledSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AlarmFilledSVG, CrossFilledSVG, QuestionSVG } from '@snack-uikit/icons';
+import { Link } from '@snack-uikit/link';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { Typography } from '@snack-uikit/typography';
+import { ValueOf } from '@snack-uikit/utils';
+
+import { formatCurrency } from '../../../../helpers';
+import { TotalSumType } from '../../../../types';
+import styles from './styles.module.scss';
+
+export const APPEARANCE_STATE = {
+  Default: 'default',
+  UserError: 'userError',
+  SystemError: 'systemError',
+  Warning: 'warning',
+} as const;
+
+export type AppearanceState = ValueOf<typeof APPEARANCE_STATE>;
+
+export type TotalValueBlockProps = {
+  value?: number;
+  totalSumType?: TotalSumType;
+  hint?: string;
+  hintAppearance?: AppearanceState;
+  showHintTooltip?: boolean;
+  hintTooltipText?: ReactNode;
+  hintLink?: {
+    href?: string;
+    text: string;
+  };
+  showHintLink?: boolean;
+};
+
+function getAppearanceIcon(appearance: string) {
+  let Component: typeof InfoFilledSVG;
+
+  switch (appearance) {
+    case APPEARANCE_STATE.Warning:
+      Component = AlarmFilledSVG;
+      break;
+    case APPEARANCE_STATE.UserError:
+      Component = CrossFilledSVG;
+      break;
+    case APPEARANCE_STATE.SystemError:
+      Component = QuestionSVG;
+      break;
+    case APPEARANCE_STATE.Default:
+    default:
+      Component = InfoFilledSVG;
+      break;
+  }
+
+  return <Component size={16} data-appearance={appearance} className={styles.hintIcon} />;
+}
+
+export function TotalValueBlock({
+  value,
+  totalSumType = 'equal',
+  hint,
+  hintAppearance = APPEARANCE_STATE.Default,
+  showHintTooltip,
+  hintTooltipText,
+  hintLink,
+  showHintLink,
+}: TotalValueBlockProps) {
+  const { t } = useLocale('PriceSummary');
+
+  const totalSumPrefix = totalSumType === 'from' ? `${t('totalSumFromPrefix')} ` : '';
+
+  return (
+    <div className={styles.content} data-appearance={hintAppearance}>
+      <Typography.LightHeadlineS>
+        {value !== undefined ? `${totalSumPrefix}${formatCurrency(Number(value))}` : 'N/A'}
+      </Typography.LightHeadlineS>
+
+      <Tooltip
+        open={showHintTooltip && hintTooltipText ? undefined : false}
+        tip={hintTooltipText}
+        placement='left-start'
+      >
+        {hint && (
+          <div className={styles.hint} data-appearance={hintAppearance}>
+            {getAppearanceIcon(hintAppearance)}
+            <Typography.SansBodyS>{hint}</Typography.SansBodyS>
+          </div>
+        )}
+      </Tooltip>
+      {showHintLink && (
+        <Link
+          textMode='accent'
+          appearance='neutral'
+          size='s'
+          href={hintLink?.href}
+          text={hintLink?.text}
+          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,63 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.content {
+  display: flex;
+  flex-direction: column;
+  text-align: start;
+
+  &[data-appearance='userError'] {
+    color: styles-theme-variables.$sys-red-text-main;
+  }
+
+  &[data-appearance='warning'] {
+    color: styles-theme-variables.$sys-yellow-text-main;
+  }
+
+  &[data-appearance='systemError'] {
+    color: styles-theme-variables.$sys-neutral-text-disabled;
+  }
+}
+
+.hint {
+  display: flex;
+  align-items: center;
+  gap: styles-theme-variables.$dimension-025m;
+  color: styles-theme-variables.$sys-neutral-text-light;
+
+  &[data-appearance='userError'] {
+    color: styles-theme-variables.$sys-red-text-main;
+  }
+
+  &[data-appearance='warning'] {
+    color: styles-theme-variables.$sys-yellow-text-main;
+  }
+
+  &[data-appearance='systemError'] {
+    color: styles-theme-variables.$sys-neutral-text-disabled;
+  }
+}
+
+.hintIcon {
+  flex-shrink: 0;
+  box-sizing: content-box;
+
+  &[data-appearance='default'] {
+    color: styles-theme-variables.$sys-neutral-accent-default;
+  }
+
+  &[data-appearance='userError'] {
+    color: styles-theme-variables.$sys-red-accent-default;
+  }
+
+  &[data-appearance='warning'] {
+    color: styles-theme-variables.$sys-yellow-accent-default;
+  }
+
+  &[data-appearance='systemError'] {
+    color: styles-theme-variables.$sys-neutral-text-disabled;
+  }
+}
+
+.link {
+  margin-left: 18px;
+}

package/src/components/PriceSummary/index.ts

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

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

@@ -0,0 +1,14 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.priceSummary {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-050m;
+  padding: styles-theme-variables.$dimension-2m;
+  border-radius: styles-theme-variables.$dimension-1m;
+  background-color: styles-theme-variables.$sys-neutral-background1-level;
+  color: styles-theme-variables.$sys-neutral-text-main;
+}

package/src/components/PriceSummarySmall/PriceSummarySmall.tsx

@@ -0,0 +1,53 @@
+import cn from 'classnames';
+
+import { InfoFilledSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { ButtonFunction } from '@snack-uikit/button';
+import { LinkProps } from '@snack-uikit/link';
+import { Typography } from '@snack-uikit/typography';
+
+import { formatCurrency } from '../../helpers';
+import { ContentBlock, ContentBlockProps } from '../ContentBlock';
+import styles from './styles.module.scss';
+
+export type PriceSummarySmallProps = WithSupportProps<
+  ContentBlockProps & {
+    value: number | undefined;
+    docsLink?: {
+      href?: LinkProps['href'];
+      text?: LinkProps['text'];
+    };
+    className?: string;
+  }
+>;
+
+export function PriceSummarySmall({
+  value = 0,
+  docsLink,
+  loading,
+  dataError,
+  onRetry,
+  className,
+  ...rest
+}: PriceSummarySmallProps) {
+  const { t } = useLocale('PriceSummary');
+
+  return (
+    <div className={cn(styles.priceSummarySmall, className)} {...extractSupportProps(rest)}>
+      <Typography.SansBodyM>{t('total')}</Typography.SansBodyM>
+
+      <ContentBlock loading={loading} dataError={dataError} onRetry={onRetry}>
+        <div className={styles.value}>
+          <InfoFilledSVG size={16} className={styles.icon} />
+
+          <Typography.SansTitleM>{formatCurrency(value)}</Typography.SansTitleM>
+        </div>
+
+        {docsLink?.href && (
+          <ButtonFunction size='xs' label={docsLink.text || t('costLink')} href={docsLink.href} target='_blank' />
+        )}
+      </ContentBlock>
+    </div>
+  );
+}

package/src/components/PriceSummarySmall/index.ts

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

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

@@ -0,0 +1,25 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.priceSummarySmall {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 170px;
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-050m;
+  padding: styles-theme-variables.$dimension-2m;
+  border-radius: styles-theme-variables.$dimension-1m;
+  background-color: styles-theme-variables.$sys-neutral-background1-level;
+  color: styles-theme-variables.$sys-neutral-text-main;
+}
+
+.value {
+  display: flex;
+  align-items: center;
+  gap: styles-theme-variables.$dimension-050m;
+}
+
+.icon {
+  flex-shrink: 0;
+  color: styles-theme-variables.$sys-neutral-text-light;
+}

package/src/components/index.ts

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

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,2 @@
+export * from './usePeriodFormat';
+export * from './usePriceTotalValueFormatter';

package/src/hooks/usePeriodFormat.ts

@@ -0,0 +1,25 @@
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+
+import { PricePeriod } from '../types';
+
+export function usePeriodFormat() {
+  const { t } = useLocale('PriceSummary');
+
+  return function formatPeriod(period: PricePeriod): string {
+    switch (period) {
+      case PricePeriod.Year:
+        return t('pricePeriodYear');
+      case PricePeriod.Month:
+        return t('pricePeriodMonth');
+      case PricePeriod.Day:
+        return t('pricePeriodDay');
+      case PricePeriod.Hour:
+        return t('pricePeriodHour');
+      case PricePeriod.Minute:
+        return t('pricePeriodMinute');
+
+      default:
+        throw new Error('not reachable');
+    }
+  };
+}

package/src/hooks/usePriceTotalValueFormatter.ts

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+
+import { formatCurrency } from '../helpers';
+import { PricePeriod } from '../types';
+import { usePeriodFormat } from './usePeriodFormat';
+
+export function usePriceTotalValueFormatter() {
+  const formatPeriod = usePeriodFormat();
+
+  return useCallback(
+    (value: number | undefined, period: PricePeriod) => `${formatCurrency(value || 0)} ${formatPeriod(period)}`,
+    [formatPeriod],
+  );
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './hooks/usePriceTotalValueFormatter';
+export * from './types';