StripeSubscriptionButton

src/component/subscribe/StripeSubscriptionButton.jsx

@@ -1,14 +1,29 @@
-import React from 'react';
+import React from "react";
-import { loadStripe } from '@stripe/stripe-js';
+import { loadStripe } from "@stripe/stripe-js";
-import { Elements, useStripe, useElements, CardElement } from '@stripe/react-stripe-js';
+import {
-import {MyProductData, StripeSubscriptionCreate} from '../../services/services';
+  Elements,
+  useStripe,
+  useElements,
+  CardElement,
+} from "@stripe/react-stripe-js";
+import {
+  MyProductData,
+  StripeSubscriptionCreate,
+} from "../../services/services";
 import { useQuery } from "@tanstack/react-query";
 import queryKeys from "../../services/queryKeys";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
 //const stripePromise = loadStripe('your_stripe_publishable_key');
-const stripePromise = loadStripe('pk_test_51RqL5WLjZLojw6IZmEpwFidNZSl9lLlVUHNvuFZNEz1eTR9XXepnyyVhfvXe9cp4eMnqkDPpoe9wxLLRSV0dxRee00UfhayUOT');
+const stripePromise = loadStripe(
+  "pk_test_51RqL5WLjZLojw6IZmEpwFidNZSl9lLlVUHNvuFZNEz1eTR9XXepnyyVhfvXe9cp4eMnqkDPpoe9wxLLRSV0dxRee00UfhayUOT",
+);
 
-const CheckoutForm = ({ priceId, customerId ,option_name }) => {
+const CheckoutForm = ({
+  priceId,
+  customerId,
+  option_name,
+  selected_display_name,
+}) => {
   const stripe = useStripe();
   const elements = useElements();
   const navigate = useNavigate();
@@ -23,9 +38,9 @@ const CheckoutForm = ({ priceId, customerId ,option_name }) => {
       priceId: priceId,
       customerId: customerId,
       option_name: option_name,
-            token: localStorage.getItem('token'), // USER TOKEN
+      token: localStorage.getItem("token"), // USER TOKEN
-            uid: localStorage.getItem('uid') // USER UID
+      uid: localStorage.getItem("uid"), // USER UID
-        }
+    };
 
     StripeSubscriptionCreate(reqData).then((res) => {
       console.log(res);
@@ -33,23 +48,36 @@ const CheckoutForm = ({ priceId, customerId ,option_name }) => {
       //navigate(res.data.stripe_session)
       window.location.replace(res.data.stripe_session);
     });
-
   };
 
   return (
     <form onSubmit={handleSubmit}>
       {/*<CardElement />*/}
-            <button type="submit" disabled={!stripe} className="btn btn-primary text-uppercase">
+      <button
-                Start Subscription
+        type="submit"
+        disabled={!stripe}
+        className="btn btn-primary text-uppercase"
+      >
+        Start {selected_display_name} Subscription
       </button>
     </form>
   );
 };
 
-const StripeSubscriptionButton = ({ priceId, customerId ,option_name}) => {
+const StripeSubscriptionButton = ({
+  priceId,
+  customerId,
+  option_name,
+  selected_display_name,
+}) => {
   return (
     <Elements stripe={stripePromise}>
-            <CheckoutForm priceId={priceId} customerId={customerId} option_name={option_name} />
+      <CheckoutForm
+        priceId={priceId}
+        customerId={customerId}
+        option_name={option_name}
+        selected_display_name={selected_display_name}
+      />
     </Elements>
   );
 };

src/component/subscribe/Subscribe.jsx

@@ -8,9 +8,10 @@ import StripeSubscriptionButton from "./StripeSubscriptionButton";
 import SubscribeInfo from "./SubscribeInfo";
 
 export default function Subscribe() {
-    const {state: {selectedSubscription, customerId}} = useLocation()
+    const {state: {selectedSubscription, customerId, currentSubscription}} = useLocation()
 
     console.log('selectedSubscription', selectedSubscription)
+    console.log('currentSubscription', currentSubscription)
     console.log('selectedSubscription.option_name', selectedSubscription.option_name)
     console.log('customerId', customerId)
 
@@ -25,8 +26,8 @@ export default function Subscribe() {
                     <div className="card card-statistics text-center py-3">
                         <div className="card-body pricing-content">
                             <div className="pricing-content-card">
-                                <h5>Current Subscription(s)</h5>
+                                <h3>Your Current Subscription</h3>
-                                {/*<h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>*/}
+                                <h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
                                 {/*<SubcribePaymentOptions activePaymentType={activePaymentType}*/}
                                 {/*                        setActivePaymentType={setActivePaymentType}/>*/}
                                 {/*{activePaymentType == 'new' ?*/}
@@ -38,7 +39,9 @@ export default function Subscribe() {
                                     <SubscribeInfo />
                                     <StripeSubscriptionButton priceId={selectedSubscription.stripe_price_id}
                                                               customerId={customerId}
-                                                              option_name={selectedSubscription.option_name}/>
+                                                              option_name={selectedSubscription.option_name}
+                                                              selected_display_name={selectedSubscription.display_name}
+                                                              />
                                 </>
                             </div>
                         </div>

src/component/subscription/Subscription.jsx

@@ -91,7 +91,8 @@ export default function Subscription() {
                                                         navigate(siteLinks.subscribe, {
                                                             state: {
                                                                 selectedSubscription: value,
-                                                                customerId: stripe_customer_id
+                                                                customerId: stripe_customer_id,
+                                                                currentSubscription: currentSubscription
                                                             }
                                                         })
                                                     }}