checkout PaymentMethod.tsx

0% Statements 0/152
100% Branches 0/0
0% Functions 0/1
0% Lines 0/152
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
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from "react";
import Image from "next/image";
import { Icon } from "@/components/ui/icons";

type PaymentMethodType = "credit_card" | "paypal" | "bank_transfer";

interface PaymentMethodProps {
  selectedPayment: string;
  onPaymentChange: (method: PaymentMethodType) => void;
  onInteraction?: () => void;
}

const PaymentMethod: React.FC<PaymentMethodProps> = ({ selectedPayment, onPaymentChange, onInteraction }) => {
  return (
    <div className="bg-white dark:bg-gray-800 shadow-1 rounded-[10px] mt-7.5" onFocus={onInteraction} onClick={onInteraction}>
      <div className="border-b border-gray-3 dark:border-gray-700 py-5 px-4 sm:px-8.5">
        <h3 className="font-medium text-xl text-dark dark:text-gray-100">Payment Method</h3>
      </div>

      <div className="p-4 sm:p-8.5">
        <div className="flex flex-col gap-3">
          <label
            htmlFor="credit_card"
            className="flex cursor-pointer select-none items-center gap-4"
          >
            <div className="relative">
              <input
                type="radio"
                value="credit_card"
                id="credit_card"
                name="paymentMethod"
                className="sr-only"
                checked={selectedPayment === "credit_card"}
                onChange={() => onPaymentChange("credit_card")}
              />
              <div
                className={`flex h-4 w-4 items-center justify-center rounded-full ${
                  selectedPayment === "credit_card"
                    ? "border-4 border-blue"
                    : "border border-gray-4 dark:border-gray-600"
                }`}
              ></div>
            </div>

            <div
              className={`rounded-md border-[0.5px] py-3.5 px-5 ease-out duration-200 hover:bg-gray-2 dark:hover:bg-gray-700 hover:border-transparent hover:shadow-none ${
                selectedPayment === "credit_card"
                  ? "border-transparent bg-gray-2 dark:bg-gray-700"
                  : " border-gray-4 dark:border-gray-600 shadow-1"
              }`}
            >
              <div className="flex items-center">
                <div className="pr-2.5">
                  <Image src="/images/checkout/bank.svg" alt="credit card" width={29} height={12} style={{ width: 'auto', height: 'auto' }} />
                </div>

                <div className="border-l border-gray-4 dark:border-gray-600 pl-2.5">
                  <p className="dark:text-gray-200">Credit Card</p>
                </div>
              </div>
            </div>
          </label>

          <label
            htmlFor="paypal"
            className="flex cursor-pointer select-none items-center gap-4"
          >
            <div className="relative">
              <input
                type="radio"
                value="paypal"
                id="paypal"
                name="paymentMethod"
                className="sr-only"
                checked={selectedPayment === "paypal"}
                onChange={() => onPaymentChange("paypal")}
              />
              <div
                className={`flex h-4 w-4 items-center justify-center rounded-full ${
                  selectedPayment === "paypal"
                    ? "border-4 border-blue"
                    : "border border-gray-4 dark:border-gray-600"
                }`}
              ></div>
            </div>
            <div
              className={`rounded-md border-[0.5px] py-3.5 px-5 ease-out duration-200 hover:bg-gray-2 dark:hover:bg-gray-700 hover:border-transparent hover:shadow-none min-w-[240px] ${
                selectedPayment === "paypal"
                  ? "border-transparent bg-gray-2 dark:bg-gray-700"
                  : " border-gray-4 dark:border-gray-600 shadow-1"
              }`}
            >
              <div className="flex items-center">
                <div className="pr-2.5">
                  <Image src="/images/checkout/paypal.svg" alt="paypal" width={75} height={20} style={{ width: 'auto', height: 'auto' }} />
                </div>

                <div className="border-l border-gray-4 dark:border-gray-600 pl-2.5">
                  <p className="dark:text-gray-200">Paypal</p>
                </div>
              </div>
            </div>
          </label>

          <label
            htmlFor="bank_transfer"
            className="flex cursor-pointer select-none items-center gap-4"
          >
            <div className="relative">
              <input
                type="radio"
                value="bank_transfer"
                id="bank_transfer"
                name="paymentMethod"
                className="sr-only"
                checked={selectedPayment === "bank_transfer"}
                onChange={() => onPaymentChange("bank_transfer")}
              />
              <div
                className={`flex h-4 w-4 items-center justify-center rounded-full ${
                  selectedPayment === "bank_transfer"
                    ? "border-4 border-blue"
                    : "border border-gray-4 dark:border-gray-600"
                }`}
              ></div>
            </div>

            <div
              className={`rounded-md border-[0.5px] py-3.5 px-5 ease-out duration-200 hover:bg-gray-2 dark:hover:bg-gray-700 hover:border-transparent hover:shadow-none min-w-[240px] ${
                selectedPayment === "bank_transfer"
                  ? "border-transparent bg-gray-2 dark:bg-gray-700"
                  : " border-gray-4 dark:border-gray-600 shadow-1"
              }`}
            >
              <div className="flex items-center">
                <div className="pr-2.5">
                  <Icon name="credit-card" size={24} className="text-gray-600 dark:text-gray-400" />
                </div>

                <div className="border-l border-gray-4 dark:border-gray-600 pl-2.5">
                  <p className="dark:text-gray-200">Bank Transfer</p>
                </div>
              </div>
            </div>
          </label>
        </div>
      </div>
    </div>
  );
};

export default PaymentMethod;