currency symbol fixed

docker-compose.yml

@@ -1,4 +1,4 @@
-# version: '3'
+version: '3'
 services:
   merms-panel:
     # image: registry.chiefsoft.net/merms-panel-reactjs:latest

src/component/home/Products.jsx

@@ -47,7 +47,7 @@ export default function Products() {
                         return (
                             <div key={product.uid+index} className={`col-12 col-lg-6 mb-2 mb-xxl-0`}>
                                 <Link to={productPath(product?.product_id)}  >
-                                    <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} style={{borderColor:'black', borderWidth: '2px', paddingLeft:"1px"}} >
+                                    <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} style={{borderColor:'black', borderWidth: '2px'}} >
                                         <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
                                             <i className={`fa ${product?.product_icon} text-primary`}></i>
                                         </div>

src/component/subscribe/StripeSubscriptionButton.jsx

@@ -1,85 +1,57 @@
-import React from "react";
+import React from 'react';
-import { loadStripe } from "@stripe/stripe-js";
+import { loadStripe } from '@stripe/stripe-js';
-import {
+import { Elements, useStripe, useElements, CardElement } from '@stripe/react-stripe-js';
-  Elements,
+import {MyProductData, StripeSubscriptionCreate} from '../../services/services';
-  useStripe,
+import {useQuery} from "@tanstack/react-query";
-  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(
+const stripePromise = loadStripe('pk_test_51RqL5WLjZLojw6IZmEpwFidNZSl9lLlVUHNvuFZNEz1eTR9XXepnyyVhfvXe9cp4eMnqkDPpoe9wxLLRSV0dxRee00UfhayUOT');
-  "pk_test_51RqL5WLjZLojw6IZmEpwFidNZSl9lLlVUHNvuFZNEz1eTR9XXepnyyVhfvXe9cp4eMnqkDPpoe9wxLLRSV0dxRee00UfhayUOT",
-);
 
-const CheckoutForm = ({
+const CheckoutForm = ({ priceId, customerId ,option_name }) => {
-  priceId,
+    const stripe = useStripe();
-  customerId,
+    const elements = useElements();
-  option_name,
+    const navigate = useNavigate();
-  selected_display_name,
+    const handleSubmit = async (event) => {
-}) => {
+        event.preventDefault();
-  const stripe = useStripe();
-  const elements = useElements();
-  const navigate = useNavigate();
-  const handleSubmit = async (event) => {
-    event.preventDefault();
 
-    if (!stripe || !elements) {
+        if (!stripe || !elements) {
-      return;
+            return;
-    }
+        }
+
+        let reqData = {
+            priceId : priceId,
+            customerId: customerId,
+            option_name: option_name,
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid') // USER UID
+        }
+
+        StripeSubscriptionCreate(reqData).then( (res)=>{
+            console.log(res);
+            console.log(res.data.stripe_session);
+            //navigate(res.data.stripe_session)
+            window.location.replace(res.data.stripe_session);
+        });
 
-    let reqData = {
-      priceId: priceId,
-      customerId: customerId,
-      option_name: option_name,
-      token: localStorage.getItem("token"), // USER TOKEN
-      uid: localStorage.getItem("uid"), // USER UID
     };
 
-    StripeSubscriptionCreate(reqData).then((res) => {
+    return (
-      console.log(res);
+        <form onSubmit={handleSubmit}>
-      console.log(res.data.stripe_session);
+            <CardElement />
-      //navigate(res.data.stripe_session)
+            <button type="submit" disabled={!stripe}>
-      window.location.replace(res.data.stripe_session);
+                Subscribe
-    });
+            </button>
-  };
+        </form>
-
+    );
-  return (
-    <form onSubmit={handleSubmit}>
-      {/*<CardElement />*/}
-      <button
-        type="submit"
-        disabled={!stripe}
-        className="btn btn-primary text-uppercase"
-      >
-        Start {selected_display_name} Subscription
-      </button>
-    </form>
-  );
 };
 
-const StripeSubscriptionButton = ({
+const StripeSubscriptionButton = ({ priceId, customerId ,option_name}) => {
-  priceId,
+    return (
-  customerId,
+        <Elements stripe={stripePromise}>
-  option_name,
+            <CheckoutForm priceId={priceId} customerId={customerId} option_name={option_name} />
-  selected_display_name,
+        </Elements>
-}) => {
+    );
-  return (
-    <Elements stripe={stripePromise}>
-      <CheckoutForm
-        priceId={priceId}
-        customerId={customerId}
-        option_name={option_name}
-        selected_display_name={selected_display_name}
-      />
-    </Elements>
-  );
 };
 
 export default StripeSubscriptionButton;

src/component/subscribe/Subscribe.jsx

@@ -5,14 +5,15 @@ import SubscribeNewCard from "./SubscribeNewCard";
 import SubscribePreviousCard from "./SubscribePreviousCard";
 import SubcribePaymentOptions from "./SubcribePaymentOptions";
 import StripeSubscriptionButton from "./StripeSubscriptionButton";
-import SubscribeInfo from "./SubscribeInfo";
+
+
+
 
 export default function Subscribe() {
-    const {state: {selectedSubscription, customerId, currentSubscription}} = useLocation()
+    const {state: {selectedSubscription,customerId}} = useLocation()
 
     console.log('selectedSubscription', selectedSubscription)
-    console.log('currentSubscription', currentSubscription)
+    console.log('selectedSubscription.option_name',selectedSubscription.option_name)
-    console.log('selectedSubscription.option_name', selectedSubscription.option_name)
     console.log('customerId', customerId)
 
     let [activePaymentType, setActivePaymentType] = useState('previous')
@@ -26,22 +27,17 @@ export default function Subscribe() {
                     <div className="card card-statistics text-center py-3">
                         <div className="card-body pricing-content">
                             <div className="pricing-content-card">
-                                <h3>Your Current Subscription</h3>
+                                <h5>Current Subscription(s)</h5>
-                                <h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
+                                {/*<h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>*/}
-                                {/*<SubcribePaymentOptions activePaymentType={activePaymentType}*/}
+                                <SubcribePaymentOptions activePaymentType={activePaymentType}
-                                {/*                        setActivePaymentType={setActivePaymentType}/>*/}
+                                                        setActivePaymentType={setActivePaymentType}/>
-                                {/*{activePaymentType == 'new' ?*/}
+                                {activePaymentType == 'new' ?
-                                {/*    <SubscribeNewCard/>*/}
+                                    <SubscribeNewCard/>
-                                {/*    :*/}
+                                    :
-                                {/*    <SubscribePreviousCard/>*/}
+                                    <SubscribePreviousCard/>
-                                {/*}*/}
+                                }
                                 <>
-                                    <SubscribeInfo />
+                                    <StripeSubscriptionButton priceId={selectedSubscription.stripe_price_id} customerId={customerId} option_name={selectedSubscription.option_name} />
-                                    <StripeSubscriptionButton priceId={selectedSubscription.stripe_price_id}
-                                                              customerId={customerId}
-                                                              option_name={selectedSubscription.option_name}
-                                                              selected_display_name={selectedSubscription.display_name}
-                                                              />
                                 </>
                             </div>
                         </div>

src/component/subscribe/SubscribeInfo.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-
-export default function SubscribeInfo() {
-
-    return <>
-        <div className="row">
-            <div className="col-md-12 col-12 selects-contant">
-                <div className="card card-statistics">
-                    <div className="card-body">
-                        <div className="form-group mb-0">
-                            Your subscription terms outline the details of your plan, including billing frequency,
-                            renewal dates, payment methods, and cancellation policies. Please review your subscription
-                            agreement for information on your current plan, how to manage or update your subscription,
-                            and any applicable fees or renewal conditions. Contact support if you have questions about
-                            your subscription.
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-
-    </>
-
-}

src/component/subscription/Subscription.jsx

@@ -73,7 +73,7 @@ export default function Subscription() {
                                         <div className="card-body pricing-content">
                                             <div className="pricing-content-card" style={{minHeight: '350px'}}>
                                                 <h5>{value.display_name}</h5>
-                                                <h2 className="text-primary pt-3">${value.monthly}</h2>
+                                                <h2 className="text-primary pt-3">{value?.currency}{value.monthly}</h2>
                                                 <p className="text-primary pb-3">/ Monthly</p>
                                                 <ol className="py-2"
                                                     style={{fontSize: '16px', fontWeight: 'bold', textAlign: 'left'}}>
@@ -91,8 +91,7 @@ export default function Subscription() {
                                                         navigate(siteLinks.subscribe, {
                                                             state: {
                                                                 selectedSubscription: value,
-                                                                customerId: stripe_customer_id,
+                                                                customerId: stripe_customer_id
-                                                                currentSubscription: currentSubscription
                                                             }
                                                         })
                                                     }}

src/css/partials/_helpers.scss

@@ -2072,7 +2072,7 @@ ul.activity {
 }
 
 .img-icon i{
-    font-size:35px;
+    font-size:20px;
 }
 @media (max-width: 1440px) and (min-width:1200px){
     .border-xxl-t{