card payment

LucSPI · May 24, 2023 · 471e90b · 471e90b
1 parent 963e377
commit 471e90b
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 12 deletions.
diff --git a/src/components/Detail/Deposit.tsx b/src/components/Detail/Deposit.tsx
@@ -5,7 +5,10 @@ import { ReactNode, useState } from "react";
 import { Stripe } from "./Payments";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
-const stripePromise = loadStripe("pk_test_6pRNASCoBOKtIshFeQd4XMUh");
+
+const stripeApiKey = import.meta.env.VITE_STRIPE_KEY || '';
+const stripePromise = loadStripe(stripeApiKey);
+
 type paymentListProps = {
   text: string;
   value: string;

diff --git a/src/components/Detail/Payments/Stripe.tsx b/src/components/Detail/Payments/Stripe.tsx
@@ -3,6 +3,8 @@ import { useStripe, useElements, CardElement } from "@stripe/react-stripe-js";
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
+import { useMutation } from '@tanstack/react-query';
+import { trpc } from '~/helpers/trpc';
 
 const useOptions = () => {
     const options =
@@ -23,7 +25,7 @@ const useOptions = () => {
         },
         hidePostalCode: true,
 
-      }
+    }
 
     return options;
   };
@@ -42,22 +44,30 @@ export const Stripe = () => {
             email: '',
         },
       });
-    async function onSubmit(data: {name: string, email: string }) {
-        console.warn(data);
+    const sendPayment = useMutation({
+        mutationFn: async (data: { paymentMethodId: string }) => await trpc.mutation('payment.stripePayment', data),
+        onSuccess: (data: any) => {
+            console.warn(data);            
+        },
+        onError: (_error: any) => {
+            // show error message in toast
+        },
+    });
+    async function onSubmit(param: {name: string, email: string }) {
         if (!stripe || !elements) {
             return;
         }
-
-        const payload = await stripe.createPaymentMethod({
+        const { paymentMethod }: any = await stripe.createPaymentMethod({
             elements,
             params: {
                 billing_details : {
-                    name: data.name,
-                    email: data.email
+                    name: param.name,
+                    email: param.email
                 }
             }
         });
-        console.warn(payload)
+        const data = {paymentMethodId: paymentMethod?.id}
+        sendPayment.mutate(data)
     }
 
     return (

diff --git a/src/components/Detail/Profile.tsx b/src/components/Detail/Profile.tsx
@@ -84,7 +84,7 @@ const columns: ColumnDefinitionType<History, keyof History>[] = [
   {
     key: 'edit',
     header: '',
-    width: '50px',
+    width: 'w-[50px]',
   },
 ];
 const achievementList = [

diff --git a/src/components/UI/Radio.ui.tsx b/src/components/UI/Radio.ui.tsx
@@ -9,7 +9,7 @@ interface RadioProps {
 }
 export const Radio : React.FC<RadioProps> = ({text, value, checked, icon, onClick}: RadioProps) => {
     return (
-        <button className="flex justify-between px-3 items-center h-12 w-[290px] text-xs border border-[#B4C7D8] rounded-md gap-2" onClick={() => onClick("param")}>
+        <button onClick={() => onClick("param")} className="flex justify-between px-3 items-center h-12 w-[290px] text-xs border border-[#B4C7D8] rounded-md gap-2" >
             <div className="flex items-center gap-2">
                 <input type="radio" value = {value} checked={checked === value ? true : false} onChange={() => onClick("param")} className="scale-125 checked:bg-[#1DC9A0]"/>
                 {text}

diff --git a/src/components/UI/Table/TableHeader.tsx b/src/components/UI/Table/TableHeader.tsx
@@ -7,7 +7,7 @@ export type TableHeaderProps<T, K extends keyof T> = {
 const TableHeader = <T, K extends keyof T>({ columns, headClass }: TableHeaderProps<T, K>): JSX.Element => {
   const headers = columns.map((column, index) => {
     return (
-      <th key={`headCell-${index}`} className={`text-center ${column.width ? 'w-['+column.width+']' : ''}`} >
+      <th key={`headCell-${index}`} className={`text-center ${column.width ? column.width : ''}`} >
         {column.header}
       </th>
     );