Notes

"use client";
import React, { useState, useEffect } from "react";
import Payment from "../payment/page";
import Link from "next/link";
import { apiUrl } from "@/app/constant/constant";
import { FcCheckmark } from "react-icons/fc";

const Subscription = () => {
const [subscription, setSubscription] = useState({});
const [selectedCategories, setSelectedCategories] = useState([]);
const [selectedCount, setSelectedCount] = useState(0);
const [storedCategories, setStoredCategories] = useState([]);
const [userRole, setUserRole] = useState(null);

const getCategoriesInfo = async () => {

try {
const selectedCategories = JSON.parse(localStorage.getItem('selectedCatIds'));

//console.log(selectedCategories);
const response = await fetch(`${apiUrl}api/category`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
},
// body: formBody
});

const responseJson = await response.json();
//console.log(responseJson);

if (responseJson.success === "true") {
// const res = responseJson.category.map((item) => ({
// ...item,
// isSelected: selectedCategories.includes(item.id) ? true:false ,
// }));
// setSelectedCategories(res);
let jsonData = responseJson.category;
let tempStoredArray = [];
let tempSelectedArray = [];
for(let i=0; i< jsonData.length; i++){
if(selectedCategories.includes(jsonData[i].id)){
tempStoredArray.push(jsonData[i]);
}
else{
tempSelectedArray.push(jsonData[i]);
}
}
//console.log(tempSelectedArray);
// console.log(tempStoredArray);
setSelectedCategories(tempSelectedArray);
setStoredCategories(tempStoredArray);
}
} catch (error) {
console.error(error);
}
};

// if(responseJson.includes(selectedCatIds)){
// localStorage.setItem("selectedCatIds", JSON.stringify(selectedCatIds));
// }else {

// }

useEffect(() => {
getCategoriesInfo();
}, []);



const handleCategoryClick = (selectedCategoryId) => {


let data = selectedCategories.filter((item) => item.isSelected);
//console.log(selectedCategories);
if(data.length==0){
const updatedCategories = selectedCategories.map((item) =>
(item.id === selectedCategoryId) ? { ...item, isSelected: !item.isSelected } : item
);
setSelectedCategories(updatedCategories);
let udata = updatedCategories.filter((item) => item.isSelected);
const dataID = udata[0].id;
console.log("dataID:-", dataID);
console.log("udata:-", udata);

}


if(data.length == 1){
if(data[0].id == selectedCategoryId){
const updatedCategories = selectedCategories.map((item) =>
(item.id === selectedCategoryId) ? { ...item, isSelected: !item.isSelected} : item
);
setSelectedCategories(updatedCategories);
console.log(updatedCategories);
const updatedCategoriesIDS = updatedCategories.map((item) =>
(item.id === updatedCategories) ? {...item, isSelected: !item.isSelected} : item
);
console.log(updatedCategoriesIDS);
}
}

};



