Productdetails.tsx

import {
  Accordion,
  AccordionButton,
  AccordionIcon,
  AccordionItem,
  AccordionPanel,
  Avatar,
  Box,
  Button,
  Center,
  Divider,
  Flex,
  Grid,
  GridItem,
  Heading,
  HStack,
  Icon,
  Image,
  Input,
  Link,
  PinInput,
  PinInputField,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Skeleton,
  Spacer,
  Spinner,
  Stack,
  Text,
  useDisclosure,
  useToast,
  VStack,
  Select,
} from "@chakra-ui/react";
import { IoIosAdd, IoMdCheckmark } from "react-icons/io";
import { lazy, Suspense, useEffect, useRef, useState } from "react";
import { nanoid } from "nanoid";
import { FaBookmark, FaRegBookmark } from "react-icons/fa";
import Images_Icons from "../../constants/icons-images";
import { useDispatch, useSelector } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
import { AuthReducerProps, UserReducerProps } from "../../interfaces";
import { RootState } from "../../redux/store";
import {
  useAddReviewMutation,
  useCreateCollectionMutation,
  useGetAllUserSyncedRewardsQuery,
  useGetLikeStatusQuery,
  useGetOfferReviewsQuery,
  useGetSingleOfferQuery,
  useSaveOfferMutation,
  useSyncBrandMutation,
  useUnSaveOfferMutation,
  useVerifySyncOtpMutation,
} from "../../redux/rtkQuery/api";
import { getUserCollection } from "../../redux/UserSlice";
import { Dispatch } from "redux";
import { useAccount } from "wagmi";
import { useGetWallet } from "../../hooks/tokenBalance";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import MeProtocolButton from "../../components/MeProtocolButton";
import moment from "moment";
import MeProtocolToast from "../../hooks/MeProtocolToast";
import { addToCart } from "../../redux/CartSlice";
import DashboardNavBar from "../../components/DashboardNavBar";
import ModalComponent from "../../components/ModalComponent";
import Lottie from "lottie-react";
import checkMark from "../../assets/json/checkMark.json";
import axios from "axios";
import { BASE_URL } from "../../config";
import spinning_loader from "../../assets/json/spinning_loader.json";
import { useContractWrite, useWaitForTransaction } from "wagmi";
import contractCustomerRouterAbi from '../../utils/customer-router.json'

import contractAbi from "../../utils/abi.json";
import { ethers } from "ethers";

// import ReactStars from "react-rating-stars-component";
const StarRatingComponent = require("react-star-rating-component");

// const NavBar = lazy(() => import("../../components/NavBar"));
const Footer = lazy(() => import("../../components/Footer"));

