[fix] #110

homenoc · Aug 13, 2022 · d6bece0 · d6bece0
1 parent 56c4b1d
commit d6bece0
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 7 deletions.
diff --git a/src/api/Payment.ts b/src/api/Payment.ts
@@ -101,4 +101,45 @@ export function Refund(id: number): Promise<{ error: string; data: any }> {
             data: null
         };
     })
-}
+}
+
+export function PostSubscribe(groupID: number, plan: string): Promise<{ error: string; data: any }> {
+    return axios.post(restfulApiConfig.apiURL + "/group/" + groupID + "/payment/subscribe", {plan}, {
+        headers: {
+            'Content-Type': 'application/json',
+            ACCESS_TOKEN: sessionStorage.getItem('AccessToken')!,
+        }
+    }).then(res => {
+        return {
+            error: "",
+            data: res.data.url
+        };
+    }).catch(err => {
+        console.log(err);
+        return {
+            error: "[" + err.response.status + "] " + err.response.data.error,
+            data: null
+        };
+    })
+}
+
+export function GetPayment(groupID: number): Promise<{ error: string; data: any }> {
+    return axios.get(restfulApiConfig.apiURL + "/group/" + groupID + "/payment", {
+        headers: {
+            'Content-Type': 'application/json',
+            ACCESS_TOKEN: sessionStorage.getItem('AccessToken')!,
+        }
+    }).then(res => {
+        console.log(res.data);
+        return {
+            error: "",
+            data: res.data.url
+        };
+    }).catch(err => {
+        console.log(err);
+        return {
+            error: "[" + err.response.status + "] " + err.response.data.error,
+            data: null
+        };
+    })
+}
diff --git a/src/interface.ts b/src/interface.ts
@@ -189,6 +189,13 @@ export interface ServiceTemplateData {
     need_route: boolean
 }
 
+export interface PaymentMembershipTemplate {
+    title: string
+    plan: string
+    price_id: string
+    fee: string
+}
+
 export interface ConnectionDetailData {
     ID: number,
     CreatedAt: string,
@@ -312,6 +319,8 @@ export interface GroupDetailData {
     coupon_id: string,
     member_type: number,
     member_expired: string,
+    stripe_customer_id?: string,
+    stripe_subscription_id?: string,
     users?: UserDetailData[],
     tickets?: TicketDetailData[],
     services?: ServiceDetailData[]
@@ -344,6 +353,7 @@ export interface TemplateData {
     group?: GroupDetailData[]
     mail_template?: MailTemplateData[]
     member_type?: MemberTypeTemplateData[]
+    payment_membership?: PaymentMembershipTemplate[]
 }
 
 export interface MemoAddData {

diff --git a/src/pages/Group/GroupDetail/Group.tsx b/src/pages/Group/GroupDetail/Group.tsx
@@ -38,6 +38,7 @@ import {useNavigate} from "react-router-dom";
 import {useRecoilValue} from "recoil";
 import {TemplateState} from "../../../api/Recoil";
 import {StyledSelect1, StyledTextFieldShort} from "../../Add/style";
+import {GetPayment, PostSubscribe} from "../../../api/Payment";
 
 function ChipAgree(props: { agree: boolean }) {
     const {agree} = props;
@@ -73,15 +74,14 @@ export function GroupProfileInfo(props: {
     const {enqueueSnackbar} = useSnackbar();
     const [paymentCoupon, setPaymentCoupon] = React.useState("");
     const [memberType, setMemberType] = React.useState(0);
-    let nowDate = new Date();
-    const [memberExpiredDate, setMemberExpiredDate] = React.useState<Date | null>(nowDate);
+    const [memberExpiredDate, setMemberExpiredDate] = React.useState<Date | null>(null);
     const navigate = useNavigate();
 
     useEffect(() => {
         if (data.member_expired != null) {
             const tmp = data.member_expired.split('T');
-            nowDate = new Date(tmp[0]);
-            handleMemberExpiredDateChange(memberExpiredDate);
+            const expiredDate = new Date(tmp[0]);
+            setMemberExpiredDate(expiredDate)
         }
 
         if (data.coupon_id != null) {
@@ -133,6 +133,28 @@ export function GroupProfileInfo(props: {
         })
     }
 
+    const subscribe = (plan: string) => {
+        PostSubscribe(data.ID, plan).then(res => {
+            if (res.error === "") {
+                console.log(res.data);
+                window.open(res.data, '_blank');
+            } else {
+                enqueueSnackbar(String(res.error), {variant: "error"});
+            }
+        })
+    }
+
+    const getPayment = () => {
+        GetPayment(data.ID).then(res => {
+            if (res.error === "") {
+                console.log(res.data);
+                window.open(res.data, '_blank');
+            } else {
+                enqueueSnackbar(String(res.error), {variant: "error"});
+            }
+        })
+    }
+
     const handleMemberExpiredDateChange = (newDate: Date | null) => {
         setMemberExpiredDate(newDate);
     };
@@ -289,6 +311,8 @@ export function GroupProfileInfo(props: {
                     </AccordionSummary>
                     <AccordionDetails>
                         <StyledFormControlFormShort variant="filled">
+                            <p>CusID: {data.stripe_customer_id}</p>
+                            <p>SubID: {data.stripe_subscription_id}</p>
                             <StyledTextFieldShort
                                 id="coupon_code"
                                 label="クーポンコード"
@@ -356,15 +380,27 @@ export function GroupProfileInfo(props: {
                                         size="small"
                                         variant="contained"
                                         color="primary"
+                                        onClick={() => subscribe("yearly")}
+                                    >
+                                        支払い(Yearly)
+                                    </StyledButtonSpaceRight>
+                                    <StyledButtonSpaceRight
+                                        size="small"
+                                        variant="contained"
+                                        color="primary"
+                                        onClick={() => subscribe("monthly")}
                                     >
-                                        支払い画面(User)
+                                        支払い(Monthly)
                                     </StyledButtonSpaceRight>
+                                </Grid>
+                                <Grid item xs={12}>
                                     <StyledButtonSpaceRight
                                         size="small"
                                         variant="contained"
                                         color={"primary"}
+                                        onClick={getPayment}
                                     >
-                                        解約
+                                        Subscribe管理
                                     </StyledButtonSpaceRight>
                                 </Grid>
                             </Grid>