Commit 6126adb4 authored by AlexandrValgamov's avatar AlexandrValgamov
Browse files

Catalog | feat: add cart

parent 53ba7bb8

src/components/cart/cart.tsx

0 → 100644
+92 −0
Original line number Diff line number Diff line 
'use client';



import React, { FC, useState } from 'react';

import { AnimatePresence } from 'framer-motion';



import { Stylebook } from '@/interfaces';

import { useAppSelector } from '@/hooks';

import { LayoutModal, Portal } from '@/shared';

import { basketSelector } from '@/store';



import * as Styled from './styled';

import {

  CartHeader,

  CartForm,

  PaymentCheckModal,

  PaymentErrorModal,

  PaymentSuccessModal,

} from './ui';



interface ICartProps {

  handleCloseCart: () => void;

  shop: string;

  stylebook: Stylebook | null;

}

export const Cart: FC<ICartProps> = ({ handleCloseCart, shop, stylebook }) => {

  const basket = useAppSelector(basketSelector);

  const [isModalCheck, setIsModalCheck] = useState(false);

  const [isModalError, setIsModalError] = useState(false);

  const [isModalSuccess, setIsModalSuccess] = useState(false);



  const handleOpenModal = (status: string) => {

    if (status === 'success') setIsModalSuccess(true);

    if (status === 'check') setIsModalCheck(true);

    if (status === 'error') setIsModalError(true);

  };

  const handleCloseModal = () => {

    setIsModalCheck(false);

    setIsModalSuccess(false);

    setIsModalError(false);

  };



  return (

    <Styled.Cart

      onClick={(e) => {

        e.stopPropagation();

      }}

    >

      <Styled.TopPattern />

      <Styled.Wrapper>

        <CartHeader

          colorItem={stylebook?.secondColor}

          handleCloseCart={handleCloseCart}

          price={basket[shop]?.totalPrice || 0}

        />

        <CartForm

          handleCloseCart={handleCloseCart}

          handleCloseModal={handleCloseModal}

          handleOpenModal={handleOpenModal}

          shop={shop}

          stylebook={stylebook || null}

        />

      </Styled.Wrapper>

      <AnimatePresence>

        {isModalCheck && (

          <Portal selector="#modals">

            <LayoutModal>

              <PaymentCheckModal handleClose={handleCloseModal} />

            </LayoutModal>

          </Portal>

        )}

      </AnimatePresence>

      <AnimatePresence>

        {isModalError && (

          <Portal selector="#modals">

            <LayoutModal>

              <PaymentErrorModal handleClose={handleCloseModal} />

            </LayoutModal>

          </Portal>

        )}

      </AnimatePresence>

      <AnimatePresence>

        {isModalSuccess && (

          <Portal selector="#modals">

            <LayoutModal>

              <PaymentSuccessModal handleClose={handleCloseModal} shop={shop} />

            </LayoutModal>

          </Portal>

        )}

      </AnimatePresence>

    </Styled.Cart>

  );

};

src/components/cart/index.ts

0 → 100644
+2 −0
Original line number Diff line number Diff line 
export * from './cart';

export * from './ui';

src/components/cart/styled.tsx

0 → 100644
+43 −0
Original line number Diff line number Diff line 
import styled from 'styled-components';



import { devices } from '@/styles';



export const Cart = styled.div`

  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  flex-direction: column;

  justify-content: end;



  @media ${devices.tablet} {

    inset: auto;

    right: 0;

    bottom: 0;

    width: 50vw;

    height: 90vh;

    max-height: 800px;

  }



  @media ${devices.mobile} {

    right: 0;

    bottom: 0;

    left: 0;

    width: auto;

  }

`;



export const TopPattern = styled.div`

  width: 100%;

  height: 16px;

  background-color: var(--white);

  mask: url('/patterns/modal-waves.png');

`;



export const Wrapper = styled.div`

  display: flex;

  flex-direction: column;

  min-height: 90%;

  padding-bottom: 24px;

  background-color: var(--white);

`;

src/components/cart/ui/cart-add-button/cart-add-button.tsx

0 → 100644
+31 −0
Original line number Diff line number Diff line 
'use client';



import { FC } from 'react';



import { Icon } from '@/shared';



import * as Styled from './styled';



interface AddButtonProps {

  onIncrease: () => void;

  onDecrease: () => void;

  value: number;

  colorItem?: string;

}



export const AddButton: FC<AddButtonProps> = ({

  value,

  onIncrease,

  onDecrease,

  colorItem,

}) => (

  <Styled.Counter>

    <Styled.CounterButton $colorItem={colorItem} onClick={onDecrease}>

      <Icon colorItem={colorItem || ''} iconName="minus" />

    </Styled.CounterButton>

    <Styled.Count $colorItem={colorItem}>{value}</Styled.Count>

    <Styled.CounterButton $colorItem={colorItem} onClick={onIncrease}>

      <Icon colorItem={colorItem || ''} iconName="plus" />

    </Styled.CounterButton>

  </Styled.Counter>

);

src/components/cart/ui/cart-add-button/index.ts

0 → 100644
+1 −0
Original line number Diff line number Diff line 
export * from './cart-add-button';