const ProductDetails = (): JSX.Element => {
  const toast = useToast();
  const { isConnected, address } = useAccount();

  let navigate = useNavigate();
  const { state }: any = useLocation();
  const dispatch = useDispatch<Dispatch>();
  const popoverRef = useRef<any>();

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

  const { isOpen, onToggle, onClose } = useDisclosure();
  const {
    isOpen: redeemIsOpen,
    onOpen: redeemOnOpen,
    onClose: redeemOnClose,
  } = useDisclosure();
  const {
    isOpen: ratingIsOpen,
    onOpen: ratingOnOpen,
    onClose: ratingOnClose,
  } = useDisclosure();

  const {
    isOpen: isOpenModal,
    onOpen: onOpenModal,
    onClose: onCloseModal,
  } = useDisclosure();

  const {
    isOpen: isOpen3,
    onOpen: onOpen3,
    onClose: onClose3,
  } = useDisclosure();

  const { token, session_id }: AuthReducerProps = useSelector(
    (state: RootState) => state.authReducer
  );
  const { user_data, user_collection }: UserReducerProps = useSelector(
    (state: RootState) => state.userReducer
  );
  const { cartItems } = useSelector((state: RootState) => state.cartReducer);

  const [saveOffer] = useSaveOfferMutation();
  const [unSaveOffer] = useUnSaveOfferMutation();
  const { root, imageStyle, addToFavPopOver, desc, search, head } = useStyles();
  const [isLoaded, setIsLoaded] = useState<boolean>(true);
  const [likeLoading, setLikeLoading] = useState<boolean>(false);
  const [collectionName, setCollectionName] = useState<string>("");
  const [tokenBalance, setTokenBalance] = useState<any>({});
  const [ticker, setTicker] = useState<string>("");
  const [syncEmail, setSyncEmail] = useState<string>("");
  const [emailCode, setEmailCode] = useState<string>("");
  const [syncModalPage, setSyncModalPage] = useState<number>(0);
  const [brandSyncLoading, setBrandSyncLoading] = useState<boolean>(false);
  const [emailCodeLoading, setEmailCodeLoading] = useState<boolean>(false);
  const [codeErrMsg, setCodeErrMsg] = useState<string>("");
  const [verifyEmailOtpSent, setVerifyEmailOtpSent] = useState<boolean>(false);
  const [addReviewLoading, setAddReviewLoading] = useState<boolean>(false);
  const [reviewText, setReviewText] = useState<string>("");
  const [inCart, setInCart] = useState<boolean>(false);
  const [count, setCount] = useState<number>(1);

  const [verificationPhone, setVerificationPhone] = useState<string>("");
  const [verificationOption, setVerificationOption] = useState<string>("");

  const [rating, setRating] = useState<number | null>(null);

  const [syncBrand] = useSyncBrandMutation();
  const [verifySyncOtp] = useVerifySyncOtpMutation();
  const [addReview] = useAddReviewMutation();

  const [rewardsFetching, setRewardsFetching] = useState<boolean>(false);
  const [redeemLoading, setRedeemLoading] = useState<boolean>(false);
  const [userSyncedRewards, setUserSyncedRewards] = useState<Array<any>>([]);

  const [createCollectionLoading, setCreateCollectionLoading] =
    useState<boolean>(false);
  const [createCollectionError, setCreateCollectionError] =
    useState<string>("");
  const [createCollection] = useCreateCollectionMutation();

  const { data: isLiked, refetch } = useGetLikeStatusQuery(state.id, {
    refetchOnFocus: true,
    skip: !token,
  });
  const {
    isOpen: syncSuccessIsOpen,
    onOpen: syncSuccessOnOpen,
    onClose: syncSuccessOnClose,
  } = useDisclosure();

  // const { data: syncedRewards, refetch: refetchSyncRewards } =
  //   useGetAllUserSyncedRewardsQuery(undefined, { refetchOnFocus: true });

  const { data: allReviews, refetch: refetchReviews } = useGetOfferReviewsQuery(
    { offer_id: state?.id },
    { refetchOnFocus: true, skip: !token }
  );

  const { data: viewProduct } = useGetSingleOfferQuery(
    {
      slug: state.slug,
      user_id: user_data?.id,
      session_id,
    },
    { refetchOnFocus: true, skip: !token || !user_data?.id }
  );

  const { getTokenBalance, getTokenName } = useGetWallet();
  // --------------- Contract Address from the backend
  const contractAddress = state?.reward?.tokenReward?.contractAddress;
  useEffect(() => {
    (async () => {
      const balance = await getTokenBalance(contractAddress);
      setTicker(await getTokenName(contractAddress));
      // console.log(tokenName, "POPPS");
      setTokenBalance(balance);
    })();
  }, [isConnected]);

  const availablePoints = userSyncedRewards?.filter(
    (e: any) => e?.reward?.rewardId === state?.reward?.rewardId
  );

  useEffect(() => {
    // console.log(state, "UIYIYTRSRGGHJJJHWBHHJ");

    const checkInCart = cartItems.find((item: any) => item.id === state?.id);
    if (!checkInCart) return;
    setInCart(true);

    // return () => {};
  }, [cartItems]);

  // -----------------------------------------ADD TO COLLECTION FN------------------------------------------
  async function AddToCollection(collection_id: string) {
    setLikeLoading(true);
    await saveOffer({ collection_id, offer_id: state.id })
      .then(async ({ data }: any) => {
        if (data.status === 200) {
          await dispatch(getUserCollection({ token }));
          refetch();
          toast({
            position: "bottom-right",
            status: "info",
            duration: 2000,
            isClosable: true,
            render: () => (
              <Center color="white" p={3} bg="black" borderRadius={"10px"}>
                Added to favorite.
              </Center>
            ),
          });
        }
      })
      .catch(() => {
        // setCreateCollectionError(e);
      })
      .finally(() => {
        setLikeLoading(false);
      });
  }

  // -----------------------------------------ADD COLLECTION FN------------------------------------------
  async function AddCollection(): Promise<void> {
    if (!collectionName) return;
    setCreateCollectionLoading(true);
    await createCollection({ name: collectionName })
      .then(async ({ data }: any) => {
        if (data.status === 200) {
          await dispatch(getUserCollection({ token }));
          onCloseModal();
          if (!isOpen) {
            // alert("reach here")
            onToggle();
          }
        }
      })
      .catch((e: any | unknown) => {
        setCreateCollectionError(e);
      })
      .finally(() => {
        setCreateCollectionLoading(false);
        setCollectionName("");
      });
  }

  async function RemoveFromCollection(): Promise<void> {
    setLikeLoading(true);
    await unSaveOffer({ offer_id: isLiked?.data?.like?.id })
      .then(async ({ data }: any) => {
        console.log(data, "delete");
        if (data.status === 200) {
          await dispatch(getUserCollection({ token }));
          refetch();
          toast({
            position: "bottom-right",
            status: "info",
            duration: 2000,
            isClosable: true,
            render: () => (
              <Center color="white" p={3} bg="black" borderRadius={"10px"}>
                Removed from favorite.
              </Center>
            ),
          });
        }
      })
      .catch((e: any | unknown) => {
        console.log(e, "delete error");
        // setCreateCollectionError(e);
      })
      .finally(() => {
        setLikeLoading(false);
      });
  }

  async function AddReviewToOffer() {
    if (!reviewText) {
      MeProtocolToast(toast, "Please enter review", 2000);
      return;
    }
    if (!rating) {
      MeProtocolToast(toast, "Please select a rating", 2000);
      return;
    }
    setAddReviewLoading(true);
    await addReview({
      review: reviewText,
      offer_id: Number(state?.id),
      rating,
    })
      .then((res: any) => {
        // console.log(res, "AddReviewToOfferResponse");
        if (res?.data?.status === 200) {
          refetchReviews();
          MeProtocolToast(toast, "Review submitted", 5000);
          ratingOnClose();
          setRating(null);
          setReviewText("");
        }
      })
      .catch((e: any | unknown) => {
        console.log(e, "AddReviewToOfferErr");
      })
      .finally(() => {
        setAddReviewLoading(false);
      });
  }

  const product = {
    id: "1",
    img: [
      "https://media.gq.com/photos/5d93aa2c636d4800084025ae/16:9/pass/sneakers.jpg",
      "https://cf.shopee.ph/file/e1aaea5870a3db5f1f6f350e67706719",
      "https://i.pinimg.com/736x/bc/80/c9/bc80c9fd2bcf73fa62ce570f8c8d773f--yellow-chuck-taylors-cool-converse.jpg",
      "https://i.pinimg.com/736x/d2/c5/34/d2c53403d4ba55c6dc17c57a577cc433.jpg",
    ],
    logo: "https://thumbs.dreamstime.com/b/vector-logos-collection-most-famous-fashion-brands-world-format-available-illustrator-ai-converse-chuck-taylor-all-star-131102324.jpg",
    title: "Adidas Sportswear Limited yellow edition",
    desc: ` Designed for easy moving and comfortable adventure, the District
                Vision + Suicoke Interlocking Sandals come equipped with
                Suicoke's signature antibacterial and supportive EVA cushioned
                footbed, complemented by a supple strap system made from
                high-density cylindrical foam encased in durable tubular nylon
                webbing that molds to the shape of the wearer’s foot.`,
    itemID: "DVS001_BLK_M5W7",
    price: 99.99,
    trending: false,
    isNew: false,
  };

  const instaPhoto = [
    {
      img: "https://ichef.bbci.co.uk/news/976/cpsprodpb/15AFA/production/_124762888_6fdadfdd-c4a5-4fec-bb71-1d214f90de8b.jpg",
      handle: "@john123",
    },
    {
      img: "https://media.istockphoto.com/photos/portrait-of-handsome-latino-african-man-picture-id1007763808?k=20&m=1007763808&s=612x612&w=0&h=q4qlV-99EK1VHePL1-Xon4gpdpK7kz3631XK4Hgr1ls=",
      handle: "@john123",
    },
    {
      img: "https://media.istockphoto.com/photos/success-happens-the-moment-you-believe-it-will-picture-id1262964438?k=20&m=1262964438&s=612x612&w=0&h=I6lkizpD2iJeXYrImSR9Jl4_oOfKzoKq5hB0u6kC18o=",
      handle: "@john123",
    },
    {
      img: "https://media.istockphoto.com/photos/some-moments-require-some-seriousness-picture-id1174056245?k=20&m=1174056245&s=612x612&w=0&h=P2JZJQVCJ_6FwD0F_vgEU4vF2lZaSGElx41e09UqciA=",
      handle: "@john123",
    },
    {
      img: "https://i.pinimg.com/736x/d2/c5/34/d2c53403d4ba55c6dc17c57a577cc433.jpg",
      handle: "@john123",
    },
    {
      img: "https://i.pinimg.com/736x/d2/c5/34/d2c53403d4ba55c6dc17c57a577cc433.jpg",
      handle: "@john123",
    },
    {
      img: "https://i.pinimg.com/736x/d2/c5/34/d2c53403d4ba55c6dc17c57a577cc433.jpg",
      handle: "@john123",
    },
    {
      img: "https://i.pinimg.com/736x/d2/c5/34/d2c53403d4ba55c6dc17c57a577cc433.jpg",
      handle: "@john123",
    },
    {
      img: "https://i.pinimg.com/736x/d2/c5/34/d2c53403d4ba55c6dc17c57a577cc433.jpg",
      handle: "@john123",
    },
    {
      img: "https://ichef.bbci.co.uk/news/976/cpsprodpb/15AFA/production/_124762888_6fdadfdd-c4a5-4fec-bb71-1d214f90de8b.jpg",
      handle: "@john123",
    },
    {
      img: "https://media.istockphoto.com/photos/portrait-of-handsome-latino-african-man-picture-id1007763808?k=20&m=1007763808&s=612x612&w=0&h=q4qlV-99EK1VHePL1-Xon4gpdpK7kz3631XK4Hgr1ls=",
      handle: "@john123",
    },
    {
      img: "https://media.istockphoto.com/photos/success-happens-the-moment-you-believe-it-will-picture-id1262964438?k=20&m=1262964438&s=612x612&w=0&h=I6lkizpD2iJeXYrImSR9Jl4_oOfKzoKq5hB0u6kC18o=",
      handle: "@john123",
    },
  ];

  async function SendEmailVerificationForSync() {
    if (!syncEmail.includes("@")) return;
    setEmailCodeLoading(true);
    await verifySyncOtp({
      rewardId: state?.reward?.id,
      emailCode,
    })
      .then((res: any) => {
        if (res.error) {
          setCodeErrMsg(res?.error?.data?.error);
          return;
        }
        if (res?.data?.synced) {
          // console.log(res?.data?.synced, "PPPOOOOOPPPP");

          MeProtocolToast(toast, "Brand connected successfully", 3000);
          setTimeout(() => {
            // refetchSyncRewards();
            GET_ALL_SYNCED_REWARDS();
            setEmailCode("");
            setSyncEmail("");
            setVerifyEmailOtpSent(false);
            setSyncModalPage(2);
          }, 300);
        }
      })
      .catch((e: any | unknown) => {
        console.log(e, "SendEmailVerificationForSyncERR");
      })
      .finally(() => {
        setEmailCodeLoading(false);
      });
  }
  async function SendEmailCodeForSync(): Promise<void> {
    if (!syncEmail.includes("@")) return;
    setBrandSyncLoading(true);
    await syncBrand({
      rewardId: state?.reward?.id,
      email: syncEmail,
    })
      .then((res: any) => {
        if (res?.data) {
          setVerifyEmailOtpSent(true);
          MeProtocolToast(toast, "OTP sent successfully", 3000);
        }
      })
      .catch((e: any | unknown) => {
        console.log(e, "ERR");
      })
      .finally(() => {
        setBrandSyncLoading(false);
      });
  }

  // console.log(state);

  const SyncModalCases = () => {
    switch (syncModalPage) {
      case 0:
        return (
          <Stack>
            <Flex flexDir={"row"} justify="space-between">
              <Heading {...head}>Sync {state?.reward?.name} Rewards</Heading>
              <Center as="button" onClick={onClose3}>
                <Image w="30px" h="30px" src={Images_Icons.cancel_icon} />
              </Center>
            </Flex>
            <Flex
              flexDir={"row"}
              align={"center"}
              justify={"space-between"}
              py={"2%"}
            >
              <Center w="100px" h="100px" overflow={"hidden"}>
                <Image
                  borderRadius={"10px"}
                  objectFit="contain"
                  src={state?.reward?.rewardImage}
                />
                <Box
                  w="100px"
                  h="100px"
                  borderRadius={"100px"}
                  pos="absolute"
                  bg="#9999992D"
                />
              </Center>

              {/* <Avatar size={"xl"} /> */}
              <Text {...desc} noOfLines={4} w="100%" pl="3%">
                {state?.brand?.description}
              </Text>
            </Flex>
            <Heading {...head}>What you’ll get</Heading>
            <Flex
              flexDir={"column"}
              bg={"#f6f6f6"}
              p={"5%"}
              borderRadius={"15px"}
            >
              {[
                `Authorize Me app to access your reward balance with ${state?.brand?.brandName}`,
                `Me app will Read reward balance from ${state?.brand?.brandName}`,
                `Me app will monitor changes in reward balance `,
              ].map((e: any) => (
                <Flex key={nanoid()}>
                  <Center
                    bg={"#b555f8"}
                    w={"20px"}
                    h={"20px"}
                    borderRadius={"20px"}
                  >
                    <Icon as={IoMdCheckmark} color={"light"} />
                  </Center>
                  <Text {...desc} noOfLines={2} pl={"2%"} w={"100%"}>
                    {e}
                  </Text>
                </Flex>
              ))}
            </Flex>
            <MeProtocolButton
              isLoading={brandSyncLoading}
              onCLick={() => setSyncModalPage(1)}
              // onCLick={() => SyncMyReward(brandToSync)}
              name={`Connect with ${state?.reward?.rewardName || "reward"}`}
            />
          </Stack>
        );
      case 1:
        return (
          <Stack>
            <Flex flexDir={"row"} justify="space-between">
              <Heading {...head}>Verify identity </Heading>
              <Center
                as="button"
                onClick={() => {
                  setSyncModalPage(0);
                  onClose3();
                  setVerificationOption("");
                  setVerifyEmailOtpSent(false);
                  setCodeErrMsg("");
                }}
              >
                <Image src={Images_Icons.cancel_icon} w="30px" h="30px" />
              </Center>
            </Flex>
            <Text {...desc} w="100%" pt="1%">
              Please select your preferred means of identification from the
              available options below
            </Text>
            <Flex {...search}>
              <Select
                color={"dark"}
                onChange={({ target }: any) => {
                  setVerificationOption(target.value);
                }}
                value={verificationOption}
                variant="unstyled"
                placeholder="Select verification option"
                size={"md"}
                _placeholder={{ color: "#999999" }}
              >
                {["Email", "Phone number"].map((e) => (
                  <option key={nanoid()} value={e}>
                    {e}
                  </option>
                ))}
              </Select>
            </Flex>
            {verificationOption && (
              <Stack>
                {verificationOption === "Email" ? (
                  <Input
                    {...search}
                    value={syncEmail}
                    onChange={(e: any) => {
                      setSyncEmail(e.target.value);
                    }}
                    placeholder="Enter email address"
                  />
                ) : (
                  <Input
                    {...search}
                    value={verificationPhone}
                    onChange={(e: any) => {
                      setVerificationPhone(e.target.value);
                    }}
                    placeholder="Enter phone number"
                  />
                )}
              </Stack>
            )}
            {verifyEmailOtpSent && (
              <Box my={"3%"}>
                <Text fontSize={"10px"}>
                  Please provide the OTP sent to your inbox
                </Text>
                <HStack w={"100%"} h={"60px"}>
                  <PinInput
                    onComplete={(e) => {
                      setEmailCode(e);
                      setCodeErrMsg("");
                    }}
                    otp
                    placeholder={"*"}
                  >
                    {[1, 2, 3, 4, 5, 6].map(() => (
                      <PinInputField
                        key={nanoid()}
                        bg={"grey"}
                        borderRadius={10}
                        borderWidth={0}
                        w={"15%"}
                        h={"100%"}
                      />
                    ))}
                  </PinInput>
                </HStack>
              </Box>
            )}
            {codeErrMsg && (
              <Text {...desc} color={"red"}>
                {codeErrMsg}
              </Text>
            )}
            <MeProtocolButton
              isLoading={emailCodeLoading || brandSyncLoading}
              onCLick={() => {
                if (verifyEmailOtpSent) {
                  SendEmailVerificationForSync();
                  return;
                }
                SendEmailCodeForSync();
              }}
              isDisabled={!syncEmail.includes("@")}
              name={"Continue"}
            />
          </Stack>
        );
      case 2:
        return (
          <Stack w="100%">
            <VStack>
              <Lottie
                style={{ width: "150px", height: "150px" }}
                animationData={checkMark}
                loop={false}
                autoplay
              />
              <Heading fontSize={"18px"} pb="10px">
                Brand connected successfully
              </Heading>
              <MeProtocolButton
                name="Ok"
                onCLick={() => {
                  // refetchSyncRewards();
                  setSyncModalPage(0);
                  onClose3();
                  setVerificationOption("");
                  setVerifyEmailOtpSent(false);
                  setCodeErrMsg("");
                  setTimeout(() => {
                    window.scrollTo({ top: 0, behavior: "smooth" });
                  }, 100);
                }}
              />
            </VStack>
          </Stack>
        );
    }
  };

  // --------------------------------------------------------------NEW FETCH IMPLEMENTATION------------------------------------
  async function GET_ALL_SYNCED_REWARDS() {
    setRewardsFetching(true);
    try {
      const { data }: any = await axios.get(`${BASE_URL}/pointregistry`, {
        headers: { "x-access-token": token },
      });
      // console.log(data?.userPoints);
      setUserSyncedRewards(data?.userPoints);
    } catch (e: any | unknown) {
      console.log(e, "GET_ALL_SYNCED_REWARDS_ERR");
    } finally {
      setRewardsFetching(false);
    }
  }

  async function SIMULATE_REDEEM() {
    setRedeemLoading(true);
    try {
      setRedeemLoading(true);

      const { status }: any = await axios.post(
        `${BASE_URL}/redeem`,
        {
          offerId: state?.reward?.id,
          amount: state?.point_discount,
          quantity: 1,
        },
        { headers: { "x-access-token": token } }
      );

      setTimeout(() => {
        if (status === 200) {
          redeemOnClose();
          syncSuccessOnOpen();
          setRedeemLoading(false);

          // window.scrollTo({ top: 0, behavior: "smooth" });
          // // window.open(
          // //   "https://www.nike.com/w/start-strong-sale-1p11f",
          // //   "_blank"
          // // );
          // GET_ALL_SYNCED_REWARDS();
          // setRedeemLoading(false);
        }
      }, 2000);
    } catch (e: any) {
      console.log(e, "SIMULATE_REDEEM_ERR");
      setRedeemLoading(false);
    } finally {
      // setRedeemLoading(false);
    }
  }

  async function SIMULATE_REDEEM_FOR_TOKEN() {
    setRedeemLoading(true);
    try {
      setTimeout(async () => {
        setRedeemLoading(true);
        // --------------------DO THE TOKEN FN HERE-------------
        approveWrite?.()

        if ("SUCCESSFUL") {
          redeemOnClose();
          window.scrollTo({ top: 0, behavior: "smooth" });
          window.open(
            "https://www.nike.com/w/start-strong-sale-1p11f",
            "_blank"
          );
          GET_ALL_SYNCED_REWARDS();
          setRedeemLoading(false);
        }
      }, 2000);
    } catch (e: any) {
      console.log(e, "SIMULATE_REDEEM_ERR");
    } finally {
      setRedeemLoading(false);
    }
  }

  // --------------------------------------------------------TOKEN TRF------------------------------------------------------------
  // const [toAddress, setToAddress] = useState<any>("");
  const [amount, setAmount] = useState<any>("");

  const {
    data: rewardData,
    isLoading: rewardLoading,
    write: rewardWrite,
  } = useContractWrite({
    mode: "recklesslyUnprepared",
    abi: contractCustomerRouterAbi,
    address: "0xa21EaCc1ecF633be08C89020f984fCFED98583cD",
    functionName: "useReward",
    args: [contractAddress, state.point_discount ? ethers.utils.parseEther(state.point_discount) : 0, address],
  });

  const { isLoading: rewardIsLoading } = useWaitForTransaction({
    hash: rewardData?.hash,
    onSuccess() {
      MeProtocolToast(toast, "Token sent successful!", 5000, "top-right");
    },
    onError() {
      MeProtocolToast(toast, "Failed!", 5000, "top-right");
    },
  });

  const {
    data: approveData,
    isLoading: approveLoading,
    write: approveWrite,
  } = useContractWrite({
    mode: "recklesslyUnprepared",
    abi: contractAbi,
    address: contractAddress,
    functionName: "approve",
    args: ["0xa21EaCc1ecF633be08C89020f984fCFED98583cD", state.point_discount ? ethers.utils.parseEther(state.point_discount) : 0],
  });

  const { isLoading: approveIsLoading } = useWaitForTransaction({
    hash: approveData?.hash,
    onSuccess(data) {
      rewardWrite?.()
      // MeProtocolToast(toast, "Appprove successful!", 5000, "top-right");
      // setAmount("");
    },
    onError() {
      MeProtocolToast(toast, "Failed to Approve!", 5000, "top-right");
    },
  });

  return (
    <Flex flexDir={"column"}>
      {/* ----------------------------------------------------------------------NAV BAR------------------------------------------------------------ */}
      {/* @ts-ignore */}
      <Suspense fallback={<Spinner size="sm" />}>
        <DashboardNavBar />

        {/* <NavBar borderBottomWidth={"0px"} zIndex={-1000} customPadding={"5%"} /> */}
      </Suspense>
      <Stack {...root} display="flex">
        <Flex flexDir={"row"}>
          {/* ----------------------------------------------------------------------LEFT SECTION------------------------------------------------------------ */}
          <Flex
            w={"50vw"}
            bg={"grey"}
            flexDir={"column"}
            // h="100vh"
            // overflowY={"scroll"}
          >
            {/* @ts-ignore */}
            {state.images.map((e: any) => (
              <Skeleton key={nanoid()} isLoaded={isLoaded}>
                <Image src={e} objectFit="cover" {...imageStyle} />
              </Skeleton>
            ))}
          </Flex>

          {/* ----------------------------------------------------------------------RIGHT SECTION------------------------------------------------------------ */}
          <Flex
            w={"50vw"}
            // bg={"brown"}
            flexDir={"column"}
            px={"80px"}
            py={"30px"}
            // overflowX="hidden"
          >
            {/*<StickyBox*/}
            {/*    // bottom={false || true}*/}
            {/*    bottom={false}*/}
            {/*    offsetTop={1330}*/}
            {/*    style={{alignSelf: "center", width: "95%"}}*/}
            {/*    // className={className}*/}
            {/*>*/}
            {/*    <Center*/}
            {/*        // as={Button}*/}
            {/*        h={"80px"}*/}
            {/*        bg={"dark"}*/}
            {/*        w={"100%"}*/}
            {/*        color={"light"}*/}
            {/*        alignSelf={"center"}*/}
            {/*        top={"80vh"}*/}
            {/*        _hover={{bg: "dark"}}*/}
            {/*        borderRadius={"0px"}*/}
            {/*        zIndex={100}*/}
            {/*    >*/}
            {/*        Add to bag*/}
            {/*    </Center>*/}
            {/*</StickyBox>*/}
            <Flex w={"600px"} flexDir={"column"}>
              <Image
                src={state?.brand?.logo}
                w={"100px"}
                h={"100px"}
                // bg={"lightGrey"}
                borderColor={"lightGrey"}
                // borderRadius={"200px"}
                borderWidth={"0.5px"}
                objectFit="contain"
              />

              <Text color={"#D0D0D0"} fontSize="20px" mb={"20px"}>
                {product.itemID}
              </Text>

              <Text lineHeight={"48px"} w={"80%"} fontSize="40px">
                {state?.name}
              </Text>

              <Popover
                isLazy
                placement="top-start"
                initialFocusRef={popoverRef}
                isOpen={isOpen}
                onClose={onClose}
                // closeOnBlur={false}
              >
                {({ onClose }) => (
                  <>
                    <PopoverTrigger>
                      {likeLoading ? (
                        <Spinner size={"md"} />
                      ) : (
                        <Flex
                          align={"center"}
                          my={"30px"}
                          w="20%"
                          as={"button"}
                          // bg={"red"}
                          // @ts-ignore
                          onClick={
                            isLiked?.data
                              ? () => {
                                  RemoveFromCollection();
                                }
                              : () => {
                                  if (!token) {
                                    navigate("/login");
                                    return;
                                  }
                                  onToggle();
                                }
                          }
                          // onClick={
                          //     isLiked?.data
                          //         ? () => {
                          //             // alert("kkkkk");
                          //             // onClose();
                          //         }
                          //         : () => {
                          //             // alert("jjjjj")
                          //         }}
                        >
                          <Text pr={"10px"} color={"#999999"} fontSize={"16px"}>
                            {isLiked?.data ? "Saved" : "Add to fav"}
                          </Text>
                          <Icon
                            as={isLiked?.data ? FaBookmark : FaRegBookmark}
                            h={"20px"}
                            w={"16px"}
                            color={isLiked?.data ? "black" : "#999999"}
                            onClick={
                              () => (isLiked ? {} : {})
                              // ? RemoveFromCollection(state.id)
                              // : AddToCollection(state.id)
                            }
                          />
                        </Flex>
                      )}
                    </PopoverTrigger>
                    <PopoverContent {...addToFavPopOver}>
                      <Stack py="3%">
                        <Flex h="20%" px="5%" py="3%">
                          <Text>Save to...</Text>
                        </Flex>
                        <Stack overflowY={"scroll"} maxH={"200px"}>
                          {user_collection?.map(
                            ({
                              name,
                              cover_image,
                              id,
                            }: {
                              name: string;
                              cover_image: string;
                              id: string;
                            }) => (
                              <Box key={nanoid()}>
                                <Divider />
                                <HStack
                                  key={nanoid()}
                                  px="5%"
                                  py="3%"
                                  as="button"
                                  ref={popoverRef}
                                  onClick={() => {
                                    AddToCollection(id);
                                    onClose();
                                  }}
                                >
                                  <Image
                                    w="20%"
                                    h="20%"
                                    src={cover_image || Images_Icons.appLogo}
                                    bg="grey"
                                    borderRadius="5px"
                                  />
                                  <Text>{name}</Text>
                                </HStack>
                              </Box>
                            )
                          )}
                        </Stack>

                        <Divider />
                        <HStack
                          h="20%"
                          px="5%"
                          py="3%"
                          as="button"
                          onClick={() => {
                            onOpenModal();
                          }}
                          ref={popoverRef}
                        >
                          <Icon w={"2vw"} h={"2vw"} as={IoIosAdd} />
                          <Text>Add new collection</Text>
                        </HStack>
                      </Stack>
                    </PopoverContent>
                  </>
                )}
              </Popover>

              <Flex color={"dark"} fontSize={"22px"}>
                <Text>
                  {state?.point_discount} {state?.reward?.rewardSymbol} ·{" "}
                </Text>
                <Text color={"#999999"}> {state?.discount}% coupon</Text>
              </Flex>
              {token && (
                <>
                  {state?.reward?.rewardType === "REGULARPOINTS" ? (
                    <>
                      {availablePoints.length < 1 ? (
                        <Skeleton isLoaded={!rewardsFetching} w="100%">
                          <Flex>
                            <Text color={"#999999"}>Reward not synced</Text>
                            <Text
                              as="button"
                              decoration={"underline"}
                              ml="5px"
                              onClick={onOpen3}
                            >
                              sync now
                            </Text>
                          </Flex>
                        </Skeleton>
                      ) : (
                        <Skeleton isLoaded={!rewardsFetching}>
                          <Text color={"#999999"}>
                            Available point(s): {availablePoints[0]?.balance}{" "}
                            {availablePoints[0]?.reward?.rewardSymbol}
                          </Text>
                        </Skeleton>
                      )}
                    </>
                  ) : (
                    <>
                      {isConnected ? (
                        <Flex>
                          <Text color={"#999999"}>
                            Available token(s): {tokenBalance?.balance || 0}{" "}
                            {ticker}
                          </Text>
                        </Flex>
                      ) : (
                        <>
                          <ConnectButton.Custom>
                            {({
                              account,
                              chain,
                              openChainModal,
                              openConnectModal,
                              authenticationStatus,
                              mounted,
                            }) => {
                              const ready =
                                mounted && authenticationStatus !== "loading";
                              const connected =
                                ready &&
                                account &&
                                chain &&
                                (!authenticationStatus ||
                                  authenticationStatus === "authenticated");

                              return (
                                <div
                                  {...(!ready && {
                                    "aria-hidden": true,
                                    style: {
                                      opacity: 0,
                                      pointerEvents: "none",
                                      userSelect: "none",
                                    },
                                  })}
                                >
                                  {(() => {
                                    if (!connected) {
                                      return (
                                        <Flex>
                                          <Text mr={"5px"} color="#999999">
                                            Wallet not connected
                                          </Text>
                                          <Text
                                            as={"button"}
                                            textDecoration={"underline"}
                                            onClick={openConnectModal}
                                          >
                                            connect now
                                          </Text>
                                        </Flex>
                                      );
                                    }

                                    if (chain.unsupported) {
                                      return (
                                        <button
                                          onClick={openChainModal}
                                          type="button"
                                        >
                                          Wrong network
                                        </button>
                                      );
                                    }
                                  })()}
                                </div>
                              );
                            }}
                          </ConnectButton.Custom>
                        </>
                      )}
                    </>
                  )}
                </>
              )}

              {/* --------------------------------------------------------- SIZE SECTION ----------------------------------------------- */}
              {state?.category?.filter_options.includes("size") && (
                <Flex mt={"20px"} flexDir={"column"}>
                  <Center
                    as="button"
                    bg="#FFFFFF"
                    border={"1px solid rgba(0, 0, 0, 0.2)"}
                    h="40px"
                    w="77%"
                    color="rgba(0, 0, 0, 0.2)"
                  >
                    One size
                  </Center>

                  {/* --------------------------------- BUTTON SECTION 2 ---------------------- */}
                  <Flex mt={"4px"} w="100%">
                    {/* --------------------------- BOX 1 ----------------------- */}
                    <Center
                      as="button"
                      bg="#FFFFFF"
                      mr={"3px"}
                      border={"1px solid rgba(0, 0, 0, 0.2)"}
                      h="40px"
                      w="15%"
                      color="rgba(0, 0, 0, 0.2)"
                    >
                      US 7
                    </Center>
                    {/* --------------------------- BOX 2 ----------------------- */}
                    <Center
                      as="button"
                      mr={"3px"}
                      bg="linear-gradient(0deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07)), #FFFFFF"
                      border={"1px solid #000000"}
                      h="40px"
                      w="15%"
                      color="#000000"
                    >
                      US 7.5
                    </Center>
                    {/* --------------------------- BOX 3 ----------------------- */}
                    <Center
                      as="button"
                      mr={"3px"}
                      bg="linear-gradient(0deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07)), #FFFFFF"
                      border={"1px solid #000000"}
                      h="40px"
                      w="15%"
                      color="#000000"
                    >
                      US 8
                    </Center>
                    {/* --------------------------- BOX 4 ----------------------- */}
                    <Center
                      as="button"
                      mr={"3px"}
                      bg="linear-gradient(0deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07)), #FFFFFF"
                      border={"1px solid #000000"}
                      h="40px"
                      w="15%"
                      color="#000000"
                    >
                      US 8.5
                    </Center>
                    {/* --------------------------- BOX 5 ----------------------- */}
                    <Center
                      as="button"
                      bg="linear-gradient(0deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07)), #FFFFFF"
                      border={"1px solid #000000"}
                      h="40px"
                      w="15%"
                      color="#000000"
                    >
                      US 8.9
                    </Center>
                  </Flex>

                  {/* --------------------------------- BUTTON SECTION 2 ---------------------- */}
                  <Flex mt={"4px"} w="100%">
                    {/* --------------------------- BOX 1 ----------------------- */}
                    <Center
                      as="button"
                      bg="#FFFFFF"
                      mr={"3px"}
                      border={"1px solid rgba(0, 0, 0, 0.2)"}
                      h="40px"
                      w="15%"
                      color="rgba(0, 0, 0, 0.2)"
                    >
                      US 10
                    </Center>
                    {/* --------------------------- BOX 2 ----------------------- */}
                    <Center
                      as="button"
                      bg="#FFFFFF"
                      mr={"3px"}
                      border={"1px solid rgba(0, 0, 0, 0.2)"}
                      h="40px"
                      w="15%"
                      color="rgba(0, 0, 0, 0.2)"
                    >
                      US 10.5
                    </Center>
                    {/* --------------------------- BOX 3 ----------------------- */}
                    <Center
                      as="button"
                      bg="#FFFFFF"
                      mr={"3px"}
                      border={"1px solid rgba(0, 0, 0, 0.2)"}
                      h="40px"
                      w="15%"
                      color="rgba(0, 0, 0, 0.2)"
                    >
                      US 11
                    </Center>
                    {/* --------------------------- BOX 4 ----------------------- */}
                    <Center
                      as="button"
                      mr={"3px"}
                      bg="linear-gradient(0deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07)), #FFFFFF"
                      border={"1px solid #000000"}
                      h="40px"
                      w="15%"
                      color="#000000"
                    >
                      US 11.5
                    </Center>
                    {/* --------------------------- BOX 5 ----------------------- */}
                    <Center
                      as="button"
                      bg="linear-gradient(0deg, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07)), #FFFFFF"
                      border={"1px solid #000000"}
                      h="40px"
                      w="15%"
                      color="#000000"
                    >
                      US 12
                    </Center>
                  </Flex>

                  <Text color={"dark"} my="24px">
                    Sizes listed are US.
                  </Text>
                </Flex>
              )}

              {/* ------------------------------------------ DESCRIPTION SECTION --------------------------- */}
              <Text color={"dark"} my="30px" w={"75%"} textAlign="justify">
                {state?.description}
              </Text>
              <Divider
                orientation="horizontal"
                // color={"red"}
                mb={"20px"}
                width={"90%"}
                zIndex={-10}
              />
            </Flex>

            {/* ----------------------------------------------------------------REVIEW SECTION---------------------------------------- */}
            <Flex width={"90%"} flexDir={"column"}>
              <Accordion defaultIndex={[3]} allowMultiple>
                <AccordionItem key={nanoid()} borderWidth={0} mb={5}>
                  <h2>
                    <AccordionButton _hover={{}} borderWidth={0} px={0}>
                      <Box flex="1" textAlign="left">
                        <Text fontSize={"20px"}>
                          Reviews({allReviews?.data?.reviews?.length || 0})
                        </Text>
                      </Box>

                      <StarRatingComponent
                        name="rate2"
                        editing={false}
                        starColor="#000000"
                        emptyStarColor="#999999"
                        starCount={5}
                        value={allReviews?.data?.total_rating || 0}
                      />
                      <AccordionIcon zIndex={-10} />
                    </AccordionButton>
                  </h2>
                  <AccordionPanel px="0px">
                    <Flex flexDir={"column"} align={"flex-start"}>
                      {allReviews?.data?.reviews?.map((e: any) => (
                        <Stack key={nanoid()} align={"flex-start"} mb="20px">
                          <Flex align="center">
                            <StarRatingComponent
                              name="rate2"
                              editing={false}
                              starColor="#000000"
                              emptyStarColor="#999999"
                              starCount={5}
                              value={e?.rating}
                            />
                            <Text ml="5px" fontSize={"10px"} color="#999999">
                              {moment(e?.created_at).format("DD/MMM/yy")}
                            </Text>
                          </Flex>
                          <Text fontSize={"12px"}>{e?.review}</Text>
                        </Stack>
                      ))}
                      <Text
                        as="button"
                        onClick={ratingOnOpen}
                        fontSize="14px"
                        decoration={"underline"}
                      >
                        Add review
                      </Text>
                    </Flex>
                  </AccordionPanel>
                </AccordionItem>
              </Accordion>
            </Flex>

            {/* ----------------------------------------------------------------WHERE TO REDEEM------------------------------------------ */}
            {state?.brand?.online_stores || state?.brand?.physical_stores ? (
              <Flex width={"90%"} flexDir={"column"}>
                <Accordion defaultIndex={[3]} allowMultiple px={0}>
                  <AccordionItem key={nanoid()} borderWidth={0} mb={5}>
                    <h2>
                      <AccordionButton _hover={{}} borderWidth={0} px={0}>
                        <Box flex="1" textAlign="left">
                          <Text fontSize={"20px"}>Where to redeem</Text>
                        </Box>
                        <AccordionIcon zIndex={-10} />
                      </AccordionButton>
                    </h2>
                    <AccordionPanel px="0px">
                      {/*--------------------------- Online stores ---------------------------*/}
                      {state?.brand?.online_stores?.length > 0 && (
                        <Box>
                          <Text color={"#AEAEAE"}>Online stores</Text>
                          {state?.brand?.online_stores?.map(
                            (e: any, i: number) => (
                              <Flex
                                key={nanoid()}
                                bg={i % 2 === 0 ? "grey" : "white"}
                                p={"5px"}
                                my={"5px"}
                                h={"40px"}
                                align="center"
                              >
                                <Text>{JSON.parse(e)?.name}</Text>
                                <Spacer />
                                <Flex>
                                  <Link
                                    textDecoration={"underline"}
                                    target="_blank"
                                    href={`${JSON.parse(e)?.url}`}
                                  >
                                    {JSON.parse(e)?.url}
                                  </Link>
                                  <Flex w={"25px"} h={"25px"} ml={"5px"}>
                                    <Image src={Images_Icons.linkIcon} />
                                  </Flex>
                                </Flex>
                              </Flex>
                            )
                          )}
                        </Box>
                      )}

                      {/*--------------------------- Physical stores ---------------------------*/}
                      {state?.brand?.physical_stores?.length > 0 && (
                        <Box>
                          <Text color={"#AEAEAE"} mt={"30px"}>
                            Physical stores
                          </Text>
                          {state?.brand?.physical_stores?.map(
                            (e: any, i: number) => (
                              <Flex
                                key={nanoid()}
                                bg={i % 2 === 0 ? "grey" : "white"}
                                p={"5px"}
                                my={"5px"}
                                h={"40px"}
                                align="center"
                              >
                                <Text>{JSON.parse(e)?.name}</Text>
                                <Spacer />
                                <Flex>
                                  <Link
                                    textDecoration={"underline"}
                                    target="_blank"
                                    href="https://google.com"
                                  >
                                    130, Powell St, San Francisco, CA
                                  </Link>
                                </Flex>
                              </Flex>
                            )
                          )}
                        </Box>
                      )}
                    </AccordionPanel>
                  </AccordionItem>
                </Accordion>
              </Flex>
            ) : (
              <></>
            )}

            {/* ----------------------------------------------------------------HOW IT WORKS---------------------------------------- */}
            <Flex width={"90%"} flexDir={"column"}>
              <Accordion defaultIndex={[3]} allowMultiple>
                <AccordionItem key={nanoid()} borderWidth={0} mb={5}>
                  <h2>
                    <AccordionButton _hover={{}} borderWidth={0} px={0}>
                      <Box flex="1" textAlign="left">
                        <Text fontSize={"20px"}>How it works</Text>
                      </Box>
                      <AccordionIcon zIndex={-10} />
                    </AccordionButton>
                  </h2>
                  <AccordionPanel px="0px">
                    These shoes lock you in, with the strap in front and the
                    inserts above the ankle there will be no sliding, the
                    cushioning at the ball of the foot provides great extra
                    impact protection, the shoe is light and durable, overall
                    best shoes I had used to play...
                  </AccordionPanel>
                </AccordionItem>
              </Accordion>
            </Flex>
            {/* ----------------------------------------------------------------YOUR PHOTOS----------------------------------------- */}
            <Flex width={"90%"} flexDir={"column"}>
              <Accordion defaultIndex={[3]} allowMultiple>
                <AccordionItem key={nanoid()} borderWidth={0} mb={5}>
                  <h2>
                    <AccordionButton _hover={{}} borderWidth={0} px={0}>
                      <Box flex="1" textAlign="left">
                        <Text fontSize={"20px"}>Your photos</Text>
                      </Box>
                      <AccordionIcon zIndex={-10} />
                    </AccordionButton>
                  </h2>

                  <AccordionPanel px="0px">
                    <Text>
                      Show us your bird by uploading a photo of your gear in
                      action. Tag @meapp in your next Instagram pic.
                    </Text>
                    <Grid templateColumns="repeat(4, 1fr)">
                      {instaPhoto.map((e) => (
                        <GridItem
                          key={nanoid()}
                          w="130px"
                          h="130px"
                          bgImage={e.img}
                          objectFit="cover"
                        >
                          <Center
                            w="130px"
                            h="130px"
                            opacity={0}
                            color={"white"}
                            _hover={{
                              bg: "#0000001F",
                              opacity: 1,
                              transition: "all 0.3s ease",
                            }}
                          >
                            {e.handle}
                          </Center>
                        </GridItem>
                      ))}
                    </Grid>
                  </AccordionPanel>
                </AccordionItem>
              </Accordion>
            </Flex>
            <Flex justify={"space-between"}>
              <Center
                as={"button"}
                h={"80px"}
                bg={
                  Number(state?.point_discount) >
                  Number(availablePoints[0]?.balance)
                    ? "#999999"
                    : "dark"
                }
                w={"48%"}
                color={"light"}
                alignSelf={"center"}
                top={"80vh"}
                _hover={{ bg: "dark" }}
                borderRadius={"0px"}
                zIndex={100}
                onClick={() => {
                  // -------------------------------------------------------FN FO POINT BASED------------------------------------------------------------
                  if (state?.reward?.rewardType === "REGULARPOINTS") {
                    if (
                      Number(state?.point_discount) >
                      Number(availablePoints[0]?.balance)
                    ) {
                      return;
                    }
                    redeemOnOpen();
                  }
                  // -------------------------------------------------------FN FO TOKEN BASED------------------------------------------------------------

                  if (state?.reward?.rewardType !== "REGULARPOINTS") {
                    if (!isConnected) {
                      // openConnectModal();
                      return;
                    }
                    if (
                      Number(state?.point_discount) >
                      Number(tokenBalance?.balance)
                    ) {
                      return;
                    }
                    redeemOnOpen();
                  }
                }}
              >
                Redeem now
              </Center>
              <Center
                as={"button"}
                h={"80px"}
                bg={"dark"}
                w={"48%"}
                color={"light"}
                alignSelf={"center"}
                top={"80vh"}
                _hover={{ bg: "dark" }}
                borderRadius={"0px"}
                zIndex={100}
                onClick={() => {
                  if (!inCart) {
                    MeProtocolToast(toast, "Added to cart", 2000);
                  }
                  dispatch(
                    addToCart({
                      ...state,
                      quantity: count,
                    })
                  );
                }}
              >
                {inCart ? "Added to bag" : "Add to bag"}
              </Center>
            </Flex>
          </Flex>
        </Flex>
        {/* ----------------------------------------ADD COLLECTION MODAL-------------------------------------- */}
        <ModalComponent
          isOpen={isOpenModal}
          onClose={onCloseModal}
          closeOnOverlayClick={false}
        >
          <Stack>
            <Text>Create new collection</Text>
            <Input
              variant="outline"
              my={"2vw"}
              h={"40px"}
              _placeholder={{ color: "#cfcfcf" }}
              borderRadius={0}
              placeholder="Collection name"
              value={collectionName}
              onChange={({ target }: { target: { value: string } }) => {
                setCollectionName(target.value);
              }}
            />
            <Spacer />
            <Button
              isLoading={createCollectionLoading}
              // as={Button}
              bg={"dark"}
              color={"white"}
              h={"40px"}
              borderRadius={0}
              _hover={{ bg: "dark" }}
              onClick={AddCollection}
              disabled={!collectionName}
            >
              <Text>Next</Text>
            </Button>
            <Center
              bg={"light"}
              color={"dark"}
              h={"40px"}
              borderWidth={1}
              mt={"2px"}
              onClick={onCloseModal}
              as="button"
            >
              <Text>Cancel</Text>
            </Center>
          </Stack>
        </ModalComponent>
        {/* ----------------------------------------REDEEM NOW  MODAL-------------------------------------- */}
        <ModalComponent
          isOpen={redeemIsOpen}
          onClose={redeemOnClose}
          closeOnOverlayClick={false}
        >
          <Stack>
            <Heading fontSize={"14px"}>Redeem now</Heading>
            <Text pt="5px" pb="20px">
              You are about to be redirected to the official brand's website to
              complete your purchase process.
            </Text>
            <HStack w={"100%"} justifyContent={"center"}>
              <Image
                src={Images_Icons.appLogo}
                w="50px"
                h="50px"
                borderRadius={"70px"}
                objectFit="contain"
                bg="#9999993B"
              />
              {redeemLoading ? (
                <Lottie
                  style={{ width: "50px", height: "50px" }}
                  animationData={spinning_loader}
                  loop
                  autoplay
                />
              ) : (
                <Text>-------------------connect-------------------</Text>
              )}
              {/* <Avatar size={"md"} bg={"grey"} src={state?.brand?.logo} /> */}
              <Image
                src={state?.brand?.logo}
                w="50px"
                h="50px"
                borderRadius={"70px"}
                objectFit="contain"
                bg="#9999993B"
              />
            </HStack>
            <Button
              isLoading={redeemLoading}
              as={"a"}
              bg={"dark"}
              mt={"3%"}
              color={"white"}
              h={"40px"}
              borderRadius={0}
              _hover={{ bg: "dark" }}
              // href={
              //   state?.brand?.online_stores &&
              //   JSON.parse(state?.brand?.online_stores[0])?.url
              // }
              onClick={() => SIMULATE_REDEEM_FOR_TOKEN()}
            >
              <Text>Continue</Text>
            </Button>
            <Center
              bg={"light"}
              color={"dark"}
              h={"40px"}
              borderWidth={1}
              mt={"2px"}
              onClick={redeemOnClose}
              as="button"
            >
              <Text>Cancel</Text>
            </Center>
          </Stack>
        </ModalComponent>

        {/* ----------------------------------------SYNC REWARD PROVIDE EMAIL AND CODE MODAL-------------------------------------- */}
        <ModalComponent
          isOpen={isOpen3}
          onClose={onClose3}
          closeOnOverlayClick={false}
        >
          {SyncModalCases()}
        </ModalComponent>
        {/* ----------------------------------------RATING MODAL-------------------------------------- */}
        <ModalComponent
          isOpen={ratingIsOpen}
          onClose={ratingOnClose}
          closeOnOverlayClick={true}
        >
          <Text>Rate offer</Text>
          <Flex mt="20px">
            <Flex w="80%">
              <Input
                variant={"outline"}
                borderRadius={"0px"}
                h="45px"
                placeholder="Enter review"
                // noOfLines={4}
                onChange={({ target }: { target: { value: string } }) => {
                  setReviewText(target.value);
                }}
                value={reviewText}
              />
            </Flex>
            <Center
              as="button"
              fontSize={"12px"}
              onClick={AddReviewToOffer}
              bg="black"
              px="10px"
              py="5px"
              color="white"
              w="20%"
              h="45px"
            >
              {addReviewLoading ? (
                <Spinner size={"sm"} />
              ) : (
                <Text>Add review</Text>
              )}
            </Center>
          </Flex>
          <Flex align={"center"} mt="10px">
            <Text mr="5px" fontSize={"14px"}>
              Rate:
            </Text>
            {[1, 2, 3, 4, 5].map((e) => (
              <Center
                key={nanoid()}
                as="button"
                w="30px"
                h="18px"
                borderColor={"black"}
                borderWidth="0.5px"
                mr="5px"
                onClick={() => setRating(e)}
                color={rating === e ? "white" : "black"}
                bg={rating === e ? "black" : "white"}
              >
                <Text fontSize={"12px"}>{e}</Text>
              </Center>
            ))}
          </Flex>
        </ModalComponent>

        {/* ----------------------------------------SUCCESS MODAL-------------------------------------- */}
        <ModalComponent
          isOpen={syncSuccessIsOpen}
          onClose={syncSuccessOnClose}
          closeOnOverlayClick={true}
        >
          <Stack w="100%">
            <VStack>
              <Lottie
                style={{ width: "150px", height: "150px" }}
                animationData={checkMark}
                loop={false}
                autoplay
              />
              <Heading fontSize={"18px"} pb="10px">
                Reward redeemed successfully
              </Heading>
              <MeProtocolButton
                name="Ok"
                onCLick={() => {
                  window.scrollTo({ top: 0, behavior: "smooth" });

                  // window.open(
                  //   "https://www.nike.com/w/start-strong-sale-1p11f",
                  //   "_blank"
                  // );
                  GET_ALL_SYNCED_REWARDS();
                  setRedeemLoading(false);
                  syncSuccessOnClose();
                  // GET_ALL_SYNCED_REWARDS();
                  // refetchSyncRewards();
                  // setModalPage(0);
                  // onClose3();
                  // setVerificationOption("");
                  // setVerifyEmailOtpSent(false);
                  // setCodeErrMsg("");
                  // setTimeout(() => {
                  //   window.scrollTo({ top: 0, behavior: "smooth" });
                  // }, 100);
                }}
              />
            </VStack>
          </Stack>
        </ModalComponent>
      </Stack>

      <Suspense fallback={<Spinner size="sm" />}>
        <Footer />
      </Suspense>
    </Flex>
  );
};

