All files / src/pages checkout.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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { FC, useEffect, useState } from 'react';
import { Router, Redirect } from "@reach/router";
import { Confirm, Contact, Layout, Login, Payment, Success } from '../components';
import { NavigationSteps, NavigationStep, Loading } from 'ag-ems-ui-library';
import { Link, navigate } from 'gatsby';
import { useCartContext, useUserContext } from '../contexts';
 
const steps = [
  { key: 1, path: '/checkout/login', name: "Anmelden" },
  { key: 2, path: '/checkout/contact', name: "Adresse" },
  { key: 3, path: '/checkout/payment', name: "Zahlungsart" },
  { key: 4, path: '/checkout/confirm', name: "Bestätigen" },
  { key: 5, path: '/checkout/success', name: "Fertig" }
];
 
const Checkout: FC = () => {
  const { isAuth } = useUserContext();
  const { positions, address, selectedPaymentMethod, orderId, loading, placeOrderLoading } = useCartContext();
 
  const [activeStep, setActiveStep] = useState(isAuth ? 2 : 1);
 
  useEffect(() => {
    if (loading || placeOrderLoading) return;
    const newValue = isAuth ? !!orderId ? 5 : !!address ? (selectedPaymentMethod && selectedPaymentMethod.code.length > 0) ? 4 : 3 : 2 : 1;
    if (activeStep !== newValue) {
      setActiveStep(newValue);
    }
  }, [loading, isAuth, placeOrderLoading]);
 
  const setPreviousStep = () => {
    if (activeStep !== 1) setActiveStep(activeStep - 1);
  };
 
  const setNextStep = () => {
    if (activeStep !== steps.length) setActiveStep(activeStep + 1);
  };
 
  const RedirectToActiveStep = () => {
    const path = steps.find(item => item.key === activeStep)?.path;
 
    return !!path && typeof window !== 'undefined' && location.pathname !== path ? (
      <Redirect noThrow from='/' to={path} />
    ) : null;
  }
 
  if (!loading && positions.length === 0 && !orderId) {
    if (typeof window !== 'undefined') {
      navigate('/cart');
    }
    return null;
  }
 
  return (
    <Layout>
      {loading ? (
        <Loading color="#007c00" />
      ) : (
          <>
            <NavigationSteps>
              {steps && steps.map(step => (
                <NavigationStep
                  key={step.key}
                  to={step.path}
                  current={step.key === activeStep}
                  available={step.key <= activeStep}
                  blocked={(step.key === 1 && activeStep !== 1) || (activeStep === 5 && step.key !== 5)}
                  name={`${step.key}. ${step.name}`}
                  mobile={step.key === activeStep ? step.name : step.key.toString()}
                  component={Link}
                  onClick={() => { setActiveStep(step.key) }}
                />
              ))}
            </NavigationSteps>
            <Router basepath="/checkout">
              <Login path='/login' setNextStep={setNextStep} />
              <Contact path='/contact' setNextStep={setNextStep} setPreviousStep={setPreviousStep} />
              <Payment path='/payment' setNextStep={setNextStep} setPreviousStep={setPreviousStep} />
              <Confirm path='/confirm' setNextStep={setNextStep} setPreviousStep={setPreviousStep} setActiveStep={setActiveStep} />
              <Success path='/success' setPreviousStep={setPreviousStep} />
            </Router>
            <RedirectToActiveStep />
          </>
        )}
    </Layout>
  );
}
 
export default Checkout;