update pay function

boilerplate-chakra-pro-main/components/navbar/NavbarAdmin.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+/* eslint-disable */
+import AdminNavbarLinks from './NavbarLinksAdmin';
+import { isWindowAvailable } from '@/utils/navigation';
+import {
+  Box,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Flex,
+  Link,
+  useColorModeValue
+} from '@chakra-ui/react';
+import { useState, useEffect } from 'react';
+
+export default function AdminNavbar(props: {
+  logoText: string;
+  brandText: string;
+  userDetails: { [x: string]: any } | null;
+  onOpen: (...args: any[]) => any;
+  [x: string]: any;
+}) {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    isWindowAvailable() && window.addEventListener('scroll', changeNavbar);
+
+    return () => {
+      isWindowAvailable() && window.removeEventListener('scroll', changeNavbar);
+    };
+  });
+
+  const { brandText, userDetails } = props;
+
+  // Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled)
+  let mainText = useColorModeValue('#120F43', 'white');
+  let secondaryText = useColorModeValue('gray.700', 'white');
+  let navbarPosition = 'fixed' as const;
+  let navbarFilter = 'none';
+  let navbarBackdrop = 'blur(20px)';
+  let navbarShadow = 'none';
+  let navbarBg = useColorModeValue(
+    'rgba(244, 247, 254, 0.2)',
+    'rgba(11,20,55,0.5)'
+  );
+  let navbarBorder = 'transparent';
+  let secondaryMargin = '0px';
+  let gap = '0px';
+  const changeNavbar = () => {
+    if (isWindowAvailable() && window.scrollY > 1) {
+      setScrolled(true);
+    } else {
+      setScrolled(false);
+    }
+  };
+
+  return (
+    <Box
+      zIndex="100"
+      position={navbarPosition}
+      boxShadow={navbarShadow}
+      bg={navbarBg}
+      borderColor={navbarBorder}
+      filter={navbarFilter}
+      backdropFilter={navbarBackdrop}
+      backgroundPosition="center"
+      backgroundSize="cover"
+      borderRadius="16px"
+      borderWidth="1.5px"
+      borderStyle="solid"
+      transitionDelay="0s, 0s, 0s, 0s"
+      transitionDuration=" 0.25s, 0.25s, 0.25s, 0s"
+      transition-property="box-shadow, background-color, filter, border"
+      transitionTimingFunction="linear, linear, linear, linear"
+      alignItems={{ xl: 'center' }}
+      display={'flex'}
+      minH="75px"
+      justifyContent={{ xl: 'center' }}
+      lineHeight="25.6px"
+      mx="auto"
+      mt={secondaryMargin}
+      pb="8px"
+      right={{ base: '12px', md: '30px', lg: '30px', xl: '30px' }}
+      ps={{
+        base: '8px',
+        md: '12px'
+      }}
+      pt="8px"
+      top={{ base: '12px', md: '16px', xl: '18px' }}
+      w={{
+        base: 'calc(100vw - 8%)',
+        md: 'calc(100vw - 8%)',
+        lg: 'calc(100vw - 6%)',
+        xl: 'calc(100vw - 350px)',
+        '2xl': 'calc(100vw - 365px)'
+      }}
+    >
+      <Flex
+        w="100%"
+        flexDirection={{
+          base: 'row',
+          md: 'row'
+        }}
+        alignItems={{ xl: 'center' }}
+        mb={gap}
+      >
+        <Box>
+          <Breadcrumb>
+            <BreadcrumbItem
+              color={secondaryText}
+              fontSize={{ base: 'xs', md: 'sm' }}
+              mb={{ base: '0px', md: '5px' }}
+            >
+              <BreadcrumbLink href="#" color={secondaryText}>
+                Pages
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+
+            <BreadcrumbItem
+              color={secondaryText}
+              fontSize={{ base: 'xs', md: 'sm' }}
+            >
+              <BreadcrumbLink href="#" color={secondaryText}>
+                {brandText}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          </Breadcrumb>
+          {/* Here we create navbar brand, based on route name */}
+          <Link
+            color={mainText}
+            href="#"
+            bg="inherit"
+            borderRadius="inherit"
+            fontWeight="bold"
+            fontSize={{ base: 'lg', md: '34px' }}
+            p="0px"
+            _hover={{ color: { mainText } }}
+            _active={{
+              bg: 'inherit',
+              transform: 'none',
+              borderColor: 'transparent'
+            }}
+            _focus={{
+              boxShadow: 'none'
+            }}
+          >
+            {brandText}
+          </Link>
+        </Box>
+        <Box ms="auto" w={{ sm: '154px', md: 'unset' }}>
+          <AdminNavbarLinks />
+        </Box>
+      </Flex>
+    </Box>
+  );
+}

