+ {/*
+
+
*/}
+
+ {/*
*/}
+
+ {fieldData?.map((item, index) => (
+ item.FieldName == "Overview1Title" && (
+
0 ? 'overviewpreTitleData gradient- btn-shine' : 'empTitleData'} style={item.FieldValue.length > 0 ? { fontFamily: CurrentText["head"],width:"50vw" } : null}>{item.FieldValue.length > 0 ? item.FieldValue : ''}
+ )
+ ))
+ }
+ {fieldData?.map((item, index) => (
+ // item.FieldName == "Overview1Title" ? (
+ //
0 ? null : 'empTitleData'} style={item.FieldValue.length > 0 ? { fontFamily: CurrentText["head"] } : null}>{item.FieldValue.length > 0 ? item.FieldValue : ''}
+ // ) :
+ item.FieldName == "Overview1SubTitle" ? (
+
0 ? 'preSubTitleData' : 'empSubTitleData'} style={item.FieldValue.length > 0 ? { fontFamily: CurrentText["para"] } : null}>{item.FieldValue.length > 0 ? item.FieldValue : ''}
+ ) : item.FieldName == "Overview1ButtonText" ? (
+
0 ? null : 'empButtonTextData'} style={item.FieldValue?.length == 0 ? { backgroundColor: CurrentColor["darkColor"] } : null}>
+ {item.FieldValue?.length > 0 ?
+
getSignIn()}>{item.FieldValue}{ }
+ : ''}
+
+
+ ) : item.FieldName == "Overview1AppLinkText" ? (
+
0 ? 'preAppLinkTextData' : 'empSubTitleData'} style={item.FieldValue.length > 0 ? { fontFamily: CurrentText["para"] } : null}>{item.FieldValue.length > 0 ? item.FieldValue : ''}
+ ) : null
+ ))}
+
+ {fieldData?.map((item, index) => (
+ item.FieldName == "Overview1PlayStoreLink" ? (
+
0 && 'preLinkData'}>
+ {item.FieldValue?.length > 0 &&
+ {item.FieldValue?.length > 0 &&
0 ? playStore : tempBanner} />}
+
+
}
+
0 ? { fontFamily: CurrentText["para"] } : null}>
+ {item.FieldValue?.length > 0 ?
Playstore : ''}
+
+
+
+
+ ) : item.FieldName == "Overview1AppStoreLink" ? (
+
0 && 'preLinkData'}>
+ {item.FieldValue?.length > 0 &&
+
0 ? appStore : tempBanner} />
+
+
}
+
0 ? { fontFamily: CurrentText["para"] } : null}>
+ {item.FieldValue?.length > 0 ?
Appstore : ''}
+ {/*
Appstore */}
+
+
+ ) : item.FieldName == "Overview1PosLink" ? (
+
0 && 'preLinkData'}>
+ {item.FieldValue?.length > 0 &&
+
0 ? android : tempBanner}>
+
+
}
+
+
+ ) : null
+ ))}
+
+
+
+
+ {fieldData?.map((item, index) => (
+ item.FieldName == "Overview1BannerImage" ? (
+
0 ? props?.Preview? "Overview1ImagePreview":"Overview1ImageDiv":''}>
+ {/*
0 ? "Overview1ImageDiv":''}> */}
+
0 ? 'preBannerImageData' : 'empBannerImageData'} src={item.FieldValue?.length > 0 ? item.FieldValue : tempBanner} width={'100%'}>
+
+ ) : null
+ ))}
+
+
+
+
+
+
+
+ >
+ )
+
+
+
+
+
+
+
+}
+
+
+export default PreviewOverView1
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView2.jsx b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView2.jsx
new file mode 100644
index 0000000..df8f2ad
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView2.jsx
@@ -0,0 +1,281 @@
+import React, { useState } from 'react';
+import { useSelector } from "react-redux";
+import { Button } from 'antd';
+import { ArrowRightOutlined } from '@ant-design/icons';
+import tempBanner from "../../../../Images/TemplateImages/logo.svg"
+import playStore from "../../../../Images/playstr1.png"
+import appStore from "../../../../Images/appstr1.png"
+import android from "../../../../Images/android1.png"
+import { changeCurrentColorValue, changeCurrentTextValue } from "../../../../features/themeChange/themeChange.js";
+import { getSession } from "../../../../Services/others";
+import { Messages } from "../../../../Components/Notifications/Messages";
+import "../../../../styles/template/overView/overView2.scss";
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+// import defaultImage from '../../../../Images/defaultImage.png';
+
+const subDirectory = import.meta.env.BASE_URL;
+
+
+
+
+const PreviewOverView2 = (props) => {
+ const navigate = useNavigate();
+ const changeCurrentColorValues = useSelector(changeCurrentColorValue);
+
+
+ const CurrentColor = useSelector(changeCurrentColorValue);
+ const CurrentText = useSelector(changeCurrentTextValue);
+
+ const [messageData, setMessageData] = useState();
+ const [messageType, setMessageType] = useState();
+
+ const stateInitailFieldData = [
+ {
+ 'FieldName': 'Overview2Title',
+ 'FieldValue': '',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2SubTitle',
+ 'FieldValue': '',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2ButtonText',
+ 'FieldValue': '',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2AppLinkText',
+ 'FieldValue': '',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2PlayStoreLink',
+ 'FieldValue': '',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2AppStoreLink',
+ 'FieldValue': '',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2PosLink',
+ 'FieldValue': '',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2BannerImage',
+ 'FieldValue': '',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2BannerVideo',
+ 'FieldValue': '',
+ 'FieldAddData': ''
+ },
+ ]
+
+ const fieldData = props.hasOwnProperty('data') ? props.data : stateInitailFieldData
+ const buttonFocusFunc = (e) => {
+ e.target.style.color = CurrentColor["darkColor"];
+ e.target.style.border = `1.8px solid ${CurrentColor["darkColor"]}`
+ }
+
+ const buttonBlurFunc = (e) => {
+ e.target.style.color = 'white'
+ }
+
+ const getSignIn = () => {
+ if (!getSession("UserId")) {
+ navigate(`${subDirectory}signin/`);
+
+ } else {
+ setMessageData("User Already Logged in");
+ setMessageType("success");
+ }
+ };
+
+ const onComplete = useCallback(() => {
+ setMessageData(null);
+ setMessageType(null);
+ }, []);
+ // const fieldData = [
+ // {
+ // 'FieldName':'Overview2Title',
+ // 'FieldValue':'POS App For Restaurant with & without GST fastest e-bill & normal Billing + KOT and Stock Management',
+ // 'FieldAddData':''
+ // },
+ // {
+ // 'FieldName':'Overview2SubTitle',
+ // 'FieldValue':'Restaurant POS Smart Ordering via QR Code and Send Bill Via through SMS or Whatsapp very fast within min.',
+ // 'FieldAddData':''
+ // },
+ // {
+ // 'FieldName':'Overview2ButtonText',
+ // 'FieldValue':'Get Started',
+ // 'FieldAddData':''
+ // },
+ // {
+ // 'FieldName':'Overview2AppLinkText',
+ // 'FieldValue':'Download Paypre Apps From',
+ // 'FieldAddData':''
+ // },
+ // {
+ // 'FieldName':'Overview2PlayStoreLink',
+ // 'FieldValue':'http://playstore.com',
+ // 'FieldAddData':''
+ // },
+ // {
+ // 'FieldName':'Overview2AppStoreLink',
+ // 'FieldValue':'http://appstore.com',
+ // 'FieldAddData':''
+ // },
+ // {
+ // 'FieldName':'Overview2PosLink',
+ // 'FieldValue':'http://posapp.com',
+ // 'FieldAddData':''
+ // },
+ // {
+ // 'FieldName':'Overview2BannerImage',
+ // 'FieldValue':'https://saveme.live/paypre-image-api/upload?fileId=649bfe6906bfb6b6b99227ac.png',
+ // 'FieldAddData':''
+ // },
+ // {
+ // 'FieldName':'Overview2BannerVideo',
+ // 'FieldValue':'http://saveme.live/paypre-image-api/upload?fileId=64f083a906bfb6b6b992341b.mp4',
+ // 'FieldAddData':''
+ // },
+ // ]
+
+ return (
+ <>
+ {/* {fieldData.length==0 &&
+
+
+
No data available to display a preview
+
+ } */}
+
+
+ {fieldData?.map((item, index) => (
+ item.FieldName == "Overview2BannerVideo" && item.FieldValue?.length > 0 ?
+
+ (
+ <>
+
+
+
+ Your browser does not support the video tag.
+
+
+
+
+ >
+
+ ) : null
+ ))}
+
+ {fieldData?.map((item, index) => (
+ item.FieldName == "Overview2BannerImage" && item.FieldValue?.length > 0 ?
+ (
+
+ ) : null
+ ))}
+
+
+
+ {/*
*/}
+
+ {fieldData?.map((item, index) => (
+ item.FieldName == "Overview2Title" ? (
+
0 ? 'pre2TitleData btn-shine1 ' : 'emp2TitleData'} style={item.FieldValue.length > 0 ? { fontFamily: CurrentText["head"], color: "white" } : null}>{item.FieldValue.length > 0 ? item.FieldValue : ''}
+ ) : item.FieldName == "Overview2SubTitle" ? (
+
0 ? 'pre2SubTitleData' : 'emp2SubTitleData'} style={item.FieldValue.length > 0 ? { fontFamily: CurrentText["para"], color: "white" } : null}>{item.FieldValue.length > 0 ? item.FieldValue : ''}
+ ) : item.FieldName == "Overview2ButtonText" ? (
+
0 ? 'pre2ButtonTextData' : 'emp2ButtonTextData'} style={item.FieldValue?.length == 0 ? { backgroundColor: CurrentColor["darkColor"] } : null}>
+ {item.FieldValue.length > 0 ?
+
getSignIn()}>{item.FieldValue}{ }
+ : ''}
+
+
+ ) : item.FieldName == "Overview2AppLinkText" ? (
+
0 ? 'pre2AppLinkTextData' : 'emp2SubTitleData'} style={item.FieldValue.length > 0 || [] ? { fontFamily: CurrentText["para"], color: "white" } : null}>{item.FieldValue.length || [] > 0 ? item.FieldValue : ''}
+ ) : null
+ ))}
+
+ {fieldData?.map((item, index) => (
+ item.FieldName == "Overview2PlayStoreLink" ? (
+
0 && 'pre2LinkData'}>
+ {item.FieldValue?.length > 0 &&
+
0 ? playStore : tempBanner}>
+
+
}
+
0 ? { fontFamily: CurrentText["para"] } : null}>
+ {item.FieldValue?.length > 0 ?
Playstore : ''}
+
+
+
+ ) : item.FieldName == "Overview2AppStoreLink" ? (
+
0 && 'pre2LinkData'}>
+ {item.FieldValue?.length > 0 &&
+
0 ? appStore : tempBanner}>
+
+
}
+
0 ? { fontFamily: CurrentText["para"] } : null}>
+ {item.FieldValue?.length > 0 ?
Appstore : ''}
+
+
+ ) : item.FieldName == "Overview2PosLink" ? (
+
0 && 'pre2LinkData'}>
+ {item.FieldValue?.length > 0 &&
+
0 ? android : tempBanner}>
+
+
}
+
0 ? { fontFamily: CurrentText["para"] } : null}>
+ {item.FieldValue?.length > 0 ?
Playstore(Pos) : ''}
+
+
+ ) : null
+ ))}
+
+
+
+ {/*
+ {fieldData?.map((item, index) => (
+ item.FieldName == "Overview2BannerImage" ? (
+
+
0 ? 'pre2BannerImageData' : 'emp2BannerImageData'} src={item.FieldValue?.length > 0 ? item.FieldValue : tempBanner} width={'100%'} height={'100%'}>
+
+ ) : null
+ ))}
+
*/}
+
+
+
+ {/*
*/}
+
+
+
+ >
+ )
+
+
+
+
+
+
+
+}
+
+
+export default PreviewOverView2
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView3.jsx b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView3.jsx
new file mode 100644
index 0000000..99ec47e
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView3.jsx
@@ -0,0 +1,243 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useNavigate } from "react-router-dom";
+import { motion, useAnimation, useInView } from 'framer-motion';
+import { MdArrowForward } from 'react-icons/md';
+import './OverView3.scss';
+import tempBanner from '../../../../Images/TemplateImages/logo.svg';
+import playStore from '../../../../Images/playstr1.png';
+import appStore from '../../../../Images/appstr1.png';
+import android from '../../../../Images/android1.png';
+import { useSelector } from 'react-redux';
+import { changeCurrentColorValue, changeCurrentTextValue, getAllApplicationsData, selectedApplication, selectedApplicationName } from '../../../../features/themeChange/themeChange';
+import WebFont from 'webfontloader';
+
+
+const subDirectory = import.meta.env.BASE_URL;
+const HeroSection = (props) => {
+ const navigate = useNavigate();
+
+ const [fieldData, setFieldData] = useState([]);
+ useEffect(() => {
+ if (props.data && props.data.length > 0) setFieldData(props.data);
+ else setFieldData([]);
+ }, [props.data]);
+
+ // Video source
+ const videoField = fieldData.find(f => f.FieldName === 'Overview3BannerVideo');
+ const videoSrc = videoField && videoField.FieldValue ? videoField.FieldValue : '';
+ const changeCurrentColorValues = useSelector(changeCurrentColorValue);
+ const CurrentText = useSelector(changeCurrentTextValue);
+ const Application = useSelector(selectedApplication);
+ const AllApplicationsData = useSelector(getAllApplicationsData);
+ const AppNameValue = useSelector(selectedApplicationName);
+ const [AppName, setAppName] = useState(null);
+
+
+
+ // Scroll animation
+ const scrollContainerRef = useRef(null);
+ const isInView = useInView(scrollContainerRef, { once: false, amount: 0.3 });
+ const controls = useAnimation();
+ useEffect(() => {
+ let interval;
+ let currentPosition = 0;
+ const scrollContainer = scrollContainerRef.current;
+ if (scrollContainer) {
+ const totalHeight = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+ interval = setInterval(() => {
+ currentPosition += 1;
+ if (currentPosition > totalHeight) {
+ scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+ currentPosition = 0;
+ } else {
+ scrollContainer.scrollTo({ top: currentPosition, behavior: 'auto' });
+ }
+ }, 30);
+ }
+ return () => clearInterval(interval);
+ }, []);
+ useEffect(() => { if (isInView) controls.start('visible'); }, [controls, isInView]);
+
+ // Animation variants
+ const containerVariants = {
+ hidden: { opacity: 0 },
+ visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2 } }
+ };
+ const itemVariants = {
+ hidden: { y: 20, opacity: 0 },
+ visible: { y: 0, opacity: 1, transition: { duration: 0.5 } }
+ };
+
+ useEffect(() => {
+ let ApplicationsData = AllApplicationsData?.filter(
+ (a) => a?.AppId === Application?.AppId
+ );
+ setAppName(
+ ApplicationsData.length > 0
+ ? ApplicationsData[0]["AppName"]
+ : AppNameValue.length > 0
+ ? AppNameValue
+ : null
+ );
+ }, [Application]);
+
+ useEffect(() => {
+ if (CurrentText["head"], CurrentText["para"]) {
+ WebFont.load({
+ google: {
+ families: [CurrentText["head"], CurrentText["para"]] // Load the selected font
+ },
+ });
+ }
+
+ }, [CurrentText["head"], CurrentText["para"]]);
+
+
+ return (
+
+ {/* Background Video */}
+ {fieldData?.map((item, index) => (
+ item.FieldName === 'Overview3BannerVideo' && item.FieldValue?.length > 0 ? (
+
+
+ Your browser does not support the video tag.
+
+ ) : null
+ ))}
+ {/* Overlay */}
+
+ {/* Content */}
+
+
+
+ {/* Dynamic Title, Subtitle, Button, etc. */}
+ {fieldData?.map((item, index) => (
+ item.FieldName === 'Overview3Title' ? (
+ {item.FieldValue} {AppName}
+
+ ) : item.FieldName === 'Overview3SubTitle' ? (
+ {item.FieldValue}
+ ) : item.FieldName === 'Overview3ButtonText' ? (
+
+ navigate(`${subDirectory}signin`)}
+ >
+ {item.FieldValue}
+
+
+
+ Watch Demo
+
+
+ ) : null
+ ))}
+ {/* Stats (static for now, can be made dynamic) */}
+
+ {/*
+
+
98%
+
Uptime Reliability
+
+
+
24/7
+
Customer Support
+
+
+
40%
+
Operational Boost
+
+
*/}
+
+ {/* App/Playstore/Pos links (if any) */}
+
+ {fieldData?.map((item, index) => (
+ item.FieldName === 'Overview3PlayStoreLink' ? (
+
0 ? 'pre2LinkData' : ''}>
+ {item.FieldValue?.length > 0 &&
+
0 ? playStore : tempBanner} alt="playstore" />
+
}
+
0 ? { fontFamily: 'Inter' } : null}>
+ {item.FieldValue?.length > 0 ?
Playstore : ''}
+
+
+ ) : item.FieldName === 'Overview3AppStoreLink' ? (
+
0 ? 'pre2LinkData' : ''}>
+ {item.FieldValue?.length > 0 &&
+
0 ? appStore : tempBanner} alt="appstore" />
+
}
+
0 ? { fontFamily: 'Inter' } : null}>
+ {item.FieldValue?.length > 0 ?
Appstore : ''}
+
+
+ ) : item.FieldName === 'Overview3PosLink' ? (
+
0 ? 'pre2LinkData' : ''}>
+ {item.FieldValue?.length > 0 &&
+
0 ? android : tempBanner} alt="pos" />
+
}
+
0 ? { fontFamily: 'Inter' } : null}>
+ {item.FieldValue?.length > 0 ?
Playstore(Pos) : ''}
+
+
+ ) : null
+ ))}
+
+
+
+
+ {/* Scroll Indicator */}
+
+
+
+
+
+
+ );
+};
+
+export default HeroSection;
diff --git a/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView3.scss b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView3.scss
new file mode 100644
index 0000000..830adea
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView3.scss
@@ -0,0 +1,192 @@
+.hero-section {
+ position: relative;
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+
+ // Base mobile styles first
+ @media (max-width: 480px) {
+ height: auto;
+ min-height: 100vh;
+ }
+
+ .video-background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ filter: brightness(0.8);
+ -webkit-filter: brightness(0.8);
+
+ }
+
+ .overlay {
+ position: absolute;
+ inset: 0;
+ // background: rgba(0, 0, 0, 0.6);
+ }
+
+ .content-wrapper {
+ position: relative;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .container {
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1.5rem;
+ display: flex;
+ justify-content: center;
+ }
+ }
+
+ .hero-content {
+ // max-width: 800px;
+ text-align: center;
+ padding: 4rem 0 2rem 0;
+
+ h1 {
+ font-size: clamp(2.5rem, 5vw, 4.5rem);
+ line-height: 1.2;
+ font-weight: bold;
+ color: white;
+ margin-bottom: 1.5rem;
+
+ span {
+ color: #f59e0b;
+ display: inline-block;
+ }
+ }
+
+ p {
+ font-size: clamp(1rem, 1vw, 1.25rem);
+ color: #e5e7eb;
+ margin: 0 auto 2.5rem;
+ max-width: 650px;
+ }
+
+ .button-group {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ flex-wrap: wrap;
+ .primary-button {
+ background-color: #f59e0b;
+ color: white;
+ font-size: clamp(1rem, 1vw, 1.25rem);
+
+ font-family: 'Inter', sans-serif;
+ padding: 1rem 2rem;
+ border-radius: 0.5rem;
+ display: flex;
+ align-items: center;
+ border: none !important;
+ gap: 0.5rem;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background-color: #d97706;
+ transform: translateY(-2px);
+ }
+
+ .icon {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ }
+
+ .secondary-button {
+ background-color: rgba(255, 255, 255, 0.1);
+ border: none !important;
+ font-family: 'Inter', sans-serif;
+ color: white;
+ font-weight: 500;
+ padding: 1rem 2rem;
+ border-radius: 0.5rem;
+ font-size: clamp(1rem, 1vw, 1.25rem);
+ backdrop-filter: blur(4px);
+ transition: all 0.3s ease;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ transform: translateY(-2px);
+ }
+ }
+
+ @media (max-width: 480px) {
+ flex-direction: column;
+ width: 100%;
+
+ .primary-button,
+ .secondary-button {
+ width: 100%;
+ justify-content: center;
+ }
+ }
+ }
+
+ .stats-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2rem;
+ margin-top: 4rem;
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+
+ @media (max-width: 768px) {
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1.5rem;
+ }
+
+ .stat-item {
+ text-align: center;
+
+ .stat-value {
+ font-size: clamp(1.875rem, 3vw, 2.25rem);
+ font-weight: bold;
+ color: #f59e0b;
+ margin-bottom: 0.5rem;
+ }
+
+ .stat-label {
+ color: #ffffff;
+ font-size: clamp(0.875rem, 1.5vw, 0.9rem);
+ }
+ }
+ }
+ }
+
+ .scroll-indicator {
+ position: absolute;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+
+ @media (max-width: 768px) {
+ display: none;
+ }
+
+ .scroll-box {
+ width: 1.5rem;
+ height: 2.5rem;
+ border: 2px solid white;
+ border-radius: 9999px;
+ display: flex;
+ justify-content: center;
+
+ .scroll-dot {
+ width: 0.25rem;
+ height: 0.5rem;
+ background-color: white;
+ border-radius: 9999px;
+ margin-top: 0.5rem;
+ }
+ }
+ }
+}
diff --git a/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView4.jsx b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView4.jsx
new file mode 100644
index 0000000..84f7d7d
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView4.jsx
@@ -0,0 +1,189 @@
+import React, { useEffect, useRef } from 'react';
+import { motion, useAnimation, useInView } from 'framer-motion';
+import { MdAccessTime, MdArrowForward, MdBarChart, MdPayment, MdPeople, MdPhoneAndroid, MdRestaurant, MdRestaurantMenu, MdStar } from 'react-icons/md';
+import './OverView4.scss';
+import demoVideo from '../../../../../src/videos/demo-video2.mp4'; // Adjust the path as necessary
+
+const HeroSection = () => {
+ // Refs for scroll animations
+ const scrollContainerRef = useRef(null);
+ const isInView = useInView(scrollContainerRef, { once: false, amount: 0.3 });
+ const controls = useAnimation();
+
+ // Auto-scroll effect
+ useEffect(() => {
+ let interval;
+ let currentPosition = 0;
+ const scrollContainer = scrollContainerRef.current;
+
+ if (scrollContainer) {
+ const totalHeight = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+
+ interval = setInterval(() => {
+ // Increment position
+ currentPosition += 1;
+
+ // Reset when reaching bottom
+ if (currentPosition > totalHeight) {
+ // Quickly reset to top with smooth transition
+ scrollContainer.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ });
+ currentPosition = 0;
+ } else {
+ // Smooth scroll down
+ scrollContainer.scrollTo({
+ top: currentPosition,
+ behavior: 'auto'
+ });
+ }
+ }, 30); // Adjust speed as needed
+ }
+
+ return () => clearInterval(interval);
+ }, []);
+
+ // Animation for elements
+ useEffect(() => {
+ if (isInView) {
+ controls.start('visible');
+ }
+ }, [controls, isInView]);
+
+ // Animation variants
+ const containerVariants = {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: {
+ staggerChildren: 0.1,
+ delayChildren: 0.2
+ }
+ }
+ };
+
+ const itemVariants = {
+ hidden: { y: 20, opacity: 0 },
+ visible: {
+ y: 0,
+ opacity: 1,
+ transition: { duration: 0.5 }
+ }
+ };
+
+ // Feature cards data
+ const featureCards = [
+ { icon: MdRestaurant, title: "Smart Ordering", color: "from-amber-400 to-amber-600" },
+ { icon: MdAccessTime, title: "Table Management", color: "from-amber-500 to-amber-700" },
+ { icon: MdPayment, title: "Instant Payments", color: "from-amber-600 to-amber-800" },
+ { icon: MdPeople, title: "Customer Profiles", color: "from-amber-500 to-amber-700" },
+ { icon: MdStar, title: "Loyalty Program", color: "from-amber-400 to-amber-600" },
+ { icon: MdRestaurantMenu, title: "Kitchen Display", color: "from-amber-500 to-amber-700" },
+ { icon: MdBarChart, title: "Sales Analytics", color: "from-amber-600 to-amber-800" },
+ { icon: MdPhoneAndroid, title: "Mobile Ordering", color: "from-amber-500 to-amber-700" }
+ ];
+
+ return (
+
+ {/* Background Video */}
+
+
+
+
+ {/* Overlay */}
+
+
+ {/* Content */}
+
+
+
+
+ Power up your store with PozoMart – smart billing for smart shops.
+
+
+ Manage inventory, speed up checkout, and grow profits with our all-in-one retail POS solution designed for supermarkets, grocery stores, and small businesses.
+
+
+
+
+ Get Started Free
+
+
+ Watch Demo
+
+
+
+ {/* Stats */}
+ {/* */}
+
+
+
+
+ {/* Scroll Indicator */}
+
+
+
+
+
+
+ );
+};
+
+export default HeroSection;
diff --git a/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView4.scss b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView4.scss
new file mode 100644
index 0000000..7bd345d
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView4.scss
@@ -0,0 +1,249 @@
+.OV4hero-section {
+ position: relative;
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+
+ // Base mobile styles first
+ @media (max-width: 480px) {
+ height: auto;
+ min-height: 100vh;
+ }
+
+ .video-background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .overlay {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.6);
+ }
+
+ .content-wrapper {
+ position: relative;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .container {
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1.5rem;
+ display: flex;
+ justify-content: center;
+ }
+ }
+
+ .OV4hero-content {
+ // max-width: 800px;
+ text-align: left;
+ padding: 2rem 0;
+ align-items: flex-start;
+ flex-direction: column;
+ display: flex;
+
+ h1 {
+ font-size: clamp(3.5rem, 6vw, 5.5rem);
+ font-weight: 800;
+ // font-family: 'Space Grotesk';
+ font-family: "Oregano", cursive;
+ color: white;
+ margin-bottom: 1.5rem;
+
+ span {
+ color: #E53935;
+ display: inline-block;
+ }
+ } p {
+ font-size: clamp(1.2rem, 1.5vw, 3.5rem);
+ color: #e5e7eb;
+ margin: 0 auto 2.5rem;
+ line-height: 1.4;
+
+ } .floating-features {
+ display: flex;
+ gap: 2rem;
+ margin-top: 3rem;
+ flex-wrap: wrap;
+
+ .feature-card {
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+ padding: 1.5rem;
+ border-radius: 15px;
+ flex: 1;
+ min-width: 200px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.3s ease;
+
+ &:hover {
+ transform: translateY(-5px);
+ background: rgba(255, 255, 255, 0.15);
+ border-color: rgba(255, 255, 255, 0.2);
+ }
+
+ .icon-wrapper {
+ background: linear-gradient(135deg, #E53935, #e53935a8);
+ width: 50px;
+ height: 50px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 1rem;
+
+ .feature-icon {
+ font-size: 1.8rem;
+ color: white;
+ }
+ }
+
+ h3 {
+ font-size: 1.2rem;
+ color: white;
+ margin-bottom: 0.5rem;
+ }
+
+ p {
+ font-size: 0.9rem;
+ color: rgba(255, 255, 255, 0.8);
+ margin: 0;
+ }
+ }
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ .feature-card {
+ width: 100%;
+ }
+ }
+ }
+
+ .button-group {
+ display: flex;
+ gap: 1rem;
+ justify-content: start;
+ flex-wrap: wrap;
+ .primary-button {
+ background-color: #E53935;
+ color: white;
+ font-size: clamp(1rem,1vw, 1.25rem);
+
+ font-family: 'Inter', sans-serif;
+ padding: 1rem 2rem;
+ border-radius: 0.5rem;
+ display: flex;
+ align-items: center;
+ border: none !important;
+ gap: 0.5rem;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background-color: #da2724;
+ transform: translateY(-2px);
+ }
+
+ .icon {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ }
+
+ .secondary-button {
+ background-color: rgba(255, 255, 255, 0.1);
+ border: none !important;
+ font-family: 'Inter', sans-serif;
+ color: white;
+ font-weight: 500;
+ padding:1rem 2rem;
+ border-radius: 0.5rem;
+ font-size: clamp(1rem,1vw, 1.25rem);
+ backdrop-filter: blur(4px);
+ transition: all 0.3s ease;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ transform: translateY(-2px);
+ }
+ }
+
+ @media (max-width: 480px) {
+ flex-direction: column;
+ width: 100%;
+
+ .primary-button,
+ .secondary-button {
+ width: 100%;
+ justify-content: center;
+ }
+ }
+ }
+
+ .stats-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 2rem;
+ margin-top: 4rem;
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+
+ @media (max-width: 768px) {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+ }
+
+ .stat-item {
+ text-align: center;
+
+ .stat-value {
+ font-size: clamp(1.875rem, 3vw, 2.25rem);
+ font-weight: bold;
+ color: #f59e0b;
+ margin-bottom: 0.5rem;
+ }
+
+ .stat-label {
+ color: #d1d5db;
+ font-size: clamp(0.875rem, 1.5vw, 1rem);
+ }
+ }
+ }
+ }
+
+ .scroll-indicator {
+ position: absolute;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+
+ @media (max-width: 768px) {
+ display: none;
+ }
+
+ .scroll-box {
+ width: 1.5rem;
+ height: 2.5rem;
+ border: 2px solid white;
+ border-radius: 9999px;
+ display: flex;
+ justify-content: center;
+
+ .scroll-dot {
+ width: 0.25rem;
+ height: 0.5rem;
+ background-color: white;
+ border-radius: 9999px;
+ margin-top: 0.5rem;
+ }
+ }
+ }
+}
diff --git a/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView5.jsx b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView5.jsx
new file mode 100644
index 0000000..583474b
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView5.jsx
@@ -0,0 +1,190 @@
+import React, { useEffect, useRef } from 'react';
+import { motion, useAnimation, useInView } from 'framer-motion';
+import { MdAccessTime, MdArrowForward, MdBarChart, MdPayment, MdPeople, MdPhoneAndroid, MdRestaurant, MdRestaurantMenu, MdStar } from 'react-icons/md';
+import './OverView5.scss';
+import demoVideo from '../../../../../src/videos/textile.mp4'; // Adjust the path as necessary
+
+const HeroSection = () => {
+ // Refs for scroll animations
+ const scrollContainerRef = useRef(null);
+ const isInView = useInView(scrollContainerRef, { once: false, amount: 0.3 });
+ const controls = useAnimation();
+
+ // Auto-scroll effect
+ useEffect(() => {
+ let interval;
+ let currentPosition = 0;
+ const scrollContainer = scrollContainerRef.current;
+
+ if (scrollContainer) {
+ const totalHeight = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+
+ interval = setInterval(() => {
+ // Increment position
+ currentPosition += 1;
+
+ // Reset when reaching bottom
+ if (currentPosition > totalHeight) {
+ // Quickly reset to top with smooth transition
+ scrollContainer.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ });
+ currentPosition = 0;
+ } else {
+ // Smooth scroll down
+ scrollContainer.scrollTo({
+ top: currentPosition,
+ behavior: 'auto'
+ });
+ }
+ }, 30); // Adjust speed as needed
+ }
+
+ return () => clearInterval(interval);
+ }, []);
+
+ // Animation for elements
+ useEffect(() => {
+ if (isInView) {
+ controls.start('visible');
+ }
+ }, [controls, isInView]);
+
+ // Animation variants
+ const containerVariants = {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: {
+ staggerChildren: 0.1,
+ delayChildren: 0.2
+ }
+ }
+ };
+
+ const itemVariants = {
+ hidden: { y: 20, opacity: 0 },
+ visible: {
+ y: 0,
+ opacity: 1,
+ transition: { duration: 0.5 }
+ }
+ };
+
+ // Feature cards data
+ const featureCards = [
+ { icon: MdRestaurant, title: "Smart Ordering", color: "from-amber-400 to-amber-600" },
+ { icon: MdAccessTime, title: "Table Management", color: "from-amber-500 to-amber-700" },
+ { icon: MdPayment, title: "Instant Payments", color: "from-amber-600 to-amber-800" },
+ { icon: MdPeople, title: "Customer Profiles", color: "from-amber-500 to-amber-700" },
+ { icon: MdStar, title: "Loyalty Program", color: "from-amber-400 to-amber-600" },
+ { icon: MdRestaurantMenu, title: "Kitchen Display", color: "from-amber-500 to-amber-700" },
+ { icon: MdBarChart, title: "Sales Analytics", color: "from-amber-600 to-amber-800" },
+ { icon: MdPhoneAndroid, title: "Mobile Ordering", color: "from-amber-500 to-amber-700" }
+ ];
+
+ return (
+
+ {/* Background Video */}
+
+
+
+
+ {/* Overlay */}
+
+
+ {/* Content */}
+
+
+
+
+ Ignite your Textile shop’s vibe with PozoTex – smart tools for faster, smoother service.
+
+
+ Revolutionize operations, captivate shoppers, and boost your bottom line with PozoTex’s seamless platform for textile stores.
+
+
+
+ Get Started Free
+
+
+
+ Watch Demo
+
+
+
+ {/* Stats */}
+
+
+
+
+
+ {/* Scroll Indicator */}
+
+
+
+
+
+
+ );
+};
+
+export default HeroSection;
+
diff --git a/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView5.scss b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView5.scss
new file mode 100644
index 0000000..8dc94ec
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView5.scss
@@ -0,0 +1,202 @@
+.hero-section5 {
+ position: relative;
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+
+ // Base mobile styles first
+ @media (max-width: 480px) {
+ height: auto;
+ min-height: 100vh;
+ }
+
+ .video-background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ filter: brightness(0.8);
+ -webkit-filter: brightness(0.7);
+ }
+
+ .overlay {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.6);
+ }
+
+ .content-wrapper {
+ position: relative;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .container {
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 0.5rem;
+ display: flex;
+ justify-content: center;
+ }
+ }
+
+ .hero-content {
+ // max-width: 800px;
+ text-align: left;
+ padding: 2rem 0;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ margin-top: 3rem;
+
+ h1 {
+ font-size: clamp(2.5rem, 3.4vw, 4.5rem);
+ line-height: 1.2;
+ font-weight: bold;
+ color: white;
+ width: 60%;
+ margin-bottom: 1.5rem;
+ margin-top: 1.5rem;
+
+ span {
+ color: #283593;
+ display: inline-block;
+ filter: brightness(1.1);
+ }
+ }
+
+ p {
+ font-size: clamp(14px, 1vw, 1.25rem);
+ color: #e5e7eb;
+ margin: 0 0 2rem 0;
+ max-width: 650px;
+ text-align: left;
+ width: 50%;
+ }
+
+ .button-group {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ flex-wrap: wrap;
+
+ .primary-button {
+ background-color: #283593;
+ color: white;
+ font-size: clamp(1rem, 1vw, 1.25rem);
+ font-family: 'Inter', sans-serif;
+ padding: 0.8rem 2rem;
+ border-radius: 0.5rem;
+ display: flex;
+ align-items: center;
+ border: none !important;
+ gap: 0.5rem;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background-color: #4d5dd4;
+ transform: translateY(-2px);
+ }
+
+ .icon {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ }
+
+ .secondary-button {
+ background-color: rgba(255, 255, 255, 0.1);
+ border: none !important;
+ font-family: 'Inter', sans-serif;
+ color: white;
+ font-weight: 500;
+ padding: 0.8rem 2rem;
+ border-radius: 0.5rem;
+ font-size: clamp(1rem, 1vw, 1.25rem);
+ backdrop-filter: blur(4px);
+ transition: all 0.3s ease;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ transform: translateY(-2px);
+ }
+ }
+
+ @media (max-width: 480px) {
+ flex-direction: column;
+ width: 100%;
+
+ .primary-button,
+ .secondary-button {
+ width: 100%;
+ justify-content: center;
+ }
+ }
+ }
+
+ .stats-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 2rem;
+ margin-top: 4rem;
+ max-width: 800px;
+ margin-left: 0;
+ margin-right: auto;
+
+ @media (max-width: 768px) {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+ }
+
+ .stat-item {
+ text-align: center;
+
+ .stat-value {
+ font-size: clamp(1.875rem, 3vw, 2.25rem);
+ font-weight: bold;
+ color: #283593;
+ margin-bottom: 0.5rem;
+ filter: brightness(1.2);
+ }
+
+ .stat-label {
+ color: #c8ceff;
+ font-size: clamp(0.875rem, 1.5vw, 1rem);
+ }
+ }
+ }
+ }
+
+ .scroll-indicator {
+ position: absolute;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+
+ @media (max-width: 768px) {
+ display: none;
+ }
+
+ .scroll-box {
+ width: 1.5rem;
+ height: 2.5rem;
+ border: 2px solid white;
+ border-radius: 9999px;
+ display: flex;
+ justify-content: center;
+
+ .scroll-dot {
+ width: 0.25rem;
+ height: 0.5rem;
+ background-color: white;
+ border-radius: 9999px;
+ margin-top: 0.5rem;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView6.jsx b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView6.jsx
new file mode 100644
index 0000000..f9c8c2c
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView6.jsx
@@ -0,0 +1,190 @@
+import React, { useEffect, useRef } from 'react';
+import { motion, useAnimation, useInView } from 'framer-motion';
+import { MdAccessTime, MdArrowForward, MdBarChart, MdPayment, MdPeople, MdPhoneAndroid, MdRestaurant, MdRestaurantMenu, MdStar } from 'react-icons/md';
+import './OverView6.scss';
+import demoVideo from '../../../../../src/videos/demovideo3.mp4'; // Adjust the path as necessary
+
+const HeroSection = () => {
+ // Refs for scroll animations
+ const scrollContainerRef = useRef(null);
+ const isInView = useInView(scrollContainerRef, { once: false, amount: 0.3 });
+ const controls = useAnimation();
+
+ // Auto-scroll effect
+ useEffect(() => {
+ let interval;
+ let currentPosition = 0;
+ const scrollContainer = scrollContainerRef.current;
+
+ if (scrollContainer) {
+ const totalHeight = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+
+ interval = setInterval(() => {
+ // Increment position
+ currentPosition += 1;
+
+ // Reset when reaching bottom
+ if (currentPosition > totalHeight) {
+ // Quickly reset to top with smooth transition
+ scrollContainer.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ });
+ currentPosition = 0;
+ } else {
+ // Smooth scroll down
+ scrollContainer.scrollTo({
+ top: currentPosition,
+ behavior: 'auto'
+ });
+ }
+ }, 30); // Adjust speed as needed
+ }
+
+ return () => clearInterval(interval);
+ }, []);
+
+ // Animation for elements
+ useEffect(() => {
+ if (isInView) {
+ controls.start('visible');
+ }
+ }, [controls, isInView]);
+
+ // Animation variants
+ const containerVariants = {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: {
+ staggerChildren: 0.1,
+ delayChildren: 0.2
+ }
+ }
+ };
+
+ const itemVariants = {
+ hidden: { y: 20, opacity: 0 },
+ visible: {
+ y: 0,
+ opacity: 1,
+ transition: { duration: 0.5 }
+ }
+ };
+
+ // Feature cards data
+ const featureCards = [
+ { icon: MdRestaurant, title: "Smart Ordering", color: "from-amber-400 to-amber-600" },
+ { icon: MdAccessTime, title: "Table Management", color: "from-amber-500 to-amber-700" },
+ { icon: MdPayment, title: "Instant Payments", color: "from-amber-600 to-amber-800" },
+ { icon: MdPeople, title: "Customer Profiles", color: "from-amber-500 to-amber-700" },
+ { icon: MdStar, title: "Loyalty Program", color: "from-amber-400 to-amber-600" },
+ { icon: MdRestaurantMenu, title: "Kitchen Display", color: "from-amber-500 to-amber-700" },
+ { icon: MdBarChart, title: "Sales Analytics", color: "from-amber-600 to-amber-800" },
+ { icon: MdPhoneAndroid, title: "Mobile Ordering", color: "from-amber-500 to-amber-700" }
+ ];
+
+ return (
+
+ {/* Background Video */}
+
+
+
+
+ {/* Overlay */}
+
+
+ {/* Content */}
+
+
+
+ {/* #ProfitFromEverySeed
*/}
+
+ Run your agri store smarter with PozoAgro .
+
+ Track stock, simplify sales, and grow faster with our all-in-one POS system designed for grain dealers, fertilizer shops, seed distributors, pesticide outlets, and poultry businesses.
+
+
+
+
+
+ Get Started Free
+
+
+ Watch Demo
+
+
+
+ {/* Stats */}
+ {/* */}
+
+
+
+
+ {/* Scroll Indicator */}
+
+
+
+
+
+
+ );
+};
+
+export default HeroSection;
diff --git a/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView6.scss b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView6.scss
new file mode 100644
index 0000000..93387c4
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverView6.scss
@@ -0,0 +1,262 @@
+.OV6hero-section {
+ position: relative;
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+
+ // Base mobile styles first
+ @media (max-width: 480px) {
+ height: auto;
+ min-height: 100vh;
+ }
+
+ .video-background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .overlay {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.6);
+ }
+
+ .content-wrapper {
+ position: relative;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .container {
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1.5rem;
+ display: flex;
+ justify-content: center;
+ }
+ }
+
+ .OV6hero-content {
+ // max-width: 800px;
+ text-align: center;
+ padding: 2rem 0;
+ flex-direction: column;
+ display: flex;
+ .hastag{
+ // background-color: #ffffff6e;
+ color: #8D6E63;
+ width: max-content;
+ padding: 0.5rem 1rem;
+ border-radius: 8px;
+ font-size: clamp(0.5rem, 0.5vw, 0.5rem);
+
+ font-family: 'Inter', sans-serif;
+ }
+ h1 {
+ font-size: clamp(3.5rem, 8vw, 5rem);
+ font-weight:500;
+ // font-family: 'Space Grotesk';
+ // font-family: "Oregano", cursive;
+ font-family: "Fredoka", sans-serif;
+
+ color: white;
+ margin-bottom: 1.5rem;
+
+ span {
+ color: #E0C068;
+ display: inline-block;
+ }
+ } p {
+ font-size: clamp(1.2rem, 1.5vw, 3.5rem);
+ font-family: "Fredoka", sans-serif;
+ color: #e5e7eb;
+ margin: 0 auto 2.5rem;
+ line-height: 1.4;
+ width: 700px;
+
+ } .floating-features {
+ display: flex;
+ gap: 2rem;
+ margin-top: 3rem;
+ flex-wrap: wrap;
+
+ .feature-card {
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+ padding: 1.5rem;
+ border-radius: 15px;
+ flex: 1;
+ min-width: 200px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.3s ease;
+
+ &:hover {
+ transform: translateY(-5px);
+ background: rgba(255, 255, 255, 0.15);
+ border-color: rgba(255, 255, 255, 0.2);
+ }
+
+ .icon-wrapper {
+ background: linear-gradient(135deg, #E53935, #e53935a8);
+ width: 50px;
+ height: 50px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 1rem;
+
+ .feature-icon {
+ font-size: 1.8rem;
+ color: white;
+ }
+ }
+
+ h3 {
+ font-size: 1.2rem;
+ color: white;
+ margin-bottom: 0.5rem;
+ }
+
+ p {
+ font-size: 0.9rem;
+ color: rgba(255, 255, 255, 0.8);
+ margin: 0;
+ max-width: 6450px;
+ }
+ }
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ .feature-card {
+ width: 100%;
+ }
+ }
+ }
+
+ .button-group {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ flex-wrap: wrap;
+ .primary-button {
+ background-color: #E53935;
+ color: white;
+ font-size: clamp(1rem,1vw, 1.25rem);
+
+ font-family: 'Inter', sans-serif;
+ padding: 1rem 2rem;
+ border-radius: 0.5rem;
+ display: flex;
+ align-items: center;
+ border: none !important;
+ gap: 0.5rem;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background-color: #da2724;
+ transform: translateY(-2px);
+ }
+
+ .icon {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ }
+
+ .secondary-button {
+ background-color: rgba(255, 255, 255, 0.1);
+ border: none !important;
+ font-family: 'Inter', sans-serif;
+ color: white;
+ font-weight: 500;
+ padding:1rem 2rem;
+ border-radius: 0.5rem;
+ font-size: clamp(1rem,1vw, 1.25rem);
+ backdrop-filter: blur(4px);
+ transition: all 0.3s ease;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ transform: translateY(-2px);
+ }
+ }
+
+ @media (max-width: 480px) {
+ flex-direction: column;
+ width: 100%;
+
+ .primary-button,
+ .secondary-button {
+ width: 100%;
+ justify-content: center;
+ }
+ }
+ }
+
+ .stats-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 2rem;
+ margin-top: 4rem;
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+
+ @media (max-width: 768px) {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+ }
+
+ .stat-item {
+ text-align: center;
+
+ .stat-value {
+ font-size: clamp(1.875rem, 3vw, 2.25rem);
+ font-weight: bold;
+ color: #f59e0b;
+ margin-bottom: 0.5rem;
+ }
+
+ .stat-label {
+ color: #d1d5db;
+ font-size: clamp(0.875rem, 1.5vw, 1rem);
+ }
+ }
+ }
+ }
+
+ .scroll-indicator {
+ position: absolute;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+
+ @media (max-width: 768px) {
+ display: none;
+ }
+
+ .scroll-box {
+ width: 1.5rem;
+ height: 2.5rem;
+ border: 2px solid white;
+ border-radius: 9999px;
+ display: flex;
+ justify-content: center;
+
+ .scroll-dot {
+ width: 0.25rem;
+ height: 0.5rem;
+ background-color: white;
+ border-radius: 9999px;
+ margin-top: 0.5rem;
+ }
+ }
+ }
+}
diff --git a/src/Pages/themeTemplate/TemplateComps/OverVIews/OverViewTemplate1.jsx b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverViewTemplate1.jsx
new file mode 100644
index 0000000..e531f67
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverViewTemplate1.jsx
@@ -0,0 +1,570 @@
+import React, {useState,useRef ,useCallback,useEffect } from 'react';
+import { useDispatch, useSelector } from "react-redux";
+import {Modal,Form, Tooltip } from 'antd';
+import {EyeOutlined,PlusOutlined,ArrowRightOutlined,CloseOutlined,InfoCircleOutlined} from '@ant-design/icons';
+import { InputField } from "../../../../Components/Forms/InputField";
+import Buttons from "../../../../Components/Forms/Buttons";
+import Imageupload from "../../../../Components/Forms/Upload.jsx";
+import { Messages } from "../../../../Components/Notifications/Messages";
+import OverView1 from './OverView1';
+import {changeOverviewData,changeOverview1Img,overviewPostData,overview1Img} from "../../../../features/themeChange/themeChange.js"
+import "../../../../styles/template/overView/overView1.scss";
+import { validateSafeInput } from '../../../../Services/others.js';
+
+const OverviewTemp1 =() => {
+
+
+ const formRef = useRef(null);
+ const dispatch = useDispatch();
+
+ const overView1Data = useSelector(overviewPostData);
+ const imageUrl = useSelector(overview1Img);
+ const [messageType, setMessageType] = useState(null);
+ const [messageData, setMessageData] = useState(null);
+ const [open, setOpen] = useState(false);
+ const [Editopen, setEditOpen] = useState(false);
+ const [editData, setEditData] = useState(false);
+
+ useEffect(()=>{
+ overView1Data?.map((item) => {
+ item?.["FieldName"]=="Overview1Title" ?
+ formRef?.current?.setFieldsValue({"Title":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1SubTitle" ?
+ formRef?.current?.setFieldsValue({"STitle":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1ButtonText" ?
+ formRef?.current?.setFieldsValue({"BText":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1AppLinkText" ?
+ formRef?.current?.setFieldsValue({"AText":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1PlayStoreLink" ?
+ formRef?.current?.setFieldsValue({"Pal":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1AppStoreLink" ?
+ formRef?.current?.setFieldsValue({"Asl":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1PosLink" ?
+ formRef?.current?.setFieldsValue({"Pos":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1BannerImage" ?
+ dispatch(changeOverview1Img({overview1Img:item?.["FieldValue"]}))
+ :null
+ })
+
+ },[editData])
+
+ const data = [
+ {
+ 'FieldName':'Overview1Title',
+ 'FieldValue':'POS App For Restaurant with & without GST fastest e-bill & normal Billing + KOT and Stock Management',
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1SubTitle',
+ 'FieldValue':'Restaurant POS Smart Ordering via QR Code and Send Bill Via through SMS or Whatsapp very fast within min.',
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1ButtonText',
+ 'FieldValue':'Get Started',
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1AppLinkText',
+ 'FieldValue':'Download Pozo Apps From',
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1PlayStoreLink',
+ 'FieldValue':'http://playstore.com',
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1AppStoreLink',
+ 'FieldValue':'http://appstore.com',
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1PosLink',
+ 'FieldValue':'http://posapp.com',
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1BannerImage',
+ 'FieldValue':'https://saveme.live/paypre-image-api/upload?fileId=649bfe6906bfb6b6b99227ac.png',
+ 'FieldAddData':''
+ },
+ ]
+
+ const onComplete = useCallback(() => {
+ setMessageData(null);
+ setMessageType(null);
+ }, []);
+
+ const updateImageUrl = (url) => {
+ dispatch(changeOverview1Img({overview1Img:url}))
+
+ };
+
+ const modalOpen = () =>{
+ if (overView1Data?.length > 0){
+ let Overview1 = overView1Data.filter(eachData =>
+ eachData.FieldName.includes('Overview1')
+ )
+
+ if(Overview1.length>0){
+ setEditData(true)
+ }
+
+ {overView1Data?.map((item, index) => (
+ item?.["FieldName"]=="Overview1Title" ?
+ formRef?.current?.setFieldsValue({"Title":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1SubTitle" ?
+ formRef?.current?.setFieldsValue({"STitle":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1ButtonText" ?
+ formRef?.current?.setFieldsValue({"BText":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1AppLinkText" ?
+ formRef?.current?.setFieldsValue({"AText":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1PlayStoreLink" ?
+ formRef?.current?.setFieldsValue({"Pal":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1AppStoreLink" ?
+ formRef?.current?.setFieldsValue({"Asl":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1PosLink" ?
+ formRef?.current?.setFieldsValue({"Pos":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Overview1BannerImage" ?
+ dispatch(changeOverview1Img({overview1Img:item?.["FieldValue"]}))
+ :null
+ ))}
+
+ }else{
+ setEditData(false)
+ }
+
+ setEditOpen(true)
+
+
+ }
+
+ const previewOpen = () =>{
+ if (overView1Data.length > 0){
+ let Overview1 = overView1Data.filter(eachData =>
+ eachData.FieldName.includes('Overview1')
+ )
+
+ if(Overview1.length>0){
+ setOpen(true)
+ }else{
+ setMessageData('Please add a overview data to open the preview');
+ setMessageType('warning');
+ }
+ }else{
+ setMessageData('Please add a overview data to open the preview');
+ setMessageType('warning');
+ }
+
+ }
+
+ const onCancel = () => {
+ setEditOpen(false);
+ dispatch(changeOverview1Img({overview1Img:""}))
+ formRef.current?.resetFields();
+
+ };
+
+ const onFinish = (values) =>{
+ const postData = [
+ {
+ 'FieldName':'Overview1Title',
+ 'FieldValue':values?.Title,
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1SubTitle',
+ 'FieldValue':values?.STitle,
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1ButtonText',
+ 'FieldValue':values?.BText,
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1AppLinkText',
+ 'FieldValue':values?.AText,
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1PlayStoreLink',
+ 'FieldValue':values?.Pal,
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1AppStoreLink',
+ 'FieldValue':values?.Asl,
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1PosLink',
+ 'FieldValue':values?.Pos,
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Overview1BannerImage',
+ 'FieldValue':imageUrl,
+ 'FieldAddData':''
+ },
+ ]
+ if(imageUrl){
+ dispatch(changeOverviewData({postData:postData}))
+ setMessageData('Data Added Successfully');
+ setMessageType('success');
+ setEditOpen(false)
+ formRef.current?.resetFields();
+ dispatch(changeOverview1Img({overview1Img:""}))
+ }else{
+ setMessageData('Please Upoload Banner Image');
+ setMessageType('warning');
+ }
+
+
+ }
+
+
+
+
+
+
+ return (
+ <>
+
+
+
+
modalOpen()} />
+ previewOpen()} />
+
+
+
+
setEditOpen(false)}
+ closeIcon={}
+ width={900}
+ >
+
+
+
+
+
+
setOpen(false)}
+ onCancel={() => setOpen(false)}
+ width={1000}
+ className='overview1Modal'
+ >
+
+
+
+
+
+
+
+ {/*
*/}
+
+ >
+ )
+ }
+
+ export default OverviewTemp1
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/OverVIews/OverViewTemplate2.jsx b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverViewTemplate2.jsx
new file mode 100644
index 0000000..ce7dfc5
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverViewTemplate2.jsx
@@ -0,0 +1,625 @@
+import { BiImageAdd } from "react-icons/bi";
+import { AiOutlineVideoCameraAdd } from "react-icons/ai";
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from "react-redux";
+import { Modal, Form, Tooltip, Button, Segmented } from 'antd';
+import { EyeOutlined, PlusOutlined, CloseOutlined, ArrowRightOutlined, InfoCircleOutlined, DeleteFilled } from '@ant-design/icons';
+import { InputField } from "../../../../Components/Forms/InputField";
+import Buttons from "../../../../Components/Forms/Buttons";
+import Imageupload from "../../../../Components/Forms/Upload.jsx";
+import Videoupload from "../../../../Components/Forms/VideoUpload.jsx";
+import { Messages } from "../../../../Components/Notifications/Messages";
+import OverView2 from './OverView2';
+import { changeOverviewData, changeOverview2Img, changeOverview2Video, overviewPostData, overview2Img, overview2Video } from "../../../../features/themeChange/themeChange.js"
+import "../../../../styles/template/overView/overView2.scss";
+import { validateSafeInput } from '../../../../Services/others.js';
+
+const OverviewTemp2 = () => {
+ const formRef = useRef(null);
+ const dispatch = useDispatch();
+
+ const overView2Data = useSelector(overviewPostData);
+ const imageUrl = useSelector(overview2Img);
+ const videoUrl = useSelector(overview2Video);
+ const [messageType, setMessageType] = useState(null);
+ const [messageData, setMessageData] = useState(null);
+ const [open, setOpen] = useState(false);
+ const [Editopen, setEditOpen] = useState(false);
+ const [editData2, setEditData2] = useState(false);
+ const [segmentedValue, setSegmentedValue] = useState("video");
+
+ useEffect(() => {
+ {
+ overView2Data?.map((item, index) => (
+ item?.["FieldName"] == "Overview2Title" ?
+ formRef?.current?.setFieldsValue({ "Title": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2SubTitle" ?
+ formRef?.current?.setFieldsValue({ "STitle": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2ButtonText" ?
+ formRef?.current?.setFieldsValue({ "BText": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2AppLinkText" ?
+ formRef?.current?.setFieldsValue({ "AText": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2PlayStoreLink" ?
+ formRef?.current?.setFieldsValue({ "Pal": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2AppStoreLink" ?
+ formRef?.current?.setFieldsValue({ "Asl": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2PosLink" ?
+ formRef?.current?.setFieldsValue({ "Pos": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2BannerImage" ?
+ dispatch(changeOverview2Img({ overview2Img: item?.["FieldValue"] }))
+ : item?.["FieldName"] == "Overview2BannerVideo" ?
+ dispatch(changeOverview2Video({ overview2Video: item?.["FieldValue"] }))
+ : null
+ ))
+ if (Object.keys(overView2Data?.find(item => item?.["FieldName"] == "Overview2BannerImage")|| {})?.length > 0 ) {
+ setSegmentedValue("image")
+ } else {
+ setSegmentedValue("video")
+ }
+ }
+
+ }, [editData2])
+
+ const data = [
+ {
+ 'FieldName': 'Overview2Title',
+ 'FieldValue': 'POS App For Restaurant with & without GST fastest e-bill & normal Billing + KOT and Stock Management',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2SubTitle',
+ 'FieldValue': 'Restaurant POS Smart Ordering via QR Code and Send Bill Via through SMS or Whatsapp very fast within min.',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2ButtonText',
+ 'FieldValue': 'Get Started',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2AppLinkText',
+ 'FieldValue': 'Download Pozo Apps From',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2PlayStoreLink',
+ 'FieldValue': 'http://playstore.com',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2AppStoreLink',
+ 'FieldValue': 'http://appstore.com',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2PosLink',
+ 'FieldValue': 'http://posapp.com',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2BannerImage',
+ 'FieldValue': 'https://saveme.live/paypre-image-api/upload?fileId=649bfe6906bfb6b6b99227ac.png',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2BannerVideo',
+ 'FieldValue': 'http://saveme.live/paypre-image-api/upload?fileId=64f083a906bfb6b6b992341b.mp4',
+ 'FieldAddData': ''
+ },
+ ]
+
+ const onComplete = useCallback(() => {
+ setMessageData(null);
+ setMessageType(null);
+ }, []);
+
+ const updateVideoUrl = (url) => {
+ dispatch(changeOverview2Video({ overview2Video: url }))
+ };
+
+ const updateImageUrl = (url) => {
+ dispatch(changeOverview2Img({ overview2Img: url }))
+
+ };
+ const modalOpen = () => {
+ if (overView2Data?.length > 0) {
+ let Overview2 = overView2Data.filter(eachData =>
+ eachData.FieldName.includes('Overview2')
+ )
+
+ if (Overview2.length > 0) {
+ setEditData2(true)
+ }
+
+ {
+ overView2Data?.map((item, index) => (
+ item?.["FieldName"] == "Overview2Title" ?
+ formRef?.current?.setFieldsValue({ "Title": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2SubTitle" ?
+ formRef?.current?.setFieldsValue({ "STitle": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2ButtonText" ?
+ formRef?.current?.setFieldsValue({ "BText": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2AppLinkText" ?
+ formRef?.current?.setFieldsValue({ "AText": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2PlayStoreLink" ?
+ formRef?.current?.setFieldsValue({ "Pal": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2AppStoreLink" ?
+ formRef?.current?.setFieldsValue({ "Asl": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2PosLink" ?
+ formRef?.current?.setFieldsValue({ "Pos": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Overview2BannerImage" ?
+ dispatch(changeOverview2Img({ overview2Img: item?.["FieldValue"] }))
+ : item?.["FieldName"] == "Overview2BannerVideo" ?
+ dispatch(changeOverview2Video({ overview2Video: item?.["FieldValue"] }))
+ : null
+ ))
+ }
+
+ }
+
+ setEditOpen(true)
+
+
+ }
+
+ const previewOpen = () => {
+ if (overView2Data.length > 0) {
+ let Overview2 = overView2Data.filter(eachData =>
+ eachData.FieldName.includes('Overview2')
+ )
+
+ if (Overview2.length > 0) {
+ setOpen(true)
+ } else {
+ setMessageData('Please add a overview data to open the preview');
+ setMessageType('warning');
+ }
+ } else {
+ setMessageData('Please add a overview data to open the preview');
+ setMessageType('warning');
+ }
+
+ }
+ const onCancel = () => {
+ setEditOpen(false);
+ dispatch(changeOverview2Img({ overview2Img: "" }))
+ dispatch(changeOverview2Video({ overview2Video: null }))
+ formRef.current?.resetFields();
+
+ };
+
+ const onFinish = (values) => {
+ const postData = [
+ {
+ 'FieldName': 'Overview2Title',
+ 'FieldValue': values?.Title,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2SubTitle',
+ 'FieldValue': values?.STitle,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2ButtonText',
+ 'FieldValue': values?.BText,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2AppLinkText',
+ 'FieldValue': values?.AText,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2PlayStoreLink',
+ 'FieldValue': values?.Pal,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2AppStoreLink',
+ 'FieldValue': values?.Asl,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview2PosLink',
+ 'FieldValue': values?.Pos,
+ 'FieldAddData': ''
+ },
+ ]
+
+ if (videoUrl || imageUrl) {
+ if (imageUrl) {
+ postData.push({
+ 'FieldName': 'Overview2BannerImage',
+ 'FieldValue': imageUrl,
+ 'FieldAddData': ''
+ })
+ }
+ if (videoUrl) {
+ postData.push({
+ 'FieldName': 'Overview2BannerVideo',
+ 'FieldValue': videoUrl,
+ 'FieldAddData': ''
+ })
+ }
+
+ dispatch(changeOverviewData({ postData: postData }))
+ setMessageData('Data Added Successfully');
+ setMessageType('success');
+ setEditOpen(false)
+ formRef.current?.resetFields();
+ dispatch(changeOverview2Img({ overview2Img: "" }))
+ dispatch(changeOverview2Video({ overview2Video: null }))
+ } else {
+ setMessageData('Please Upoload Banner Image or Video');
+ setMessageType('warning');
+ }
+ }
+ const onChangeSegment = (event) => setSegmentedValue(event)
+ return (
+ <>
+
+
+
+
+
+
modalOpen()} />
+ previewOpen()} />
+
+
+
+
setEditOpen(false)}
+ closeIcon={ }
+ width={900}
+ >
+
+
+
+
+
+
setOpen(false)}
+ onCancel={() => setOpen(false)}
+ width={1000}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ >
+ )
+}
+
+export default OverviewTemp2
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/OverVIews/OverViewTemplate3.jsx b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverViewTemplate3.jsx
new file mode 100644
index 0000000..4f2f3a3
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/OverVIews/OverViewTemplate3.jsx
@@ -0,0 +1,347 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from "react-redux";
+import { Modal, Form, Tooltip, Button } from 'antd';
+import { EyeOutlined, PlusOutlined, CloseOutlined, ArrowRightOutlined, InfoCircleOutlined, DeleteFilled } from '@ant-design/icons';
+import { InputField } from "../../../../Components/Forms/InputField";
+import Buttons from "../../../../Components/Forms/Buttons";
+import Videoupload from "../../../../Components/Forms/VideoUpload.jsx";
+import { Messages } from "../../../../Components/Notifications/Messages";
+import OverView3 from './OverView3';
+import OverView2 from './OverView2';
+import { changeOverviewData, changeOverview2Video, overviewPostData, overview2Video } from "../../../../features/themeChange/themeChange.js"
+import "../../../../styles/template/overView/overView2.scss";
+import { validateSafeInput } from '../../../../Services/others.js';
+import HeroSection from './OverView3';
+
+const OverviewTemp3 = () => {
+ const formRef = useRef(null);
+ const dispatch = useDispatch();
+
+ const overView3Data = useSelector(overviewPostData);
+ const videoUrl = useSelector(overview2Video);
+ const [messageType, setMessageType] = useState(null);
+ const [messageData, setMessageData] = useState(null);
+ const [open, setOpen] = useState(false);
+ const [Editopen, setEditOpen] = useState(false);
+ const [editData3, setEditData3] = useState(false);
+
+ useEffect(() => {
+ if (overView3Data?.length > 0) {
+ overView3Data.forEach(item => {
+ switch (item.FieldName) {
+ case "Overview3Title":
+ formRef?.current?.setFieldsValue({ "Title": item.FieldValue });
+ break;
+ case "Overview3SubTitle":
+ formRef?.current?.setFieldsValue({ "STitle": item.FieldValue });
+ break;
+ case "Overview3ButtonText":
+ formRef?.current?.setFieldsValue({ "BText": item.FieldValue });
+ break;
+ case "Overview3BannerVideo":
+ dispatch(changeOverview2Video({ overview2Video: item.FieldValue }));
+ break;
+ case "Overview3Stats":
+ formRef?.current?.setFieldsValue({ "Stats": item.FieldValue });
+ break;
+ }
+ });
+ }
+ }, [editData3, overView3Data]);
+
+ const onComplete = useCallback(() => {
+ setMessageData(null);
+ setMessageType(null);
+ }, []);
+
+ const updateVideoUrl = (url) => {
+ dispatch(changeOverview2Video({ overview2Video: url }));
+ };
+
+ const modalOpen = () => {
+ if (overView3Data?.length > 0) {
+ const overview3Items = overView3Data.filter(eachData =>
+ eachData.FieldName.includes('Overview3')
+ );
+
+ if (overview3Items.length > 0) {
+ setEditData3(true);
+ }
+ }
+ setEditOpen(true);
+ };
+
+ const previewOpen = () => {
+ if (overView3Data.length > 0) {
+ const overview3Items = overView3Data.filter(eachData =>
+ eachData.FieldName.includes('Overview3')
+ );
+
+ if (overview3Items.length > 0) {
+ setOpen(true);
+ } else {
+ setMessageData('Please add overview data to open the preview');
+ setMessageType('warning');
+ }
+ } else {
+ setMessageData('Please add overview data to open the preview');
+ setMessageType('warning');
+ }
+ };
+
+ const onCancel = () => {
+ setEditOpen(false);
+ dispatch(changeOverview2Video({ overview2Video: null }));
+ formRef.current?.resetFields();
+ };
+
+ const onFinish = (values) => {
+ const postData = [
+ {
+ 'FieldName': 'Overview3Title',
+ 'FieldValue': values?.Title,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview3SubTitle',
+ 'FieldValue': values?.STitle,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview3ButtonText',
+ 'FieldValue': values?.BText,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview3BannerVideo',
+ 'FieldValue': videoUrl,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Overview3Stats',
+ 'FieldValue': values?.Stats,
+ 'FieldAddData': ''
+ }
+ ];
+
+ if (videoUrl) {
+ dispatch(changeOverviewData({ postData: postData }));
+ setMessageData('Data Added Successfully');
+ setMessageType('success');
+ setEditOpen(false);
+ formRef.current?.resetFields();
+ dispatch(changeOverview2Video({ overview2Video: null }));
+ } else {
+ setMessageData('Please Upload Background Video');
+ setMessageType('warning');
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+
modalOpen()} />
+ previewOpen()} />
+
+
+
setEditOpen(false)}
+ closeIcon={ }
+ width={900}
+ >
+
+
+
+
setOpen(false)}
+ onCancel={() => setOpen(false)}
+ width={1000}
+ >
+
+
+
+
+ >
+ );
+};
+
+export default OverviewTemp3;
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/PozoNewUI/PozoNewUI.jsx b/src/Pages/themeTemplate/TemplateComps/PozoNewUI/PozoNewUI.jsx
new file mode 100644
index 0000000..c9e3397
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/PozoNewUI/PozoNewUI.jsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import OverView3 from '../OverVIews/OverView3.jsx'
+import Navbar3 from '../NavBars/NavBars/NavBar3.jsx'
+import Showcase from '../Showcase/Showcase.jsx'
+import './PozoNewUI.scss'
+import Testimonial from '../../TemplateComps/Testimonial/Testimonial.jsx'
+import PreviewPricing3 from '../Pricing/PreviewPricing3.jsx'
+import FaqPreview3 from '../Faq/FaqPreview3.jsx'
+import CTASection from '../CTASection/CTASection.jsx'
+import FooterTemplate3 from '../Footer/FooterTemplate3.jsx'
+import OverView4 from '../OverVIews/OverView4.jsx'
+import OverView6 from '../OverVIews/OverView6.jsx'
+
+function PozoNewUI() {
+ return (
+
+
+
+ )
+}
+
+export default PozoNewUI
diff --git a/src/Pages/themeTemplate/TemplateComps/PozoNewUI/PozoNewUI.scss b/src/Pages/themeTemplate/TemplateComps/PozoNewUI/PozoNewUI.scss
new file mode 100644
index 0000000..d5b923a
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/PozoNewUI/PozoNewUI.scss
@@ -0,0 +1,410 @@
+.landing-page {
+ width: 100%;
+ overflow-x: hidden;
+
+ .hero-section {
+ position: relative;
+ height: 100vh;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.2);
+ z-index: 1;
+ }
+ }
+
+ .scroll-3d-section {
+ min-height: 100vh;
+ position: relative;
+ background: linear-gradient(to bottom, #1a1a1a, #2d2d2d);
+ overflow: hidden;
+ perspective: 1000px;
+
+ .scroll-container {
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 4rem 2rem;
+ position: relative;
+ min-height: 300vh;
+
+ .scroll-element {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: sticky;
+ top: 0;
+
+ &.pos-receipt {
+ z-index: 3;
+ .receipt-3d {
+ width: 300px;
+ height: 400px;
+ position: relative;
+ transform-style: preserve-3d;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ border-radius: 15px;
+ box-shadow: 0 10px 30px rgba(229, 57, 53, 0.2);
+ }
+
+ .receipt-glow {
+ position: absolute;
+ inset: -20px;
+ background: radial-gradient(circle at 50% 50%, rgba(229, 57, 53, 0.2), transparent 70%);
+ filter: blur(20px);
+ }
+ }
+ }
+
+ &.pos-screen {
+ z-index: 2;
+ .screen-3d {
+ width: 500px;
+ height: 300px;
+ position: relative;
+ transform-style: preserve-3d;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ border-radius: 10px;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+ }
+
+ .screen-glow {
+ position: absolute;
+ inset: -30px;
+ background: radial-gradient(circle at 50% 50%, rgba(229, 57, 53, 0.15), transparent 80%);
+ filter: blur(30px);
+ }
+ }
+ }
+
+ &.inventory-items {
+ z-index: 1;
+ .items-3d {
+ width: 600px;
+ height: 400px;
+ position: relative;
+ transform-style: preserve-3d;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ border-radius: 20px;
+ box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
+ }
+
+ .inventory-glow {
+ position: absolute;
+ inset: -40px;
+ background: radial-gradient(circle at 50% 50%, rgba(229, 57, 53, 0.1), transparent 90%);
+ filter: blur(40px);
+ }
+ }
+ }
+ }
+ }
+
+ @media (max-width: 768px) {
+ .scroll-container {
+ padding: 2rem 1rem;
+
+ .scroll-element {
+ &.pos-receipt .receipt-3d {
+ width: 200px;
+ height: 300px;
+ }
+
+ &.pos-screen .screen-3d {
+ width: 300px;
+ height: 200px;
+ }
+
+ &.inventory-items .items-3d {
+ width: 400px;
+ height: 300px;
+ }
+ }
+ }
+ }
+
+ @media (max-width: 480px) {
+ .scroll-container {
+ .scroll-element {
+ &.pos-receipt .receipt-3d {
+ width: 150px;
+ height: 200px;
+ }
+
+ &.pos-screen .screen-3d {
+ width: 250px;
+ height: 150px;
+ }
+
+ &.inventory-items .items-3d {
+ width: 300px;
+ height: 200px;
+ }
+ }
+ }
+ }
+ }
+
+ .main-content {
+ width: 100%;
+ overflow-x: hidden;
+ scroll-behavior: smooth;
+
+ .hero-section {
+ min-height: 100vh;
+ position: relative;
+ z-index: 1;
+ scroll-snap-align: start;
+ }
+
+ .showcase-wrapper {
+ position: relative;
+ height: 100vh;
+ z-index: 2;
+ scroll-snap-align: start;
+ }
+}
+
+.hero-content {
+ position: relative;
+ z-index: 2;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-end;
+ text-align: right;
+ color: white;
+ padding-right: 8rem;
+ width: 100%;
+ margin-top: 2rem; h1 {
+ font-size: 3.5rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ line-height: 1.2;
+ letter-spacing: -0.02em;
+ max-width: 600px;
+
+ @media (max-width: 768px) {
+ font-size: 2.5rem;
+ text-align: center;
+ margin: 0 auto;
+ margin-bottom: 1rem;
+ }
+ }
+
+ p {
+ font-size: 1.5rem;
+ margin-bottom: 2.5rem;
+ opacity: 0.9;
+ max-width: 600px;
+ line-height: 1.5;
+
+ @media (max-width: 768px) {
+ font-size: 1.25rem;
+ }
+ }
+
+ .cta-button {
+ padding: 1rem 2.5rem;
+ font-size: 1.25rem;
+ font-weight: 600;
+ background-color: #f59e0b;
+ color: white;
+ border: none;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+
+ &:hover {
+ background-color: #d97706;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ &:active {
+ transform: translateY(0);
+ }
+ }
+ }
+ }
+
+
+
+
+
+//v
+.scroll-3d-section {
+ min-height: 100vh;
+ position: relative;
+ background: linear-gradient(to bottom, #1a1a1a, #2d2d2d);
+ overflow: hidden;
+ perspective: 1000px;
+
+ .scroll-container {
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 4rem 2rem;
+ position: relative;
+
+ .scroll-element {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: sticky;
+ top: 0;
+
+ &.pos-receipt {
+ z-index: 3;
+ .receipt-3d {
+ width: 300px;
+ height: 400px;
+ position: relative;
+ transform-style: preserve-3d;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ border-radius: 15px;
+ box-shadow: 0 10px 30px rgba(229, 57, 53, 0.2);
+ }
+
+ .receipt-glow {
+ position: absolute;
+ inset: -20px;
+ background: radial-gradient(circle at 50% 50%, rgba(229, 57, 53, 0.2), transparent 70%);
+ filter: blur(20px);
+ }
+ }
+ }
+
+ &.pos-screen {
+ z-index: 2;
+ .screen-3d {
+ width: 500px;
+ height: 300px;
+ position: relative;
+ transform-style: preserve-3d;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ border-radius: 10px;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+ }
+
+ .screen-glow {
+ position: absolute;
+ inset: -30px;
+ background: radial-gradient(circle at 50% 50%, rgba(229, 57, 53, 0.15), transparent 80%);
+ filter: blur(30px);
+ }
+ }
+ }
+
+ &.inventory-items {
+ z-index: 1;
+ .items-3d {
+ width: 600px;
+ height: 400px;
+ position: relative;
+ transform-style: preserve-3d;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ border-radius: 20px;
+ box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
+ }
+
+ .inventory-glow {
+ position: absolute;
+ inset: -40px;
+ background: radial-gradient(circle at 50% 50%, rgba(229, 57, 53, 0.1), transparent 90%);
+ filter: blur(40px);
+ }
+ }
+ }
+ }
+ }
+
+ @media (max-width: 768px) {
+ .scroll-container {
+ padding: 2rem 1rem;
+
+ .scroll-element {
+ &.pos-receipt .receipt-3d {
+ width: 200px;
+ height: 300px;
+ }
+
+ &.pos-screen .screen-3d {
+ width: 300px;
+ height: 200px;
+ }
+
+ &.inventory-items .items-3d {
+ width: 400px;
+ height: 300px;
+ }
+ }
+ }
+ }
+
+ @media (max-width: 480px) {
+ .scroll-container {
+ .scroll-element {
+ &.pos-receipt .receipt-3d {
+ width: 150px;
+ height: 200px;
+ }
+
+ &.pos-screen .screen-3d {
+ width: 250px;
+ height: 150px;
+ }
+
+ &.inventory-items .items-3d {
+ width: 300px;
+ height: 200px;
+ }
+ }
+ }
+ }
+}
+
+.NewUimain-content {
+ body{
+ background-color: #388E3C;
+ }
+ display: flex;
+ flex-direction: column;
+ background-color: #388E3C;
+ overflow: auto;
+}
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/Pricing/PrcingPreview1.scss b/src/Pages/themeTemplate/TemplateComps/Pricing/PrcingPreview1.scss
new file mode 100644
index 0000000..2090974
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Pricing/PrcingPreview1.scss
@@ -0,0 +1,422 @@
+.freebtn1fullpage {
+ box-sizing: border-box;
+ width: 10rem;
+ // height: 35px;
+ // padding: 0.67vw 0.6vh;
+ padding: 0.6rem;
+ // margin: 1vw 2vh;
+ display: flex;
+ justify-content: space-evenly;
+ font-family: VAR(--PARA_FONT_FAMILY);
+ align-items: center;
+ background: #35b856;
+ color: #fff;
+ font-size: 16px;
+ border: 1px solid #35b856 !important;
+ border-radius: 11px;
+ // transition-duration: 0.6s;
+ border: 0px;
+ line-height: 19px;
+ cursor: pointer;
+}
+.freebtn1fullpage button {
+ justify-content: center;
+ height: 33px;
+}
+.freebtn1fullpage:hover {
+ box-sizing: border-box;
+ // margin: 1.5vw 2vh;
+ display: flex;
+ justify-content: space-evenly;
+ background: #fff !important;
+ border: 1px solid #35b856 !important;
+ border-radius: 11px;
+ color: #35b856 !important;
+ border: 0px;
+ // transition-duration: 0.6s;
+}
+.freebtn1fullpage.disabled {
+ background-color: #d5ffdf;
+ cursor: not-allowed;
+ border: none !important;
+ color: #35b856;
+}
+
+.freebtn1fullpage.disabled:hover {
+ /* Remove any existing hover styles */
+ background-color: #d5ffdf !important;
+ cursor: not-allowed;
+ border: none !important;
+ color: #35b856;
+}
+
+.freetxt {
+ font-family: VAR(--PARA_FONT_FAMILY);
+ font-style: normal;
+ margin: 0px 3vh;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ color: #ffffff;
+ width: 13vw;
+}
+
+.PriceWOD {
+ background-color: rgb(204, 204, 204);
+ width: 100px;
+ height: 15px;
+ text-align: center;
+ position: relative;
+}
+
+.btnWOD {
+ background-color: rgb(204, 204, 204);
+ width: 100px;
+ height: 15px;
+ text-align: center;
+}
+
+.btntextskeleton {
+ background-color: rgb(204, 204, 204);
+ width: 100px;
+ height: 15px;
+ text-align: center;
+
+ margin: 1vw 2vh;
+ padding: 0.46vw vh;
+ display: flex;
+ justify-content: space-evenly;
+ font-size: 15px;
+ border-radius: 6px;
+ align-items: center;
+ font-family: VAR(--PARA_FONT_FAMILY);
+ font-style: normal;
+}
+
+.btntextfullpage {
+ // margin: 1.5vw 2vh;
+
+ // padding: 0.6vw 0.6vh;
+ padding: 0.6rem;
+ display: flex;
+ justify-content: center;
+ column-gap: 1rem;
+ font-size: 15px;
+ width: 8rem;
+ // border: solid 1px #000 !important;
+ background-color: #ff4848;
+ border-radius: 10px;
+ align-items: center;
+ font-family: VAR(--PARA_FONT_FAMILY);
+ font-style: normal;
+ line-height: 19px;
+ color: #ffffff;
+ cursor: pointer;
+ font-weight: 500;
+ // transition-duration: 0.6s;
+}
+
+
+
+
+.Pricing1Page {
+ & .ant-switch:not(.ant-switch-checked) {
+ background: #ff4d4f !important;
+ }
+
+ & .ant-switch:not(.ant-switch-checked):hover:not(.ant-switch-disabled) {
+ background: #ff4d4f !important;
+ }
+}
+
+.pricing1full {
+ // background-color: #FFFFFF;
+ // padding: 4vw 12vh;
+ line-height: 1.5;
+ z-index: 24;
+ // font-family: 'Manrope';
+ font-style: normal;
+}
+
+.pricing1toggle {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.pricing1subtextwod {
+ font-size: 16px;
+ width: 40px;
+ height: 3px;
+ text-decoration: none;
+ background: #c7c7c7;
+}
+
+.pricing1subtext {
+ // font-family: 'Manrope';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 40px;
+ letter-spacing: 0.01em;
+ color: #0e0e0e;
+}
+
+.pricing1subtext span {
+ // font-family: 'Manrope';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 15px;
+ letter-spacing: 0.01em;
+ color: rgb(59, 59, 59);
+}
+
+.pricing1toggle {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
+.Pricing1Page {
+ // margin-top:5vh;
+ // margin-left: 5vw;
+ padding: 2rem 2rem;
+ // background-color: #d7ebff;
+ background-image: linear-gradient(to right bottom,
+ #d7ebff,
+ #c2dffd,
+ #add3fb,
+ #97c7f8,
+ #81bbf6);
+}
+
+.Pricing1PageWOD {
+ background-color: white;
+ height: fit-content;
+ width: 500px;
+}
+
+.pricing1name {
+ // width: 60.18px;
+ height: 14.62px;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 13.7565px;
+ line-height: 19px;
+ letter-spacing: 0.2em;
+ color: #000000;
+ margin: 6px 25px;
+}
+
+.pricing1content {
+ margin: 20px 0px;
+ font-style: normal;
+ font-family: var(--HEADING_FONT_FAMILY);
+ font-weight: 500;
+ font-size: clamp(2.5rem, 1.5dvw, 2rem);
+ color: #161616;
+}
+
+.DetailsWOD {
+ background-color: rgb(204, 204, 204);
+ width: 100px;
+ margin: 2px;
+
+ height: 10px;
+ text-align: center;
+ align-items: center;
+}
+
+.pricingcardsdivWOD {
+ margin: 0vw 0vh;
+ display: flex;
+ flex-grow: 1;
+ gap: 1rem;
+ justify-content: flex-start;
+ // height:18rem;
+ width: 27rem;
+}
+
+.pricing1cardsdiv {
+ margin: 0vw 0vh;
+ display: flex;
+ flex-grow: 1;
+ gap: 1rem;
+ justify-content: flex-start;
+ overflow-x: scroll;
+ transform: scale(0.9);
+}
+
+.pricingcardstempWOD {
+ margin: 0vw 0vh;
+ display: flex;
+ flex-grow: 1;
+ gap: 1rem;
+ justify-content: flex-start;
+ height: 15rem;
+ width: 10rem;
+}
+
+.pricing1div {
+ // margin: 0vw 5vh;
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ // border: solid #000 1px;
+ transition: cubic-bezier(0.42, 0, 0.58, 1);
+ // transform: rotate(90deg);
+ // overflow-y: scroll !important;
+ // overflow-x: scroll;
+ // cursor: grab;
+ // width: 950px;
+ // overflow-x: scroll;
+ // margin-left: -3rem;
+}
+
+.pricing1pricingcont {
+ // width: 200rem !important;
+ // overflow-x: scroll;
+ padding: 0px;
+ margin: 0px;
+ margin-top: 1rem;
+ box-sizing: border-box;
+}
+
+.pricing11subtoggle {
+ display: flex;
+ // flex-wrap: wrap;
+ flex-direction: row;
+ row-gap: 1rem;
+ column-gap: 0.3rem;
+ justify-content: center !important;
+ align-items: center;
+ width: 9rem;
+
+}
+
+.pricing1cardstemp {
+ padding: 1rem;
+ background: #ffffff;
+ border-radius: 20.1127px;
+ display: flex;
+ flex-direction: column;
+ // align-items: center;
+ width: 270px;
+ height: 389px;
+ transition-duration: 0.6s;
+ border: rgba(39, 39, 39, 0.1019607843) solid 1px;
+ // padding-bottom: 10px;
+ position: relative;
+}
+
+.pricing1cardstemp:hover {
+ background: #ffffff;
+ // border: #272727 solid 1px;
+ border-radius: 20.1127px;
+ width: 270px;
+ transition-duration: 0.6s;
+ // box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+ // padding-bottom: 20px;
+}
+
+.netprice1 {
+ display: flex;
+ flex-direction: column;
+ // align-items: center;
+ // row-gap: 1rem;
+}
+
+.feature {
+ height: 30vh;
+ overflow-y: auto;
+ // margin-top: 1vh;
+ margin: 1rem 1rem;
+ // padding: 10px;
+ // box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
+ display: flex;
+ flex-direction: column;
+ row-gap: 1rem;
+}
+
+.pricing1start {
+ // margin-top: 1vh;
+ display: flex;
+ justify-content: center;
+ // position: absolute;
+ bottom: 0;
+ width: 100%;
+}
+
+.gitfimg1 {
+ width: 70.37px;
+ height: 63.37px;
+ margin: 0px 9px;
+ transition-duration: 0.6s;
+}
+
+.gitfimg1:hover {
+ width: 75px;
+ height: 75px;
+ margin: 0px 9px;
+ transition-duration: 0.6s;
+}
+
+.Pricing1freeWOD {
+ margin: 0px 25px;
+ font-style: normal;
+ font-family: var(--HEADING_FONT_FAMILY);
+ font-weight: 500;
+ font-size: clamp(2.5rem, 1.5dvw, 2rem);
+ color: #161616;
+}
+
+.pricingcardswod {
+ height: 80px;
+ background-color: #f97068;
+}
+
+@media (min-width: 279px) and (max-width: 653px) {
+ .Pricing1Page {
+ padding: 1rem 0.4rem;
+ }
+}
+
+@media (min-width: 279px) and (max-width: 499px) {
+ .pricing1cardstemp {
+ transform: scale(0.7);
+ }
+
+ .pricing1cardsdiv {
+ gap: 0;
+ }
+}
+
+.DetailWD {
+ // display: flex;
+ align-items: center;
+ font-size: 12px;
+ flex-wrap: nowrap;
+ text-wrap: nowrap;
+}
+
+.feature::-webkit-scrollbar {
+ // display: flex;
+}
+
+
+// .savepercentage{
+// margin-left: 33.5rem;
+// margin-top: -3rem;
+// }
+
+.curvearrow {
+ width: 30px
+}
+
+.subsavepercentage {
+ // margin-left: 33rem;
+ font-family: 'Brush Script MT', cursive;
+ color: #52C41A;
+}
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/Pricing/PrcingPreview2.scss b/src/Pages/themeTemplate/TemplateComps/Pricing/PrcingPreview2.scss
new file mode 100644
index 0000000..8a98d15
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Pricing/PrcingPreview2.scss
@@ -0,0 +1,862 @@
+.pricingtmplthdr {
+ // background-color: #D9D9D9;
+ // width: 120px;
+ height: 20px;
+ font-size: 16px;
+}
+
+.pricingtmplthdrWithoutData {
+ background-color: #d9d9d9;
+ width: 100px;
+ height: 15px;
+ font-size: 22px;
+}
+
+.pricingtmpltlist {
+ // background-color: #D9D9D9;
+ // width: 120px;
+ // height:10px;
+}
+
+.pricingtmpltlistwithoutData {
+ background-color: #d9d9d9;
+ width: 80px;
+ height: 7px;
+}
+
+.ftrlink {
+ color: #94a3b8;
+ font-size: 1rem;
+ text-decoration: none;
+ transition: color 0.2s;
+ font-weight: 400;
+ font-family: 'Inter';
+}
+
+
+.ftrlinkwithOutData {
+ font-size: 14px;
+ width: 80px;
+ text-decoration: none;
+ color: #0f0303;
+}
+.PricingPage {
+ // margin-top:5vh;
+ // margin-left: 5vw;
+ padding: 3rem 2rem;
+ // background-color: #f3f3f4;
+}
+
+.PricingHeader {
+ letter-spacing: "25px";
+}
+
+.PricingHeaderwod {
+ background-color: grey;
+ width: 100px;
+ height: 15px;
+ font-size: 22px;
+ height: 6px !important;
+}
+
+.PricingHeaderwod {
+ font-size: 14px;
+ width: 80px;
+ text-decoration: none;
+ color: #b1b1b1;
+}
+
+.pricingtextwod {
+ background: rgb(204, 204, 204);
+ width: 100px;
+ height: 15px;
+ font-size: 22px;
+ margin: 0.5rem 0rem;
+}
+
+.pricingsubtextwod {
+ font-size: 16px;
+ width: 40px;
+ height: 3px;
+ text-decoration: none;
+ background: #c7c7c7;
+}
+
+.pric-cards {
+ // width:320px;
+ // height: 230px;
+ background-color: #ffffff;
+ display: flex;
+ // flex-wrap: wrap;
+ flex-direction: row;
+ column-gap: 2rem;
+}
+.pricingfull {
+ // background-color: #FFFFFF;
+ // padding: 4vw 12vh;
+ line-height: 1.5;
+ z-index: 24;
+ // font-family: 'Manrope';
+ font-style: normal;
+}
+
+.pricingcardswod {
+ // width:80px;
+ height: 80px;
+ background-color: #f97068;
+ // margin: 3rem 1rem;
+}
+.pricingcarddisplay {
+ display: block;
+ // flex-grow: 1;
+ // padding: 4rem;
+ gap: 1rem;
+ justify-content: center;
+ // background-color: #ffffff;
+ // border-radius: 20px;
+ overflow-x: scroll;
+ // box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}
+.pricingcarddisplayWOD {
+ display: block;
+ // flex-grow: 1;
+ gap: 1rem;
+ justify-content: center;
+ background-color: #ffffff;
+}
+
+.net-price-strike {
+ // font-weight: bold;
+ font-size: small;
+ text-decoration: line-through;
+ text-decoration-color: #ff4d4f !important;
+ // color: #FF4D4F; /* or any other color you prefer */
+}
+
+.net-price {
+ // font-weight: bold;
+ color: black; /* or any other color you prefer */
+ font-size: 50px;
+ // font-weight: 600;
+}
+.pricesfullpage {
+ display: flex;
+ flex-direction: column;
+ // flex-wrap: wrap;
+ width: 12.5vw;
+ justify-content: space-evenly;
+ align-items: center;
+}
+.btntextfullpage {
+ padding: 0.6rem;
+ display: flex;
+ justify-content: center;
+ column-gap: 1rem;
+ font-size: 15px;
+ width: 10rem;
+ // border: solid 1px #000 !important;
+ background-color: #ff4848;
+ border-radius: 10px;
+ align-items: center;
+ font-family: VAR(--PARA_FONT_FAMILY);
+ font-style: normal;
+ line-height: 19px;
+ color: #ffffff;
+ cursor: pointer;
+ font-weight: 500;
+
+ // transition-duration: 0.6s;
+}
+
+.no-border-icon {
+ border: none !important;
+}
+.btntextfullpage:hover {
+ padding: 0.6rem;
+ display: flex;
+ justify-content: center;
+ column-gap: 1rem;
+ font-size: 15px;
+ width: 10rem;
+ // border: solid 1px #000 !important;
+ background-color: #ff4848;
+ border-radius: 10px;
+ align-items: center;
+ font-family: VAR(--PARA_FONT_FAMILY);
+ font-style: normal;
+ line-height: 19px;
+ color: #ffffff;
+ cursor: pointer;
+ font-weight: 500;
+ // transition-duration: 0.6s;
+}
+
+.pricingnamefullpage {
+ // width: 60.18px;
+ margin-top: 2vh;
+ height: 14.62px;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 13.7565px;
+ line-height: 19px;
+ letter-spacing: 0.2em;
+ color: #000000;
+ // margin: 25px 25px;
+}
+
+.priccards {
+ display: flex;
+ flex-direction: column;
+ // row-gap: 1rem;
+ // width: 200px;
+ align-items: center;
+ // background-color: #ffffff;
+ // margin-left: 50px;
+}
+.priccardsWOD {
+ display: flex;
+ flex-direction: column;
+ // row-gap: 1rem;
+ // width: 200px;
+ align-items: center;
+ // height:10px;
+ // background-color: #F97068;
+}
+
+.priccardswod {
+ // width:80px;
+ // height: 150px;
+ // background-color: #F0F0F0;
+ // margin: 3rem 0.3rem;
+ // display: flex;
+ // align-items: center;
+ // justify-content: center;
+ height: 5rem;
+ width: 5rem;
+}
+
+.pricamnt {
+ color: white;
+}
+
+.freepricamnt {
+ color: rgb(0, 0, 0);
+}
+
+.pricpopcards {
+ // display: flex;
+ // flex-direction: column;
+ display: flex;
+ flex-direction: column;
+ row-gap: 1rem;
+ // width: 200px;
+ padding: 1rem 0rem;
+ align-items: center;
+ color: #fff;
+ border-radius: 8px;
+ // color: #fff;
+ // row-gap: 1rem;
+}
+
+.pricpopularcards {
+ // display: flex;
+ // flex-direction: column;
+ display: flex;
+ flex-direction: column;
+ row-gap: 1rem;
+ width: 200px;
+ align-items: center;
+ color: #fff;
+ border-radius: 8px;
+ padding: 1rem 0rem;
+ // color: #fff;
+ // row-gap: 1rem;
+}
+
+.pricprimecard {
+ display: flex;
+ flex-direction: column;
+ row-gap: 1rem;
+ align-items: center;
+ color: #000000;
+ border-radius: 8px;
+ padding: 1rem 0rem;
+}
+
+// .pricfreecard{
+// display: flex;
+// flex-direction: column;
+// row-gap: 1rem;
+// align-items: center;
+// color: #000000;
+// width: 200px;
+// border-radius: 8px;
+// padding:1rem 0rem;
+// }
+
+// ::-webkit-scrollbar {
+// display: none;
+// }
+
+.priccarddetailwod {
+ // width:60px;
+ height: 10px;
+ background-color: #cccccc;
+}
+
+.pricactcarddetailwod {
+ width: 60px;
+ height: 10px;
+ background-color: #ffffff;
+}
+
+.priccardtitlewod {
+ width: 40px;
+ height: 4px;
+ background-color: #cccccc;
+}
+
+.priccardacttitlewod {
+ width: 40px;
+ height: 4px;
+ background-color: #ffffff;
+}
+
+.priccardbtn {
+ width: 80px;
+ height: 20px;
+ color: #000000;
+ background-color: #ffffff;
+ width: 150px;
+ height: 35px;
+ border-radius: 6px;
+ border: none;
+ transition-duration: 0.2s;
+}
+
+.priccardbtn:hover {
+ width: 80px;
+ height: 20px;
+ color: #000000;
+ background-color: #ffffff;
+ width: 160px;
+ height: 40px;
+ border-radius: 6;
+ border: #000 solid 1px;
+ transition-duration: 0.2s;
+}
+
+.priccarddivwod {
+ display: flex;
+ column-gap: 2rem;
+ flex-direction: column;
+ row-gap: 1rem;
+ padding: 5rem 0.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.pricepopwod {
+ display: flex;
+ column-gap: 2rem;
+ flex-direction: column;
+ row-gap: 1rem;
+ padding: 1rem 0.5rem;
+ display: flex;
+ align-items: center;
+ height: 15vh;
+ justify-content: center;
+}
+
+.priccardbtnwod {
+ width: 60px;
+ height: 15px;
+ background-color: #ffffff;
+ border: none;
+}
+
+.priccardbtn2wod {
+ width: 60px;
+ height: 15px;
+ background-color: #ffffff;
+ border: none;
+}
+
+.pricamtactdetailwod {
+ width: 60px;
+ height: 10px;
+ background-color: #ffffff9d;
+}
+
+.pricamtdetailwod {
+ width: 60px;
+ height: 10px;
+ background-color: #0000009d;
+}
+
+// with data ..................
+
+.pricingtext {
+ font-family: var(--HEADING_FONT_FAMILY);
+ font-weight: 600 !important;
+ font-size: 35.9294px;
+ color: #000000;
+}
+
+.tablep2price1 {
+ width: 72rem;
+ height: 16rem;
+ table-layout: fixed;
+ border-collapse: collapse;
+ // border: 0.2px solid rgb(204, 204, 204);
+ border: none !important;
+}
+.tablep2price1 th,
+.tablep2price1 td {
+ // border: 0.2px solid rgb(204, 204, 204);
+ border: none !important;
+ width: rem;
+}
+.tablep2price1WOD {
+ width: 100%;
+ height: 8rem;
+ border-spacing: 0;
+ table-layout: fixed;
+ // border: 0.2px solid rgb(204, 204, 204);
+}
+.tablep2price1WOD th {
+ border: 0.2px solid rgb(204, 204, 204);
+ padding: 1vh 1vw;
+ text-align: center;
+}
+.tablep2price2 {
+ width: 80vw;
+ // border: 0.2px solid rgb(204, 204, 204);
+ height: 10rem;
+ display: table;
+ table-layout: fixed;
+ text-align: center;
+ border-collapse: collapse;
+ border-radius: 15px;
+}
+// .tablep2price2 td,th{
+// // border: 0.2px solid rgb(204, 204, 204);
+// font-weight: 600;
+// }
+
+// .tablep2price2 td {
+// border-top: 1px solid rgb(204, 204, 204);
+// border-bottom: 1px solid rgb(204, 204, 204);
+// padding: 8px;
+// }
+
+// .tablep2price2 td,
+// th {
+// border-bottom: 1px solid rgb(204, 204, 204);
+// border-left: 1px solid rgb(204, 204, 204);
+// border-right: 1px solid rgb(204, 204, 204);
+// padding: 8px;
+// }
+
+// .tablep2price2 tr:first-child td {
+// border-top: none;
+// }
+
+// .tablep2price2 tr:last-child td {
+// border-bottom: none;
+// }
+
+// .tablep2price2 tr td:first-child {
+// border-left: none;
+// }
+
+// .tablep2price2 tr td:last-child {
+// border-right: none;
+// }
+// .tablep2price2 tr th:first-child {
+// border-left: none;
+// }
+
+// .tablep2price2 tr th:last-child {
+// border-right: none;
+// }
+
+// .tablep2price2 td {
+// padding: 8px;
+// }
+
+.tablep2price2WOD {
+ width: 100%;
+ border-spacing: 0;
+ table-layout: fixed;
+}
+.tablep2price2WOD td {
+ border: 0.2px solid rgb(204, 204, 204);
+ border-collapse: collapse;
+ padding: 1vh 1vw;
+}
+
+.priccardsWOD {
+ display: flex;
+ flex-direction: column;
+ width: 100px;
+ align-items: center;
+}
+
+// table, th, td {
+// border: 1px solid rgb(126, 126, 126);
+// border-collapse: collapse;
+// }
+.freebtnfullpage {
+ box-sizing: border-box;
+ width: 10rem;
+ // height: 35px;
+ padding: 0.6vw 0.6vh;
+ // margin: 1.5vw 2vh;
+ display: flex;
+ justify-content: space-evenly;
+ font-family: VAR(--PARA_FONT_FAMILY);
+ align-items: center;
+ background: var(--SELECTED_COLOR);
+ color: #fff;
+ font-size: 16px;
+ border: 0.5px solid #000000;
+ border-radius: 6px;
+ transition-duration: 0.6s;
+ border: 0px;
+ line-height: 19px;
+ cursor: pointer;
+}
+
+.freebtnfullpage:hover {
+ box-sizing: border-box;
+ margin: 1.5vw 4vh;
+ display: flex;
+ justify-content: space-evenly;
+ background: none !important;
+ border: 1px solid var(--SELECTED_COLOR) !important;
+ border-radius: 6px;
+ color: var(--SELECTED_COLOR) !important;
+ border: 0px;
+ transition-duration: 0.6s;
+}
+.freebtnfullpage.disabled .disabled-button-free {
+ // border-radius: 50%;
+ background-color: grey;
+ width: 150px;
+ height: 45px;
+ border-radius: 8px;
+ color: #441adf;
+ text-align: center;
+ font-weight: bold;
+ font-weight: 500;
+ font-size: 14px;
+ font-family: var(--HEADING_FONT_FAMILY);
+ font-style: normal;
+ justify-content: center;
+ /* Add other desired styles */
+}
+
+.freebtnfullpage.disabled {
+ background-color: #ffffff;
+ cursor: not-allowed;
+}
+
+.freebtnfullpage.disabled:hover {
+ /* Remove any existing hover styles */
+ background-color: #ffffff;
+ cursor: not-allowed;
+ border: 1px solid #ffffff !important;
+ color: #ffffff !important;
+}
+
+.freetxt {
+ font-family: VAR(--PARA_FONT_FAMILY);
+ font-style: normal;
+ margin: 0px 3vh;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ color: #ffffff;
+ width: 13vw;
+}
+ant-switch.ant-switch-checked {
+ background: #41df51;
+}
+
+.ant-switch.ant-switch-checked:hover:not(.ant-switch-disabled) {
+ background: #41df51;
+}
+
+.PricingPage {
+ & .ant-switch:not(.ant-switch-checked) {
+ background: #ff4d4f !important;
+ }
+
+ & .ant-switch:not(.ant-switch-checked):hover:not(.ant-switch-disabled) {
+ background: #ff4d4f !important;
+ }
+}
+.pricingdivfullpage {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ transition: cubic-bezier(0.42, 0, 0.58, 1);
+ // overflow-x: scroll;
+ justify-content: normal;
+ transition: 0.6s ease-out;
+}
+
+.gitfimgfullpage {
+ width: 70.37px;
+ height: 63.37px;
+ margin: 0px 9px;
+ transition-duration: 0.6s;
+}
+
+.gitfimgfullpage:hover {
+ width: 75px;
+ height: 75px;
+ margin: 0px 9px;
+ transition-duration: 0.6s;
+}
+
+// .TemplateCard{
+// width: 400px;
+// }
+//Pricing cards design
+.pricingcardstemp {
+ background: #ffffff;
+ border-radius: 11.1127px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 220px;
+ height: initial;
+ transition-duration: 0.6s;
+ border: rgba(39, 39, 39, 0.1019607843) solid 1px;
+ padding-bottom: 20px;
+ position: relative;
+}
+.pricingcardstemp:hover {
+ background: #ffffff;
+ border: #272727 solid 1px;
+ border-radius: 11.1127px;
+ width: 220px;
+ height: initial;
+ transition-duration: 0.6s;
+ box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
+ padding-bottom: 20px;
+}
+.pricingnametemp {
+ // width: 60.18px;
+ height: 14.62px;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 13.7565px;
+ line-height: 19px;
+ letter-spacing: 0.2em;
+ color: #000000;
+ text-align: center;
+}
+
+.featureheadingWOD {
+ width: 60px;
+ height: 10px;
+ background-color: #ffffff9d;
+}
+.Pricing2PageWOD {
+ background-color: white;
+ height: fit-content;
+ width: 600px;
+}
+.tabledataWOD {
+ background-color: rgb(204, 204, 204);
+ width: 70px;
+ height: 15px;
+ text-align: center;
+ position: relative;
+}
+
+// table, th, td {
+// border: 1px solid rgb(204, 204, 204);
+// border-collapse: collapse;
+// }
+.hovered {
+ background-color: #fff6ee;
+}
+.amtpaid {
+ background-color: #ea4c89;
+ border-radius: 8px;
+ border-style: none;
+ box-sizing: border-box;
+ color: #ffffff;
+ cursor: pointer;
+ display: inline-block;
+ font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial,
+ sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ height: 40px;
+ line-height: 20px;
+ list-style: none;
+ margin: 0;
+ outline: none;
+ padding: 10px 16px;
+ text-align: center;
+ text-decoration: none;
+ transition: color 100ms;
+ vertical-align: baseline;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+}
+
+.pricingdivfullpage {
+ width: 100%;
+ overflow: auto;
+}
+
+.pricing2-th {
+ width: 14rem;
+ /* padding: 2rem 1rem; */
+ height: 11rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+.pricint2-featuresname {
+ width: 23.6rem;
+}
+.pricint2-features-access {
+ width: 14rem;
+}
+
+.pricing2-buttons-container {
+ width: 14rem;
+ padding: 10px;
+}
+
+@media (min-width: 280px) and (max-width: 499px) {
+ // .pricing2-th {
+ // width: 6rem;
+ // }
+
+ // .pricint2-features-access {
+ // width: 6rem;
+ // }
+
+ // .pricing2-buttons-container {
+ // width: 6rem;
+ // padding: 10px;
+ // }
+ .pricint2-featuresname {
+ width: 15.6rem;
+ }
+ .PricingPage {
+ // margin-top:5vh;
+ // margin-left: 5vw;
+ padding: 3rem 0.2rem;
+ // background-color: #f3f3f4;
+ }
+ .pricing1subtoggle {
+ width: 15rem !important;
+ }
+ .pricingdivfullpage {
+ justify-content: normal !important;
+ }
+}
+@media (min-width: 500px) and (max-width: 768px) {
+ // .pricint2-featuresname {
+ // width: 18rem;
+ // }
+ // .pricing1subtoggle {
+ // width: 18rem;
+ // }
+ .PricingPage {
+ // margin-top:5vh;
+ // margin-left: 5vw;
+ padding: 3rem 0.2rem;
+ }
+ .pricingdivfullpage {
+ justify-content: normal !important;
+ }
+}
+
+@media (min-width: 769px) and (max-width: 1164px) {
+ // .pricint2-featuresname {
+ // width: 9rem;
+ // }
+ // .pricing1subtoggle {
+ // width: 9rem;
+ // }
+ .pricingdivfullpage {
+ justify-content: normal !important;
+ }
+}
+.Pricint2-freebtn {
+ padding: 10px 50px;
+ background-color: var(--SELECTED_COLOR);
+ border: 1px solid var(--SELECTED_COLOR);
+ border-radius: 5px;
+ color: #fff;
+ font-size: 16px;
+ width: 12rem;
+ cursor: pointer;
+ font-family: var(--SELECTED_FONT);
+}
+.Pricint2-freebtn:hover {
+ color: var(--SELECTED_COLOR);
+ background-color: #fff;
+ border: 1px solid var(--SELECTED_COLOR);
+}
+.Pricint2-freeAlreadyused {
+ border: 1px solid black;
+ padding: 10px 50px;
+ background-color: #fff;
+ border-radius: 5px;
+ color: #000000;
+ cursor: not-allowed;
+ font-size: 16px;
+ width: 12rem;
+ font-family: var(--SELECTED_FONT);
+}
+
+.Pricint2-payablebtn {
+ padding: 10px 50px;
+ background-color: var(--DEFAULT_SELECTED_COLOR);
+ border: 1px rgb(25, 118, 210) solid;
+ border-radius: 5px;
+ font-size: 16px;
+ color: #fff;
+ width: 12rem;
+ font-family: var(--SELECTED_FONT);
+ cursor: pointer;
+}
+.Pricint2-payablebtn:hover {
+ background-color: #fff;
+ color: rgb(25, 118, 210);
+ border: 1px rgb(25, 118, 210) solid;
+}
+.pricing2-year-month {
+ display: flex;
+ border: 1px solid rgb(182, 182, 182);
+ border-radius: 4px;
+}
+
+.pricing1subtoggle {
+ display: flex;
+ // flex-wrap: wrap;
+ flex-direction: row;
+ // row-gap: 1rem;
+ column-gap: 0.3rem;
+ align-items: center;
+ width:23rem;
+ justify-content: center !important;
+}
+
+.pricingdivfullpage::-webkit-scrollbar {
+ display: flex;
+ // height: 6px;
+}
diff --git a/src/Pages/themeTemplate/TemplateComps/Pricing/PreviewPricing1.jsx b/src/Pages/themeTemplate/TemplateComps/Pricing/PreviewPricing1.jsx
new file mode 100644
index 0000000..28560f7
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Pricing/PreviewPricing1.jsx
@@ -0,0 +1,412 @@
+import React, { useRef, useState, useCallback, useEffect} from 'react';
+import { useDispatch, useSelector } from "react-redux";
+import {EyeOutlined, ArrowRightOutlined ,PlusOutlined,
+ CloseOutlined,InfoCircleOutlined} from '@ant-design/icons';
+import { Modal,Tooltip } from 'antd';
+import { InputField } from "../../../../Components/Forms/InputField";
+import { Form } from "antd";
+import Buttons from "../../../../Components/Forms/Buttons";
+import { Messages } from "../../../../Components/Notifications/Messages";
+import {changePricingData,pricingPostData,} from "../../../../features/themeChange/themeChange.js"
+import { getPricingType } from '../../../../features/pricingType/pricingType';
+import Pricing1 from "./Pricing1"
+import { validateSafeInput } from '../../../../Services/others.js';
+// import PreviewPricing1 from "./PreviewPricing1"
+
+
+
+const PreviewPricing1 =() => {
+ const formRef = useRef(null);
+ const dispatch = useDispatch();
+
+ const pricingData = useSelector(pricingPostData);
+
+ const [open, setOpen] = useState(false);
+ const [Editopen, setEditOpen] = useState(false);
+ const [messageType, setMessageType] = useState(null);
+ const [messageData, setMessageData] = useState(null);
+ const [editData, setEditData] = useState(false);
+
+
+ useEffect(() => {
+ getPricingTypes();
+ },[])
+
+ async function getPricingTypes(){
+ await dispatch(getPricingType({"Type":"Y","AppId":16,"UserId":1})).unwrap
+ }
+
+ const onComplete = useCallback(() => {
+ setMessageData(null);
+ setMessageType(null);
+ }, []);
+
+
+ useEffect(()=>{
+
+ if (pricingData?.length > 0){
+ let Pricing2 = pricingData.filter(eachData =>
+ eachData.FieldName.includes('Pricing2')
+ )
+
+ if(Pricing2?.length>0){
+ setEditData(true)
+ }
+
+ {pricingData?.map((item, index) => (
+ item?.["FieldName"]=="Pricing2Title" ?
+ formRef?.current?.setFieldsValue({"Title":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Pricing2Header" ?
+ formRef?.current?.setFieldsValue({"Header":item?.["FieldValue"]})
+ :item?.["FieldName"]=="Pricing2Description" ?
+ formRef?.current?.setFieldsValue({"Description":item?.["FieldValue"]})
+
+ :null
+ ))}
+
+ }else{
+ setEditData(false)
+ }
+
+ },[Editopen,pricingData])
+
+
+ const modalOpen = () =>{
+
+
+ setEditOpen(true)
+
+
+ }
+ const onCancel = () => {
+ setEditOpen(false);
+ formRef.current?.resetFields();
+
+ };
+
+
+ const onFinish = (values) =>{
+ let postData = [
+ {
+ 'FieldName':'Pricing2Title',
+ 'FieldValue':values?.Title,
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Pricing2Header',
+ 'FieldValue':values?.Header,
+ 'FieldAddData':''
+ },
+
+ {
+ 'FieldName':'Pricing2Description',
+ 'FieldValue':values?.Description,
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'PricingCatName',
+ 'FieldValue':'FREE',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'PricingCatFeatures',
+ 'FieldValue':'Company',
+ 'FieldAddData':'https://paypre.in'
+ },
+ {
+ 'FieldName':'Monthly',
+ 'FieldValue':'Monthly',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'Yearly',
+ 'FieldValue':'Yearly',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+
+
+ {
+ 'FieldName':'PricfreeBtn',
+ 'FieldValue':'TRY FREE',
+ 'FieldAddData':'https://paypre.in'
+ },
+ {
+ 'FieldName':'PricBtn',
+ 'FieldValue':'BUY NOW',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'PricPopName',
+ 'FieldValue':'LITE',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+
+ {
+ 'FieldName':'PricPopPrice',
+ 'FieldValue':'$856',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'PricPrimeName',
+ 'FieldValue':'PRIME',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ ]
+
+
+ dispatch(changePricingData({postData:postData}))
+ setMessageData('Data Added Successfully');
+ setMessageType('success');
+ setEditOpen(false)
+ formRef.current?.resetFields();
+ }
+
+ const pricingPreview = async()=>{
+ if (pricingData?.length > 0) {
+ setOpen(true)
+ }
+ else {
+ setMessageData('Please Add a Pricing data to open the Preview');
+ setMessageType('warning');
+ }
+
+ }
+
+
+ const witoutdata = [
+ {
+ 'FieldName':'Pricing2Title',
+ 'FieldValue':'',
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Pricing2Header',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'Pricing2Description',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'PricingCatFeatures',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'PricingDescription',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'Monthly',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'Yearly',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+
+
+ {
+ 'FieldName':'PricfreeBtn',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+ {
+ 'FieldName':'PricBtn',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'PricPopName',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+
+ {
+ 'FieldName':'PricPopPrice',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'PricPrimeName',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+
+ ]
+
+
+
+ return (
+ <>
+
+
+
+
+
modalOpen()} />
+ pricingPreview()} />
+
+
setEditOpen(false)}
+ closeIcon={}
+ width={600}
+ >
+ Pricing
+
+
+
+
setOpen(false)}
+ onCancel={() => setOpen(false)}
+ width={1000}
+ >
+
+
+ >
+ )
+ }
+
+ export default PreviewPricing1
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/Pricing/PreviewPricing2.jsx b/src/Pages/themeTemplate/TemplateComps/Pricing/PreviewPricing2.jsx
new file mode 100644
index 0000000..619d221
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Pricing/PreviewPricing2.jsx
@@ -0,0 +1,327 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from "react-redux";
+import {
+ EyeOutlined, PlusOutlined,
+ ArrowRightOutlined, CloseOutlined, InfoCircleOutlined
+} from '@ant-design/icons';
+import { Modal, Tooltip } from 'antd';
+import { InputField } from "../../../../Components/Forms/InputField";
+import { Messages } from "../../../../Components/Notifications/Messages";
+import { Form } from "antd";
+import Pricing2 from "./Pricing2"
+import "./PrcingPreview2.scss"
+import Buttons from "../../../../Components/Forms/Buttons"
+import { changePricingData, pricingPostData, } from "../../../../features/themeChange/themeChange.js"
+import { validateSafeInput } from '../../../../Services/others.js';
+
+const PreViewPricing2 = () => {
+ const formRef = useRef(null);
+ const dispatch = useDispatch();
+
+ const pricingData = useSelector(pricingPostData);
+ const [open, setOpen] = useState(false);
+ const [Editopen, setEditOpen] = useState(false);
+ const [messageType, setMessageType] = useState(null);
+ const [messageData, setMessageData] = useState(null);
+ const [editData, setEditData] = useState(false);
+
+
+
+ const onComplete = useCallback(() => {
+ setMessageData(null);
+ setMessageType(null);
+ }, []);
+
+ useEffect(() => {
+
+ if (pricingData?.length > 0) {
+ let Pricing2 = pricingData.filter(eachData =>
+ eachData.FieldName.includes('Pricing2')
+ )
+
+ if (Pricing2?.length > 0) {
+ setEditData(true)
+ }
+
+ {
+ pricingData?.map((item, index) => (
+ item?.["FieldName"] == "Pricing2Title" ?
+ formRef?.current?.setFieldsValue({ "Title": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Pricing2Header" ?
+ formRef?.current?.setFieldsValue({ "Header": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Pricing2Description" ?
+ formRef?.current?.setFieldsValue({ "Description": item?.["FieldValue"] })
+
+ : null
+ ))
+ }
+
+ } else {
+ setEditData(false)
+ }
+
+
+ }, [pricingData, Editopen])
+
+
+ const modalOpen = () => {
+ setEditOpen(true)
+ }
+ const onCancel = () => {
+ setEditOpen(false);
+ formRef.current?.resetFields();
+
+ };
+
+
+ const onFinish = (values) => {
+ let postData = [
+ {
+ 'FieldName': 'Pricing2Title',
+ 'FieldValue': values?.Title,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Pricing2Header',
+ 'FieldValue': values?.Header,
+ 'FieldAddData': ''
+ },
+
+ {
+ 'FieldName': 'Pricing2Description',
+ 'FieldValue': values?.Description,
+ 'FieldAddData': ''
+ }
+
+ ]
+ dispatch(changePricingData({ postData: postData }))
+ setMessageData('Data Added Successfully');
+ setMessageType('success');
+ setEditOpen(false)
+ formRef.current?.resetFields();
+ }
+
+ const pricingPreview = async () => {
+ if (pricingData?.length > 0) {
+ setOpen(true)
+ }
+ else {
+ setMessageData('Please Add a Features data to open the Preview');
+ setMessageType('warning');
+ }
+
+ }
+
+
+ const witoutdata = [
+ {
+ 'FieldName': 'Pricing2Title',
+ 'FieldValue': '',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Pricing2Header',
+ 'FieldValue': '',
+ 'FieldAddData': 'https://pozo.app'
+ },
+
+ {
+ 'FieldName': 'Pricing2Description',
+ 'FieldValue': '',
+ 'FieldAddData': 'https://pozo.app'
+ },
+
+
+ ]
+
+
+
+
+
+ return (
+ <>
+
+
+
+
+
+
modalOpen()} />
+ pricingPreview()} />
+
+
+
setEditOpen(false)}
+ closeIcon={ }
+ width={600}
+ >
+
+ Pricing
+
+
+
+
setOpen(false)}
+ onCancel={() => setOpen(false)}
+ width={1000}
+ >
+
+
+
+
+
+
+
+ >
+ )
+}
+
+export default PreViewPricing2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/Pages/themeTemplate/TemplateComps/Pricing/PreviewPricing3 backup.jsx b/src/Pages/themeTemplate/TemplateComps/Pricing/PreviewPricing3 backup.jsx
new file mode 100644
index 0000000..0726c02
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Pricing/PreviewPricing3 backup.jsx
@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { BiCheck } from "react-icons/bi";
+import { getPricingType } from '../../../../features/pricingType/pricingType';
+import { getSession } from '../../../../Services/others';
+import './pricing3.scss';
+import giftImg from '../../../../Images/giftimg.png';
+import { changeCurrentColorValue, changeCurrentTextValue, getAllApplicationsData, selectedApplication, selectedApplicationName } from '../../../../features/themeChange/themeChange';
+
+const pricingTypeSelector = (state) => state.pricingType.PricingType;
+
+const Pricing3 = ({ appPurchases, newplan, ...rest }) => {
+ const dispatch = useDispatch();
+ const pricingData = useSelector(pricingTypeSelector);
+ const [toggleValue, setToggleValue] = useState('M');
+ const [loading, setLoading] = useState(true);
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+ const AppId = getSession('AppId');
+ const UserId = getSession('UserId');
+ const data = rest?.data;
+ const changeCurrentColorValues = useSelector(changeCurrentColorValue);
+ const CurrentText = useSelector(changeCurrentTextValue);
+ const Application = useSelector(selectedApplication);
+ const AllApplicationsData = useSelector(getAllApplicationsData);
+ const AppNameValue = useSelector(selectedApplicationName);
+
+ const [AppName, setAppName] = useState(null);
+
+
+
+ const plansToShow = Array.isArray(pricingData) && pricingData.length > 0 ? pricingData : [];
+
+ useEffect(() => {
+ setLoading(true);
+ if (AppId && UserId) {
+ dispatch(getPricingType({ toggleValue, AppId, UserId }))
+ .finally(() => setLoading(false));
+ } else {
+ setLoading(false);
+ }
+ }, [toggleValue, AppId, UserId, dispatch]);
+
+ useEffect(() => {
+ const handleResize = () => setIsMobile(window.innerWidth < 768);
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ useEffect(() => {
+ let ApplicationsData = AllApplicationsData?.filter(
+ (a) => a?.AppId === Application?.AppId
+ );
+ setAppName(
+ ApplicationsData.length > 0
+ ? ApplicationsData[0]["AppName"]
+ : AppNameValue.length > 0
+ ? AppNameValue
+ : null
+ );
+ }, [Application]);
+
+
+ const handleToggleChange = (val) => {
+ setToggleValue(val);
+ };
+
+ const handlePrev = () => {
+ setCurrentIndex((prev) => (prev === 0 ? plansToShow.length - 1 : prev - 1));
+ };
+ const handleNext = () => {
+ setCurrentIndex((prev) => (prev === plansToShow.length - 1 ? 0 : prev + 1));
+ };
+
+ return (
+
+
+ {/* Dynamic Title/Header/Description from data */}
+ {/* {data?.map(a => a.FieldName === "Pricing3Title" && (
+
0 ? "PricingHeader" : "PricingHeaderwod"} style={{ color: '#000', fontSize: '13px', letterSpacing: "30px", fontFamily: 'Inter', textTransform: "uppercase" }}>{a.FieldValue}
+ ))} */}
+
+ {data?.map(a => a.FieldName === "Pricing3Header" && (
+
+
0 ? "pricingtext" : "pricingtextwod"} style={{
+ fontSize: "40px", fontWeight: "600",
+ fontFamily: CurrentText?.head ? CurrentText?.head : '',
+ }}>{a.FieldValue}
+
+ ))}
+ {data?.map(a => a.FieldName === "Pricing3Description" && (
+
0 ? "pricingsubtext" : "pricingsubtextwod"}>
+
{a.FieldValue} Free
+
+ ))}
+
+
+ handleToggleChange('M')}
+ style={{
+ fontFamily: CurrentText?.head ? CurrentText?.head : '',
+ fontWeight: "500"
+ }}
+ >
+ Monthly
+
+ handleToggleChange('Y')}
+ style={{
+ fontFamily: CurrentText?.head ? CurrentText?.head : '',
+ fontWeight: "500"
+ }}
+ >
+ Annual
+
+ Save 20%
+
+
+
+
+
+
+ {isMobile ? (
+
+
←
+
+
+ {plansToShow?.[currentIndex]?.popular && (
+
Most Popular
+ )}
+
+
{plansToShow?.[currentIndex]?.["PricingName"]}
+
{plansToShow?.[currentIndex]?.["Description"]}
+
+ {plansToShow?.[currentIndex]?.["PricingName"]?.toUpperCase() === "FREE" ? (
+
+ ) : (
+
₹{plansToShow?.[currentIndex]?.["DisplayPrice"]}
+ )}
+ {plansToShow?.[currentIndex]?.["PricingName"]?.toUpperCase() !== "FREE" && (
+
/month billed {toggleValue === 'Y' ? 'Annually' : 'Monthly'}
+ )}
+
+
+ {plansToShow?.[currentIndex]?.["Status"] === "Already Used" ? "Already Used" : "Start Now"}
+
+
+ {plansToShow?.[currentIndex]?.["FeatureDetails"]?.length > 0 ? plansToShow?.[currentIndex]?.["FeatureDetails"].map((feature, idx) => (
+
+
+ {feature.FeatName}{feature.FeatConstraint && feature.FeatConstraint !== 0 ? ` - ${feature.FeatConstraint}` : ''}
+
+ )) : (
+
No features listed
+ )}
+
+
+
+
+
→
+
+ ) : (
+
+ {plansToShow.map((plan, index) => (
+
+ {plan?.popular && (
+
Most Popular
+ )}
+
+
{plan["PricingName"]}
+
{plan["Description"]}
+
+ {plan["PricingName"]?.toUpperCase() === "FREE" ? (
+
+ ) : (
+
₹{plan["DisplayPrice"]}
+ )}
+ {plan["PricingName"]?.toUpperCase() !== "FREE" && (
+
/ {toggleValue === 'Y' ? 'Annually' : 'Monthly'}
+ )}
+
+
+ {plan["Status"] === "Already Used" ? "Already Used" : "Start Now"}
+
+
+ {plan["FeatureDetails"]?.length > 0 ? plan["FeatureDetails"].map((feature, idx) => (
+
+
+ {feature.FeatName}{feature.FeatConstraint && feature.FeatConstraint !== 0 ? ` - ${feature.FeatConstraint}` : ''}
+
+ )) : (
+
No features listed
+ )}
+
+
+
+ ))}
+
+ )}
+
+
+
Need a custom solution for your {AppName} chain?
+
+ Contact Our Sales Team
+
+
+
+
+ );
+};
+
+export default Pricing3;
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/Pricing/PreviewPricing3.jsx b/src/Pages/themeTemplate/TemplateComps/Pricing/PreviewPricing3.jsx
new file mode 100644
index 0000000..99792d1
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Pricing/PreviewPricing3.jsx
@@ -0,0 +1,282 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from "react-redux";
+import {
+ EyeOutlined, PlusOutlined,
+ ArrowRightOutlined, CloseOutlined, InfoCircleOutlined
+} from '@ant-design/icons';
+import { Modal, Tooltip } from 'antd';
+import { InputField } from "../../../../Components/Forms/InputField.jsx";
+import { Messages } from "../../../../Components/Notifications/Messages.jsx";
+import { Form } from "antd";
+import Pricing2 from "./Pricing2.jsx"
+import Pricing3 from "./Pricing3.jsx"
+import "./PrcingPreview2.scss"
+import Buttons from "../../../../Components/Forms/Buttons.jsx"
+import { changePricingData, pricingPostData, } from "../../../../features/themeChange/themeChange.js"
+import { validateSafeInput } from '../../../../Services/others.js';
+
+
+const PreviewPricing3 = ({ appPurchases, newplan, ...rest }) => {
+ const formRef = useRef(null);
+ const dispatch = useDispatch();
+ const pricingData = useSelector(pricingPostData);
+ const [open, setOpen] = useState(false);
+ const [Editopen, setEditOpen] = useState(false);
+ const [messageType, setMessageType] = useState(null);
+ const [messageData, setMessageData] = useState(null);
+ const [editData, setEditData] = useState(false);
+
+ const onComplete = useCallback(() => {
+ setMessageData(null);
+ setMessageType(null);
+ }, []);
+
+ useEffect(() => {
+ if (pricingData?.length > 0) {
+ let Pricing3Data = pricingData.filter(eachData =>
+ eachData.FieldName.includes('PreviewPricing3')
+ )
+ if (Pricing3Data?.length > 0) {
+ setEditData(true)
+ }
+ pricingData?.map((item) => ( item?.["FieldName"] == "Pricing3Header" ?
+ formRef?.current?.setFieldsValue({ "Header": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Pricing3Description" ?
+ formRef?.current?.setFieldsValue({ "Description": item?.["FieldValue"] })
+ : null
+ ))
+ } else {
+ setEditData(false)
+ }
+ }, [pricingData, Editopen])
+
+ const modalOpen = () => {
+ setEditOpen(true)
+ }
+ const onCancel = () => {
+ setEditOpen(false);
+ formRef.current?.resetFields();
+ };
+
+ const onFinish = (values) => {
+ let postData = [
+ {
+ 'FieldName': 'Pricing3Header',
+ 'FieldValue': values?.Header,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Pricing3Description',
+ 'FieldValue': values?.Description,
+ 'FieldAddData': ''
+ }
+ ]
+ dispatch(changePricingData({ postData: postData }))
+ setMessageData('Data Added Successfully');
+ setMessageType('success');
+ setEditOpen(false)
+ formRef.current?.resetFields();
+ }
+
+ const pricingPreview = async () => {
+ if (pricingData?.length > 0) {
+ setOpen(true)
+ }
+ else {
+ setMessageData('Please Add a Features data to open the Preview');
+ setMessageType('warning');
+ }
+ }
+
+ const witoutdata = [
+ {
+ 'FieldName':'Pricing2Title',
+ 'FieldValue':'',
+ 'FieldAddData':''
+ },
+ {
+ 'FieldName':'Pricing2Header',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'Pricing2Description',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'PricingCatFeatures',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'PricingDescription',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'Monthly',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'Yearly',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+
+
+ {
+ 'FieldName':'PricfreeBtn',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+ {
+ 'FieldName':'PricBtn',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'PricPopName',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+
+ {
+ 'FieldName':'PricPopPrice',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+ {
+ 'FieldName':'PricPrimeName',
+ 'FieldValue':'',
+ 'FieldAddData':'https://paypre.in'
+ },
+
+
+ ]
+
+ return (
+ <>
+
+
+
+
modalOpen()} />
+ pricingPreview()} />
+
+
setEditOpen(false)}
+ closeIcon={ }
+ width={600}
+ >
+ Pricing
+
+
+
setOpen(false)}
+ onCancel={() => setOpen(false)}
+ width={1000}
+ >
+
+
+ >
+ )
+}
+
+export default PreviewPricing3
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/Pricing/Pricing1.jsx b/src/Pages/themeTemplate/TemplateComps/Pricing/Pricing1.jsx
new file mode 100644
index 0000000..15b9363
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Pricing/Pricing1.jsx
@@ -0,0 +1,684 @@
+import React, { useState, useEffect, useCallback } from "react"
+import { useLocation, useNavigate } from "react-router-dom"
+import { useDispatch, useSelector } from "react-redux"
+import { Toggle } from "../../../../Components/Forms/Switch"
+import giftimg from "../../../../images/giftimg.png"
+import curvearrow from "../../../../images/curvearrow.png"
+import { getSession, sessionStore } from "../../../../Services/others";
+import { Messages } from "../../../../Components/Notifications/Messages";
+import CommonSlider from "../../../../Components/CommonSlider/CommonSlider";
+import { ArrowRightOutlined } from "@ant-design/icons";
+import { FaCheckCircle } from "react-icons/fa";
+import {
+ getPricingType,
+ postFreeOption,
+ getPricingFeatures,
+ getPricingTypeAppId,
+ getPurchasedPlan,
+ getPurchasedAppDetails,
+ getUsedplandata,
+ GlobalAdminplanschanges,
+ ChangeAdminplanschanges,
+ changeNewPlandata,
+} from "../../../../features/pricingType/pricingType";
+import {
+ changePageAppId,
+ getAllApplications,
+ getAllApplicationsData,
+ getPageAppId,
+ selectedApplication,
+ changeCurrentTextValue,
+ changeCurrentColorValue,
+ selectedApplicationName
+} from "../../../../features/themeChange/themeChange";
+import moment from "moment";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import "./PrcingPreview1.scss";
+import { PostOnlineUserTracking } from "../../../../features/priceType/priceType"
+
+const Settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1
+};
+const design = {
+ body: {
+ textColor: "#000",
+ fontSize: "13px"
+ },
+
+ card: {
+ fontFamily: "Gilroy",
+ fontWeight: "600",
+ amntfontSize: "40px",
+ ActbackgroundColor: "#F97068",
+ primeBgColor: "#F0F0F0",
+ },
+}
+
+const withoutapidata = [{
+ "AppId": "",
+ "Status": "skeleton",
+ "PricingName": "",
+ "Price": "",
+ "PricingId": "",
+ "DisplayPrice": "",
+ "NetPrice": "000",
+ "PriceTag": "",
+ "NoOfDays": "",
+ "PriceTagName": "",
+ "FeatureDetails": [
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ }
+ ],
+},
+{
+ "AppId": "",
+ "Status": "skeleton",
+ "PricingName": "",
+ "Price": "",
+ "PricingId": "",
+ "DisplayPrice": "",
+ "NetPrice": "000",
+ "PriceTag": "",
+ "NoOfDays": "",
+ "PriceTagName": "",
+ "FeatureDetails": [
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ }
+ ]
+},
+{
+ "AppId": "",
+ "Status": "skeleton",
+ "PricingName": "",
+ "Price": "",
+ "PricingId": "",
+ "DisplayPrice": "",
+ "NetPrice": "000",
+ "PriceTag": "",
+ "NoOfDays": "",
+ "PriceTagName": "",
+ "FeatureDetails": [
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ }
+ ]
+}
+]
+
+const subDirectory = import.meta.env.ENV_BASE_URL
+
+const Pricing = ({ appPurchases, newplan, ...rest }) => {
+
+ const data = rest?.data;
+ const AdminId = rest?.AdminId;
+ const Application = useSelector(selectedApplication);
+ const AllApplicationsData = useSelector(getAllApplicationsData);
+ const AppNameValue = useSelector(selectedApplicationName);
+ const selectedAppId = useSelector(selectedApplication);
+ const color = useSelector(changeCurrentColorValue);
+ const text = useSelector(changeCurrentTextValue);
+ const pageAppId = useSelector(getPageAppId);
+ const [DarkColor, setDarkColor] = useState(color ? color["darkColor"] : null);
+ const [HeaderFont, setHeaderFont] = useState(text ? text["head"] : null);
+ const [ParaFont, setParaFont] = useState(text ? text["para"] : null);
+ const [toggleValue, setToggleValue] = useState("Y");
+ const [messageType, setMessageType] = useState(null);
+ const [messageData, setMessageData] = useState(null);
+ const [appPurchase, setappPurchase] = useState([]);
+ const [PurchasedPlan, setPurchasedPlan] = useState(null);
+ const [AppName, setAppName] = useState(null);
+ const [AppId, setAppId] = useState(selectedAppId != null ? selectedAppId["AppId"] : pageAppId)
+ const navigate = useNavigate()
+ const dispatch = useDispatch()
+ const pricingTypeSelector = (state) => state?.pricingType?.PricingType || [];
+
+ const pricingData = !rest.hasOwnProperty("apiCall") ? useSelector(pricingTypeSelector) : withoutapidata;
+ let checkPurchase = pricingData?.filter((val) => val["PricingName"]?.toUpperCase() !== "FREE")
+ ?.filter(eachFeature => eachFeature?.Status == "Extend Pack")?.length > 0
+
+ const purchasedAmt = pricingData?.filter(item => item?.Status === "Extend Pack")
+ const AppExpDate = appPurchase?.filter(item => item?.AppName === AppName)
+ const url = window.location.href
+
+ const UserType = getSession("UserType");
+ const UserId = (UserType == "Super Admin" || UserType == "Super Admin User") ? appPurchases?.[0]?.UserId || newplan
+ : UserType == "Employee" ? AdminId
+ : getSession("UserId")
+
+ const Sadmin = useSelector(GlobalAdminplanschanges);
+ const [Existplandata, setExistplandata] = useState();
+ const [differenceDays, setDifferenceDays] = useState(0);
+
+
+ useEffect(() => {
+ let FilterData = AppExpDate?.filter(item => item.PricingName != "Free")
+ let Nodays = FilterData?.reduce((total, plan) => total + plan.RemainingDays, 0);
+ setDifferenceDays(Nodays);
+ }, [AppExpDate]);
+
+ useEffect(() => {
+ let ApplicationsData = AllApplicationsData?.filter(a => a?.AppId === Application?.AppId)
+ setAppName(ApplicationsData?.length > 0 ? ApplicationsData[0]["AppName"] : AppNameValue.length > 0 ? AppNameValue : null)
+ }, [Application])
+ useEffect(() => {
+ if (selectedAppId === null) {
+ getLastUrlSegment(url)
+ }
+ getresPurchasedApp()
+ fetchData()
+ Downgrade()
+ }, [AppId, UserId])
+
+
+
+ const fetchData = async () => {
+ let res = await dispatch(getPurchasedPlan({ UserId, AppId })).unwrap()
+
+ if (res?.data?.statusCode == 1) {
+ setPurchasedPlan(res?.data?.data?.[0])
+ }
+ }
+
+ const getresPurchasedApp = async () => {
+ let res = await dispatch(getPurchasedAppDetails({ UserId, AppId })).unwrap();
+ setappPurchase(res?.data?.data)
+ }
+ useEffect(() => {
+ setAppId(selectedAppId != null ? selectedAppId["AppId"] : pageAppId)
+ }, [selectedAppId])
+
+ async function getAllApps(appName1) {
+ let res = await dispatch(getAllApplications()).unwrap()
+
+ if (res?.data?.statusCode === 1) {
+ await getAppId(res?.data?.data, appName1);
+ }
+ }
+ function getLastUrlSegment(url) {
+ const appName1 = new URL(url).pathname.split("/")?.filter(Boolean).pop();
+ getAllApps(appName1);
+ }
+
+ const getAppId = async (data, appNames) => {
+ const app = data?.filter(item =>
+ item?.["AppName"]?.toUpperCase() === appNames?.toUpperCase()
+ )
+
+ if (app.length > 0) {
+ dispatch(changePageAppId(app[0]?.["AppId"]))
+ setAppId(app[0]?.["AppId"])
+ }
+ }
+
+ const onComplete = useCallback(() => {
+ setMessageData(null);
+ setMessageType(null);
+ }, [])
+
+ const handleToggleChange = (checked) => {
+ const newToggleValue = checked ? "Y" : "M";
+ setToggleValue(newToggleValue);
+ if (!UserId) {
+ dispatch(getPricingTypeAppId({ toggleValue: newToggleValue, AppId }));
+ }
+ else {
+ dispatch(getPricingType({ toggleValue: newToggleValue, AppId, UserId }));
+ }
+ };
+
+ useEffect(() => {
+ if (!UserId) {
+ dispatch(getPricingTypeAppId({ toggleValue, AppId }));
+ }
+ else {
+ dispatch(getPricingType({ toggleValue, AppId, UserId }));
+ }
+ dispatch(getPricingFeatures({ toggleValue, AppId })).unwrap();
+ }, [toggleValue, AppId, UserId, dispatch]);
+
+ const handleStartNow = async (pricingData) => {
+ const currentDate = new Date();
+ const purDate = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
+ const validityStartDate = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
+ const EndDate = moment(currentDate).add(pricingData["NoOfDays"], "days").format("YYYY-MM-DD HH:mm:ss");
+ var date = new Date(EndDate);
+ date.setDate(date.getDate() - 1);
+ const validityEndDate = date.toISOString().slice(0, 19).replace("T", " ");
+ if (UserId) {
+ if (pricingData["Status"] === "Start Free") {
+ const postData = {
+ UserId: UserId,
+ AppId: getSession("AppId"),
+ PricingId: pricingData["PricingId"],
+ PurDate: purDate,
+ PaymentStatus: "S",
+ LicenseStatus: "A",
+ Price: pricingData["Price"],
+ ValidityStart: validityStartDate,
+ ValidityEnd: validityEndDate,
+ CreatedBy: getSession("UserId"),
+ };
+ const response = await dispatch(postFreeOption(postData)).unwrap()
+ if (response?.data?.statusCode == 1) {
+ setMessageType("success");
+ setMessageData(response?.data?.response);
+ if (UserId) {
+ await reloadhome()
+ } else {
+ await reloadPublicSignin()
+ }
+ } else {
+ setMessageType("error")
+ setMessageData(response?.data?.response)
+ }
+ }
+ else {
+ setMessageData("Free Already Used");
+ setMessageType("warning")
+ }
+ }
+ else {
+ navigate(`${subDirectory}signin`,
+ {
+ state: {
+ AppId: getSession("AppId"),
+ PricingId: pricingData["PricingId"],
+ PurDate: purDate,
+ PaymentStatus: "S",
+ LicenseStatus: "A",
+ Price: pricingData["Price"],
+ ValidityStart: validityStartDate,
+ ValidityEnd: validityEndDate,
+ PricingName: "Free",
+ locationpathname: window.location?.pathname,
+ }
+ }
+ );
+ window.location.reload()
+ }
+ };
+
+ const reloadhome = () => {
+ navigate(`${subDirectory}landing-page/home`);
+ window.location.reload()
+ }
+ const reloadPublicSignin = () => {
+ navigate(`${subDirectory}signin`);
+ window.location.reload()
+ }
+
+ const logVisit = (pricingData) => {
+ const UserId = getSession("UserId");
+ const AppId = getSession("AppId");
+
+ const stored = JSON.parse(localStorage.getItem("visitLogFormat") || "null");
+
+ const newVisit = {
+ VisitTime: new Date().toISOString(),
+ Location: window.location.pathname
+ };
+
+ let updatedLog;
+
+ if (stored) {
+ const oldVisits = Array.isArray(stored.LocationVistDtl) ? stored.LocationVistDtl : [];
+
+ updatedLog = {
+ ...stored,
+ PricingId: pricingData?.PricingId || stored.PricingId || null,
+ LocationVistDtl: [...oldVisits, newVisit],
+ CreatedBy: UserId
+ };
+ } else {
+ updatedLog = {
+ UserId,
+ AppId,
+ CreatedBy: UserId,
+ PricingId: pricingData?.PricingId || null,
+ LocationVistDtl: [newVisit]
+ };
+ }
+
+ let finalData = localStorage.setItem("visitLogFormat", JSON.stringify(updatedLog));
+
+ };
+
+
+
+ const handleSubmit = useCallback(async (pricingData, data) => {
+ logVisit(pricingData)
+ const stored = JSON.parse(localStorage.getItem("visitLogFormat") || "null");
+ const removeDuplicateLocations = (data) => {
+ const seen = new Set();
+ const uniqueVisits = [];
+
+ for (const visit of data.LocationVistDtl) {
+ const locationKey = visit.Location.toLowerCase(); // Case-insensitive check
+ if (!seen.has(locationKey)) {
+ seen.add(locationKey);
+ uniqueVisits.push(visit);
+ }
+ }
+
+ return {
+ ...data,
+ LocationVistDtl: uniqueVisits
+ };
+ };
+ let postData = removeDuplicateLocations(stored)
+
+ let response = await dispatch(PostOnlineUserTracking(postData))
+ localStorage.removeItem("visitLogFormat")
+ sessionStore("AppId", pricingData["AppId"]);
+ sessionStore("PricingId", pricingData["PricingId"]);
+ const currentDate = new Date();
+ const purDate = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
+ const validityStartDate = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
+ const EndDate = moment(currentDate).add(pricingData["NoOfDays"], "days").format("YYYY-MM-DD HH:mm:ss");
+ var date = new Date(EndDate);
+ date.setDate(date.getDate() - 1);
+ const validityEndDate = date.toISOString().slice(0, 19).replace("T", " ");
+ if (UserId) {
+ if (Sadmin) {
+ if (appPurchases?.[0]?.Sadmin == 'Newplan') {
+ await dispatch(ChangeAdminplanschanges(false));
+ await dispatch(changeNewPlandata(pricingData));
+ } else {
+ if (pricingData?.Status != "Extend Pack" && appPurchases?.[0]?.PricingName != "Free") {
+ navigate(`${subDirectory}invoice-detail`, {
+ state: {
+ pricingData: pricingData,
+ PackName: pricingData?.Status,
+ purchasedAmt: PurchasedPlan,
+ differenceDays: differenceDays,
+ AppExpDate: AppExpDate,
+ locationpathname: window.location?.pathname,
+ Exist: Existplandata,
+ SAdmin: Sadmin,
+ UserId: UserId,
+ lastappPurchase: appPurchases,
+ },
+ });
+ window.location.reload();
+ }
+ else {
+ await dispatch(ChangeAdminplanschanges(false));
+ await dispatch(changeNewPlandata(pricingData));
+ }
+ }
+ }
+ else {
+ navigate(`${subDirectory}invoice-detail`, {
+ state: {
+ pricingData: pricingData,
+ PackName: pricingData?.Status,
+ purchasedAmt: PurchasedPlan,
+ differenceDays: differenceDays,
+ AppExpDate: AppExpDate,
+ locationpathname: window.location?.pathname,
+ Exist: Existplandata,
+ SAdmin: Sadmin,
+ UserId: UserId,
+ lastappPurchase: appPurchases,
+ },
+ });
+ window.location.reload();
+ }
+ }
+ else {
+ navigate(`${subDirectory}signin`, {
+ state: {
+ pricingData: pricingData,
+ AppId: getSession("AppId"),
+ PricingId: pricingData["PricingId"],
+ PurDate: purDate,
+ PaymentStatus: "S",
+ LicenseStatus: "A",
+ Price: pricingData["Price"],
+ ValidityStart: validityStartDate,
+ ValidityEnd: validityEndDate,
+ PackName: pricingData?.Status,
+ purchasedAmt: PurchasedPlan,
+ differenceDays: differenceDays,
+ AppExpDate: AppExpDate,
+ locationpathname: window.location?.pathname,
+ Exist: Existplandata
+ },
+ });
+ }
+ }, [purchasedAmt]);
+
+ const Downgrade = async () => {
+ let data = { AppId: AppId, UserId: UserId, type: "L" };
+ let Response = await dispatch(getUsedplandata(data)).unwrap();
+
+ if (Response?.data?.statusCode == 1) {
+ setExistplandata(Response.data?.data)
+ }
+ }
+ return (
+
+
+
+
+
+
+ {data?.map(a => a.FieldName === "Pricing2Title" &&
+ !Sadmin && (
+
0 ? "PricingHeader" : "PricingHeaderwod"} style={{ color: design.body.textColor, fontSize: design.body.fontSize, letterSpacing: "30px", fontFamily: HeaderFont, textTransform: "uppercase" }}>{a.FieldValue}
+
+ )
+ )
+ }
+ {data?.map(a => a.FieldName === "Pricing2Header" &&
+ !Sadmin && (
+
+
0 ? "pricingtext" : "pricingtextwod"} style={{ fontSize: "40px", fontWeight: "600", fontFamily: HeaderFont }}>{a.FieldValue}
+
+ )
+ )
+ }
+
+
+ {data?.map(a => a.FieldName === "Pricing2Description" &&
+ !Sadmin && (
+
0 ? "pricingsubtext" : "pricingsubtextwod"}>
{a.FieldValue}
+
+ )
+ )}
+
+
+
+
+
{!rest.hasOwnProperty("apiCall") && "Monthly "}
+
+
+
+
{!rest.hasOwnProperty("apiCall") && "Yearly"}
+
+
+
+
+ Save 17 %
+
+
+
+
+
+
+
+
+
+
+
+
+ {[
+ pricingData?.find((val) => val["PricingName"]?.toUpperCase() === "FREE"), // Free pricing card object
+ ...pricingData?.filter((val) => val["PricingName"]?.toUpperCase() !== "FREE"), // Other pricing card objects
+ ]?.map((val, i) => {
+ if (val) {
+ return (
+
+
+
0 ? "PriceWD" : "PriceWOD"}>{val["PricingName"]?.toUpperCase()}
+
+
+
{val["PricingName"]?.toUpperCase() == "FREE" ?
+ (
) :
+ (
+
+
₹ {val["DisplayPrice"]}
+ {!rest.hasOwnProperty("apiCall") && (
+
+
+ {toggleValue == "Y" ? "/month billed annually" : "/month billed monthly"}
+
+ )
+ }
+
+ )}
+
+
+
+
+
+ {val["FeatureDetails"]?.map((feature, index) =>
+
+
0 ? "DetailWD" : "DetailsWOD"}>{feature.FeatName?.length > 0 && }{feature.FeatName?.length > 0 ? feature.FeatConstraint != 0 ? feature.FeatName + "-" + feature.FeatConstraint : feature.FeatName : ""}
+
+ )}
+
+
+ {val["PricingName"]?.toUpperCase() === "FREE" ? (
+
handleStartNow(val)}>
+ {
+
+
{val["Status"] === "Already Used" || checkPurchase ? `Already Used` : "Start Now"}
+
+
+ }
+
+ ) : val["Status"] !== "skeleton" ? (
+
handleSubmit(val, AppExpDate?.[0]?.RemainingDays > 0 ? val["Status"] === "Extend Pack" ? "Extend Pack" : purchasedAmt?.[0]?.Status == "Extend Pack" ? (val?.DisplayPrice < purchasedAmt?.[0]?.DisplayPrice ? "Switch" : "Upgrade") : "Switch" : (val["Status"] === "Extend Pack" ? "Extend Pack" : "Start Now"))}
+ onMouseOver={(e) => {
+ e.target.style.color = DarkColor;
+ e.target.style.background = "white";
+ e.target.style.border = "1px solid";
+ }}
+ onMouseLeave={(e) => {
+ e.target.style.color = "white";
+ e.target.style.background = DarkColor;
+ e.target.style.border = "none";
+ }}
+ >
+ {AppExpDate?.[0]?.RemainingDays > 0 ? val["Status"] === "Extend Pack" ? "Extend Pack" : purchasedAmt?.[0]?.Status == "Extend Pack" ? (val?.DisplayPrice < purchasedAmt?.[0]?.DisplayPrice ? "Switch" : `Upgrade to ${val?.PricingName}`) : "Switch" : (val["Status"] === "Extend Pack" ? "Extend Pack" : "Start Now")}
+
+ ) :
+
+ }
+
+
+ );
+ } else {
+ return null;
+ }
+ })}
+
+
+
+
+
+
+ Note : All prices mentioned above are inclusive of GST.
+
+
+
+
+ )
+}
+
+export default Pricing
diff --git a/src/Pages/themeTemplate/TemplateComps/Pricing/Pricing2.jsx b/src/Pages/themeTemplate/TemplateComps/Pricing/Pricing2.jsx
new file mode 100644
index 0000000..85b2d26
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Pricing/Pricing2.jsx
@@ -0,0 +1,696 @@
+import React, { useState, useEffect, useCallback } from "react"
+import { useLocation, useNavigate } from "react-router-dom"
+import { useDispatch, useSelector } from "react-redux"
+import { Toggle } from "../../../../Components/Forms/Switch"
+import giftimg from "../../../../images/giftimg.png"
+import curvearrow from "../../../../images/curvearrow.png"
+import { getSession, sessionStore } from "../../../../Services/others";
+import { Messages } from "../../../../Components/Notifications/Messages";
+import CommonSlider from "../../../../Components/CommonSlider/CommonSlider";
+import { ArrowRightOutlined } from "@ant-design/icons";
+import { FaCheckCircle } from "react-icons/fa";
+import {
+ getPricingType,
+ postFreeOption,
+ getPricingFeatures,
+ getPricingTypeAppId,
+ getPurchasedPlan,
+ getPurchasedAppDetails,
+ getUsedplandata,
+ GlobalAdminplanschanges,
+ ChangeAdminplanschanges,
+ changeNewPlandata,
+} from "../../../../features/pricingType/pricingType";
+import {
+ changePageAppId,
+ getAllApplications,
+ getAllApplicationsData,
+ getPageAppId,
+ selectedApplication,
+ changeCurrentTextValue,
+ changeCurrentColorValue,
+ selectedApplicationName
+} from "../../../../features/themeChange/themeChange";
+import moment from "moment";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import "./PrcingPreview1.scss";
+import { PostOnlineUserTracking } from "../../../../features/priceType/priceType"
+
+
+const Settings = {
+ dots: true,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1
+};
+const design = {
+ body: {
+ textColor: "#000",
+ fontSize: "13px"
+ },
+
+ card: {
+ fontFamily: "Gilroy",
+ fontWeight: "600",
+ amntfontSize: "40px",
+ ActbackgroundColor: "#F97068",
+ primeBgColor: "#F0F0F0",
+ },
+}
+
+const withoutapidata = [{
+ "AppId": "",
+ "Status": "skeleton",
+ "PricingName": "",
+ "Price": "",
+ "PricingId": "",
+ "DisplayPrice": "",
+ "NetPrice": "000",
+ "PriceTag": "",
+ "NoOfDays": "",
+ "PriceTagName": "",
+ "FeatureDetails": [
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ }
+ ],
+},
+{
+ "AppId": "",
+ "Status": "skeleton",
+ "PricingName": "",
+ "Price": "",
+ "PricingId": "",
+ "DisplayPrice": "",
+ "NetPrice": "000",
+ "PriceTag": "",
+ "NoOfDays": "",
+ "PriceTagName": "",
+ "FeatureDetails": [
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ }
+ ]
+},
+{
+ "AppId": "",
+ "Status": "skeleton",
+ "PricingName": "",
+ "Price": "",
+ "PricingId": "",
+ "DisplayPrice": "",
+ "NetPrice": "000",
+ "PriceTag": "",
+ "NoOfDays": "",
+ "PriceTagName": "",
+ "FeatureDetails": [
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": ""
+ }
+ ]
+}
+]
+
+const subDirectory = import.meta.env.ENV_BASE_URL
+
+const Pricing = ({ appPurchases, newplan, ...rest }) => {
+console.log(">>>>",appPurchases, newplan, rest)
+ const data = rest?.data;
+ const AdminId = rest?.AdminId;
+ const Application = useSelector(selectedApplication);
+ const AllApplicationsData = useSelector(getAllApplicationsData);
+ const AppNameValue = useSelector(selectedApplicationName);
+ const selectedAppId = useSelector(selectedApplication);
+ const color = useSelector(changeCurrentColorValue);
+ const text = useSelector(changeCurrentTextValue);
+ const pageAppId = useSelector(getPageAppId);
+ const [DarkColor, setDarkColor] = useState(color ? color["darkColor"] : null);
+ const [HeaderFont, setHeaderFont] = useState(text ? text["head"] : null);
+ const [ParaFont, setParaFont] = useState(text ? text["para"] : null);
+ const [toggleValue, setToggleValue] = useState("Y");
+ const [messageType, setMessageType] = useState(null);
+ const [messageData, setMessageData] = useState(null);
+ const [appPurchase, setappPurchase] = useState([]);
+ const [PurchasedPlan, setPurchasedPlan] = useState(null);
+ const [AppName, setAppName] = useState(null);
+ const [AppId, setAppId] = useState(selectedAppId != null ? selectedAppId["AppId"] : pageAppId)
+ const navigate = useNavigate()
+ const dispatch = useDispatch()
+ const pricingTypeSelector = (state) => state?.pricingType?.PricingType || [];
+
+ const pricingData = !rest.hasOwnProperty("apiCall") ? useSelector(pricingTypeSelector) : withoutapidata;
+ let checkPurchase = pricingData?.filter((val) => val["PricingName"]?.toUpperCase() !== "FREE")
+ ?.filter(eachFeature => eachFeature?.Status == "Extend Pack").length > 0
+
+ const purchasedAmt = pricingData?.filter(item => item?.Status === "Extend Pack")
+ const AppExpDate = appPurchase?.filter(item => item?.AppName === AppName)
+ const url = window.location.href
+
+ const UserType = getSession("UserType");
+ const UserId = (UserType == "Super Admin" || UserType == "Super Admin User") ? appPurchases?.[0]?.UserId || newplan
+ : UserType == "Employee" ? AdminId
+ : getSession("UserId")
+
+ const Sadmin = useSelector(GlobalAdminplanschanges);
+ const [Existplandata, setExistplandata] = useState();
+ const [differenceDays, setDifferenceDays] = useState(0);
+
+
+ useEffect(() => {
+ let FilterData = AppExpDate?.filter(item => item.PricingName != "Free")
+ let Nodays = FilterData?.reduce((total, plan) => total + plan.RemainingDays, 0);
+ setDifferenceDays(Nodays);
+ }, [AppExpDate]);
+
+ useEffect(() => {
+ let ApplicationsData = AllApplicationsData?.filter(a => a?.AppId === Application?.AppId)
+ setAppName(ApplicationsData.length > 0 ? ApplicationsData[0]["AppName"] : AppNameValue.length > 0 ? AppNameValue : null)
+ }, [Application])
+
+ useEffect(() => {
+ if (selectedAppId === null) {
+ getLastUrlSegment(url)
+ }
+ getresPurchasedApp()
+ fetchData()
+ Downgrade()
+ }, [AppId,UserId])
+
+
+
+ const fetchData = async () => {
+ let res = await dispatch(getPurchasedPlan({ UserId, AppId })).unwrap()
+ if (res?.data?.statusCode == 1) {
+ setPurchasedPlan(res?.data?.data?.[0])
+ }
+ }
+
+ const getresPurchasedApp = async () => {
+ let res = await dispatch(getPurchasedAppDetails({ UserId, AppId })).unwrap();
+ setappPurchase(res?.data?.data)
+ }
+ useEffect(() => {
+ setAppId(selectedAppId != null ? selectedAppId["AppId"] : pageAppId)
+ }, [selectedAppId])
+
+ async function getAllApps(appName1) {
+ let res = await dispatch(getAllApplications()).unwrap()
+
+ if (res?.data?.statusCode === 1) {
+ await getAppId(res?.data?.data, appName1);
+ }
+ }
+ function getLastUrlSegment(url) {
+ const appName1 = new URL(url).pathname.split("/")?.filter(Boolean).pop();
+ getAllApps(appName1);
+ }
+
+ const getAppId = async (data, appNames) => {
+ const app = data?.filter(item =>
+ item?.["AppName"]?.toUpperCase() === appNames?.toUpperCase()
+ )
+
+ if (app.length > 0) {
+ dispatch(changePageAppId(app[0]?.["AppId"]))
+ setAppId(app[0]?.["AppId"])
+ }
+ }
+
+ const onComplete = useCallback(() => {
+ setMessageData(null);
+ setMessageType(null);
+ }, [])
+
+ const handleToggleChange = (checked) => {
+ const newToggleValue = checked ? "Y" : "M";
+ setToggleValue(newToggleValue);
+ if (!UserId) {
+ dispatch(getPricingTypeAppId({ toggleValue: newToggleValue, AppId }));
+ }
+ else {
+ dispatch(getPricingType({ toggleValue: newToggleValue, AppId, UserId }));
+ }
+ };
+
+ useEffect(() => {
+ if (!UserId) {
+ dispatch(getPricingTypeAppId({ toggleValue, AppId }));
+ }
+ else {
+ dispatch(getPricingType({ toggleValue, AppId, UserId }));
+ }
+ dispatch(getPricingFeatures({ toggleValue, AppId })).unwrap();
+ }, [toggleValue, AppId, UserId, dispatch]);
+
+ const handleStartNow = async (pricingData) => {
+ const currentDate = new Date();
+ const purDate = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
+ const validityStartDate = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
+ const EndDate = moment(currentDate).add(pricingData["NoOfDays"], "days").format("YYYY-MM-DD HH:mm:ss");
+ var date = new Date(EndDate);
+ date.setDate(date.getDate() - 1);
+ const validityEndDate = date.toISOString().slice(0, 19).replace("T", " ");
+ if (UserId) {
+ if (pricingData["Status"] === "Start Free") {
+ const postData = {
+ UserId: UserId,
+ AppId: getSession("AppId"),
+ PricingId: pricingData["PricingId"],
+ PurDate: purDate,
+ PaymentStatus: "S",
+ LicenseStatus: "A",
+ Price: pricingData["Price"],
+ ValidityStart: validityStartDate,
+ ValidityEnd: validityEndDate,
+ CreatedBy: getSession("UserId"),
+ };
+ const response = await dispatch(postFreeOption(postData)).unwrap()
+ if (response?.data?.statusCode == 1) {
+ setMessageType("success");
+ setMessageData(response?.data?.response);
+ if (UserId) {
+ await reloadhome()
+ } else {
+ await reloadPublicSignin()
+ }
+ } else {
+ setMessageType("error")
+ setMessageData(response?.data?.response)
+ }
+ }
+ else {
+ setMessageData("Free Already Used");
+ setMessageType("warning")
+ }
+ }
+ else {
+ navigate(`${subDirectory}signin`,
+ {
+ state: {
+ AppId: getSession("AppId"),
+ PricingId: pricingData["PricingId"],
+ PurDate: purDate,
+ PaymentStatus: "S",
+ LicenseStatus: "A",
+ Price: pricingData["Price"],
+ ValidityStart: validityStartDate,
+ ValidityEnd: validityEndDate,
+ PricingName: "Free",
+ locationpathname: window.location?.pathname,
+ }
+ }
+ );
+ window.location.reload()
+ }
+ };
+
+ const reloadhome = () => {
+ navigate(`${subDirectory}landing-page/home`);
+ window.location.reload()
+ }
+ const reloadPublicSignin = () => {
+ navigate(`${subDirectory}signin`);
+ window.location.reload()
+ }
+ const logVisit = (pricingData) => {
+ const UserId = getSession("UserId");
+ const AppId = getSession("AppId");
+
+ const stored = JSON.parse(localStorage.getItem("visitLogFormat") || "null");
+
+ const newVisit = {
+ VisitTime: new Date().toISOString(),
+ Location: window.location.pathname
+ };
+
+ let updatedLog;
+
+ if (stored) {
+ const oldVisits = Array.isArray(stored.LocationVistDtl) ? stored.LocationVistDtl : [];
+
+ updatedLog = {
+ ...stored,
+ PricingId: pricingData?.PricingId || stored.PricingId || null,
+ LocationVistDtl: [...oldVisits, newVisit],
+ CreatedBy: UserId
+ };
+ } else {
+ updatedLog = {
+ UserId,
+ AppId,
+ CreatedBy: UserId,
+ PricingId: pricingData?.PricingId || null,
+ LocationVistDtl: [newVisit]
+ };
+ }
+
+ let finalData = localStorage.setItem("visitLogFormat", JSON.stringify(updatedLog));
+
+ };
+
+
+ const handleSubmit = useCallback(async (pricingData, data) => {
+ logVisit(pricingData)
+ const stored = JSON.parse(localStorage.getItem("visitLogFormat") || "null");
+ const removeDuplicateLocations = (data) => {
+ const seen = new Set();
+ const uniqueVisits = [];
+
+ for (const visit of data.LocationVistDtl) {
+ const locationKey = visit.Location.toLowerCase(); // Case-insensitive check
+ if (!seen.has(locationKey)) {
+ seen.add(locationKey);
+ uniqueVisits.push(visit);
+ }
+ }
+
+ return {
+ ...data,
+ LocationVistDtl: uniqueVisits
+ };
+ };
+ let postData = removeDuplicateLocations(stored)
+
+ let response = await dispatch(PostOnlineUserTracking(postData))
+ localStorage.removeItem("visitLogFormat")
+
+ sessionStore("AppId", pricingData["AppId"]);
+ sessionStore("PricingId", pricingData["PricingId"]);
+ const currentDate = new Date();
+ const purDate = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
+ const validityStartDate = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
+ const EndDate = moment(currentDate).add(pricingData["NoOfDays"], "days").format("YYYY-MM-DD HH:mm:ss");
+ var date = new Date(EndDate);
+ date.setDate(date.getDate() - 1);
+ const validityEndDate = date.toISOString().slice(0, 19).replace("T", " ");
+ if (UserId) {
+ if (Sadmin) {
+
+ if (appPurchases?.[0]?.Sadmin == 'Newplan') {
+ await dispatch(ChangeAdminplanschanges(false));
+ await dispatch(changeNewPlandata(pricingData));
+ } else {
+ if (pricingData?.Status != "Extend Pack" && appPurchases?.[0]?.PricingName != "Free") {
+ console.log("PurchasedPlan",PurchasedPlan,{
+ pricingData: pricingData,
+ PackName: pricingData?.Status,
+ purchasedAmt: PurchasedPlan,
+ differenceDays: differenceDays,
+ AppExpDate: AppExpDate,
+ locationpathname: window.location?.pathname,
+ Exist: Existplandata,
+ SAdmin: Sadmin,
+ UserId: UserId,
+ lastappPurchase: appPurchases,
+ })
+ navigate(`${subDirectory}invoice-detail`, {
+ state: {
+ pricingData: pricingData,
+ PackName: pricingData?.Status,
+ purchasedAmt: PurchasedPlan,
+ differenceDays: differenceDays,
+ AppExpDate: AppExpDate,
+ locationpathname: window.location?.pathname,
+ Exist: Existplandata,
+ SAdmin: Sadmin,
+ UserId: UserId,
+ lastappPurchase: appPurchases,
+ },
+ });
+ window.location.reload();
+ }
+ else {
+ await dispatch(ChangeAdminplanschanges(false));
+ await dispatch(changeNewPlandata(pricingData));
+ }
+ }
+ }
+ else {
+ navigate(`${subDirectory}invoice-detail`, {
+ state: {
+ pricingData: pricingData,
+ PackName: pricingData?.Status,
+ purchasedAmt: PurchasedPlan,
+ differenceDays: differenceDays,
+ AppExpDate: AppExpDate,
+ locationpathname: window.location?.pathname,
+ Exist: Existplandata,
+ SAdmin: Sadmin,
+ UserId: UserId,
+ lastappPurchase: appPurchases,
+ },
+ });
+ window.location.reload();
+ }
+ }
+ else {
+ navigate(`${subDirectory}signin`, {
+ state: {
+ pricingData: pricingData,
+ AppId: getSession("AppId"),
+ PricingId: pricingData["PricingId"],
+ PurDate: purDate,
+ PaymentStatus: "S",
+ LicenseStatus: "A",
+ Price: pricingData["Price"],
+ ValidityStart: validityStartDate,
+ ValidityEnd: validityEndDate,
+ PackName: pricingData?.Status,
+ purchasedAmt: PurchasedPlan,
+ differenceDays: differenceDays,
+ AppExpDate: AppExpDate,
+ locationpathname: window.location?.pathname,
+ Exist: Existplandata
+ },
+ });
+ }
+ }, [purchasedAmt]);
+
+ const Downgrade = async () => {
+ let data = { AppId: AppId, UserId: UserId, type: "L" };
+ let Response = await dispatch(getUsedplandata(data)).unwrap();
+
+ if (Response?.data?.statusCode == 1) {
+ setExistplandata(Response.data?.data)
+ }
+ }
+ return (
+
+
+
+
+
+
+ {data?.map(a => a.FieldName === "Pricing2Title" &&
+ !Sadmin && (
+
0 ? "PricingHeader" : "PricingHeaderwod"} style={{ color: design.body.textColor, fontSize: design.body.fontSize, letterSpacing: "30px", fontFamily: HeaderFont, textTransform: "uppercase" }}>{a.FieldValue}
+ )
+ )
+ }
+ {data?.map(a => a.FieldName === "Pricing2Header" &&
+ !Sadmin && (
+
+
0 ? "pricingtext" : "pricingtextwod"} style={{ fontSize: "40px", fontWeight: "600", fontFamily: HeaderFont }}>{a.FieldValue}
+
+ )
+ )
+ }
+
+
+ {data?.map(a => a.FieldName === "Pricing2Description" &&
+ !Sadmin && (
+
0 ? "pricingsubtext" : "pricingsubtextwod"}>
{a.FieldValue}
+
+ )
+ )}
+
+
+
+
+
{!rest.hasOwnProperty("apiCall") && "Monthly "}
+
+
+
+
{!rest.hasOwnProperty("apiCall") && "Yearly"}
+
+
+
+
+ Save 17 %
+
+
+
+
+
+
+
+
+
+
+
+
+ {[
+ pricingData?.find((val) => val["PricingName"]?.toUpperCase() === "FREE"), // Free pricing card object
+ ...pricingData?.filter((val) => val["PricingName"]?.toUpperCase() !== "FREE"), // Other pricing card objects
+ ]?.map((val, i) => {
+ if (val) {
+ return (
+
+
+
0 ? "PriceWD" : "PriceWOD"}>{val["PricingName"]?.toUpperCase()}
+
+
+
{val["PricingName"]?.toUpperCase() == "FREE" ?
+ (
) :
+ (
+
+
₹ {val["DisplayPrice"]}
+ {!rest.hasOwnProperty("apiCall") && (
+
+
+ {toggleValue == "Y" ? "/month billed annually" : "/month billed monthly"}
+
+ )
+ }
+
+ )}
+
+
+
+
+
+ {val["FeatureDetails"]?.map((feature, index) =>
+
+
0 ? "DetailWD" : "DetailsWOD"}>{feature.FeatName.length > 0 && }{feature.FeatName.length > 0 ? feature.FeatConstraint != 0 ? feature.FeatName + "-" + feature.FeatConstraint : feature.FeatName : ""}
+
+ )}
+
+
+ {val["PricingName"]?.toUpperCase() === "FREE" ? (
+
handleStartNow(val)}>
+ {
+
+
{val["Status"] === "Already Used" || checkPurchase ? `Already Used` : "Start Now"}
+
+
+ }
+
+ ) : val["Status"] !== "skeleton" ? (
+
handleSubmit(val, AppExpDate?.[0]?.RemainingDays > 0 ? val["Status"] === "Extend Pack" ? "Extend Pack" : purchasedAmt?.[0]?.Status == "Extend Pack" ? (val?.DisplayPrice < purchasedAmt?.[0]?.DisplayPrice ? "Switch" : "Upgrade") : "Switch" : (val["Status"] === "Extend Pack" ? "Extend Pack" : "Start Now"))}
+ onMouseOver={(e) => {
+ e.target.style.color = DarkColor;
+ e.target.style.background = "white";
+ e.target.style.border = "1px solid";
+ }}
+ onMouseLeave={(e) => {
+ e.target.style.color = "white";
+ e.target.style.background = DarkColor;
+ e.target.style.border = "none";
+ }}
+ >
+ {AppExpDate?.[0]?.RemainingDays > 0 ? val["Status"] === "Extend Pack" ? "Extend Pack" : purchasedAmt?.[0]?.Status == "Extend Pack" ? (val?.DisplayPrice < purchasedAmt?.[0]?.DisplayPrice ? "Switch" : `Upgrade to ${val?.PricingName}`) : "Switch" : (val["Status"] === "Extend Pack" ? "Extend Pack" : "Start Now")}
+
+ ) :
+
+ }
+
+
+ );
+ } else {
+ return null;
+ }
+ })}
+
+
+
+
+
+
+ Note : All prices mentioned above are inclusive of GST.
+
+
+
+
+ )
+}
+
+export default Pricing
diff --git a/src/Pages/themeTemplate/TemplateComps/Pricing/Pricing3 backup.jsx b/src/Pages/themeTemplate/TemplateComps/Pricing/Pricing3 backup.jsx
new file mode 100644
index 0000000..10d093b
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Pricing/Pricing3 backup.jsx
@@ -0,0 +1,223 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from "react-redux";
+import {
+ EyeOutlined, PlusOutlined,
+ ArrowRightOutlined, CloseOutlined, InfoCircleOutlined
+} from '@ant-design/icons';
+import { Modal, Tooltip } from 'antd';
+import { InputField } from "../../../../Components/Forms/InputField.jsx";
+import { Messages } from "../../../../Components/Notifications/Messages.jsx";
+import { Form } from "antd";
+import Pricing2 from "./Pricing2.jsx"
+import PreviewPricing3 from "./PreviewPricing3.jsx"
+import "./PrcingPreview2.scss"
+import Buttons from "../../../../Components/Forms/Buttons.jsx"
+import { changePricingData, pricingPostData, } from "../../../../features/themeChange/themeChange.js"
+import { validateSafeInput } from '../../../../Services/others.js';
+
+
+const Pricing3 = ({ appPurchases, newplan, ...rest }) => {
+ const formRef = useRef(null);
+ const dispatch = useDispatch();
+ const pricingData = useSelector(pricingPostData);
+ const [open, setOpen] = useState(false);
+ const [Editopen, setEditOpen] = useState(false);
+ const [messageType, setMessageType] = useState(null);
+ const [messageData, setMessageData] = useState(null);
+ const [editData, setEditData] = useState(false);
+
+ const onComplete = useCallback(() => {
+ setMessageData(null);
+ setMessageType(null);
+ }, []);
+
+ useEffect(() => {
+ if (pricingData?.length > 0) {
+ let Pricing3Data = pricingData.filter(eachData =>
+ eachData.FieldName.includes('PreviewPricing3')
+ )
+ if (Pricing3Data?.length > 0) {
+ setEditData(true)
+ }
+ pricingData?.map((item) => ( item?.["FieldName"] == "Pricing3Header" ?
+ formRef?.current?.setFieldsValue({ "Header": item?.["FieldValue"] })
+ : item?.["FieldName"] == "Pricing3Description" ?
+ formRef?.current?.setFieldsValue({ "Description": item?.["FieldValue"] })
+ : null
+ ))
+ } else {
+ setEditData(false)
+ }
+ }, [pricingData, Editopen])
+
+ const modalOpen = () => {
+ setEditOpen(true)
+ }
+ const onCancel = () => {
+ setEditOpen(false);
+ formRef.current?.resetFields();
+ };
+
+ const onFinish = (values) => {
+ let postData = [
+ {
+ 'FieldName': 'Pricing3Header',
+ 'FieldValue': values?.Header,
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Pricing3Description',
+ 'FieldValue': values?.Description,
+ 'FieldAddData': ''
+ }
+ ]
+ dispatch(changePricingData({ postData: postData }))
+ setMessageData('Data Added Successfully');
+ setMessageType('success');
+ setEditOpen(false)
+ formRef.current?.resetFields();
+ }
+
+ const pricingPreview = async () => {
+ if (pricingData?.length > 0) {
+ setOpen(true)
+ }
+ else {
+ setMessageData('Please Add a Features data to open the Preview');
+ setMessageType('warning');
+ }
+ }
+
+ const witoutdata = [
+ {
+ 'FieldName': 'Pricing3Title',
+ 'FieldValue': '',
+ 'FieldAddData': ''
+ },
+ {
+ 'FieldName': 'Pricing3Header',
+ 'FieldValue': '',
+ 'FieldAddData': 'https://pozo.app'
+ },
+ {
+ 'FieldName': 'Pricing3Description',
+ 'FieldValue': '',
+ 'FieldAddData': 'https://pozo.app'
+ },
+ ]
+
+ return (
+ <>
+
+
+
+
modalOpen()} />
+ pricingPreview()} />
+
+
setEditOpen(false)}
+ closeIcon={ }
+ width={600}
+ >
+ Pricing
+
+
+
setOpen(false)}
+ onCancel={() => setOpen(false)}
+ width={1000}
+ >
+
+
+ >
+ )
+}
+
+export default Pricing3
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/Pricing/Pricing3.jsx b/src/Pages/themeTemplate/TemplateComps/Pricing/Pricing3.jsx
new file mode 100644
index 0000000..dcfb9bc
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Pricing/Pricing3.jsx
@@ -0,0 +1,868 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { FaCheck, FaTimes } from 'react-icons/fa';
+import { BiCheck } from "react-icons/bi";
+import './pricing3.scss';
+import giftImg from '../../../../Images/giftimg.png';
+import { useLocation, useNavigate } from "react-router-dom"
+import { Toggle } from "../../../../Components/Forms/Switch"
+import giftimg from "../../../../images/giftimg.png"
+import curvearrow from "../../../../images/curvearrow.png"
+import { getSession, sessionStore } from "../../../../Services/others";
+import { Messages } from "../../../../Components/Notifications/Messages";
+import CommonSlider from "../../../../Components/CommonSlider/CommonSlider";
+import { ArrowRightOutlined } from "@ant-design/icons";
+import { FaCheckCircle } from "react-icons/fa";
+import {
+ getPricingType,
+ postFreeOption,
+ getPricingFeatures,
+ getPricingTypeAppId,
+ getPurchasedPlan,
+ getPurchasedAppDetails,
+ getUsedplandata,
+ GlobalAdminplanschanges,
+ ChangeAdminplanschanges,
+ changeNewPlandata,
+} from "../../../../features/pricingType/pricingType";
+import {
+ changePageAppId,
+ getAllApplications,
+ getAllApplicationsData,
+ getPageAppId,
+ selectedApplication,
+ changeCurrentTextValue,
+ changeCurrentColorValue,
+ selectedApplicationName
+} from "../../../../features/themeChange/themeChange";
+import moment from "moment";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import "./PrcingPreview1.scss";
+import { PostOnlineUserTracking } from "../../../../features/priceType/priceType"
+import { a } from 'framer-motion/client';
+import { CloseCircleOutlined } from "@ant-design/icons";
+
+const subDirectory = import.meta.env.ENV_BASE_URL
+
+const staticPlans = [
+ // {
+ // PricingName: 'FREE',
+ // Description: '',
+ // DisplayPrice: 0,
+ // FeatureDetails: [
+ // { FeatName: 'Company-1' },
+ // { FeatName: 'Branch-1' },
+ // { FeatName: 'User-1' },
+ // ],
+ // Status: '',
+ // popular: false,
+ // },
+ {
+ PricingName: 'STANDARD',
+ Description: '',
+ DisplayPrice: 249,
+ FeatureDetails: [
+ { FeatName: 'Company-1' },
+ { FeatName: 'Branch-1' },
+ { FeatName: 'User-1' },
+ { FeatName: 'account-1' },
+ ],
+ Status: '',
+ popular: false,
+ },
+ {
+ PricingName: 'PRO',
+ Description: '',
+ DisplayPrice: 416,
+ FeatureDetails: [
+ { FeatName: 'Company-1' },
+ { FeatName: 'Branch-1' },
+ { FeatName: 'User-4' },
+ { FeatName: 'Catalog' },
+ { FeatName: 'Company-1' },
+ { FeatName: 'Branch-1' },
+ { FeatName: 'User-4' },
+ { FeatName: 'Catalog' },
+ ],
+ Status: '',
+ popular: false,
+ },
+ {
+ PricingName: 'ADVANCE',
+ Description: '',
+ DisplayPrice: 833,
+ FeatureDetails: [
+ { FeatName: 'Company-1' },
+ { FeatName: 'Branch-2' },
+ { FeatName: 'User-5' },
+ { FeatName: 'Catalog' },
+ { FeatName: 'Company-1' },
+ { FeatName: 'Branch-2' },
+ { FeatName: 'User-5' },
+ { FeatName: 'Catalog' },
+ { FeatName: 'Company-1' },
+ { FeatName: 'Branch-2' },
+ { FeatName: 'User-5' },
+ { FeatName: 'Catalog' },
+ ],
+ Status: '',
+ popular: false,
+ },
+];
+
+const Pricing3 = ({ appPurchases, newplan, ...rest }) => {
+
+ const dispatch = useDispatch();
+ // const pricingData = useSelector(pricingTypeSelector);
+ // const [toggleValue, setToggleValue] = useState('M');
+ const [loading, setLoading] = useState(true);
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+ // const AppId = getSession('AppId');
+ // const UserId = getSession('UserId');
+ const data = rest?.data;
+
+ const AdminId = rest?.AdminId;
+ const Application = useSelector(selectedApplication);
+ const AllApplicationsData = useSelector(getAllApplicationsData);
+ const AppNameValue = useSelector(selectedApplicationName);
+ const selectedAppId = useSelector(selectedApplication);
+ const color = useSelector(changeCurrentColorValue);
+ const text = useSelector(changeCurrentTextValue);
+ const pageAppId = useSelector(getPageAppId);
+ const [DarkColor, setDarkColor] = useState(color ? color["darkColor"] : null);
+ const [HeaderFont, setHeaderFont] = useState(text ? text["head"] : null);
+ const [ParaFont, setParaFont] = useState(text ? text["para"] : null);
+ const [toggleValue, setToggleValue] = useState("Y");
+ const [messageType, setMessageType] = useState(null);
+ const [messageData, setMessageData] = useState(null);
+ const [appPurchase, setappPurchase] = useState([]);
+ const [PurchasedPlan, setPurchasedPlan] = useState(null);
+ const [AppName, setAppName] = useState(null);
+ const [AppId, setAppId] = useState(selectedAppId != null ? selectedAppId["AppId"] : pageAppId)
+ const navigate = useNavigate()
+ const pricingTypeSelector = (state) => state?.pricingType?.PricingType || [];
+ const withoutapidata = [
+ {
+ "AppId": "",
+ "Status": "skeleton",
+ "PricingName": "",
+ "Price": "",
+ "PricingId": "",
+ "DisplayPrice": "",
+ "NetPrice": "000",
+ "PriceTag": "",
+ "NoOfDays": "",
+ "PriceTagName": "",
+ "FeatureDetails": [
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ }
+ ],
+ },
+ {
+ "AppId": "",
+ "Status": "skeleton",
+ "PricingName": "",
+ "Price": "",
+ "PricingId": "",
+ "DisplayPrice": "",
+ "NetPrice": "000",
+ "PriceTag": "",
+ "NoOfDays": "",
+ "PriceTagName": "",
+ "FeatureDetails": [
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ }
+ ]
+ },
+ {
+ "AppId": "",
+ "Status": "skeleton",
+ "PricingName": "",
+ "Price": "",
+ "PricingId": "",
+ "DisplayPrice": "",
+ "NetPrice": "000",
+ "PriceTag": "",
+ "NoOfDays": "",
+ "PriceTagName": "",
+ "FeatureDetails": [
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ },
+ {
+ "FeatName": "",
+ "FeatConstraint": "",
+ "FeatDescription": "",
+ }
+ ]
+ }
+ ]
+
+ const pricingData = !rest.hasOwnProperty("apiCall") ? useSelector(pricingTypeSelector) : withoutapidata;
+
+ let checkPurchase = pricingData?.filter((val) => val["PricingName"]?.toUpperCase() !== "FREE")?.filter(eachFeature => eachFeature?.Status == "Extend Pack").length > 0
+console.log(pricingData,"pricingTypeSelector")
+
+ const purchasedAmt = pricingData?.filter(item => item?.Status === "Extend Pack")
+ const AppExpDate = appPurchase?.filter(item => item?.AppName === AppName)
+ const url = window.location.href
+
+ const UserType = getSession("UserType");
+ const UserId = (UserType == "Super Admin" || UserType == "Super Admin User") ? appPurchases?.[0]?.UserId || newplan
+ : UserType == "Employee" ? AdminId
+ : getSession("UserId")
+
+ const Sadmin = useSelector(GlobalAdminplanschanges);
+ const [Existplandata, setExistplandata] = useState();
+ const [differenceDays, setDifferenceDays] = useState(0);
+ const changeCurrentColorValues = useSelector(changeCurrentColorValue);
+
+
+ useEffect(() => {
+ let FilterData = AppExpDate?.filter(item => item.PricingName != "Free")
+ let Nodays = FilterData?.reduce((total, plan) => total + plan.RemainingDays, 0);
+ setDifferenceDays(Nodays);
+ }, [AppExpDate]);
+
+ useEffect(() => {
+ let ApplicationsData = AllApplicationsData?.filter(a => a?.AppId === Application?.AppId)
+ setAppName(ApplicationsData.length > 0 ? ApplicationsData[0]["AppName"] : AppNameValue.length > 0 ? AppNameValue : null)
+ }, [Application])
+
+ useEffect(() => {
+ if (selectedAppId === null) {
+ getLastUrlSegment(url)
+ }
+ getresPurchasedApp()
+ fetchData()
+ Downgrade()
+ }, [AppId, UserId])
+
+ const fetchData = async () => {
+ let res = await dispatch(getPurchasedPlan({ UserId, AppId })).unwrap()
+
+ if (res?.data?.statusCode == 1) {
+ setPurchasedPlan(res?.data?.data?.[0])
+ }
+ }
+
+ const getresPurchasedApp = async () => {
+ let res = await dispatch(getPurchasedAppDetails({ UserId, AppId })).unwrap();
+ setappPurchase(res?.data?.data)
+ }
+
+ useEffect(() => {
+ setAppId(selectedAppId != null ? selectedAppId["AppId"] : pageAppId)
+ }, [selectedAppId])
+
+ async function getAllApps(appName1) {
+ let res = await dispatch(getAllApplications()).unwrap()
+
+ if (res?.data?.statusCode === 1) {
+ await getAppId(res?.data?.data, appName1);
+ }
+ }
+
+ function getLastUrlSegment(url) {
+ const appName1 = new URL(url).pathname.split("/")?.filter(Boolean).pop();
+ getAllApps(appName1);
+ }
+
+ const getAppId = async (data, appNames) => {
+ const app = data?.filter(item =>
+ item?.["AppName"]?.toUpperCase() === appNames?.toUpperCase()
+ )
+
+ if (app.length > 0) {
+ dispatch(changePageAppId(app[0]?.["AppId"]))
+ setAppId(app[0]?.["AppId"])
+ }
+ }
+
+ const onComplete = useCallback(() => {
+ setMessageData(null);
+ setMessageType(null);
+ }, [])
+
+ const handleToggleChange = (checked) => {
+
+ const newToggleValue = checked == "Y" ? "Y" : "M";
+ setToggleValue(newToggleValue);
+ if (!UserId) {
+ dispatch(getPricingTypeAppId({ toggleValue: newToggleValue, AppId }));
+ }
+ else {
+ dispatch(getPricingType({ toggleValue: newToggleValue, AppId, UserId }));
+ }
+ };
+
+ useEffect(() => {
+ if (!UserId) {
+ dispatch(getPricingTypeAppId({ toggleValue, AppId }));
+ }
+ else {
+ dispatch(getPricingType({ toggleValue, AppId, UserId }));
+ }
+ dispatch(getPricingFeatures({ toggleValue, AppId })).unwrap();
+ }, [toggleValue, AppId, UserId, dispatch]);
+
+ const handleStartNow = async (val) => {
+ let pricingData = val?.find((item) => item.PricingName === "Free");
+ const currentDate = new Date();
+ const purDate = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
+ const validityStartDate = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
+ const EndDate = moment(currentDate).add(pricingData["NoOfDays"], "days").format("YYYY-MM-DD HH:mm:ss");
+ var date = new Date(EndDate);
+ date.setDate(date.getDate() - 1);
+ const validityEndDate = date.toISOString().slice(0, 19).replace("T", " ");
+ if (UserId) {
+
+ if (pricingData["Status"] === "Start Free") {
+
+ const postData = {
+ UserId: UserId,
+ AppId: getSession("AppId"),
+ PricingId: pricingData["PricingId"],
+ PurDate: purDate,
+ PaymentStatus: "S",
+ LicenseStatus: "A",
+ Price: pricingData["Price"],
+ ValidityStart: validityStartDate,
+ ValidityEnd: validityEndDate,
+ CreatedBy: getSession("UserId"),
+ };
+ const response = await dispatch(postFreeOption(postData)).unwrap()
+ if (response?.data?.statusCode == 1) {
+ setMessageType("success");
+ setMessageData(response?.data?.response);
+ if (UserId) {
+ await reloadhome()
+ } else {
+ await reloadPublicSignin()
+ }
+ } else {
+ setMessageType("error")
+ setMessageData(response?.data?.response)
+ }
+ }
+ else {
+
+ setMessageData("Free Already Used");
+ setMessageType("warning")
+ }
+ }
+ else {
+
+ navigate(`${subDirectory}signin`,
+ {
+ state: {
+ AppId: getSession("AppId"),
+ PricingId: pricingData["PricingId"],
+ PurDate: purDate,
+ PaymentStatus: "S",
+ LicenseStatus: "A",
+ Price: pricingData["Price"],
+ ValidityStart: validityStartDate,
+ ValidityEnd: validityEndDate,
+ PricingName: "Free",
+ locationpathname: window.location?.pathname,
+ }
+ }
+ );
+ window.location.reload()
+ }
+ };
+
+ const reloadhome = () => {
+ navigate(`${subDirectory}landing-page/home`);
+ window.location.reload()
+ }
+
+ const reloadPublicSignin = () => {
+ navigate(`${subDirectory}signin`);
+ window.location.reload()
+ }
+
+ const logVisit = (pricingData) => {
+ const UserId = getSession("UserId");
+ const AppId = getSession("AppId");
+
+ const stored = JSON.parse(localStorage.getItem("visitLogFormat") || "null");
+
+ const newVisit = {
+ VisitTime: new Date().toISOString(),
+ Location: window.location.pathname
+ };
+
+ let updatedLog;
+
+ if (stored) {
+ const oldVisits = Array.isArray(stored.LocationVistDtl) ? stored.LocationVistDtl : [];
+
+ updatedLog = {
+ ...stored,
+ PricingId: pricingData?.PricingId || stored.PricingId || null,
+ LocationVistDtl: [...oldVisits, newVisit],
+ CreatedBy: UserId
+ };
+ } else {
+ updatedLog = {
+ UserId,
+ AppId,
+ CreatedBy: UserId,
+ PricingId: pricingData?.PricingId || null,
+ LocationVistDtl: [newVisit]
+ };
+ }
+
+ let finalData = localStorage.setItem("visitLogFormat", JSON.stringify(updatedLog));
+
+ };
+
+ const handleSubmit = useCallback(async (pricingData, data) => {
+ logVisit(pricingData)
+ const stored = JSON.parse(localStorage.getItem("visitLogFormat") || "null");
+ const removeDuplicateLocations = (data) => {
+ const seen = new Set();
+ const uniqueVisits = [];
+
+ for (const visit of data.LocationVistDtl) {
+ const locationKey = visit.Location.toLowerCase(); // Case-insensitive check
+ if (!seen.has(locationKey)) {
+ seen.add(locationKey);
+ uniqueVisits.push(visit);
+ }
+ }
+
+ return {
+ ...data,
+ LocationVistDtl: uniqueVisits
+ };
+ };
+ let postData = removeDuplicateLocations(stored)
+
+ let response = await dispatch(PostOnlineUserTracking(postData))
+ localStorage.removeItem("visitLogFormat")
+ sessionStore("AppId", pricingData["AppId"]);
+ sessionStore("PricingId", pricingData["PricingId"]);
+ const currentDate = new Date();
+ const purDate = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
+ const validityStartDate = moment(currentDate).format("YYYY-MM-DD HH:mm:ss");
+ const EndDate = moment(currentDate).add(pricingData["NoOfDays"], "days").format("YYYY-MM-DD HH:mm:ss");
+ var date = new Date(EndDate);
+ date.setDate(date.getDate() - 1);
+ const validityEndDate = date.toISOString().slice(0, 19).replace("T", " ");
+ if (UserId) {
+ if (Sadmin) {
+ if (appPurchases?.[0]?.Sadmin == 'Newplan') {
+ await dispatch(ChangeAdminplanschanges(false));
+ await dispatch(changeNewPlandata(pricingData));
+ } else {
+ if (pricingData?.Status != "Extend Pack" && appPurchases?.[0]?.PricingName != "Free") {
+ navigate(`${subDirectory}invoice-detail`, {
+ state: {
+ pricingData: pricingData,
+ PackName: pricingData?.Status,
+ purchasedAmt: PurchasedPlan,
+ differenceDays: differenceDays,
+ AppExpDate: AppExpDate,
+ locationpathname: window.location?.pathname,
+ Exist: Existplandata,
+ SAdmin: Sadmin,
+ UserId: UserId,
+ lastappPurchase: appPurchases,
+ },
+ });
+ window.location.reload();
+ }
+ else {
+ await dispatch(ChangeAdminplanschanges(false));
+ await dispatch(changeNewPlandata(pricingData));
+ }
+ }
+ }
+ else {
+ navigate(`${subDirectory}invoice-detail`, {
+ state: {
+ pricingData: pricingData,
+ PackName: pricingData?.Status,
+ purchasedAmt: PurchasedPlan,
+ differenceDays: differenceDays,
+ AppExpDate: AppExpDate,
+ locationpathname: window.location?.pathname,
+ Exist: Existplandata,
+ SAdmin: Sadmin,
+ UserId: UserId,
+ lastappPurchase: appPurchases,
+ },
+ });
+ window.location.reload();
+ }
+ }
+ else {
+ navigate(`${subDirectory}signin`, {
+ state: {
+ pricingData: pricingData,
+ AppId: getSession("AppId"),
+ PricingId: pricingData["PricingId"],
+ PurDate: purDate,
+ PaymentStatus: "S",
+ LicenseStatus: "A",
+ Price: pricingData["Price"],
+ ValidityStart: validityStartDate,
+ ValidityEnd: validityEndDate,
+ PackName: pricingData?.Status,
+ purchasedAmt: PurchasedPlan,
+ differenceDays: differenceDays,
+ AppExpDate: AppExpDate,
+ locationpathname: window.location?.pathname,
+ Exist: Existplandata
+ },
+ });
+ }
+ }, [purchasedAmt]);
+
+ const Downgrade = async () => {
+ let data = { AppId: AppId, UserId: UserId, type: "L" };
+ let Response = await dispatch(getUsedplandata(data)).unwrap();
+
+ if (Response?.data?.statusCode == 1) {
+ setExistplandata(Response.data?.data)
+ }
+ }
+
+ const plansToShow = (Array.isArray(pricingData) && pricingData.length > 0 ? pricingData : []).map((plan) => ({
+ ...plan,
+ popular: plan.PricingName?.toUpperCase() === 'PRO',
+ }));
+
+ let FreeDisable = plansToShow?.find(plan => plan.PricingName?.toUpperCase() === 'FREE')?.Status === 'Already Used' ? true : false;
+ let FreePricingnameDisable = plansToShow?.some(plan => plan.PricingName?.toUpperCase() === 'FREE')
+
+ useEffect(() => {
+ setLoading(true);
+ if (AppId && UserId) {
+ dispatch(getPricingType({ toggleValue, AppId, UserId }))
+ .finally(() => setLoading(false));
+ } else {
+ setLoading(false);
+ }
+ }, [toggleValue, AppId, UserId, dispatch]);
+
+ useEffect(() => {
+ const handleResize = () => setIsMobile(window.innerWidth < 768);
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ const handlePrev = () => {
+ setCurrentIndex((prev) => (prev === 0 ? plansToShow.length - 1 : prev - 1));
+ };
+
+ const handleNext = () => {
+ setCurrentIndex((prev) => (prev === plansToShow.length - 1 ? 0 : prev + 1));
+ };
+
+ return (
+
+
+
+
+
+
+
+ {data?.map(a => a.FieldName === "Pricing3Header" &&
+ !Sadmin && (
+
+
0 ? "pricingtext" : "pricingtextwod"} style={{ fontSize: "40px", fontWeight: "600", fontFamily: HeaderFont }}>{a.FieldValue}
+
+ )
+ )
+ }
+
+ {FreePricingnameDisable &&
+
+ {data?.map(a => a.FieldName === "Pricing3Description" &&
+ !Sadmin && (
+
+
0 ? "pricing-subtitl" : "pricingtextwod"} >{a.FieldValue}
+
+ )
+ )}
+
+
{
+ e.stopPropagation(); // Prevent paragraph click if needed
+ if (plansToShow["Status"] !== "Already Used") {
+ handleStartNow(plansToShow);
+ }
+ }}
+ disabled={FreeDisable}
+ style={{
+ border: "none",
+ background: "transparent",
+ color: "blue",
+ textDecoration: "underline",
+ cursor: FreeDisable ? "not-allowed" : "pointer",
+ padding: 0,
+ fontSize: "inherit",
+ fontFamily: "inherit",
+ margin: 'auto',
+ }}
+ >
+ Free
+
+ {" "}
+ trial.
+
+ }
+
+
+
+ handleToggleChange('M')}
+ defaultChecked={true}
+ >
+ Monthly
+
+ handleToggleChange('Y')}
+ >
+ Annual
+
+ Save 20%
+
+
+
+
+
+
+
+
+ {/* {isMobile ? (
+
+
←
+
+ {plansToShow[currentIndex]?.PricingName?.toUpperCase() !== "FREE" && (
+
+ {plansToShow[currentIndex]?.popular && (
+
Most Popular
+ )}
+
+
{plansToShow[currentIndex]["PricingName"]}
+
{plansToShow[currentIndex]["Description"]}
+
+ {plansToShow[currentIndex]["PricingName"]?.toUpperCase() === "FREE" ? (
+
+ ) : (
+
₹{plansToShow[currentIndex]["DisplayPrice"]}
+ )}
+ {plansToShow[currentIndex]["PricingName"]?.toUpperCase() !== "FREE" && (
+
/month billed {toggleValue === 'Y' ? 'Monthly' : 'Monthly'}
+ )}
+
+
+ {plansToShow[currentIndex]["Status"] === "Already Used" || checkPurchase ? "Already Used" : "Start Now"}
+
+
+ {pricingData[currentIndex]["FeatureDetails"]?.length > 0 ? pricingData[currentIndex]["FeatureDetails"].map((feature, idx) => (
+
+
+
+
+ {feature.FeatName}{feature.FeatConstraint && feature.FeatConstraint !== 0 ? ` - ${feature.FeatConstraint}` : ''}
+
+
+ )) : (
+
No features listed
+ )}
+
+
+
+
+
→
+
+ ) : */}
+ {
+ !rest.hasOwnProperty("apiCall") && (
+
+ {plansToShow?.filter(val => val.PricingName?.toUpperCase() !== "FREE")?.map((val, index) => (
+
+ {val?.popular && (
+
Most Popular
+ )}
+
+
{val["PricingName"]}
+
Ideal for growing {AppName}
+
{val["Description"]}
+
+ {
+// val["PricingName"]?.toUpperCase() === "FREE" ? (
+//
+// ) :
+(
+
₹{val["DisplayPrice"]}
+ )}
+ {val["PricingName"]?.toUpperCase() !== "FREE" && (
+
/ {toggleValue === 'Y' ? 'Monthly' : 'Monthly'}
+ )}
+
+
+
+
handleSubmit(val, AppExpDate?.[0]?.RemainingDays > 0 ? val["Status"] === "Extend Pack" ? "Extend Pack" : purchasedAmt?.[0]?.Status == "Extend Pack" ? (val?.DisplayPrice < purchasedAmt?.[0]?.DisplayPrice ? "Switch" : "Upgrade") : "Switch" : (val["Status"] === "Extend Pack" ? "Extend Pack" : "Start Now"))}
+ style={{
+ backgroundColor: val?.popular ? changeCurrentColorValues.darkColor : '',
+ }}
+ >
+ {AppExpDate?.[0]?.RemainingDays > 0
+ ? val["Status"] === "Extend Pack"
+ ? "Extend-Pack"
+ : purchasedAmt?.[0]?.Status === "Extend Pack"
+ ? val?.DisplayPrice < purchasedAmt?.[0]?.DisplayPrice
+ ? "Switch"
+ : "Upgrade"
+ : "Switch"
+ : val["Status"] === "Extend Pack"
+ ? "Extend-Pack"
+ : "Start-Now"
+ }
+
+
+
+ {val["FeatureDetails"]?.length > 0 ? val["FeatureDetails"].map((feature, idx) => (
+
+
+ {feature.FeatDescription}{feature.FeatConstraint && feature.FeatConstraint !== 0 ? ` - ${feature.FeatConstraint}` : ''}
+
+ )) : (
+
No features listed
+ )}
+
+
+
+
+ ))}
+
+ )}
+
+
+
+
One platform. All your branches. Fully customizable.
+
+ Contact Our Sales Team
+
+
+
+
+
+
+ );
+};
+
+export default Pricing3;
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/Pricing/Pricingtable.scss b/src/Pages/themeTemplate/TemplateComps/Pricing/Pricingtable.scss
new file mode 100644
index 0000000..d94fdb0
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Pricing/Pricingtable.scss
@@ -0,0 +1,5 @@
+ .ant-table-wrapper {
+ clear: both;
+ max-width: 102%;
+ margin-inline-start: 22px;
+}
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/Pricing/pricing3.scss b/src/Pages/themeTemplate/TemplateComps/Pricing/pricing3.scss
new file mode 100644
index 0000000..014d91b
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Pricing/pricing3.scss
@@ -0,0 +1,275 @@
+.pricing-section {
+ padding: 5rem 0;
+ background: #fff;
+ font-family: "Inter", sans-serif !important;
+}
+
+.pricing-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1.5rem;
+}
+
+.pricing-header {
+ text-align: center;
+ max-width: 700px;
+ margin: 0 auto 4rem auto;
+}
+
+.pricing-title {
+ font-size: 2.25rem;
+ font-weight: bold;
+ color: #1a202c;
+ margin-bottom: 1rem;
+}
+
+.pricing-subtitle {
+ font-size: 1.125rem;
+ color: #718096;
+ margin-bottom: 2rem;
+
+ Button:disabled,
+ Button[disabled] {
+justify-content: center !important;
+}
+
+ @media screen and (max-width:768px) {
+ font-size: 1rem;
+
+ }
+
+}
+
+.pricing-toggle-wrapper {
+ display: flex;
+ justify-content: center;
+ // margin-bottom: 2rem;
+ margin: 0;
+ margin-top: 2rem;
+}
+
+.pricing-toggle-bg {
+ background: #f3f4f6;
+ padding: 0.25rem;
+ border-radius: 0.75rem;
+ display: inline-flex;
+}
+
+.pricing-toggle-btn {
+ padding: 0.5rem 1rem;
+ border-radius: 0.375rem;
+ background: none;
+ color: #4b5563;
+ border: none;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+ font-family: "Inter", sans-serif;
+}
+
+.pricing-toggle-btn.active {
+ background: #fff;
+ color: #1a202c;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.pricing-save-badge {
+ margin-left: 0.5rem;
+ background: #d1fae5;
+ color: #047857;
+ font-size: 0.75rem;
+ padding: 0.125rem 0.5rem;
+ border-radius: 9999px;
+}
+
+.pricing-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 2rem;
+}
+
+@media (min-width: 768px) {
+ .pricing-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+.pricing-card {
+ border: 1px solid #e5e7eb;
+ border-radius: 1rem;
+ overflow: hidden;
+ background: #fff;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+ position: relative;
+ transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.pricing-card.popular {
+ border: 2px solid #f59e0b;
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+ transform: scale(1.05);
+}
+
+.pricing-popular-badge {
+ position: absolute;
+ top: 0;
+ right: 0;
+ background: #f59e0b;
+ color: #fff;
+ font-weight: 500;
+ padding: 0.25rem 1rem;
+ border-bottom-left-radius: 0.5rem;
+ font-size: 0.875rem;
+}
+
+.pricing-card-content {
+ padding: 1.5rem;
+ background: #fff;
+}
+
+.pricing-plan-name {
+ font-size: 1.5rem;
+ font-weight: 700;
+ text-transform: capitalize !important;
+ color: #1a202c;
+ margin-bottom: 0.5rem;
+ font-family: "Inter", sans-serif;
+}
+
+.pricing-plan-desc {
+ color: #718096;
+ margin-bottom: 1.5rem;
+}
+
+.pricing-price-row {
+ display: flex;
+ align-items: baseline;
+ margin-bottom: 1.5rem;
+}
+
+.pricing-price {
+ font-size: 2.25rem;
+ font-weight: bold;
+ color: #1a202c;
+ font-family: "Inter", sans-serif;
+}
+
+.pricing-per-month {
+ color: #718096;
+ margin-left: 0.5rem;
+}
+
+.pricing-plan-btn {
+ width: 100%;
+ padding: 1rem 0;
+ border-radius: 0.5rem;
+ font-weight: 500;
+ background: #f3f4f6;
+ color: #1a202c;
+ border: none;
+ margin-bottom: 1.5rem;
+ transition: background 0.2s, color 0.2s;
+ cursor: pointer;
+ font-family: "Inter", sans-serif;
+ font-size: 17px;
+}
+
+.pricing-plan-btn.popular {
+ background: #f59e0b;
+ color: #fff;
+}
+
+.pricing-plan-btn:hover {
+ background: #e5e7eb;
+}
+
+.pricing-plan-btn.popular:hover {
+ background: #d97706;
+}
+
+.pricing-features-list {
+ display: flex;
+ flex-direction: column;
+ gap: .75rem;
+ height: 45vh;
+ overflow: scroll;
+
+}
+
+.pricing-feature {
+ display: flex;
+ align-items: center;
+ color: #374151;
+}
+
+.pricing-feature-icon {
+ width: 21px;
+ height: 21px;
+ margin-right: 0.75rem;
+ flex-shrink: 0;
+}
+
+.pricing-feature-icon.included {
+ color: #22c55e;
+}
+
+.pricing-feature.not-included {
+ color: #9ca3af;
+}
+
+.pricing-feature-icon.not-included {
+ color: #d1d5db;
+}
+
+.pricing-footer {
+ margin-top: 4rem;
+ text-align: center;
+}
+
+.pricing-footer-text {
+ color: #718096;
+ margin-bottom: 1rem;
+}
+
+.pricing-footer-btn {
+ background: #111827;
+ color: #fff;
+ font-weight: 500;
+ padding: 1rem 2rem;
+ border-radius: 0.5rem;
+ border: none;
+ transition: background 0.2s;
+ cursor: pointer;
+ font-family: "Inter", sans-serif;
+ font-size: 16px;
+}
+
+.pricing-footer-btn:hover {
+ background: #1f2937;
+}
+
+.mobile-only {
+ display: inline-block;
+}
+
+.pricingtext1 {
+ font-family: "Inter", sans-serif !important;
+ font-size: 2.5rem;
+ color: #111111;
+ padding: 1rem 0;
+ font-weight: 700;
+ text-transform: capitalize !important;
+}
+
+.planslogan {
+ font-family: "Inter", sans-serif !important;
+ font-size: 1rem;
+ color: #6b7280;
+ text-align: left;
+}
+
+@media (min-width: 768px) {
+ .mobile-only {
+ display: none !important;
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/Showcase/Showcase.jsx b/src/Pages/themeTemplate/TemplateComps/Showcase/Showcase.jsx
new file mode 100644
index 0000000..60f3561
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Showcase/Showcase.jsx
@@ -0,0 +1,139 @@
+
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { EyeOutlined, PlusOutlined, ArrowRightOutlined, CloseOutlined } from '@ant-design/icons';
+import { useDispatch, useSelector } from "react-redux";
+import { Modal, Form } from 'antd';
+import Buttons from "../../../../Components/Forms/Buttons";
+import Imageupload from "../../../../Components/Forms/Upload.jsx";
+import { Messages } from "../../../../Components/Notifications/Messages";
+import { changeShowCaseDetails, globalshowCaseDetails } from '../../../../features/themeChange/themeChange.js';
+import ShowcasePreview from './showcasepreviw.jsx';
+
+
+const Showcase = () => {
+ const formRef = useRef();
+ const showCaseDetails = useSelector(globalshowCaseDetails);
+ const dispatch = useDispatch();
+ const [imageUrl, setImageUrl] = useState(showCaseDetails?.length > 0 && showCaseDetails[0]?.FieldValue ? showCaseDetails[0].FieldValue : "");
+ const [model, setModel] = useState({
+ viewData: false,
+ viewForm: false
+ });
+
+useEffect(() => {
+setImageUrl(showCaseDetails?.length > 0 && showCaseDetails[0]?.FieldValue ? showCaseDetails[0].FieldValue : "");
+}, [showCaseDetails]);
+
+ const [message, setMessage] = useState({
+ type: null,
+ data: null
+ });
+ const onChangePreviewModel = () => {
+ setModel({
+ viewData: true,
+ viewForm: false
+ })
+ setImageUrl(showCaseDetails?.length > 0 ? showCaseDetails?.[0]?.FieldValue : "")
+ }
+ const onChangeAddModel = () => {
+ setModel({
+ viewData: false,
+ viewForm: true
+ })
+ setImageUrl(showCaseDetails?.length > 0 ? showCaseDetails?.[0]?.FieldValue : "")
+ }
+
+ const closeModel = () => {
+ setModel({
+ viewData: false,
+ viewForm: false
+ })
+ }
+
+ const updateImageUrl = (url) => {
+ setImageUrl(url || ""); // Ensure we always set a string value
+ }
+ console.log("showCaseDetails", showCaseDetails)
+ const onFinish = () => {
+ dispatch(changeShowCaseDetails([
+ {
+ 'FieldName': 'ShowCaseUrl',
+ 'FieldValue': imageUrl,
+ 'FieldAddData': ''
+ }]));
+ setModel({
+ viewData: false,
+ viewForm: false
+ })
+ }
+
+ const onComplete = useCallback(() => {
+ setMessage({
+ type: null,
+ data: null
+ })
+ }, []);
+
+ return (
+ <>
+
+
+
+
+
}
+ width={400}
+ >
+
+
+
+
+
+
+
+
+
+ >
+ )
+}
+
+export default Showcase
+
diff --git a/src/Pages/themeTemplate/TemplateComps/Showcase/Showcase.scss b/src/Pages/themeTemplate/TemplateComps/Showcase/Showcase.scss
new file mode 100644
index 0000000..b5a7cfb
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Showcase/Showcase.scss
@@ -0,0 +1,60 @@
+.showcase-section {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: transparent;
+ position: relative;
+ perspective: 1000px;
+ overflow: hidden;
+ padding: 3rem 3rem;
+ opacity: 0;
+ transform: scale(0.95);
+ transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+
+ &.visible {
+ opacity: 1;
+ transform: scale(1);
+ }
+
+ @media (max-width: 1024px) {
+ flex-direction: column;
+ padding: 2rem 2rem;
+ gap: 3rem;
+ }
+
+
+ .showcase-image {
+ max-width: 90%;
+ width: 100%;
+ margin: 0 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .visible & {
+ opacity: 1;
+ transform: translateX(0);
+ }
+
+ .image-container {
+ width: 100%;
+ height: 530px;
+ border-radius: 20px;
+ overflow: hidden;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ will-change: transform;
+ backface-visibility: hidden;
+ }
+
+ @media screen and (max-width:768px) {
+ height: 200px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/Showcase/showcasepreviw.jsx b/src/Pages/themeTemplate/TemplateComps/Showcase/showcasepreviw.jsx
new file mode 100644
index 0000000..6a3028a
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Showcase/showcasepreviw.jsx
@@ -0,0 +1,63 @@
+import React, { useState, useEffect, useRef } from "react";
+import placeholderImg from "../../../../Images/defaultImage.png";
+import "./showcase.scss";
+
+function ShowcasePreview(props) {
+ const [isVisible, setIsVisible] = useState(false);
+ const elementRef = useRef(null);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ // When the element becomes 75% visible, trigger the animation
+ if (entry.intersectionRatio >= 0.75) {
+ setIsVisible(true);
+ }
+ },
+ {
+ threshold: 0.75, // Trigger when 75% of the element is visible
+ root: null, // Use viewport as root
+ rootMargin: '0px' // No margin
+ }
+ );
+
+ if (elementRef.current) {
+ observer.observe(elementRef.current);
+ }
+
+ return () => {
+ if (elementRef.current) {
+ observer.unobserve(elementRef.current);
+ }
+ };
+ }, []);
+
+ return (
+ <>
+
+
+
+
+
+
+
+ >
+ );
+}
+
+export default ShowcasePreview;
diff --git a/src/Pages/themeTemplate/TemplateComps/Testimonial/Testimonial.jsx b/src/Pages/themeTemplate/TemplateComps/Testimonial/Testimonial.jsx
new file mode 100644
index 0000000..fc3b0c0
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Testimonial/Testimonial.jsx
@@ -0,0 +1,97 @@
+// TestimonialSection.jsx
+import React, { useCallback, useState } from 'react';
+import { FaStar } from 'react-icons/fa';
+import { EyeOutlined, PlusOutlined, ArrowRightOutlined, CloseOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import './Testimonial.scss';
+import { Messages } from '../../../../Components/Notifications/Messages';
+
+const testimonials = [
+ {
+ name: 'Emily Rodriguez',
+ role: 'Owner, Cafe Delish',
+ image: 'https://images.pexels.com/photos/762020/pexels-photo-762020.jpeg?auto=compress&cs=tinysrgb&w=150',
+ quote: 'Business transformed how we run our café. Orders are processed faster, and the analytics help us make better business decisions. Our staff loves the intuitive interface!',
+ rating: 5
+ },
+ {
+ name: 'Michael Chen',
+ role: 'Manager, Fusion Bistro',
+ image: 'https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=150',
+ quote: 'We\'ve tried several POS systems, but Business stands out for its reliability and excellent customer support. The inventory management features save us hours every week.',
+ rating: 5
+ },
+ {
+ name: 'Sarah Johnson',
+ role: 'Owner, The Grill House',
+ image: 'https://images.pexels.com/photos/1587009/pexels-photo-1587009.jpeg?auto=compress&cs=tinysrgb&w=150',
+ quote: 'Since implementing Business, our table turnover has increased by 20%. The system is so efficient that our staff can focus more on customer service than manual processes.',
+ rating: 4
+ }
+];
+
+const TestimonialSection = () => {
+ const [message, setMessage] = useState({
+ type: null,
+ data: null
+ });
+ const onChangePreviewModel = (second) => { third }
+ const onChangeAddModel = (second) => { third }
+ const onComplete = useCallback(() => {
+ setMessage({
+ type: null,
+ data: null
+ })
+ }, []);
+ return (
+
+
+ Skilleton
+
+
onChangeAddModel()} />
+ onChangePreviewModel()} />
+
+
+
+
Trusted by Restaurant Owners
+
Hear what our customers have to say about Business.
+
+
+
+ {testimonials.map((testimonial, index) => (
+
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+
+ "{testimonial.quote}"
+
+
+
+
+
{testimonial.name}
+
{testimonial.role}
+
+
+
+ ))}
+
+
+
+
Join over 2,000+ restaurants already using Business
+
Get Started Today
+
+
+
+ );
+};
+
+export default TestimonialSection;
diff --git a/src/Pages/themeTemplate/TemplateComps/Testimonial/Testimonial.scss b/src/Pages/themeTemplate/TemplateComps/Testimonial/Testimonial.scss
new file mode 100644
index 0000000..b41be1f
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Testimonial/Testimonial.scss
@@ -0,0 +1,291 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+
+.testimonial-preview {
+ position: relative;
+ padding: 2rem;
+ background-color: #fff;
+ min-height: 100vh;
+
+ .tempOptions {
+ position: fixed;
+ right: 2rem;
+ bottom: 2rem;
+ display: flex;
+ gap: 1rem;
+ z-index: 1000;
+
+ .icon {
+ font-size: 24px;
+ padding: 8px;
+ background: #901d77;
+ color: white;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: transform 0.2s ease;
+
+ &:hover {
+ transform: scale(1.1);
+ }
+ }
+ }
+}
+
+.testimonial-section {
+ padding: 3rem 0;
+ background-color: #fff;
+ font-family: "Inter", sans-serif;
+}
+
+.testimonial-container {
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 3rem;
+}
+
+.testimonial-header {
+ text-align: center;
+ margin-bottom: 4rem;
+ padding: 1rem 1rem;
+
+ h2 {
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: #1a1a1a;
+ margin-bottom: 1rem;
+ }
+
+ p {
+ font-size: 1.125rem;
+ color: #4a5568;
+ }
+}
+
+.testimonials-grid {
+ // grid-template-columns: repeat(3, 1fr);
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ flex-wrap: nowrap;
+ gap: 2rem;
+ margin-bottom: 4rem;
+
+ @media (max-width: 1024px) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media (max-width: 768px) {
+ grid-template-columns: 1fr;
+ display: grid !important;
+ padding: 1rem 1rem;
+ }
+}
+
+.testimonial-card {
+ background: #f8f8f8;
+ border-radius: 0.75rem;
+ padding: 2rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ width: 30%;
+ height: 300px;
+ overflow: auto;
+ &:hover {
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transform: translateY(-2px);
+ transition:
+ transform 0.2s,
+ box-shadow 0.2s;
+ }
+
+ @media (max-width: 768px) {
+ width: 100%;
+ }
+}
+
+.stars {
+ display: flex;
+ gap: 0.25rem;
+
+ .star {
+ color: #e5e7eb;
+ font-size: 1.25rem;
+
+ &.filled {
+ color: #f59e0b;
+ }
+ }
+}
+
+.quote {
+ color: #1f2937;
+ font-size: 1rem;
+ line-height: 1.625;
+ margin: 0;
+ height: 150px;
+ overflow: auto;
+ scrollbar-width: thin;
+}
+
+.user-info {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.avatar {
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+ object-fit: cover;
+}
+
+.user-details {
+ h4 {
+ font-weight: 600;
+ color: #1a1a1a;
+ margin: 0;
+ }
+
+ p {
+ color: #4a5568;
+ font-size: 0.875rem;
+ margin: 0;
+ }
+}
+
+.cta-banner {
+ background: #f3f4f6;
+ padding: 2rem;
+ border-radius: 0.75rem;
+ text-align: center;
+ margin-top: 2rem;
+ width: max-content;
+ margin: 1rem auto;
+
+ p {
+ font-size: 1.125rem;
+ color: #1f2937;
+ margin-bottom: 1rem;
+ }
+
+ button {
+ background: #2563eb;
+ color: white;
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem;
+ border: none;
+ font-weight: 500;
+ font-family: "Poppins", sans-serif;
+ cursor: pointer;
+ transition: background-color 0.2s;
+
+ &:hover {
+ filter: brightness(1.1);
+ -webkit-filter: brightness(1.1);
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ width: 95%;
+ padding: 1.5rem;
+ }
+}
+
+.add-testimonial-btn {
+ background: #2563eb;
+ color: white;
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem;
+ border: none;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background-color 0.2s;
+ margin-top: 1rem;
+
+ &:hover {
+ background: #1d4ed8;
+ }
+}
+
+// Modal form styles
+.ant-modal {
+ .ant-modal-content {
+ border-radius: 0.75rem;
+ padding: 2rem;
+ }
+
+ .ant-modal-header {
+ border-bottom: none;
+ padding: 0;
+ margin-bottom: 2rem;
+ }
+
+ .ant-modal-title {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: #1a1a1a;
+ }
+
+ .ant-form-item-label > label {
+ font-weight: 500;
+ color: #1f2937;
+ }
+
+ .ant-input,
+ .ant-input-number {
+ border-radius: 0.375rem;
+ border-color: #e5e7eb;
+ padding: 0.5rem 0.75rem;
+
+ &:hover,
+ &:focus {
+ border-color: #2563eb;
+ box-shadow: none;
+ }
+ }
+
+ .ant-upload.ant-upload-select {
+ border-radius: 0.375rem;
+ border-color: #e5e7eb;
+ background: #f9fafb;
+
+ &:hover {
+ border-color: #2563eb;
+ }
+ }
+
+ .form-buttons {
+ margin-top: 2rem;
+ margin-bottom: 0;
+ text-align: right;
+ }
+
+ .submit-btn {
+ background: #2563eb;
+ color: white;
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem;
+ border: none;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s;
+
+ &:hover:not(:disabled) {
+ background: #1d4ed8;
+ }
+
+ &:disabled {
+ background: #93c5fd;
+ cursor: not-allowed;
+ opacity: 0.7;
+ }
+ }
+}
diff --git a/src/Pages/themeTemplate/TemplateComps/Testimonial/TestimonialPreView.jsx b/src/Pages/themeTemplate/TemplateComps/Testimonial/TestimonialPreView.jsx
new file mode 100644
index 0000000..887ffa8
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Testimonial/TestimonialPreView.jsx
@@ -0,0 +1,199 @@
+import React, { useEffect, useState } from 'react';
+import placeholderImg from "../../../../Images/defaultImage.png";
+import "./Testimonial.scss";
+import { useSelector } from 'react-redux';
+import { changeCurrentColorValue, changeCurrentTextValue, getAllApplicationsData, globaltestimonialDetails, selectedApplication, selectedApplicationName } from '../../../../features/themeChange/themeChange';
+import { FaStar } from "react-icons/fa6";
+import WebFont from 'webfontloader';
+
+
+
+const TestimonialPreView = ({ isDefault = false }) => {
+ const testimonialData = useSelector(globaltestimonialDetails);
+ const changeCurrentColorValues = useSelector(changeCurrentColorValue);
+ const CurrentText = useSelector(changeCurrentTextValue);
+
+ const Application = useSelector(selectedApplication);
+ const AllApplicationsData = useSelector(getAllApplicationsData);
+ const AppNameValue = useSelector(selectedApplicationName);
+
+ const [AppName, setAppName] = useState(null);
+
+
+
+ const defaultTestimonials = [
+ {
+ customerName: "Emily Rodriguez",
+ designation: "Owner, Cafe Delish",
+ customerImage: placeholderImg,
+ customerReview: "PozoResto transformed how we run our café. Orders are processed faster, and the analytics help us make better business decisions. Our staff loves the intuitive interface!",
+ rating: 5
+ },
+ {
+ customerName: "Michael Chen",
+ designation: "Manager, Fusion Bistro",
+ customerImage: placeholderImg,
+ customerReview: "We've tried several POS systems, but PozoResto stands out for its reliability and excellent customer support. The inventory management features save us hours every week.",
+ rating: 5
+ },
+ {
+ customerName: "Sarah Johnson",
+ designation: "Owner, The Grill House",
+ customerImage: placeholderImg,
+ customerReview: "Since implementing PozoResto, our table turnover has increased by 20%. The system is so efficient that our staff can focus more on customer service than manual processes.",
+ rating: 4
+ }
+ ];
+
+ const getTestimonials = () => {
+ if (isDefault) {
+ return {
+ header: "Trusted by Restaurant Owners",
+ subheader: "Hear what our customers have to say about PozoResto.",
+ testimonials: defaultTestimonials
+ };
+ }
+
+ if (!testimonialData?.length) {
+ return {
+ header: "Trusted by Restaurant Owners",
+ subheader: "Hear what our customers have to say about PozoResto.",
+ testimonials: defaultTestimonials
+ };
+ }
+
+ // Get header and subheader
+ const header = testimonialData?.find(item => item?.FieldName === 'Header1')?.FieldValue || {};
+ const subheader = testimonialData?.find(item => item?.FieldName === 'SubHeader1')?.FieldValue || {};
+
+ // Group testimonial fields by index
+ const testimonials = testimonialData?.reduce((acc, item) => {
+ if (item?.FieldName?.startsWith('customer')) {
+ const index = item.FieldName.match(/\d+$/)?.[0];
+ if (index) {
+ if (!acc[index]) acc[index] = {};
+
+ if (item.FieldName.includes('Image')) acc[index].customerImage = item.FieldValue;
+ if (item.FieldName.includes('Name')) acc[index].customerName = item.FieldValue;
+ if (item.FieldName.includes('Review')) acc[index].customerReview = item.FieldValue;
+ }
+ }
+ if (item?.FieldName?.startsWith('designation')) {
+ const index = item.FieldName.match(/\d+$/)?.[0];
+ if (index && acc[index]) {
+ acc[index].designation = item.FieldValue;
+ }
+ }
+ if (item?.FieldName?.startsWith('rating')) {
+ const index = item.FieldName.match(/\d+$/)?.[0];
+ if (index && acc[index]) {
+ acc[index].rating = item.FieldValue;
+ }
+ }
+ return acc;
+ }, {});
+ return {
+ header,
+ subheader,
+ testimonials: Object.values(testimonials).filter(t => t.customerName && t.customerReview)
+ };
+ };
+
+ const data = getTestimonials();
+
+ useEffect(() => {
+ let ApplicationsData = AllApplicationsData?.filter(
+ (a) => a?.AppId === Application?.AppId
+ );
+ setAppName(
+ ApplicationsData.length > 0
+ ? ApplicationsData[0]["AppName"]
+ : AppNameValue.length > 0
+ ? AppNameValue
+ : null
+ );
+ }, [Application]);
+
+
+
+
+ useEffect(() => {
+ if (CurrentText["head"], CurrentText["para"]) {
+ WebFont.load({
+ google: {
+ families: [CurrentText["head"], CurrentText["para"]] // Load the selected font
+ },
+ });
+ }
+
+ }, [CurrentText["head"], CurrentText["para"]]);
+
+ return (
+
+
+
{data.header}
+
{data.subheader}
+
+
+
+
+
+ {data.testimonials.map((testimonial, index) => (
+
+
+ {[...Array(5)].map((_, i) => (
+
+
+
+ ))}
+
+
+
{testimonial.customerReview}
+
+
+
+
+
{testimonial.customerName}
+
{testimonial.designation}
+
+
+
+ ))}
+
+
+
+
+
+
+
Join over 2,000+ {AppName} already using Pozo
+
Get Started Today
+
+
+
+ );
+}
+
+export default TestimonialPreView;
\ No newline at end of file
diff --git a/src/Pages/themeTemplate/TemplateComps/Testimonial/TestimonialTemplate.jsx b/src/Pages/themeTemplate/TemplateComps/Testimonial/TestimonialTemplate.jsx
new file mode 100644
index 0000000..7918b03
--- /dev/null
+++ b/src/Pages/themeTemplate/TemplateComps/Testimonial/TestimonialTemplate.jsx
@@ -0,0 +1,382 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { EyeOutlined, PlusOutlined, ArrowRightOutlined, CloseOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import { useDispatch, useSelector } from "react-redux";
+import { Modal, Form, Rate } from 'antd';
+import { InputField } from "../../../../Components/Forms/InputField.jsx";
+import { TextAreaInput as TextArea } from "../../../../Components/Forms/TextArea.jsx";
+import Buttons from "../../../../Components/Forms/Buttons.jsx";
+import Imageupload from "../../../../Components/Forms/Upload.jsx";
+import { Messages } from "../../../../Components/Notifications/Messages";
+import { changeTestimonialDetails, globaltestimonialDetails } from '../../../../../src/features/themeChange/themeChange.js';
+import TestimonialPreView from './TestimonialPreView.jsx';
+
+const TestimonialTemplate = () => {
+ const formRef = useRef();
+ const testimonialDetails = useSelector(globaltestimonialDetails);
+ const dispatch = useDispatch();
+ const [formData, setFormData] = useState({
+ header: '',
+ subheader: '',
+ testimonials: [
+ {
+ customerName: "",
+ designation: "",
+ customerReview: "",
+ customerImage: "",
+ rating: 5
+ }
+ ]
+ });
+ useEffect(() => {
+ if (testimonialDetails?.length === 0) {
+ formRef?.current?.resetFields();
+ }
+ }, [testimonialDetails]);
+ const [model, setModel] = useState({
+ viewData: false,
+ viewForm: false
+ });
+
+ const [message, setMessage] = useState({
+ type: null,
+ data: null
+ });
+
+ const onChangePreviewModel = () => {
+ setModel({
+ viewData: true,
+ viewForm: false
+ });
+ };
+ const onChangeAddModel = () => {
+ setModel({
+ viewData: false,
+ viewForm: true
+ });
+ if (testimonialDetails?.length > 0) {
+ // Get header and subheader
+ const header = testimonialDetails.find(item => item.FieldName === 'Header1')?.FieldValue || '';
+ const subheader = testimonialDetails.find(item => item.FieldName === 'SubHeader1')?.FieldValue || '';
+
+ // Group testimonial fields by index
+ const testimonials = testimonialDetails.reduce((acc, item) => {
+ if (item.FieldName.startsWith('customer')) {
+ const index = item.FieldName.match(/\d+$/)?.[0];
+ if (index) {
+ if (!acc[index]) acc[index] = { rating: 5 };
+
+ if (item.FieldName.includes('Image')) acc[index].customerImage = item.FieldValue;
+ if (item.FieldName.includes('Name')) acc[index].customerName = item.FieldValue;
+ if (item.FieldName.includes('Review')) acc[index].customerReview = item.FieldValue;
+ }
+ }
+ if (item.FieldName.startsWith('designation')) {
+ const index = item.FieldName.match(/\d+$/)?.[0];
+ if (index) acc[index].designation = item.FieldValue;
+ }
+ if (item.FieldName.startsWith('rating')) {
+ const index = item.FieldName.match(/\d+$/)?.[0];
+ if (index) acc[index].rating = Number(item.FieldValue);
+ }
+ return acc;
+ }, {});
+
+ // Convert the grouped testimonials object to array
+ const testimonialsArray = Object.values(testimonials).filter(t => t.customerName || t.customerReview);
+
+ setFormData({
+ header,
+ subheader,
+ testimonials: testimonialsArray.length > 0 ? testimonialsArray : [{
+ customerName: "",
+ designation: "",
+ customerReview: "",
+ customerImage: "",
+ rating: 5
+ }]
+ });
+ }
+ };
+
+ const closeModel = () => {
+ setModel({
+ viewData: false,
+ viewForm: false
+ });
+ };
+
+ const onFinish = (values) => {
+ // First, create the complete data structure for preview
+ const updatedFormData = {
+ header: values.header,
+ subheader: values.subheader,
+ testimonials: values.testimonials
+ };
+
+ // Create individual field entries for API
+ const detailsArray = [];
+
+ // Add header and subheader
+ detailsArray.push(
+ {
+ FieldAddData: "",
+ FieldName: 'Header1',
+ FieldValue: values.header
+ },
+ {
+ FieldAddData: "",
+ FieldName: 'SubHeader1',
+ FieldValue: values.subheader
+ }
+ );
+
+ // Add testimonial entries
+ const testimonialsArray = values.testimonials?.flatMap((item, index) => {
+ const {
+ customerName,
+ customerReview,
+ designation,
+ rating
+ } = item;
+
+ return [
+ {
+ FieldName: `customerImage${index}`,
+ FieldValue: formData?.testimonials?.[index]?.customerImage,
+ FieldAddData: ""
+ },
+ {
+ FieldAddData: "",
+ FieldName: `customerName${index}`,
+ FieldValue: customerName
+ },
+ {
+ FieldAddData: "",
+ FieldName: `customerReview${index}`,
+ FieldValue: customerReview
+ },
+ {
+ FieldAddData: "",
+ FieldName: `designation${index}`,
+ FieldValue: designation
+ },
+ {
+ FieldAddData: "",
+ FieldName: `rating${index}`,
+ FieldValue: rating
+ }
+ ];
+ });
+ // Combine all field entries
+ const allFieldEntries = [...detailsArray, ...testimonialsArray];
+
+ // Dispatch the combined data
+ dispatch(changeTestimonialDetails(allFieldEntries));
+ setModel({
+ viewData: false,
+ viewForm: false
+ });
+ };
+
+ const onComplete = useCallback(() => {
+ setMessage({
+ type: null,
+ data: null
+ });
+ }, []);
+ const handleInputChange = (field, value) => {
+ const fields = field.split('.');
+ setFormData(prev => {
+ if (fields.length === 1) {
+ return {
+ ...prev,
+ [field]: value
+ };
+ } else {
+ const [arrayName, index, property] = fields;
+ const newArray = [...prev[arrayName]];
+ newArray[parseInt(index)] = {
+ ...newArray[parseInt(index)],
+ [property]: value
+ };
+ return {
+ ...prev,
+ [arrayName]: newArray
+ };
+ }
+ });
+ };
+ return (
+ <>
+
+
+
+
}
+ width={800}
+ title="Edit Testimonial Section"
+ >
+
Section Subheader }
+ >
+