All files / src/components/Layout/Minicart index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
 
5x
 
 
 
 
 
 
5x
7x
7x
 
7x
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { STRAPI_URL } from '../../../configs/config';
const styles = require('./Minicart.module.css')
import { useCartContext } from '../../../contexts';
import { formatToPrice } from '../../../helpers';
import { useTranslation } from 'react-i18next';
import { ButtonClasses } from 'ag-ems-ui-library';
import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 
export const Minicart = () => {
  const { t } = useTranslation();
  const { positions, totalPrice, remove } = useCartContext();
 
  return (
    <div className={styles.Minicart}>
      {positions && positions.length ? <>
        <ul className={styles.MinicartProducts}>
          {positions.map(item => (
            <li
              key={item.id}
              className={`${styles.MinicartProduct} ${item.strapiProduct.productType === 'bicycle' ? styles.bicycle : ''}`}
            >
              <Link className={styles.MinicartProductImage} to={'/' + item.strapiProduct.slug}>
                <img
                  src={STRAPI_URL + item.strapiProduct.thumbnail.formats.thumbnail.url}
                  alt={item.strapiProduct.name}
                />
              </Link>
              <div className={styles.MinicartProductInfo}>
                <Link className={styles.MinicartProductName}
                  to={'/' + item.strapiProduct.slug}>{item.strapiProduct.name} ({item.product.sku})</Link>
                <p className={styles.MinicartProductQuantity}>{t('cart.quantity')}: {item.quantity}</p>
                <p className={styles.MinicartProductPrice}>
                  {formatToPrice(item.product.price.regularPrice.amount.value)}
                </p>
                <button type="button" className={styles.MinicartProductRemove}
                  onClick={() => remove(item.id)}>{t('remove')}</button>
              </div>
            </li>
          ))}
        </ul>
        <div className={styles.MinicartFooter}>
          <p className={styles.MinicartTotalSum}>
            <span>{t('cart.totalSum')}:</span>
            <span className={styles.value}>{formatToPrice(totalPrice)}</span>
          </p>
          <Link to={'/cart'}
            className={`${styles.MinicartButton} ${ButtonClasses.xs} ${ButtonClasses['ks-primary']} ${ButtonClasses.fullWidth}`}>
            {t('cart.toCart')}
          </Link>
        </div>
      </> : (
          <p className={styles.MinicartText}>{t('cart.emptyText')}</p>
        )}
    </div>
  );
};