{"size": 2026, "ext": "js", "max_stars_repo_path": "src/components/basket/totals/index.js", "max_stars_repo_name": "josh-jacobson/crystallize-nextjs-boilerplate", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/basket/totals/index.js", "max_issues_repo_name": "josh-jacobson/crystallize-nextjs-boilerplate", "max_issues_repo_issues_event_min_datetime": "2021-08-13T03:06:54.000Z", "max_issues_repo_issues_event_max_datetime": "2021-08-13T03:06:54.000Z", "max_forks_repo_path": "src/components/basket/totals/index.js", "max_forks_repo_name": "josh-jacobson/crystallize-nextjs-boilerplate", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 27.3783783784, "max_line_length": 80, "alphanum_fraction": 0.4674234946}
import React from 'react';

import { useT } from 'lib/i18n';

import { useBasket } from '../context';

import { Outer, Row, StrikeThrough, Rows } from './styles';

export const Totals = () => {
  const t = useT();
  const { state } = useBasket();

  const {
    discount,
    totalPrice,
    totalPriceMinusDiscount,
    totalToPay,
    totalVatAmount,
    shipping,
    freeShipping
  } = state;

  return (
    <Outer>
      <Rows>
        <Row modifier="total-price">
          <span>{t('basket.totalPrice')}:</span>
          <span>{t('common.price', { value: totalPrice })}</span>
        </Row>
        {discount && (
          <>
            <Row modifier="discount">
              <span>{t('basket.discount')}:</span>
              <span>{t('common.price', { value: discount })}</span>
            </Row>
            <Row modifier="total-after-discount">
              <span>{t('common.totalPriceAfterDiscount')}:</span>
              <span>
                {t('common.price', { value: totalPriceMinusDiscount })}
              </span>
            </Row>
          </>
        )}
        <Row modifier="shipping">
          <span>{t('basket.shippingPrice')}:</span>
          {freeShipping ? (
            <span>
              {shipping && shipping.unit_price > 0 && (
                <StrikeThrough>
                  {t('common.price', { value: shipping.unit_price })}
                </StrikeThrough>
              )}{' '}
              {t('common.price', { value: 0 })}
            </span>
          ) : (
            <span>
              {t('common.price', { value: shipping ? shipping.unit_price : 0 })}
            </span>
          )}
        </Row>

        <Row modifier="total-vat">
          <span>{t('basket.vat')}:</span>
          <span>{t('common.price', { value: totalVatAmount })}</span>
        </Row>
        <Row modifier="to-pay">
          <span>{t('basket.totalToPay')}:</span>
          <span>{t('common.price', { value: totalToPay })}</span>
        </Row>
      </Rows>
    </Outer>
  );
};
