Checkout Payment.tsx

33.33% Statements 2/6

0% Branches 0/7

0% Functions 0/2

33.33% Lines 2/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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  
 
 
 
4x
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { FC } from 'react';
import { StepComponentProps } from '../../types';
import { Layout } from './Layout';
import { Options, Option, Button } from 'ag-ems-ui-library';
const styles = require('./Checkout.module.css')
import { useCartContext, PaymentMethod } from '../../contexts';
import { useTranslation } from 'react-i18next';
 
export const Payment: FC<StepComponentProps> = ({ setNextStep }) => {
  const { t } = useTranslation();
  const { paymentMethods, selectedPaymentMethod, setPayment } = useCartContext();
 
  return <Layout>
    <h1 className="mb-3">{t('checkout.payment')}</h1>
    {!!paymentMethods && paymentMethods.length > 0 && (
      <Options value={selectedPaymentMethod?.code} onChange={setPayment}>
        {paymentMethods.map((method: PaymentMethod) => (
          <Option
            key={method.code}
            title={method.title || method.code}
            name="paymentMethod"
            value={method.code}
          />
        ))}
      </Options>
    )}
    <div className={`${styles.SubmitWrapper}`}>
      <Button
        value="Weiter"
        variant="ks-primary"
        sizing="lg"
        classes={styles.Submit}
        onClick={setNextStep}
        disabled={!selectedPaymentMethod || selectedPaymentMethod.code.length === 0}
      />
    </div>
  </Layout>;
};