boilerplate-chakra-pro-main/components/navbar/NavbarFixed.js

@@ -0,0 +1,403 @@
+/* eslint-disable */
+'use client';
+
+import logo from '/public/logo-horizon-boilerplate.png';
+import {
+  Image,
+  Button,
+  Flex,
+  Icon,
+  Link,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react'; 
+import React, { useEffect, useState } from 'react';
+import { IoIosStar, IoMdTrophy } from 'react-icons/io';
+import { IoMenuOutline } from 'react-icons/io5';
+import { MdChevronRight, MdPrivacyTip } from 'react-icons/md';
+
+export default function AdminNavbar(props) { 
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener('scroll', changeNavbar);
+
+    return () => {
+      window.removeEventListener('scroll', changeNavbar);
+    };
+  });
+  const { secondary, message  } = props;
+
+  // Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled)
+  let textColor = useColorModeValue('#120F43', 'white');
+  let borderColor = useColorModeValue('gray.300', 'white');
+  let navbarPosition = 'fixed';
+  let navbarFilter = 'none';
+  let navbarShadow = '45px 76px 113px 7px rgba(112, 144, 176, 0.08)';
+  let navbarBorder = 'transparent';
+  let paddingX = '15px';
+  let gap = '0px';
+  let navbarTop = '0px';
+  let menuBg = useColorModeValue('white', 'navy.800');
+  const changeNavbar = () => {
+    if (window.scrollY > 1) {
+      setScrolled(true);
+    } else {
+      setScrolled(false);
+    }
+  };
+  return (
+    <Flex
+      position={navbarPosition}
+      boxShadow={navbarShadow}
+      bg="white"
+      direction="column"
+      borderColor={navbarBorder}
+      filter={navbarFilter}
+      backgroundPosition="center"
+      backgroundSize="cover"
+      zIndex="200"
+      borderStyle="solid"
+      alignItems={{ xl: 'center' }}
+      display={secondary ? 'block' : 'flex'}
+      justifyContent={{ xl: 'center' }}
+      lineHeight="25.6px"
+      mx="auto"
+      left="50%"
+      transform="translate(-50%,0px)"
+      w="100%"
+      top={navbarTop}
+    >
+      {/* Misc */}
+
+      <Flex
+        w="100%"
+        display={{ base: 'none', lg: 'flex' }}
+        bg="#F3F5FA"
+        justifyContent="center"
+      >
+        <Flex
+          w={{
+            base: 'calc(100vw - 4%)',
+            md: 'calc(100vw - 4%)',
+            lg: '100vw',
+            xl: 'calc(100vw - 250px)',
+            '2xl': '1200px',
+          }}
+          px={{
+            sm: paddingX,
+            md: '10px',
+            lg: '12px',
+          }}
+          py="4px"
+          gap="40px"
+          justifyContent="center"
+        >
+          <Flex direction="row" alignItems="center">
+            <Icon
+              me="6px"
+              w="12px"
+              h="12px"
+              color="brand.500"
+              as={MdPrivacyTip}
+            />
+            <Text fontSize="xs" fontWeight="500" h="100%" color="gray.500">
+              Founded in EU. We respect your privacy.
+            </Text>
+          </Flex>
+          <Flex direction="row" alignItems="center">
+            <Icon me="1px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
+            <Icon me="1px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
+            <Icon me="1px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
+            <Icon me="1px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
+            <Icon me="6px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
+            <Text fontSize="xs" fontWeight="500" h="100%" color="gray.500">
+              Loved by 80,000+ users worldwide
+            </Text>
+          </Flex>
+          <Flex direction="row" alignItems="center">
+            <Icon
+              me="6px"
+              w="12px"
+              h="12px"
+              color="brand.500"
+              as={IoMdTrophy}
+            />
+            <Text fontSize="xs" fontWeight="500" h="100%" color="gray.500">
+              #1 NextJS boilerplate & admin template
+
+
+            </Text>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Misc */}
+
+      <Flex
+        w={{
+          base: 'calc(100vw - 4%)',
+          md: 'calc(100vw - 4%)',
+          lg: '100vw',
+          xl: 'calc(100vw - 250px)',
+          '2xl': '1200px',
+        }}
+        px={{
+          sm: paddingX,
+          md: '10px',
+          lg: '12px',
+        }}
+        py="20px"
+        ps={{
+          xl: '12px',
+        }}
+        flexDirection={{
+          sm: 'row',
+          md: 'row',
+        }}
+        alignItems="center"
+        justify="space-between"
+        mb={gap}
+      >
+        <Link
+          display={'flex'}
+          alignItems="center"
+          justifyContent={'center'}
+          href="/"
+        >
+          <Image
+            alt=" "
+            w="36px"
+            src={logo.src}
+          />
+          <Text ms="8px" me="10px" fontWeight="800" color="#120F43">
+            Horizon UI Boilerplate
+          </Text>
+        </Link>
+        <Flex>
+          <Link
+            display={{ base: 'none', lg: 'block' }}
+            href="/dashboard/signin"
+            color="gray.600"
+            fontSize="sm"
+            fontWeight="500"
+            letterSpacing="0px"
+            me="30px"
+            my="auto"
+          >
+            Generator
+          </Link>
+          <Link
+            display={{ base: 'none', lg: 'block' }}
+            href="/#features"
+            color="gray.600"
+            fontSize="sm"
+            fontWeight="500"
+            letterSpacing="0px"
+            me="30px"
+            my="auto"
+          >
+            Features
+          </Link>
+          <Link
+            display={{ base: 'none', lg: 'block' }}
+            href="/pricing"
+            color="gray.600"
+            fontSize="sm"
+            fontWeight="500"
+            letterSpacing="0px"
+            me="30px"
+            my="auto"
+          >
+            Pricing
+          </Link>
+          <Link
+            display={{ base: 'none', lg: 'block' }}
+            href="#faqs"
+            color="gray.600"
+            fontSize="sm"
+            fontWeight="500"
+            letterSpacing="0px"
+            me="30px"
+            my="auto"
+          >
+            FAQs
+          </Link>
+          <Menu>
+            <MenuButton
+              display={{ base: 'block', xl: 'none' }}
+              p="0px !important"
+              maxH="20px"
+              maxW="20px"
+              alignContent="end"
+            >
+              <Icon
+                display={{ base: 'block', lg: 'none' }}
+                as={IoMenuOutline}
+                color={textColor}
+                w="20px"
+                h="20px"
+                _hover={{ cursor: 'pointer' }}
+              />
+            </MenuButton>
+            <MenuList
+              p="0px"
+              mt="10px"
+              borderRadius="10px"
+              border="1px solid"
+              borderColor="#CBD5E0"
+              bg={menuBg}
+            >
+              <Flex flexDirection="column" p="10px">
+                <MenuItem
+                  _hover={{ bg: 'none' }}
+                  _focus={{ bg: 'none' }}
+                  borderRadius="8px"
+                  px="14px"
+                >
+                  <Link
+                    href="/dashboard/signin"
+                    color="gray.600"
+                    fontSize="md"
+                    fontWeight="500"
+                    me="30px"
+                    my="auto"
+                  >
+                    Generator
+                  </Link>
+                </MenuItem>
+                <MenuItem
+                  _hover={{ bg: 'none' }}
+                  _focus={{ bg: 'none' }}
+                  borderRadius="8px"
+                  px="14px"
+                >
+                  <Link
+                    href="/#features"
+                    color="gray.600"
+                    fontSize="md"
+                    fontWeight="500"
+                    me="30px"
+                    my="auto"
+                  >
+                    Features
+                  </Link>
+                </MenuItem>
+                <MenuItem
+                  _hover={{ bg: 'none' }}
+                  _focus={{ bg: 'none' }}
+                  color="red.400"
+                  borderRadius="8px"
+                >
+                  <Link
+                    href="/pricing"
+                    color="gray.600"
+                    fontSize="md"
+                    fontWeight="500"
+                    me="30px"
+                    my="auto"
+                  >
+                    Pricing
+                  </Link>
+                </MenuItem>
+                <MenuItem
+                  _hover={{ bg: 'none' }}
+                  _focus={{ bg: 'none' }}
+                  color="red.400"
+                  borderRadius="8px"
+                >
+                  <Link
+                    href="#faqs"
+                    color="gray.600"
+                    fontSize="md"
+                    fontWeight="500"
+                    me="30px"
+                    my="auto"
+                  >
+                    FAQs
+                  </Link>
+                </MenuItem>
+                <MenuItem
+                  _hover={{ bg: 'none' }}
+                  _focus={{ bg: 'none' }}
+                  color="red.400"
+                  borderRadius="8px"
+                >
+                  <Link
+                    href="/dashboard/signin"
+                    color={textColor}
+                    fontSize="md"
+                    fontWeight="600"
+                    me="18px"
+                    my="auto"
+                    letterSpacing="0px"
+                  >
+                    Login
+                  </Link>
+                </MenuItem>
+                <Button
+                  variant="transparent"
+                  border="1px solid"
+                  borderColor={borderColor}
+                  color={textColor}
+                  fontSize="md"
+                  borderRadius="45px"
+                  bg="transparent"
+                  my="auto"
+                >
+                  <Link href="/dashboard/signin">
+                    Get started for Free
+                    <Icon
+                      as={MdChevronRight}
+                      mt="3px"
+                      ms="5px"
+                      h="16px"
+                      w="16px"
+                    />
+                  </Link>
+                </Button>
+              </Flex>
+            </MenuList>
+          </Menu>
+        </Flex>
+        <Flex display={{ base: 'none', lg: 'flex' }}>
+          <Link
+            href="/dashboard/signin"
+            color={textColor}
+            fontSize="sm"
+            fontWeight="600"
+            me="18px"
+            letterSpacing="0px"
+            my="auto"
+          >
+            Login
+          </Link>
+
+          <Link href="/dashboard/signin">
+            <Button
+              variant="transparent"
+              border="1px solid"
+              borderColor={borderColor}
+              color={textColor}
+              fontSize="sm"
+              borderRadius="45px"
+              px="18px"
+              py="12px"
+              bg="transparent"
+              my="auto"
+            >
+              {' '}
+              Get started for Free
+              <Icon as={MdChevronRight} mt="3px" h="16px" w="16px" />
+            </Button>
+          </Link>
+        </Flex>
+      </Flex>
+      {secondary ? <Text color="white">{message}</Text> : null}
+    </Flex>
+  );
+}

