added initially
This commit is contained in:
parent
7b2de38a32
commit
3c89a78034
@ -71,21 +71,18 @@
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* ✅ Success */
|
||||
.timeline-point.completed {
|
||||
background-color: var(--bs-success);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 5px rgba(25, 135, 84, 0.5);
|
||||
}
|
||||
|
||||
/* ❌ Failed */
|
||||
.timeline-point.failed {
|
||||
background-color: var(--bs-danger);
|
||||
color: #fff;
|
||||
box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
|
||||
}
|
||||
|
||||
/* ⏳ Pending (Active) */
|
||||
.timeline-point.active {
|
||||
background-color: var(--bs-info);
|
||||
color: #fff;
|
||||
@ -93,7 +90,6 @@
|
||||
box-shadow: 0 0 6px rgba(13, 202, 240, 0.5);
|
||||
}
|
||||
|
||||
/* Connecting line */
|
||||
.timeline-line-horizontal {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
BIN
public/img/illustrations/undraw_pricing.png
Normal file
BIN
public/img/illustrations/undraw_pricing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
39
src/components/ThemeColorChanger.jsx
Normal file
39
src/components/ThemeColorChanger.jsx
Normal file
@ -0,0 +1,39 @@
|
||||
|
||||
import React from "react";
|
||||
|
||||
const ThemeColorChanger = () => {
|
||||
const changePrimaryColor = (color) => {
|
||||
document.documentElement.style.setProperty("--primary-color", color);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="d-flex gap-2 align-items-center">
|
||||
<span>Choose Primary Color:</span>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{ backgroundColor: "red" }}
|
||||
onClick={() => changePrimaryColor("#ff0000")}
|
||||
></button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{ backgroundColor: "blue" }}
|
||||
onClick={() => changePrimaryColor("#007bff")}
|
||||
></button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{ backgroundColor: "green" }}
|
||||
onClick={() => changePrimaryColor("#28a745")}
|
||||
></button>
|
||||
|
||||
|
||||
</div>
|
||||
<div className="card mt-4 p-3">
|
||||
<h4 style={{ color: "var(--primary-color)" }}>Primary Color Demo</h4>
|
||||
<button className="btn btn-primary mt-3">Primary Button</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemeColorChanger;
|
||||
@ -10,98 +10,90 @@ import {
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { PaymentRepository } from "../../repositories/PaymentRepository";
|
||||
import { useMakePayment } from "../../hooks/usePayment";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { setSelfTenant } from "../../slices/localVariablesSlice";
|
||||
import { unblockUI } from "../../utils/blockUI";
|
||||
import showToast from "../../services/toastService";
|
||||
|
||||
const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
|
||||
const ProcessedPayment = ({
|
||||
onNext,
|
||||
resetPaymentStep,
|
||||
setCurrentStep,
|
||||
setStepStatus,
|
||||
resetFormStep,
|
||||
}) => {
|
||||
const { frequency, planName } = useParams();
|
||||
const dispatch = useDispatch();
|
||||
const [selectedPlan, setSelectedPlan] = useState(planName);
|
||||
|
||||
const { details: client, planId: selectedPlanId } = useSelector(
|
||||
(store) => store.localVariables.selfTenant
|
||||
);
|
||||
const [selectedPlan, setSelectedPlan] = useState(null);
|
||||
const [currentPlan, setCurrentPlan] = useState(null);
|
||||
const [failPayment, setFailPayment] = useState(null);
|
||||
|
||||
const {
|
||||
data: plans,
|
||||
isError: isPlanError,
|
||||
isLoading,
|
||||
} = useSubscription(frequency);
|
||||
const handleChange = (e) => {
|
||||
setSelectedPlan(e.target.value);
|
||||
};
|
||||
const visiblePlans = useMemo(() => {
|
||||
if (!plans) return [];
|
||||
|
||||
const planOrder = ["basic", "pro", "super"];
|
||||
const currentIndex = planOrder.indexOf(planName?.toLowerCase());
|
||||
useEffect(() => {
|
||||
if (!plans || !selectedPlanId) return;
|
||||
const selected = plans.find((p) => p.id === selectedPlanId);
|
||||
setSelectedPlan(selected);
|
||||
}, [plans, selectedPlanId]);
|
||||
|
||||
if (currentIndex === -1) return plans;
|
||||
const visibleNames = planOrder.slice(currentIndex);
|
||||
const selected = plans?.find((p) => p.planName === selectedPlan);
|
||||
debugger;
|
||||
dispatch(
|
||||
setSelfTenant({
|
||||
planId: selected?.id,
|
||||
})
|
||||
);
|
||||
|
||||
setCurrentPlan(selected);
|
||||
|
||||
return plans.filter((p) =>
|
||||
visibleNames.includes(p.planName?.toLowerCase())
|
||||
);
|
||||
}, [plans, selectedPlan]);
|
||||
|
||||
const loadScript = (src) => {
|
||||
return new Promise((resolve) => {
|
||||
const loadScript = (src) =>
|
||||
new Promise((resolve) => {
|
||||
const script = document.createElement("script");
|
||||
script.src = src;
|
||||
script.onload = () => resolve(true);
|
||||
script.onerror = () => resolve(false);
|
||||
document.body.appendChild(script);
|
||||
});
|
||||
};
|
||||
|
||||
const { mutate: MakePayment, isPending } = useMakePayment(
|
||||
(response) => {
|
||||
unblockUI()
|
||||
debugger
|
||||
unblockUI();
|
||||
onNext(response);
|
||||
},
|
||||
(fail) => {
|
||||
unblockUI()
|
||||
debu
|
||||
unblockUI();
|
||||
setFailPayment(fail);
|
||||
onNext(fail);
|
||||
},
|
||||
currentPlan
|
||||
);
|
||||
const ProcessToPayment = async (payload) => {
|
||||
|
||||
const ProcessToPayment = async () => {
|
||||
setStepStatus((prev) => ({ ...prev, 3: "success" }));
|
||||
setCurrentStep(4);
|
||||
const res = await loadScript(
|
||||
"https://checkout.razorpay.com/v1/checkout.js"
|
||||
);
|
||||
|
||||
if (!res) {
|
||||
alert("Failed to load Razorpay SDK");
|
||||
return;
|
||||
}
|
||||
MakePayment({ amount: 1 });
|
||||
};
|
||||
|
||||
const clients = [
|
||||
{
|
||||
firstName: "Alice",
|
||||
lastName: "Smith",
|
||||
email: "alice.smith@example.com",
|
||||
billingAddress:
|
||||
"456 Elm Street, Metropolis, USA 456 Elm Street, Metropolis, USA 456 Elm Street, Metropolis, USA",
|
||||
organizationName: "BetaTech Ltd.",
|
||||
contactNumber: "+44 20 7946 0958",
|
||||
onBoardingDate: "2025-09-15",
|
||||
organizationSize: "10-50",
|
||||
industryId: "c4d5e6f7-8901-2345-6789-abcdef123456",
|
||||
reference: "d2e3f4a5-6789-0123-4567-89abcdef0123",
|
||||
},
|
||||
];
|
||||
|
||||
const handleRetry = () => {
|
||||
setFailPayment(null);
|
||||
resetPaymentStep();
|
||||
if (typeof resetPaymentStep === "function") resetPaymentStep();
|
||||
};
|
||||
|
||||
// useEffect(() => {
|
||||
// if (!client || Object.keys(client).length === 0) {
|
||||
// setFailPayment(null);
|
||||
// if (typeof resetFormStep === "function") {
|
||||
// resetFormStep();
|
||||
// }
|
||||
// }
|
||||
// }, [client]);
|
||||
|
||||
if (failPayment) {
|
||||
return (
|
||||
<div className="container-md mt-5 text-center">
|
||||
@ -146,78 +138,43 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="container-md text-start">
|
||||
<h6 className="fs-4 fw-bold">
|
||||
Make sure your selected details, and process to payment
|
||||
</h6>
|
||||
<div className="container-sm text-start ">
|
||||
<div className="row gx-1 gy-3 justify-content-between">
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="row">
|
||||
<div className="col-12 mb-3 text-start">
|
||||
<h4 className=" ">
|
||||
Choose the Perfect Plan for Your Organization
|
||||
</h4>
|
||||
<h4>You’ve Selected the Perfect Plan for Your Organization</h4>
|
||||
<p className="text-muted small mb-3">
|
||||
Select a plan that fits your team’s needs and unlock the
|
||||
features that drive productivity.
|
||||
Great choice! This plan is tailored to meet your team’s needs
|
||||
and help you maximize productivity.
|
||||
</p>
|
||||
</div>
|
||||
{visiblePlans?.map((plan) => {
|
||||
let colSize = "8";
|
||||
{selectedPlan && (
|
||||
<div className="col-12 col-md-8 mb-md-3 mb-2">
|
||||
<div className="custom-option custom-option-basic text-start w-100 bg-light-primary border border-primary shadow-md p-3 rounded-3">
|
||||
<div className="custom-option-header d-flex justify-content-between align-items-center">
|
||||
<span className="h6 mb-0">{selectedPlan?.planName}</span>
|
||||
<i className="bx bx-check-circle text-primary fs-4"></i>
|
||||
</div>
|
||||
|
||||
if (visiblePlans.length === 2) colSize = "6";
|
||||
else if (visiblePlans.length === 3) colSize = "4";
|
||||
else if (visiblePlans.length >= 4) colSize = "3";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={plan?.id}
|
||||
className={`col-12 col-md-${colSize} mb-md-3 mb-2`}
|
||||
>
|
||||
<div
|
||||
className={`form-check custom-option custom-option-basic text-start w-100 bg-light-primary ${
|
||||
selectedPlan === plan?.planName
|
||||
? "border border-primary shadow-md"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<label
|
||||
className="form-check-label custom-option-content w-100"
|
||||
htmlFor={`customRadioTemp${plan?.id}`}
|
||||
>
|
||||
<input
|
||||
name="customRadioTemp"
|
||||
className="form-check-input"
|
||||
type="radio"
|
||||
value={plan?.planName}
|
||||
id={`customRadioTemp${plan?.id}`}
|
||||
checked={selectedPlan === plan?.planName}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<span className="custom-option-header d-flex justify-content-between align-items-center">
|
||||
<span className="h6 mb-0">{plan?.planName}</span>
|
||||
<span>
|
||||
{plan.currency?.symbol} {plan.price} /{" "}
|
||||
<div className="d-flex justify-content-between mt-1">
|
||||
<small className="text-muted">
|
||||
{selectedPlan?.currency?.symbol} {selectedPlan?.price} /{" "}
|
||||
{frequencyLabel(frequency)}
|
||||
</span>
|
||||
</span>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<span className="custom-option-body d-block mt-1">
|
||||
<small>{plan?.description}</small>
|
||||
<small>{selectedPlan?.description}</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
)}
|
||||
|
||||
{selectedPlan && (
|
||||
<div className="col-12 text-start">
|
||||
<div className="border-warning mt-3">
|
||||
{(() => {
|
||||
const selected = plans?.find(
|
||||
(p) => p.planName === selectedPlan
|
||||
);
|
||||
if (!selected) return null;
|
||||
|
||||
const {
|
||||
planName,
|
||||
description,
|
||||
@ -228,7 +185,7 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
|
||||
maxStorage,
|
||||
currency,
|
||||
features,
|
||||
} = selected;
|
||||
} = selectedPlan;
|
||||
return (
|
||||
<>
|
||||
<div className="row g-2 mb-3">
|
||||
@ -262,7 +219,7 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
|
||||
.map(([key, mod]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="col-4 mb-2 d-flex align-items-center mb-2"
|
||||
className="col-4 mb-2 d-flex align-items-center mb-1"
|
||||
>
|
||||
<i
|
||||
className={`fa-regular ${
|
||||
@ -276,7 +233,7 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h6 className="fw-bold text-secondary mt-3 mb-2">
|
||||
<h6 className="fw-bold text-secondary mt-3 mb-1">
|
||||
Support
|
||||
</h6>
|
||||
<ul className="list-unstyled d-flex flex-wrap gap-3 align-items-center mb-0 small">
|
||||
@ -299,22 +256,21 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
|
||||
<hr className="divider border-2" />
|
||||
<div className="d-flex flex-column co-12">
|
||||
<hr className="divider border-2 " />
|
||||
<div className="d-flex flex-column co-12 ">
|
||||
<div className="d-flex justify-content-between">
|
||||
<h6 className="fs-6 m-0">Duration</h6>
|
||||
<h5 className="fs-6 m-0">
|
||||
{frequencyLabel(frequency, true)}
|
||||
{frequencyLabel(selectedPlan?.frequency, true)}
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-between ">
|
||||
<div className="d-flex justify-content-between">
|
||||
<h6 className="fs-4">Total Price</h6>
|
||||
<h5 className="fs-3">
|
||||
{formatFigure(price, {
|
||||
{formatFigure(selectedPlan?.price, {
|
||||
type: "currency",
|
||||
currency: currency.currencyCode,
|
||||
currency: selectedPlan?.currency.currencyCode,
|
||||
})}
|
||||
</h5>
|
||||
</div>
|
||||
@ -327,19 +283,17 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-4 mt-12 ">
|
||||
{clients.map((client, idx) => (
|
||||
<div key={idx} className="text-start">
|
||||
<div className="col-12 col-md-4 ">
|
||||
|
||||
{client && (
|
||||
<div className="text-start">
|
||||
<h6 className="fs-md-4 my-4">Confirm your organization details.</h6>
|
||||
<div className="row g-2">
|
||||
<div className="col-sm-6 mb-2">
|
||||
<strong>First Name:</strong>
|
||||
<strong>Name:</strong>
|
||||
</div>
|
||||
<div className="col-sm-6 mb-2">{client.firstName}</div>
|
||||
<div className="col-sm-6 mb-2">{client.firstName} {client.lastName}</div>
|
||||
|
||||
<div className="col-sm-6 mb-2">
|
||||
<strong>Last Name:</strong>
|
||||
</div>
|
||||
<div className="col-sm-6 mb-2">{client.lastName}</div>
|
||||
|
||||
<div className="col-sm-6">
|
||||
<strong>Email:</strong>
|
||||
@ -356,10 +310,7 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
|
||||
</div>
|
||||
<div className="col-sm-6 mb-2">{client.organizationName}</div>
|
||||
|
||||
<div className="col-sm-6 mb-2">
|
||||
<strong>Organization Size:</strong>
|
||||
</div>
|
||||
<div className="col-sm-6 mb-2">{client.organizationSize}</div>
|
||||
|
||||
|
||||
<div className="col-sm-6 mb-2">
|
||||
<strong>Onboarding Date:</strong>
|
||||
@ -374,17 +325,12 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
|
||||
<div className="col-sm-6 mb-2">{client.billingAddress}</div>
|
||||
|
||||
<div className="col-sm-6 mb-2">
|
||||
<strong>Industry ID:</strong>
|
||||
<strong>Industry :</strong>
|
||||
</div>
|
||||
<div className="col-sm-6 mb-2">{client.industryId}</div>
|
||||
|
||||
{/* <div className="col-sm-6">
|
||||
<strong>Reference:</strong>
|
||||
</div>
|
||||
<div className="col-sm-6">{client.reference}</div> */}
|
||||
<div className="col-sm-6 mb-2">{client?.industry?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 d-flex justify-content-end">
|
||||
|
||||
11
src/components/UserSubscription/Review.jsx
Normal file
11
src/components/UserSubscription/Review.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const Review = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Review
|
||||
238
src/components/UserSubscription/SelectPlan.jsx
Normal file
238
src/components/UserSubscription/SelectPlan.jsx
Normal file
@ -0,0 +1,238 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useSubscription } from "../../hooks/useAuth";
|
||||
import { formatFigure, frequencyLabel } from "../../utils/appUtils";
|
||||
import { setSelfTenant } from "../../slices/localVariablesSlice";
|
||||
|
||||
const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
|
||||
const { frequency, planName } = useParams();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const client = useSelector(
|
||||
(store) => store.localVariables.selfTenant.details
|
||||
);
|
||||
const [selectedPlan, setSelectedPlan] = useState(planName);
|
||||
const [currentPlan, setCurrentPlan] = useState(null);
|
||||
const [failPayment, setFailPayment] = useState(null);
|
||||
|
||||
const {
|
||||
data: plans,
|
||||
isError: isPlanError,
|
||||
isLoading,
|
||||
} = useSubscription(frequency);
|
||||
|
||||
const handleChange = (e) => setSelectedPlan(e.target.value);
|
||||
|
||||
useEffect(() => {
|
||||
if (!plans || !selectedPlan) return;
|
||||
const selected = plans.find((p) => p.planName === selectedPlan);
|
||||
if (selected) {
|
||||
setCurrentPlan(selected);
|
||||
dispatch(setSelfTenant({ planId: selected.id }));
|
||||
}
|
||||
}, [plans, selectedPlan, dispatch]);
|
||||
|
||||
const handleNextStep = () => {
|
||||
setStepStatus((prev) => ({ ...prev, 2: "success"}));
|
||||
onNext();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container text-start ">
|
||||
<div className="row gx-4 gy-5 align-items-center justify-content-around">
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="row">
|
||||
<div className="col-12 mb-3 text-start">
|
||||
<h4>Choose the Perfect Plan for Your Organization</h4>
|
||||
<p className="text-muted small mb-3">
|
||||
Select a plan that fits your team’s needs and unlock the
|
||||
features that drive productivity.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{plans?.map((plan) => (
|
||||
<div key={plan?.id} className="col-12 col-md-4 mb-md-3 mb-2">
|
||||
<div
|
||||
className={`form-check custom-option custom-option-basic text-start w-100 bg-light-primary ${
|
||||
selectedPlan === plan?.planName
|
||||
? "border border-primary shadow-md"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<label
|
||||
className="form-check-label custom-option-content w-100"
|
||||
htmlFor={`customRadioTemp${plan?.id}`}
|
||||
>
|
||||
<input
|
||||
name="customRadioTemp"
|
||||
className="form-check-input"
|
||||
type="radio"
|
||||
value={plan?.planName}
|
||||
id={`customRadioTemp${plan?.id}`}
|
||||
checked={selectedPlan === plan?.planName}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<span className="custom-option-header d-flex justify-content-between align-items-center">
|
||||
<span className="h6 mb-0">{plan?.planName}</span>
|
||||
<span>
|
||||
{plan.currency?.symbol} {plan.price} /{" "}
|
||||
{frequencyLabel(frequency)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="custom-option-body d-block mt-1">
|
||||
<small>{plan?.description}</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{selectedPlan && (
|
||||
<div className="col-12 text-start">
|
||||
<div className="border-warning mt-3">
|
||||
{(() => {
|
||||
const selected = plans?.find(
|
||||
(p) => p.planName === selectedPlan
|
||||
);
|
||||
if (!selected) return null;
|
||||
|
||||
const {
|
||||
price,
|
||||
frequency,
|
||||
trialDays,
|
||||
maxUser,
|
||||
maxStorage,
|
||||
currency,
|
||||
features,
|
||||
} = selected;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="row g-2 mb-3">
|
||||
<div className="col-sm-6 col-md-4">
|
||||
<div className="border rounded-3 p-2 bg-light">
|
||||
<i className="bx bx-user me-1 text-primary"></i>
|
||||
<strong>Max Users:</strong> {maxUser}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-md-4">
|
||||
<div className="border rounded-3 p-2 bg-light">
|
||||
<i className="bx bx-hdd me-1 text-primary"></i>
|
||||
<strong>Max Storage:</strong> {maxStorage} MB
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-md-4">
|
||||
<div className="border rounded-3 p-2 bg-light">
|
||||
<i className="bx bx-time-five me-1 text-primary"></i>
|
||||
<strong>Trial Days:</strong> {trialDays}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 className="fw-bold text-secondary mb-2">
|
||||
Included Features
|
||||
</h6>
|
||||
<div className="row">
|
||||
{features &&
|
||||
Object.entries(features?.modules || {})
|
||||
.filter(([key]) => key !== "id")
|
||||
.map(([key, mod]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="col-4 mb-2 d-flex align-items-center"
|
||||
>
|
||||
<i
|
||||
className={`fa-regular ${
|
||||
mod.enabled
|
||||
? "fa-circle-check text-success"
|
||||
: "fa-circle-xmark text-danger"
|
||||
}`}
|
||||
></i>
|
||||
<small className="ms-1">{mod.name}</small>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h6 className="fw-bold text-secondary mt-3 mb-2">
|
||||
Support
|
||||
</h6>
|
||||
<ul className="list-unstyled d-flex flex-wrap gap-3 align-items-center mb-0 small">
|
||||
{features?.supports?.emailSupport && (
|
||||
<li className="d-flex align-items-center">
|
||||
<i className="bx bx-envelope text-primary me-1 fs-5"></i>
|
||||
Email Support
|
||||
</li>
|
||||
)}
|
||||
{features?.supports?.phoneSupport && (
|
||||
<li className="d-flex align-items-center">
|
||||
<i className="bx bx-phone text-primary me-1 fs-5"></i>
|
||||
Phone Support
|
||||
</li>
|
||||
)}
|
||||
{features?.supports?.prioritySupport && (
|
||||
<li className="d-flex align-items-center">
|
||||
<i className="bx bx-star text-warning me-1 fs-5"></i>
|
||||
Priority Support
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
|
||||
<hr className="divider border-2" />
|
||||
<div className="d-flex flex-column co-12">
|
||||
<div className="d-flex justify-content-between">
|
||||
<h6 className="fs-6 m-0">Duration</h6>
|
||||
<h5 className="fs-6 m-0">
|
||||
{frequencyLabel(frequency, true)}
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-between">
|
||||
<h6 className="fs-4">Total Price</h6>
|
||||
<h5 className="fs-3">
|
||||
{formatFigure(price, {
|
||||
type: "currency",
|
||||
currency: currency.currencyCode,
|
||||
})}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image Section */}
|
||||
<div className="d-none d-md-flex col-md-6 justify-content-center align-items-center">
|
||||
<img
|
||||
src="/public/img/illustrations/undraw_pricing.png"
|
||||
alt="image"
|
||||
className="img-fluid"
|
||||
style={{
|
||||
maxWidth: "70%",
|
||||
height: "auto",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 d-flex justify-content-end mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-label-primary d-flex align-items-center me-2"
|
||||
onClick={handleNextStep}
|
||||
>
|
||||
Next <i className="bx bx-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectPlan;
|
||||
@ -12,9 +12,7 @@ import { useCreateTenant, useIndustries } from "../../hooks/useTenant";
|
||||
import { useCreateSelfTenant } from "../../hooks/useAuth";
|
||||
import { blockUI } from "../../utils/blockUI";
|
||||
|
||||
const SubscriptionForm = ({currentStep,
|
||||
setCurrentStep,
|
||||
setStepStatus }) => {
|
||||
const SubscriptionForm = ({ currentStep, setCurrentStep, setStepStatus }) => {
|
||||
const { data, isError, isLoading: industryLoading } = useIndustries();
|
||||
const {
|
||||
register,
|
||||
@ -42,9 +40,9 @@ const SubscriptionForm = ({currentStep,
|
||||
// reset();
|
||||
};
|
||||
return (
|
||||
<div className="container-md ">
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="container-fluid col-md-6 py-3">
|
||||
<div className="d-flex justify-content-center ">
|
||||
<div className="col-12 mt-8">
|
||||
<div className="row px-4">
|
||||
<div className="text-start">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
@ -233,13 +231,13 @@ const SubscriptionForm = ({currentStep,
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-end mb-3">
|
||||
<div className="d-flex justify-content-end mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-label-primary d-flex align-items-center me-2"
|
||||
>
|
||||
{isPending ? (
|
||||
"Please Wait..."
|
||||
<span><i class='bx bx-loader-alt bx-md bx-spin me-2'></i>Please Wait...</span>
|
||||
) : (
|
||||
<>
|
||||
<span className="me-1">Next</span>
|
||||
@ -252,103 +250,6 @@ const SubscriptionForm = ({currentStep,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-none d-md-block col-md-6">
|
||||
{/* <div
|
||||
id="carouselExample "
|
||||
className="carousel slide col-md-8 offset-md-2 modal-min-h"
|
||||
data-bs-ride="carousel"
|
||||
>
|
||||
<div class="carousel-indicators">
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExample"
|
||||
data-bs-slide-to="0"
|
||||
class="active"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExample"
|
||||
data-bs-slide-to="1"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#carouselExample"
|
||||
data-bs-slide-to="2"
|
||||
></button>
|
||||
</div>
|
||||
<div className="carousel-inner">
|
||||
<div className="carousel-item active">
|
||||
<img
|
||||
className="d-block w-100"
|
||||
src="../../assets/img/elements/6.png"
|
||||
alt="First slide"
|
||||
/>
|
||||
<div className="carousel-caption d-none d-md-block">
|
||||
<h3>First slide</h3>
|
||||
<p>
|
||||
Eos mutat malis maluisset et, agam ancillae quo te, in vim
|
||||
congue pertinacia.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<img
|
||||
className="d-block w-100"
|
||||
src="../../assets/img/elements/7.png"
|
||||
alt="Second slide"
|
||||
/>
|
||||
<div className="carousel-caption d-none d-md-block">
|
||||
<h3>Second slide</h3>
|
||||
<p>In numquam omittam sea.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<img
|
||||
className="d-block w-100"
|
||||
src="../../assets/img/elements/8.png"
|
||||
alt="Third slide"
|
||||
/>
|
||||
<div className="carousel-caption d-none d-md-block">
|
||||
<h3>Third slide</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, virtute consequat ea qui, minim
|
||||
graeco mel no.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
className="carousel-control-prev"
|
||||
href="#carouselExample"
|
||||
role="button"
|
||||
data-bs-slide="prev"
|
||||
>
|
||||
<span
|
||||
className="carousel-control-prev-icon"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span className="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a
|
||||
className="carousel-control-next"
|
||||
href="#carouselExample"
|
||||
role="button"
|
||||
data-bs-slide="next"
|
||||
>
|
||||
<span
|
||||
className="carousel-control-next-icon"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span className="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div> */}
|
||||
<div>
|
||||
<p>
|
||||
Provide organization information including name, size, industry,
|
||||
and contact details.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -7,7 +7,7 @@ const SubscriptionLayout = ({
|
||||
stepStatus = {},
|
||||
}) => {
|
||||
return (
|
||||
<div className="stepper-container my-4">
|
||||
<div className="container-fluid stepper-container align-items-start my-4">
|
||||
<ul className="timeline-horizontal list-unstyled d-flex justify-content-between align-items-center position-relative w-100">
|
||||
{configStep.map((step, index) => {
|
||||
const stepNumber = index + 1;
|
||||
@ -34,8 +34,10 @@ const SubscriptionLayout = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h6
|
||||
className={`fw-semibold mb-0 ${
|
||||
<small
|
||||
className={`fw-semibold fs-sm-6 fs-md-6 mb-0 text-muted`}
|
||||
>
|
||||
{/* ${
|
||||
status === "success"
|
||||
? "text-success"
|
||||
: status === "failed"
|
||||
@ -43,10 +45,9 @@ const SubscriptionLayout = ({
|
||||
: stepNumber === currentStep
|
||||
? "text-primary"
|
||||
: "text-muted"
|
||||
}`}
|
||||
>
|
||||
} */}
|
||||
{step.name}
|
||||
</h6>
|
||||
</small>
|
||||
|
||||
{index !== configStep.length - 1 && (
|
||||
<div className={`timeline-line-horizontal`}></div>
|
||||
|
||||
@ -89,10 +89,12 @@ export const useCreateSelfTenant = (onSuccessCallBack, onFailureCallBack) => {
|
||||
|
||||
dispatch(
|
||||
setSelfTenant({
|
||||
tenantEnquireId: response?.tenantEnquireId,
|
||||
tenantEnquireId: response?.id,
|
||||
planId: null,
|
||||
details:response
|
||||
})
|
||||
);
|
||||
debugger
|
||||
if (onSuccessCallBack) onSuccessCallBack(response);
|
||||
},
|
||||
onError: (error) => {
|
||||
|
||||
@ -4,26 +4,37 @@ import SubscriptionLayout from "../../components/UserSubscription/SubscriptionLa
|
||||
import SubscriptionForm from "../../components/UserSubscription/SubscriptionForm";
|
||||
import ProcessedPayment from "../../components/UserSubscription/ProcessedPayment";
|
||||
import VerifiedPayment from "../../components/UserSubscription/VerifiedPayment";
|
||||
import SelectPlan from "../../components/UserSubscription/SelectPlan";
|
||||
import Review from "../../components/UserSubscription/Review";
|
||||
|
||||
const MakeSubscription = () => {
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [currentStep, setCurrentStep] = useState(4);
|
||||
const [responsePayment, setResponsePayment] = useState(null);
|
||||
|
||||
const [stepStatus, setStepStatus] = useState({
|
||||
1: "pending",
|
||||
2: "pending",
|
||||
3: "pending",
|
||||
4: "pending",
|
||||
5: "pending",
|
||||
});
|
||||
|
||||
const handleVerification = (resp) => {
|
||||
setResponsePayment(resp);
|
||||
if (resp?.success) {
|
||||
setStepStatus((prev) => ({ ...prev, 2: "success", 3: "success" }));
|
||||
setStepStatus((prev) => ({ ...prev, 4: "success" }));
|
||||
setCurrentStep(3);
|
||||
} else {
|
||||
setStepStatus((prev) => ({ ...prev, 2: "failed" }));
|
||||
setStepStatus((prev) => ({ ...prev, 4: "failed" }));
|
||||
}
|
||||
};
|
||||
const handleNext = () => {
|
||||
setStepStatus((prev) => ({
|
||||
...prev,
|
||||
[currentStep + 1]: "pending",
|
||||
}));
|
||||
setCurrentStep((prev) => prev + 1);
|
||||
};
|
||||
|
||||
const checkOut_Steps = [
|
||||
{
|
||||
@ -36,15 +47,49 @@ const MakeSubscription = () => {
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Select Plan",
|
||||
component: () => (
|
||||
<SelectPlan
|
||||
currentStep={currentStep}
|
||||
setStepStatus={setStepStatus}
|
||||
onNext={handleNext}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Review",
|
||||
component: () => (
|
||||
<ProcessedPayment
|
||||
onNext={(resp) => handleVerification(resp)}
|
||||
|
||||
resetPaymentStep={() =>
|
||||
setStepStatus((prev) => ({ ...prev, 4: "pending" }))
|
||||
}
|
||||
setCurrentStep={setCurrentStep}
|
||||
setStepStatus={setStepStatus}
|
||||
resetFormStep={() => {
|
||||
setStepStatus((prev) => ({ ...prev, 1: "pending" }));
|
||||
setCurrentStep(1);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Payment",
|
||||
component: () => (
|
||||
<ProcessedPayment
|
||||
onNext={(resp) => handleVerification(resp)}
|
||||
onFail={() => setStepStatus((prev) => ({ ...prev, 2: "failed" }))}
|
||||
|
||||
resetPaymentStep={() =>
|
||||
setStepStatus((prev) => ({ ...prev, 2: "pending" }))
|
||||
setStepStatus((prev) => ({ ...prev, 4: "pending" }))
|
||||
}
|
||||
setCurrentStep={setCurrentStep}
|
||||
setStepStatus={setStepStatus}
|
||||
resetFormStep={() => {
|
||||
setStepStatus((prev) => ({ ...prev, 1: "pending" }));
|
||||
setCurrentStep(1);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
@ -60,7 +105,88 @@ const MakeSubscription = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="container-fluid bg-light-secondary min-vh-100 p-2">
|
||||
<>
|
||||
<nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top custom-navbar py-2 mb-md-1 mb-12 ">
|
||||
<div className="container-fluid px-4">
|
||||
<a
|
||||
className="navbar-brand fw-bold text-green d-flex align-items-center"
|
||||
href="#"
|
||||
>
|
||||
<span className="text-blue">OnField</span>
|
||||
<span>Work</span>
|
||||
<span className="text-dark">.com</span>
|
||||
</a>
|
||||
|
||||
<button
|
||||
className="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
className="collapse navbar-collapse justify-content-end"
|
||||
id="navbarNav"
|
||||
>
|
||||
<ul className="navbar-nav me-4">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link fw-semibold" href="#">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link fw-semibold" href="#features">
|
||||
Features
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link fw-semibold" href="#pricing">
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link fw-semibold" href="#about">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link fw-semibold" href="#faq">
|
||||
FAQ
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link fw-semibold" href="#contact">
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Auth Buttons */}
|
||||
<ul className="navbar-nav align-items-center">
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="btn btn-outline-success btn-sm px-3 fw-semibold"
|
||||
href="/auth/login"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item ms-2">
|
||||
<a className="btn btn-success btn-sm px-3 fw-semibold" href="#">
|
||||
Get Started
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="pt-5 d-block align-items-start mt-8 mt-2">
|
||||
<SubscriptionLayout
|
||||
configStep={checkOut_Steps}
|
||||
currentStep={currentStep}
|
||||
@ -68,6 +194,7 @@ const MakeSubscription = () => {
|
||||
stepStatus={stepStatus}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -35,6 +35,7 @@ const localVariablesSlice = createSlice({
|
||||
selfTenant: {
|
||||
tenantEnquireId: null,
|
||||
planId: null,
|
||||
details:null,
|
||||
},
|
||||
},
|
||||
reducers: {
|
||||
@ -106,6 +107,8 @@ const localVariablesSlice = createSlice({
|
||||
action.payload.tenantEnquireId ?? state.selfTenant.tenantEnquireId;
|
||||
state.selfTenant.planId =
|
||||
action.payload.planId ?? state.selfTenant.planId;
|
||||
state.selfTenant.details =
|
||||
action.payload.details ?? state.selfTenant.details;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user