const getSubscriptions = async () => {
try {
const token = JSON.parse(sessionStorage.getItem("token"));
//console.log(token);

const response = await fetch(`${apiUrl}api/subscriptioncharge`, {
method: "POST",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token.access_token}`,
},
// body: formBody

});

const responseJson = await response.json();

if (responseJson.success === "true") {
const res = responseJson.subscription_charges;
setSubscription(res);
}

} catch (error) {
console.error(error);
}
};

//console.log("subscription:-", subscription);

useEffect(() => {
getSubscriptions();
getCategoriesInfo();
// const userRole = JSON.parse(sessionStorage.getItem('role'));
setUserRole(JSON.parse(sessionStorage.getItem('role')));
//console.log("userRole:-", userRole);
}, []);

useEffect(() => {

}, [selectedCount]);
//console.log("userRole:-", userRole);

return (
<div>
<section
className="banner"
style={{
backgroundImage: `url(/assets/img/banner3.jpg)`,
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
width: "100%",
height: "540px",
}}
>
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="banner-caption">
<h3>SUBSCRIPTION</h3>
<ul className="breadcrumb">
<li>
<Link href="/">Start</Link>
</li>
<li>SUBSCRIPTION</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section className="py-5 bg-primary">

<div className="container">
<div className="fbox-wrapper text-center">
<h3>Selected Categories</h3>
<div className="row row-cols-1 row-cols-md-2 row-cols-lg-4">
{storedCategories && storedCategories.map((category, index) => (
<div className="col" key={index}>
<div className={`fbox-6 fb-1 wow fadeInUp active`}
>
<div className="img-style">
<img
src={`${apiUrl}storage/category/${category?.cat_image}`}
alt=""
className="img-fluid"
/>
</div>
<div className="check-icon">
<FcCheckmark/>
</div>
<div className="fbox-txt">
<h6 className="s-20">{category?.cat_name}</h6>
</div>
</div>
</div>
))}
</div>

</div>
</div>

<div className="container">
<div className="fbox-wrapper text-center">
<div className="row row-cols-1 row-cols-md-2 row-cols-lg-4">
<h3>Choose one more category</h3>
{selectedCategories && selectedCategories.map((category, index) => (
<div className="col" key={index}>
<div className={`fbox-6 fb-1 wow fadeInUp ${category.isSelected ? 'active' : ''}`}
onClick={() => handleCategoryClick(category.id)}>
<div className="img-style">
<img
src={`${apiUrl}storage/category/${category?.cat_image}`}
alt=""
className="img-fluid"
/>
</div>
<div className="check-icon">
<FcCheckmark/>
</div>
<div className="fbox-txt">
<h6 className="s-20">{category?.cat_name}</h6>
</div>
</div>
</div>
))}
</div>

</div>
</div>





<div className="container">
<div className="row">
{Number(userRole) === 4 ? (
<div className="col-lg-4">
<div className="card bg-success mb-5 mb-lg-0 rounded-lg shadow">
<div className="card-header">

<h6 className="h1 text-white text-center">
{subscription?.one_time}<span className="h6 text-white-50">/ one time</span>
</h6>
</div>
<div className="card-body bg-light rounded-bottom">
<ul className="list-unstyled mb-4">
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-success"></i>
</span>
Single User
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-success"></i>
</span>
5GB Storage
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-success"></i>
</span>
Unlimited Public Projects
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-success"></i>
</span>
Community Access
</li>
<li className="text-muted mb-3">
<span className="mr-3">
<i className="fas fa-times"></i>
</span>
Unlimited Private Projects
</li>
<li className="text-muted mb-3">
<span className="mr-3">
<i className="fas fa-times"></i>
</span>
Dedicated Phone Support
</li>
<li className="text-muted mb-3">
<span className="mr-3">
<i className="fas fa-times"></i>
</span>
Free Subdomain
</li>
<li className="text-muted mb-3">
<span className="mr-3">
<i className="fas fa-times"></i>
</span>
Monthly Status Reports
</li>
</ul>
<Payment amount={100} currencyCode="EUR" />

</div>

</div>
</div>
) : (
<>
<div className="col-lg-4">
<div className="card bg-warning mb-5 mb-lg-0 rounded-lg shadow">
<div className="card-header">
<h5 className="card-title text-white-50 text-uppercase text-center">
Plus
</h5>
<h6 className="h1 text-white text-center">
{subscription?.one_month}<span className="h6 text-white-50">/Monthly</span>
</h6>
</div>
<div className="card-body bg-light rounded-bottom">
<ul className="list-unstyled mb-4">
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-warning"></i>
</span>
<strong>5 Users</strong>
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-warning"></i>
</span>
50GB Storage
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-warning"></i>
</span>
Unlimited Public Projects
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-warning"></i>
</span>
Community Access
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-warning"></i>
</span>
Unlimited Private Projects
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-warning"></i>
</span>
Dedicated Phone Support
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-warning"></i>
</span>
Free Subdomain
</li>
<li className="text-muted mb-3">
<span className="mr-3">
<i className="fas fa-times"></i>
</span>
Monthly Status Reports
</li>
</ul>
<Payment amount={900} currencyCode="EUR" />
</div>
</div>
</div>
<div className="col-lg-4">
<div className="card bg-danger mb-5 mb-lg-0 rounded-lg shadow">
<div className="card-header">
<h5 className="card-title text-white-50 text-uppercase text-center">
Pro
</h5>
<h6 className="h1 text-white text-center">
{subscription?.yearly}<span className="h6 text-white-50">/Yearly</span>
</h6>
</div>
<div className="card-body bg-light rounded-bottom">
<ul className="list-unstyled mb-4">
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-danger"></i>
</span>
<strong>Unlimited Users</strong>
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-danger"></i>
</span>
150GB Storage
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-danger"></i>
</span>
Unlimited Public Projects
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-danger"></i>
</span>
Community Access
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-danger"></i>
</span>
Unlimited Private Projects
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-danger"></i>
</span>
Dedicated Phone Support
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-danger"></i>
</span>
<strong>Unlimited</strong> Free Subdomains
</li>
<li className="mb-3">
<span className="mr-3">
<i className="fas fa-check text-danger"></i>
</span>
Monthly Status Reports
</li>
</ul>
<Payment amount={2900} currencyCode="EUR" />
</div>
</div>
</div>
</>
)}
</div>
</div>
</section>
</div>
);
};

export default Subscription;