boilerplate-chakra-pro-main/components/navbar/NavbarLinksAdmin.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+import { useSupabase } from '@/app/supabase-provider';
+import { routes } from '@/components/routes';
+import { SidebarResponsive } from '@/components/sidebar/Sidebar';
+import { OpenContext, UserContext } from '@/contexts/layout';
+import { handleRequest } from '@/utils/auth-helpers/client';
+import { SignOut } from '@/utils/auth-helpers/server';
+import { getRedirectMethod } from '@/utils/auth-helpers/settings';
+import {
+  Avatar,
+  Box,
+  Button,
+  ButtonGroup,
+  Flex,
+  Icon,
+  Link,
+  Menu,
+  MenuButton,
+  MenuList,
+  useColorModeValue
+} from '@chakra-ui/react';
+import { usePathname, useRouter } from 'next/navigation';
+import { useContext } from 'react';
+import { MdOutlineLogout, MdHelpOutline } from 'react-icons/md';
+
+export default function HeaderLinks(props?: { [x: string]: any }) {
+  const { open, setOpen } = useContext(OpenContext);
+  const user = useContext(UserContext);
+  const router = getRedirectMethod() === 'client' ? useRouter() : null;
+  // Chakra Color Mode
+  const navbarIcon = useColorModeValue('gray.500', 'white');
+  let menuBg = useColorModeValue('white', 'navy.800');
+  const textColor = useColorModeValue('#120F43', 'white');
+  const shadow = useColorModeValue(
+    '14px 17px 40px 4px rgba(112, 144, 176, 0.18)',
+    '0px 41px 75px #081132'
+  );
+  const buttonBg = useColorModeValue('transparent', 'navy.800');
+  const hoverButton = useColorModeValue(
+    { bg: 'gray.100' },
+    { bg: 'whiteAlpha.100' }
+  );
+  const activeButton = useColorModeValue(
+    { bg: 'gray.200' },
+    { bg: 'whiteAlpha.200' }
+  );
+  return (
+    <Flex
+      zIndex="100"
+      w={{ sm: '100%', md: 'auto' }}
+      alignItems="center"
+      flexDirection="row"
+      bg={menuBg}
+      flexWrap={'unset'}
+      p="10px"
+      pl="16px"
+      borderRadius="30px"
+      boxShadow={shadow}
+    >
+      <SidebarResponsive routes={routes} />
+
+      <Menu>
+        <MenuButton p="0px" me="10px">
+          <Icon
+            mt="-5px"
+            as={MdHelpOutline}
+            color={navbarIcon}
+            w="18px"
+            h="18px"
+          />
+        </MenuButton>
+        <MenuList
+          boxShadow={shadow}
+          p="20px"
+          borderRadius="20px"
+          bg={menuBg}
+          border="none"
+          mt="22px"
+          minW={{ base: 'unset' }}
+          maxW={{ base: '360px', md: 'unset' }}
+        >
+          {/* <Flex bgImage={navImage} borderRadius="16px" mb="28px" alt="" /> */}
+          <Flex flexDirection="column" rowGap="10px">
+            <Link w="100%" href="/pricing">
+              <Button
+                bg={buttonBg}
+                border="1px solid"
+                color={textColor}
+                borderColor={useColorModeValue('gray.200', 'whiteAlpha.100')}
+                fontSize="sm"
+                borderRadius="45px"
+                w="100%"
+                minW="44px"
+                h="44px"
+                _placeholder={{ color: 'gray.500' }}
+                _hover={hoverButton}
+                _active={activeButton}
+                _focus={activeButton}
+              >
+                Pricing Plans
+              </Button>
+            </Link>
+            <Link w="100%" href="mailto:hello@horizon-ui.com">
+              <Button
+                bg={buttonBg}
+                border="1px solid"
+                color={textColor}
+                borderColor={useColorModeValue('gray.200', 'whiteAlpha.100')}
+                fontSize="sm"
+                borderRadius="45px"
+                w="100%"
+                minW="44px"
+                h="44px"
+                _placeholder={{ color: 'gray.500' }}
+                _hover={hoverButton}
+                _active={activeButton}
+                _focus={activeButton}
+              >
+                Help & Support
+              </Button>
+            </Link>
+            <Link w="100%" href="/#faqs">
+              <Button
+                bg={buttonBg}
+                border="1px solid"
+                color={textColor}
+                borderColor={useColorModeValue('gray.200', 'whiteAlpha.100')}
+                fontSize="sm"
+                borderRadius="45px"
+                w="100%"
+                minW="44px"
+                h="44px"
+                _placeholder={{ color: 'gray.500' }}
+                _hover={hoverButton}
+                _active={activeButton}
+                _focus={activeButton}
+              >
+                FAQs & More
+              </Button>
+            </Link>
+          </Flex>
+        </MenuList>
+      </Menu>
+      <form onSubmit={(e) => handleRequest(e, SignOut, router)}>
+        <input type="hidden" name="pathName" value={usePathname()} />
+        <Button
+          type="submit"
+          bg="transparent"
+          p="0px"
+          pt="3px"
+          _hover={{ background: 'transparent' }}
+          _active={{ background: 'transparent' }}
+          _focus={{ background: 'transparent' }}
+        >
+          <Box
+            cursor="pointer"
+            _hover={{ bg: 'none' }}
+            _focus={{ bg: 'none' }}
+            color="red.400"
+            borderRadius="8px"
+            me="10px"
+          >
+            {/* <Text> {`${props.userDetails?.avatar_url}`}</Text> */}
+            <Icon
+              mt="-5px"
+              as={MdOutlineLogout}
+              color={navbarIcon}
+              w="20px"
+              h="20px"
+            />
+          </Box>
+        </Button>
+      </form>
+
+      <Link w="100%" href="/dashboard/settings">
+        <Avatar h="40px" w="40px" src={user.user_metadata.avatar_url} />
+      </Link>
+    </Flex>
+  );
+}