export default ProductDetails;

const useStyles = () => {
  return {
    root: {
      w: "100%",
      //   h: "458px",
      mt: "108px",
      // pt: "3%",
    },
    nameStyles: {
      fontSize: ["20px", "20px"],
    },
    button: {
      w: {
        base: "18%",
        md: "6%",
      },
      color: "dark",
      borderWidth: 0.5,
      backgroundColor: "light",
      fontSize: "15px",
    },
    loadMore: {
      w: "152px",
      h: "42px",
      alignSelf: "center",
      py: "10px",
      borderRadius: "100px",
    },
    imageStyle: {
      w: "100%",
      // h: "1008px",
    },
    addToFavPopOver: {
      w: "15vw",
    },
    desc: {
      pb: "5px",
      fontSize: {
        base: "12px",
        md: "15px",
      },
      w: {
        base: "100%",
        md: "80%",
      },
    },
    search: {
      w: "100%",
      h: "40px",
      background: "#F6F6F6",
      borderRadius: "53px",
      justify: "flex-start",
      align: "center",
      pl: "2%",
      borderWidth: "0px",
      _placeholder: {
        color: "#999999",
      },
      _focus: {
        borderColor: "black",
      },
      mt: "1%",
      mb: "2%",
    },
    head: {
      fontSize: {
        base: "12px",
        md: "14px",
      },
    },
  };
};