classify web
This commit is contained in:
Husanjonazamov
224
components/PagesComponent/Subscription/ProfileSubscription.jsx
Normal file
224
components/PagesComponent/Subscription/ProfileSubscription.jsx
Normal file
@@ -0,0 +1,224 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import AddListingPlanCard from "@/components/PagesComponent/Cards/AddListingPlanCard";
|
||||
import {
|
||||
assigFreePackageApi,
|
||||
getPackageApi,
|
||||
getPaymentSettingsApi,
|
||||
} from "@/utils/api";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
} from "@/components/ui/carousel";
|
||||
import { t } from "@/utils";
|
||||
import PaymentModal from "./PaymentModal";
|
||||
import AddListingPlanCardSkeleton from "@/components/Skeletons/AddListingPlanCardSkeleton";
|
||||
import { CurrentLanguageData, getIsRtl } from "@/redux/reducer/languageSlice";
|
||||
import { useSelector } from "react-redux";
|
||||
import { toast } from "sonner";
|
||||
import BankDetailsModal from "./BankDetailsModal";
|
||||
import { getIsFreAdListing } from "@/redux/reducer/settingSlice";
|
||||
import { useNavigate } from "@/components/Common/useNavigate";
|
||||
|
||||
const ProfileSubscription = () => {
|
||||
const isRTL = useSelector(getIsRtl);
|
||||
const { navigate } = useNavigate();
|
||||
const CurrentLanguage = useSelector(CurrentLanguageData);
|
||||
const [listingPackages, setListingPackages] = useState([]);
|
||||
|
||||
const hasListingDiscount = listingPackages?.some(
|
||||
(p) => p?.discount_in_percentage > 0
|
||||
);
|
||||
|
||||
const [adPackages, setAdPackages] = useState([]);
|
||||
const hasAdDiscount = adPackages.some((p) => p.discount_in_percentage > 0);
|
||||
const [showPaymentModal, setShowPaymentModal] = useState(false);
|
||||
const [selectedPackage, setSelectedPackage] = useState(null);
|
||||
const [isListingPackagesLoading, setIsListingPackagesLoading] =
|
||||
useState(false);
|
||||
const [isAdPackagesLoading, setIsAdPackagesLoading] = useState(false);
|
||||
const [packageSettings, setPackageSettings] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const isFreeAdListing = useSelector(getIsFreAdListing);
|
||||
const [toggleApiAfterPaymentSuccess, setToggleApiAfterPaymentSuccess] = useState(false)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!isFreeAdListing) {
|
||||
handleFetchListingPackages();
|
||||
}
|
||||
handleFetchFeaturedPackages();
|
||||
}, [CurrentLanguage?.id, toggleApiAfterPaymentSuccess]);
|
||||
|
||||
useEffect(() => {
|
||||
if (showPaymentModal) {
|
||||
handleFetchPaymentSetting();
|
||||
}
|
||||
}, [showPaymentModal]);
|
||||
|
||||
const handleFetchPaymentSetting = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const res = await getPaymentSettingsApi.getPaymentSettings();
|
||||
const { data } = res.data;
|
||||
setPackageSettings(data);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFetchListingPackages = async () => {
|
||||
try {
|
||||
setIsListingPackagesLoading(true);
|
||||
const res = await getPackageApi.getPackage({ type: "item_listing" });
|
||||
setListingPackages(res?.data?.data);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setIsListingPackagesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFetchFeaturedPackages = async () => {
|
||||
try {
|
||||
setIsAdPackagesLoading(true);
|
||||
const res = await getPackageApi.getPackage({ type: "advertisement" });
|
||||
setAdPackages(res.data?.data);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setIsAdPackagesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePurchasePackage = (pckg) => {
|
||||
if (pckg?.final_price === 0) {
|
||||
assignPackage(pckg.id);
|
||||
} else {
|
||||
setShowPaymentModal(true);
|
||||
setSelectedPackage(pckg);
|
||||
}
|
||||
};
|
||||
|
||||
const assignPackage = async (id) => {
|
||||
try {
|
||||
const res = await assigFreePackageApi.assignFreePackage({
|
||||
package_id: id,
|
||||
});
|
||||
const data = res?.data;
|
||||
if (data?.error === false) {
|
||||
toast.success(data.message);
|
||||
navigate("/");
|
||||
} else {
|
||||
toast.error(data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(data.message);
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{isListingPackagesLoading ? (
|
||||
<AddListingPlanCardSkeleton />
|
||||
) : (
|
||||
<>
|
||||
{listingPackages.length > 0 && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<h1 className="text-2xl font-medium">{t("adListingPlan")}</h1>
|
||||
<div className="relative">
|
||||
<Carousel
|
||||
key={isRTL ? "rtl" : "ltr"}
|
||||
opts={{
|
||||
align: "start",
|
||||
containScroll: "trim",
|
||||
direction: isRTL ? "rtl" : "ltr",
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<CarouselPrevious className="flex absolute top-1/2 ltr:left-2 rtl:right-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full z-10" />
|
||||
<CarouselNext className="flex absolute top-1/2 ltr:right-2 rtl:left-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full z-10" />
|
||||
<CarouselContent
|
||||
className={`gap-4 ${hasListingDiscount ? "pt-6" : ""}`}
|
||||
>
|
||||
{listingPackages?.map((pckg) => (
|
||||
<CarouselItem
|
||||
key={pckg.id}
|
||||
className="basis-[100%] sm:basis-3/4 md:basis-1/2 lg:basis-[66.66%] xl:basis-[45%] first:pl-4"
|
||||
>
|
||||
<AddListingPlanCard
|
||||
pckg={pckg}
|
||||
handlePurchasePackage={handlePurchasePackage}
|
||||
/>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isAdPackagesLoading ? (
|
||||
<AddListingPlanCardSkeleton />
|
||||
) : (
|
||||
<div
|
||||
className={`flex flex-col gap-4 ${listingPackages.length > 0 ? "mt-8" : ""
|
||||
}`}
|
||||
>
|
||||
<h1 className="text-2xl font-medium">{t("featuredAdPlan")}</h1>
|
||||
<div className="relative">
|
||||
<Carousel
|
||||
key={isRTL ? "rtl" : "ltr"}
|
||||
opts={{
|
||||
align: "start",
|
||||
containScroll: "trim",
|
||||
direction: isRTL ? "rtl" : "ltr",
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<CarouselPrevious className="flex absolute top-1/2 ltr:left-2 rtl:right-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full z-10" />
|
||||
<CarouselNext className="flex absolute top-1/2 ltr:right-2 rtl:left-2 rtl:scale-x-[-1] -translate-y-1/2 bg-primary text-white rounded-full z-10" />
|
||||
|
||||
<CarouselContent
|
||||
className={`gap-4 ${hasAdDiscount ? "pt-6" : ""}`}
|
||||
>
|
||||
{adPackages?.map((pckg) => (
|
||||
<CarouselItem
|
||||
key={pckg.id}
|
||||
className="basis-[100%] sm:basis-3/4 md:basis-1/2 lg:basis-[66.66%] xl:basis-[45%] first:pl-4"
|
||||
>
|
||||
<AddListingPlanCard
|
||||
pckg={pckg}
|
||||
handlePurchasePackage={handlePurchasePackage}
|
||||
/>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<PaymentModal
|
||||
showPaymentModal={showPaymentModal}
|
||||
setShowPaymentModal={setShowPaymentModal}
|
||||
selectedPackage={selectedPackage}
|
||||
packageSettings={packageSettings}
|
||||
isLoading={isLoading}
|
||||
setToggleApiAfterPaymentSuccess={setToggleApiAfterPaymentSuccess}
|
||||
/>
|
||||
<BankDetailsModal
|
||||
packageId={selectedPackage?.id}
|
||||
bankDetails={packageSettings?.bankTransfer}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileSubscription;
|
||||
Reference in New Issue
Block a user