PK!A7��nimport React, { useState, useEffect } from "react"; import tw from "twin.macro"; import { Link, useParams, useNavigate } from "react-router-dom"; import Images from "../Images"; import { useMutation, useQuery } from "react-query"; import axios from "axios"; import Config from "../Config"; import Loading from "../Components/Loading"; import { Page, BoxContainer, BoxTitle, Underline, ErrorText, } from "../Components/Styles/PageStyles"; import NotFoundModel from "../Components/NotFoundModel"; import { SmallBtn } from "../Components/Styles/InputStyles"; import DeleteModel from "../Components/ContactList/DeleteModel"; import { useDispatch, useSelector } from "react-redux"; import { ForUs } from "../Config"; import EditDeviceModel from "../Components/ContactList/EditDeviceModel"; import SingleEntry from "../Components/ContactList/SingleEntry"; import { MdAdd } from "react-icons/md"; import { HiUpload } from "react-icons/hi"; import { toast } from "react-toastify"; // import styled from "styled-components"; import { css } from "styled-components/macro"; import Checkbox from "rc-checkbox"; import { Save_Plan_Data } from "../Redux/actions"; import PaymentModel from "../Components/PaymentModel"; import PlanDetailsModal from "../Components/Plan/PlainDetailsModal"; const Plans = () => { const user = useSelector((state) => state.UserReducer.user); const dispatch = useDispatch(); const navigate = useNavigate(); const [totalPrice, setTotalPrice] = useState(0); const [paymentLoading, setPaymentLoading] = useState(false); const [selectedPlan, setSelectedPlan] = useState([]); const [isModalOpen, setIsModalOpen] = useState(false); const handleBuyNowClick = (plan) => { setSelectedPlan([plan]); // Wrap the selected plan in an array const encodedPlan = encodeURIComponent(JSON.stringify(plan)); // Encode selected plan navigate(`/cms/plans/checkout?plan=${encodedPlan}`); }; // const handleBuyNowClick = (plan) => { // setSelectedPlan(plan); // setIsModalOpen(true); // }; const closeModal = () => { setIsModalOpen(false); }; const [checkedPlan, setCheckedPlan] = useState({ SMS: "", EMAIL: "", VOICE: "", }); const [showPaymentOptions, setShowPaymentOptions] = useState(false); // useEffect(() => { // calculateTotalPrice(); // }, [selectedPlan]); // ----- Getting Initial Data ------ const fetchFunction = async () => await axios.get( `${Config.nodeApiUrl}/customer/getPlans`, Config.AxiosConfig ); const { isLoading, error, data, refetch } = useQuery( "planList", fetchFunction ); // const calculateTotalPrice = () => { // let newTotalPrice = 0; // selectedPlan?.map((plan) => { // newTotalPrice += parseFloat(plan.range) * parseFloat(plan.price); // }); // setTotalPrice(newTotalPrice.toFixed(2)); // }; const SubmitHandler = () => { dispatch(Save_Plan_Data(selectedPlan)); // navigate("/cms/plans/checkout"); setShowPaymentOptions(true); }; const triggerMOMOPayment = async (mobile, type) => { try { setPaymentLoading(true); const encrypted = btoa( `${Config.MTN_MOMO_Client_ID}:${Config.MTN_MOMO_SECRET}` ); const headers = { authorization: `Bearer ${encrypted}`, }; const body = { amount: totalPrice, msisdn: mobile, description: "TXT CONNECT", }; const res = await axios.post(Config.MOMO.collection, body, { headers }); const RefrenceId = res.data.RefrenceId; addPaymentToDB(RefrenceId, body); let count = 0; const IntervalFunction = setInterval(async function () { let checkResp = await checkingPayStatus(RefrenceId, headers); count++; const result = checkResp?.data?.status; if (result === "SUCCESS") { clearInterval(IntervalFunction); setShowPaymentOptions(false); setPaymentLoading(false); toast.success("Your Payment has been successfully processed"); updatePaymentStatus(RefrenceId, body, Config.paymentStatus.success); } if (result === "FAILED") { clearInterval(IntervalFunction); setShowPaymentOptions(false); setPaymentLoading(false); toast.error("Your Payment has been failed"); updatePaymentStatus(RefrenceId, body, Config.paymentStatus.failed); } if (count >= Config.checkPaymentStatusLimit) { clearInterval(IntervalFunction); setPaymentLoading(false); setShowPaymentOptions(false); toast.warning("Your Payment is in pending state"); } }, Config.checkPaymentStatusTimeInterval); } catch (error) { // console.log("GOT AN ERROR (PAYMENT): ", error); setPaymentLoading(false); toast.error("Your payment could not be processed"); } }; const checkingPayStatus = (RefrenceId, headers) => axios.get(`${Config.MOMO.getstatus}/${RefrenceId}`, { headers, }); const addPaymentToDB = async (RefrenceId, collectionBody) => { let smsPlan = "na"; let smsQuantity = 0; let emailPlan = "na"; let emailQuantity = 0; let voicePlan = "na"; let voiceQuantity = 0; selectedPlan.map((plan) => { if (plan.planName === "Basic") { smsPlan = plan.packName; smsQuantity = plan.range; } else if (plan.planName === "Premium)") { emailPlan = plan.packName; emailQuantity = plan.range; } else if (plan.planName === "Business") { voicePlan = plan.packName; voiceQuantity = plan.range; } }); const body = { refrenceId: RefrenceId, amount: collectionBody.amount, msisdn: collectionBody.msisdn, smsPlan, smsQuantity, emailPlan, emailQuantity, voicePlan, voiceQuantity, }; const res = await axios.post( `${Config.nodeApiUrl}/payment/addPayment`, body, Config.AxiosConfig ); }; const updatePaymentStatus = async (RefrenceId, collectionBody, status) => { let smsPlan = "na"; let smsQuantity = 0; let emailPlan = "na"; let emailQuantity = 0; let voicePlan = "na"; let voiceQuantity = 0; selectedPlan.map((plan) => { if (plan.planName === "Basic (Upto 249000)") { smsPlan = plan.packName; smsQuantity = plan.range; } else if (plan.planName === "Premium (Upto 499000)") { emailPlan = plan.packName; emailQuantity = plan.range; } else if (plan.planName === "Business (Above 1000000)") { voicePlan = plan.packName; voiceQuantity = plan.range; } }); const body = { refrenceId: RefrenceId, amount: collectionBody.amount, msisdn: collectionBody.msisdn, smsPlan, smsQuantity, emailPlan, emailQuantity, voicePlan, voiceQuantity, status, }; const res = await axios.post( `${Config.nodeApiUrl}/payment/updateStatus`, body, Config.AxiosConfig ); }; return (
SMS Plans
{isModalOpen && ( )} {showPaymentOptions && ( )} {!isLoading && ( <> {data?.data?.map((plan, index) => ( {!plan.featured && ( )} Choose Suitable Plan {/* {plan.name} */} {/* {plan.subName} */}

Plan Name

{" "}

SMS Units

{" "}

Price Per Unit

{" "} {/*

Buy Now

{" "} */} {plan?.packs?.map((pack, index) => (

{pack?.packName}

{pack?.range < 249001 && " 0-249K"} {pack?.range >= 249001 && pack?.range <= 499000 && " 249K-499K"} {pack?.range > 499000 && " above 499K"} {/* {pack?.range} */}

{pack?.price} ZMW

{/* handleBuyNowClick(pack)} > Buy Plan */} ))} {/* */} {/* */} ))} Buy Plan )} {isLoading && } ); }; const Title = tw.h1`text-2xl text-gray-800 whitespace-nowrap font-medium`; const PlansContainer = tw.div`flex justify-between flex-col lg:flex-row items-center lg:items-stretch lg:justify-center relative`; const Plan = tw.div`w-full max-w-2xl mt-10 lg:mr-8 lg:last:mx-0 text-center px-8 rounded-lg shadow relative pt-2 text-gray-900 bg-white flex flex-col`; const PlanHighlight = tw.div`rounded-t-lg absolute top-0 inset-x-0 h-2`; const PlanHeader = tw.div`flex flex-col leading-relaxed py-8`; const PlanPrice = tw.p`font-bold text-xl my-1`; const PlanDuration = tw.p`text-gray-500 font-bold tracking-widest`; const PlanFeatures = tw.div`flex flex-col -mx-8 px-8 py-8 border-t-2 border-b-2 flex-1`; const PlanFeature = tw.p`mt-5 first:mt-0 text-sm flex justify-between items-center text-gray-600`; const PlanMainFeature = tw.p`text-lg font-bold tracking-wide`; const PlanAction = tw.div`flex items-center justify-center w-full mt-5`; const cyanButton = tw.button`px-8 py-3 font-bold rounded bg-cyan-500 text-gray-100 hocus:bg-cyan-700 hocus:text-gray-200 focus:outline-none transition duration-300`; const BuyNowButton = tw.button`px-12 py-3 font-bold rounded bg-cyan-500 text-gray-100 hocus:bg-cyan-700 hocus:text-gray-200 focus:outline-none transition duration-300 rounded-full uppercase tracking-wider h-12 px-16 flex items-center justify-center text-sm hover:shadow-xl transform hocus:translate-x-px hocus:-translate-y-px `; const BuyNow= tw.button`md:px-3 md:py-2 px-1 font-bold bg-cyan-500 text-gray-100 hocus:bg-cyan-700 hocus:text-gray-200 focus:outline-none transition duration-300 rounded-full tracking-wider flex items-center justify-center `; const highlightGradientsCss = [ css` background: rgb(56, 178, 172); background: linear-gradient( 115deg, rgba(56, 178, 172, 1) 0%, rgba(129, 230, 217, 1) 100% ); `, css` background: rgb(56, 178, 172); background-image: linear-gradient( 115deg, #6415ff, #7431ff, #8244ff, #8e56ff, #9a66ff ); `, css` background: rgb(245, 101, 101); background: linear-gradient( 115deg, rgba(245, 101, 101, 1) 0%, rgba(254, 178, 178, 1) 100% ); `, ]; export default Plans;