360 lines
14 KiB
JavaScript
360 lines
14 KiB
JavaScript
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";
|
||
import SelectedPlanSkeleton from "./SelectedPlanSkeleton";
|
||
import { error } from "pdf-lib";
|
||
|
||
const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
|
||
const { frequency, planName } = useParams();
|
||
const [selectedFrequency, setSelectedFrequency] = useState(
|
||
parseInt(frequency)
|
||
);
|
||
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,
|
||
isLoading,
|
||
error,
|
||
refetch,
|
||
isRefetching,
|
||
} = useSubscription(selectedFrequency);
|
||
|
||
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, frequency: selectedFrequency })
|
||
);
|
||
}
|
||
}, [plans, selectedPlan, dispatch, selectedFrequency]);
|
||
|
||
const handleNextStep = () => {
|
||
dispatch(setSelfTenant({ frequency: selectedFrequency }));
|
||
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>
|
||
<div className="form-check form-check-inline mt-4">
|
||
<input
|
||
className="form-check-input"
|
||
type="radio"
|
||
name="frequencyOptions"
|
||
id="frequencyMonthly"
|
||
value={0}
|
||
checked={selectedFrequency === 0}
|
||
onChange={(e) =>
|
||
setSelectedFrequency(Number(e.target.value))
|
||
}
|
||
/>
|
||
<label
|
||
className="form-check-label"
|
||
htmlFor="frequencyMonthly"
|
||
>
|
||
Monthly
|
||
</label>
|
||
</div>
|
||
|
||
<div className="form-check form-check-inline">
|
||
<input
|
||
className="form-check-input"
|
||
type="radio"
|
||
name="frequencyOptions"
|
||
id="frequencyQuarterly"
|
||
value={1}
|
||
checked={selectedFrequency === 1}
|
||
onChange={(e) =>
|
||
setSelectedFrequency(Number(e.target.value))
|
||
}
|
||
/>
|
||
<label
|
||
className="form-check-label"
|
||
htmlFor="frequencyQuarterly"
|
||
>
|
||
Quarterly
|
||
</label>
|
||
</div>
|
||
|
||
<div className="form-check form-check-inline">
|
||
<input
|
||
className="form-check-input"
|
||
type="radio"
|
||
name="frequencyOptions"
|
||
id="frequencyHalfYear"
|
||
value={2}
|
||
checked={selectedFrequency === 2}
|
||
onChange={(e) =>
|
||
setSelectedFrequency(Number(e.target.value))
|
||
}
|
||
/>
|
||
<label
|
||
className="form-check-label"
|
||
htmlFor="frequencyHalfYear"
|
||
>
|
||
Half-Yearly
|
||
</label>
|
||
</div>
|
||
|
||
<div className="form-check form-check-inline">
|
||
<input
|
||
className="form-check-input"
|
||
type="radio"
|
||
name="frequencyOptions"
|
||
id="frequencyYearly"
|
||
value={3}
|
||
checked={selectedFrequency === 3}
|
||
onChange={(e) =>
|
||
setSelectedFrequency(Number(e.target.value))
|
||
}
|
||
/>
|
||
<label className="form-check-label" htmlFor="frequencyYearly">
|
||
Yearly
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{isError && (
|
||
<div className="col-12 col-md text-center">
|
||
<p className="text-muted">{error?.message}</p>
|
||
<small>{error?.name}</small>
|
||
<small
|
||
className={`text-muted ${
|
||
isRefetching ? "cursor-notallowed" : "cursor-pointer"
|
||
}`}
|
||
onClick={refetch}
|
||
>
|
||
{isRefetching ? (
|
||
<>
|
||
<i
|
||
className={`bx bx-loader-alt ${
|
||
isRefetching ? "bx-spin" : ""
|
||
}`}
|
||
></i>{" "}
|
||
Retrying...
|
||
</>
|
||
) : (
|
||
"Try to refetch"
|
||
)}
|
||
</small>
|
||
</div>
|
||
)}
|
||
|
||
{isLoading ? (
|
||
<SelectedPlanSkeleton />
|
||
) : (
|
||
<>
|
||
{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(selectedFrequency)}
|
||
</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;
|