%PDF-
%PDF-
Mini Shell
Mini Shell
{"version":3,"sources":["app/layout/components/SliderBar/SliderBar.js","app/main/cart/components/slider/styles.js","app/main/cart/components/slider/Slider.js","app/main/cart/checkout/forms/CheckoutForm.js","app/main/cart/checkout/forms/CartDetails.js","app/main/auth/LoginDialog.js","app/main/cart/checkout/index.js"],"names":["SliderBar","userId","localStorage","getItem","useState","cart","setCart","useEffect","fetch","SERVER_URL","then","res","json","status","data","console","log","noOfItems","length","className","href","src","alt","Slider","styled","div","SwiperCore","use","Pagination","CheckoutForm","props","nextStep","useForm","mode","register","handleSubmit","formState","errors","isDirty","isValid","onSubmit","type","name","id","required","placeholder","autoComplete","full_name","company_name","value","xmlns","viewBox","d","country","address","state","city","phone_number","email_address","htmlFor","rows","defaultValue","disabled","clsx","CartDetails","Example","open","setOpen","cancelButtonRef","useRef","Root","show","as","Fragment","static","initialFocus","onClose","Child","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","Overlay","aria-hidden","Title","email","password","onClick","ref","Checkout","step","setStep","steps","prevStep","size"],"mappings":"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","file":"static/js/48.bc79259f.chunk.js","sourcesContent":["import React, { useState, useEffect } from 'react';\r\nimport {SERVER_URL, CLIENT_URL} from '../../../config/server';\r\nimport \"swiper/swiper.min.css\";\r\nimport \"swiper/components/pagination/pagination.min.css\"\r\nimport \"./sliderbar.css\"\r\n\r\nfunction SliderBar(){\r\n\r\n const userId = localStorage.getItem('loggedInUser');\r\n const [cart, setCart] = useState([])\r\n\r\n useEffect(() => {\r\n const fetchcart =() =>{\r\n fetch(`${SERVER_URL}/cart/all/${userId}`)\r\n .then(res => res.json())\r\n .then(json => {\r\n if(json.status === 200){\r\n setCart(json.data);\r\n }else{\r\n console.log(json);\r\n }\r\n });\r\n \r\n \r\n }\r\n\r\n fetchcart()\r\n }, []);\r\n\r\n\r\n const noOfItems = cart.length;\r\n\r\n return(\r\n <div className=\"sliderbardiv sm:mb-20\">\r\n <div className=\"flex sliderbar shadow-sm -mt-9 field-bottom\">\r\n <a href=\"/shop\" className=\"no-underline bg-white sliderbar-link text-black flex flex-col items-center justify-center md:py-0 py-8 w-48 broder-0 border-r border-solid\">\r\n <span className=\"mb-2\">\r\n <img src=\"/assets/images/icons/shop.svg\" alt=\"\" />\r\n </span>\r\n <span>Shop</span>\r\n </a>\r\n <a href=\"/cart\" className=\"no-underline bg-white sliderbar-link text-black flex flex-col items-center justify-center md:py-0 py-8 w-48 broder-0 border-r border-solid\">\r\n <span className=\"mb-2\">\r\n <img src=\"/assets/images/icons/shopping-cart.svg\" alt=\"\" />\r\n </span>\r\n <span>Cart <span className=\"cartNumber\"> {noOfItems}</span></span>\r\n </a>\r\n <a href=\"/donate\" className=\"no-underline bg-white sliderbar-link text-black flex flex-col items-center justify-center md:py-0 py-8 w-48\">\r\n <span className=\"mb-2\">\r\n <img src=\"/assets/images/icons/donation.svg\" alt=\"\" />\r\n </span>\r\n <span>Donate</span>\r\n </a>\r\n </div>\r\n </div>\r\n )\r\n}\r\nexport default SliderBar;\r\n","import styled from \"styled-components\"\r\n\r\nconst Slider = styled.div`\r\n position: relative;\r\n height: 700px;\r\n\tborder: 1px solid #eee\r\n\r\n background: #eee;\r\n font-family: 'Roboto', Helvetica Neue, Helvetica, Arial, sans-serif;\r\n font-size: 14px;\r\n color: rgb(39, 38, 38);\r\n margin: 0;\r\n padding: 0;\r\n\r\n\t.swiper-container {\r\n\t\twidth: 100%;\r\n\t\theight: 100%;\r\n\t}\r\n\r\n\t.swiper-slide {\r\n\t\tfont-size: 18px;\r\n\t\tbackground: transparent;\r\n\r\n\t\t/* Center slide text vertically */\r\n\t\tdisplay: -webkit-box;\r\n\t\tdisplay: -ms-flexbox;\r\n\t\tdisplay: -webkit-flex;\r\n\t\tdisplay: flex;\r\n\t\t-webkit-box-pack: center;\r\n\t\t-ms-flex-pack: center;\r\n\t\t-webkit-justify-content: center;\r\n\t\tjustify-content: center;\r\n\t\t-webkit-box-align: center;\r\n\t\t-ms-flex-align: center;\r\n\t\t-webkit-align-items: center;\r\n\t\talign-items: center;\r\n\t}\r\n\r\n\t.swiper-slide img {\r\n\t\tdisplay: block;\r\n\t\twidth: 100%;\r\n\t\theight: 100%;\r\n\t\tobject-fit: cover;\r\n\t}\r\n\r\n\t.swiper-slide .slider-wrapper {\r\n\t\tdisplay: block;\r\n\t\tposition: relative;\r\n\t\twidth: 100%;\r\n\t\theight: 100%;\r\n\t\tobject-fit: cover;\r\n\t}\r\n\r\n\t.slider-text {\r\n\t\tposition: absolute;\r\n\t\theight: 100%;\r\n\t\twidth: 100%;\r\n\t}\r\n\r\n\t.field-bottom {\r\n\t\ttransform: translate(10%, 320px);\r\n\t}\r\n\r\n\t@media screen and (max-width: 640px) {\r\n\t\t.field-bottom {\r\n\t\t\ttransform: translate(0%, 0%);\r\n\t\t}\r\n\t}\r\n`\r\n\r\nexport default Slider","\r\nimport React from \"react\";\r\nimport { Swiper, SwiperSlide } from \"swiper/react\";\r\nimport SliderContainer from \"./styles\"\r\n\r\nimport \"swiper/swiper.min.css\";\r\nimport \"swiper/components/pagination/pagination.min.css\"\r\nimport SliderBar from \"../../../../layout/components/SliderBar/SliderBar\"\r\nimport '../../../style.css'\r\nimport SwiperCore, { Pagination } from 'swiper/core';\r\n\r\nSwiperCore.use([Pagination]);\r\n\r\nfunction Slider() {\r\n return (\r\n <SliderContainer className=\"mt-6\">\r\n <SwiperSlide>\r\n <div className=\"slider-wrapper\">\r\n <div className=\"slider-text border border-solid\">\r\n <div className=\"max-w-7xl mx-auto pb-16 pt-48 md:px-16 px-8\">\r\n <div className=\"grid md:grid-cols-2 grid-cols-1 gap-x-8 gap-y-8\">\r\n <div className=\"content banner-txt\">\r\n <h1 className=\"text-4xl font-bold text-white mb-4\">What have you done for the Environment Lately?</h1>\r\n <p className=\"font-light text-white mb-6\">\r\n What you give goes a long way\r\n </p>\r\n\r\n <a href=\"/donate\">\r\n <button className='bg-green hover:bg-green-800 text-white font-bold py-2 px-8 rounded'>\r\n Donate\r\n </button>\r\n </a>\r\n </div> \r\n </div>\r\n </div>\r\n </div>\r\n <img src=\"/assets/images/banner/aboutus.png\" alt=\"\" />\r\n </div>\r\n </SwiperSlide>\r\n </SliderContainer>\r\n )\r\n}\r\n\r\nexport default Slider\r\n","import React from 'react';\r\nimport { useForm } from 'react-hook-form';\r\nimport clsx from 'clsx';\r\n\r\nfunction CheckoutForm(props) {\r\n const { nextStep } = props;\r\n const {\r\n register,\r\n handleSubmit,\r\n formState: { errors, isDirty, isValid },\r\n } = useForm({ mode: 'onChange' });\r\n\r\n const onSubmit = (data) => {\r\n console.log(data);\r\n nextStep();\r\n };\r\n\r\n console.log(errors, 'errors');\r\n console.log(isValid, 'isValid');\r\n console.log(isDirty, 'isDirty');\r\n\r\n return (\r\n <div className='w-full'>\r\n <div className='mb-8'>\r\n <h2 className='text-gray-800 font-bold text-xl mb-4'>Checkout</h2>\r\n <p className='text-sm'>\r\n Returning Customer?{' '}\r\n <span className='text-green-light'>click here to login</span>\r\n </p>\r\n </div>\r\n\r\n <div>\r\n <h2 className='text-gray-800 font-bold text-xl mb-4'>\r\n Billing Details\r\n </h2>\r\n </div>\r\n\r\n <form onSubmit={handleSubmit(onSubmit)}>\r\n <div className='shadow overflow-hidden sm:rounded-md'>\r\n <div className='px-4 py-5 bg-white sm:p-6'>\r\n <div className='grid grid-cols-6 gap-y-3 gap-x-6'>\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n name='full_name'\r\n id='full-name'\r\n {...register('full_name', { required: true })}\r\n placeholder='Fullname'\r\n autoComplete='given-name'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.full_name && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('company_name', { required: true })}\r\n placeholder='Company Name (optional)'\r\n id='company-name'\r\n autoComplete='company-name'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.company_name && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <div className='w-full block relative'>\r\n <select\r\n id='country'\r\n {...register('country', { required: true })}\r\n placeholder='Country'\r\n autoComplete='country'\r\n className='block appearance-none w-full py-2 px-2 pr-8 border border-gray-300 bg-white leading-tight rounded-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 sm:text-sm'\r\n >\r\n <option value='United States'>United States</option>\r\n <option value='Canada'>Canada</option>\r\n <option value='Mexico'>Mexico</option>\r\n </select>\r\n <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>\r\n <svg\r\n className='fill-current h-4 w-4'\r\n xmlns='https://www.w3.org/2000/svg'\r\n viewBox='0 0 20 20'\r\n >\r\n <path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />\r\n </svg>\r\n </div>\r\n </div>\r\n {errors.country && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('address', { required: true })}\r\n placeholder='Address'\r\n id='street-address'\r\n autoComplete='street-address'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.address && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <div className='relative'>\r\n <select\r\n id='state'\r\n {...register('state', { required: true })}\r\n placeholder='State'\r\n autoComplete='state'\r\n className='block appearance-none w-full py-2 px-2 pr-8 border border-gray-300 bg-white rounded-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 sm:text-sm'\r\n >\r\n <option value='Lagos'>Lagos</option>\r\n <option value='Abuja'>Abuja</option>\r\n <option value='Delta'>Delta</option>\r\n </select>\r\n <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>\r\n <svg\r\n className='fill-current h-4 w-4'\r\n xmlns='https://www.w3.org/2000/svg'\r\n viewBox='0 0 20 20'\r\n >\r\n <path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />\r\n </svg>\r\n </div>\r\n </div>\r\n {errors.state && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('city', { required: true })}\r\n placeholder='City'\r\n id='city'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.city && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('phone_number', { required: true })}\r\n placeholder='Phone number'\r\n id='phone_number'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.phone_number && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-6 sm:col-span-3'>\r\n <input\r\n type='text'\r\n {...register('email_address', { required: true })}\r\n placeholder='Email address'\r\n id='email-address'\r\n autoComplete='email'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.email_address && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='col-span-4'>\r\n <fieldset>\r\n <div className='mt-4 space-y-4'>\r\n <div className='flex items-center'>\r\n <div className='flex items-center h-5'>\r\n <input\r\n id='new-account'\r\n {...register('new_account')}\r\n type='checkbox'\r\n className='focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded'\r\n />\r\n </div>\r\n <div className='ml-3 text-sm mt-0.5'>\r\n <label\r\n htmlFor='new-account'\r\n className='font-medium text-gray-700'\r\n >\r\n Create an Account\r\n </label>\r\n </div>\r\n </div>\r\n <div className='flex items-center'>\r\n <div className='flex items-center h-5'>\r\n <input\r\n id='shipping-address'\r\n {...register('shipping_address')}\r\n type='checkbox'\r\n className='focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded'\r\n />\r\n </div>\r\n <div className='ml-3 text-sm mt-0.5'>\r\n <label\r\n htmlFor='shipping-address'\r\n className='font-medium text-gray-700'\r\n >\r\n Ship to a different Address?\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </fieldset>\r\n </div>\r\n\r\n <div className='col-span-4'>\r\n <div className='mt-4'>\r\n <textarea\r\n id='order-notes'\r\n {...register('order_notes')}\r\n rows={3}\r\n className='shadow-sm focus:ring-indigo-500 focus:border-indigo-500 py-2 px-3 block w-full sm:text-sm border border-gray-300 rounded-sm'\r\n placeholder='Order notes'\r\n defaultValue={''}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div className='px-4 py-3 bg-gray-50 text-right sm:px-6'>\r\n <button\r\n type='submit'\r\n disabled={!isDirty || (isDirty && !isValid)}\r\n className={clsx(\r\n !isDirty || (isDirty && !isValid)\r\n ? 'bg-gray-200 hover:bg-gray-200'\r\n : 'bg-green hover:bg-green-800',\r\n 'inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green'\r\n )}\r\n >\r\n Checkout\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n );\r\n}\r\n\r\nexport default CheckoutForm;\r\n","import React from 'react';\r\n\r\nfunction CartDetails() {\r\n return (\r\n <div className='w-full'>\r\n <div>\r\n <h2 className='text-gray-800 font-bold text-xl mb-4'>Details</h2>\r\n </div>\r\n\r\n <div className=''>\r\n <div className='max-w-lg rounded overflow-hidden shadow-md mb-8'>\r\n <div className='mb-2 border-b py-2 px-4'>\r\n <span className='font-medium text-sm'>Shipment Details</span>\r\n </div>\r\n <div className='p-4'>\r\n <p className='text-gray-500 text-sm font-bold mb-2'>\r\n Shipment 1 of 1{' '}\r\n </p>\r\n <p className='text-gray-500 text-sm mb-4'>\r\n Birding Binocular; Olympus 8×42 pro Binocular with Extra-low\r\n dispersion (ED) glass.\r\n </p>\r\n\r\n <p className='text-gray-500 text-sm'>\r\n Delivered between{' '}\r\n <strong className='text-gray-800'>Friday 30 Apr</strong> and{' '}\r\n <strong className='text-gray-800'>Tuesday 4 May</strong>\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div className='max-w-lg rounded overflow-hidden shadow-md mb-8'>\r\n <div className='flex justify-between font-medium text-sm mb-2 border-b py-2 px-4'>\r\n <span>Address</span>\r\n </div>\r\n <div className='p-4'>\r\n <p className='text-gray-600 text-sm font-bold mb-2'>Victor Jones</p>\r\n <p className='flex justify-between mb-6'>\r\n <span className='text-gray-700 text-xs'>\r\n 808 Mandilas Mall, Marina, victorial island Lagos Nigeria.\r\n </span>\r\n <span className='text-green text-xs'>Change Address</span>\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div className='max-w-lg rounded overflow-hidden shadow-md'>\r\n <table className='min-w-full divide-y divide-gray-200'>\r\n <tbody className='bg-white divide-y divide-gray-200'>\r\n <tr className=''>\r\n <td className='px-4 py-3 whitespace-nowrap'>\r\n <span className='text-sm font-medium text-gray-600'>\r\n Sub Total\r\n </span>\r\n </td>\r\n <td className='px-4 py-3 whitespace-nowrap text-sm text-right text-gray-500'>\r\n ₦ 131,250\r\n </td>\r\n </tr>\r\n <tr className=''>\r\n <td className='px-4 py-3 whitespace-nowrap'>\r\n <span className='text-sm font-medium text-gray-600'>\r\n Shipping Fee\r\n </span>\r\n </td>\r\n <td className='px-4 py-3 whitespace-nowrap text-sm text-right text-gray-500'>\r\n ₦ 131,250\r\n </td>\r\n </tr>\r\n <tr className=''>\r\n <td className='px-4 py-3 whitespace-nowrap'>\r\n <span className='text-sm font-medium text-gray-600'>\r\n Total\r\n </span>\r\n </td>\r\n <td className='px-4 py-3 whitespace-nowrap text-right'>\r\n <div className='flex flex-col text-right'>\r\n <span className='text-gray-800 text-sm font-bold'>\r\n ₦132,750.00\r\n </span>\r\n <span className='text-xs text-gray-500'>\r\n (includes ₦6,250.00 Tax estimated for Nigeria)\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div className='max-w-lg flex justify-center space-x-4 mt-12'>\r\n <button className='bg-green border hover:bg-green-800 text-sm text-white font-medium py-2 px-12 rounded-sm'>\r\n Pay now\r\n </button>\r\n <button className='bg-gray-50 border hover:bg-gray-100 text-sm text-gray-800 font-medium py-2 px-12 rounded-sm'>\r\n Cancel order\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default CartDetails;\r\n","/* This example requires Tailwind CSS v2.0+ */\r\nimport { Fragment, useRef, useState } from 'react';\r\nimport { Dialog, Transition } from '@headlessui/react';\r\nimport { HiX } from 'react-icons/hi';\r\nimport { useForm } from 'react-hook-form';\r\nimport clsx from 'clsx';\r\n\r\nexport default function Example() {\r\n const [open, setOpen] = useState(true);\r\n const {\r\n register,\r\n handleSubmit,\r\n formState: { errors, isDirty, isValid },\r\n } = useForm({ mode: 'onChange' });\r\n\r\n const onSubmit = (data) => console.log(data);\r\n\r\n const cancelButtonRef = useRef(null);\r\n\r\n return (\r\n <Transition.Root show={open} as={Fragment}>\r\n <Dialog\r\n as='div'\r\n static\r\n className='fixed z-10 inset-0 overflow-y-auto shadow-sm'\r\n initialFocus={cancelButtonRef}\r\n open={open}\r\n onClose={setOpen}\r\n >\r\n <div className='flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0'>\r\n <Transition.Child\r\n as={Fragment}\r\n enter='ease-out duration-300'\r\n enterFrom='opacity-0'\r\n enterTo='opacity-100'\r\n leave='ease-in duration-200'\r\n leaveFrom='opacity-100'\r\n leaveTo='opacity-0'\r\n >\r\n <Dialog.Overlay className='fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity' />\r\n </Transition.Child>\r\n\r\n {/* This element is to trick the browser into centering the modal contents. */}\r\n <span\r\n className='hidden sm:inline-block sm:align-middle sm:h-screen'\r\n aria-hidden='true'\r\n >\r\n ​\r\n </span>\r\n <Transition.Child\r\n as={Fragment}\r\n enter='ease-out duration-300'\r\n enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'\r\n enterTo='opacity-100 translate-y-0 sm:scale-100'\r\n leave='ease-in duration-200'\r\n leaveFrom='opacity-100 translate-y-0 sm:scale-100'\r\n leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'\r\n >\r\n <div className='inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full'>\r\n <div className='bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4'>\r\n <div className='mt-3 text-center sm:mt-0 sm:text-left'>\r\n <Dialog.Title\r\n as='h3'\r\n className='text-lg leading-6 font-medium text-gray-900'\r\n >\r\n <div className='sm:flex sm:justify-between mb-16'>\r\n <h2 className='tracking-wider text-gray-800 font-bold'>\r\n Login\r\n </h2>\r\n <HiX />\r\n </div>\r\n </Dialog.Title>\r\n <div className='mt-2'>\r\n <h2 className='text-sm font-bold text-gray-800 my-4'>\r\n If you have shopped with us before, please enter your\r\n details below. If you are a new customer, please proceed\r\n to the Billing section.\r\n </h2>\r\n\r\n <form onSubmit={handleSubmit(onSubmit)}>\r\n <div className='mb-8'>\r\n <input\r\n type='email'\r\n name='email'\r\n id='email'\r\n {...register('email', { required: true })}\r\n placeholder='Email Address'\r\n autoComplete='email'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.email && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n\r\n <div className='mb-8'>\r\n <input\r\n type='password'\r\n name='password'\r\n id='password'\r\n {...register('password', { required: true })}\r\n placeholder='Password'\r\n autoComplete='password'\r\n className='py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green focus:ring-opacity-50 block w-full shadow-sm sm:text-sm border border-solid border-gray-300 rounded-sm'\r\n />\r\n {errors.password && (\r\n <span className='text-xs text-red-500'>\r\n This field is required\r\n </span>\r\n )}\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n <div className='bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse'>\r\n <button\r\n type='submit'\r\n disabled={!isDirty || (isDirty && !isValid)}\r\n className={clsx(\r\n !isDirty || (isDirty && !isValid)\r\n ? 'bg-gray-200 hover:bg-gray-200'\r\n : 'bg-green hover:bg-green-800 focus:ring-2 focus:ring-offset-2 focus:ring-green-500',\r\n 'w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none sm:ml-3 sm:w-auto sm:text-sm'\r\n )}\r\n onClick={() => setOpen(false)}\r\n >\r\n Login\r\n </button>\r\n <button\r\n type='button'\r\n className='mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm'\r\n onClick={() => setOpen(false)}\r\n ref={cancelButtonRef}\r\n >\r\n Cancel\r\n </button>\r\n </div>\r\n </div>\r\n </Transition.Child>\r\n </div>\r\n </Dialog>\r\n </Transition.Root>\r\n );\r\n}\r\n","import React, { useState } from 'react';\r\nimport HomeSlider from './../components/slider/Slider';\r\nimport { HiOutlineChevronLeft } from 'react-icons/hi';\r\nimport CheckoutForm from './forms/CheckoutForm';\r\nimport CartDetails from './forms/CartDetails';\r\nimport LoginDialog from '../../auth/LoginDialog';\r\n\r\nfunction Checkout(props) {\r\n const [step, setStep] = useState(0);\r\n const steps = ['Billing Details', 'Details', 'Payment'];\r\n\r\n const nextStep = () => {\r\n if (step >= 0 && step < steps.length) {\r\n setStep((prevStep) => prevStep + 1);\r\n }\r\n };\r\n\r\n const prevStep = () => {\r\n if (step > 0 && step <= steps.length) {\r\n setStep((prevStep) => prevStep - 1);\r\n }\r\n };\r\n\r\n return (\r\n <div>\r\n <HomeSlider />\r\n <div className='max-w-7xl mx-auto md:px-8 px-4 py-8 bg-white'>\r\n <div className='flex items-center mb-8'>\r\n <button\r\n onClick={prevStep}\r\n className='flex justify-center h-10 w-10 bg-gray-50 hover:bg-gray-100 text-gray-600 font-bold py-2 px-4 rounded-full'\r\n >\r\n <HiOutlineChevronLeft size='24' className='flex-shrink-0' />\r\n </button>\r\n <h2 className='text-gray-700 font-medium text-xl ml-2'>Back</h2>\r\n </div>\r\n\r\n <div className='py-0'>\r\n <div className='grid md:grid-cols-2 grid-cols-1 gap-4'>\r\n <div>\r\n {step === 0 && (\r\n <CheckoutForm nextStep={nextStep} prevStep={prevStep} />\r\n )}\r\n {step === 1 && (\r\n <CartDetails nextStep={nextStep} prevStep={prevStep} />\r\n )}\r\n {step === 2 && (\r\n <CheckoutForm nextStep={nextStep} prevStep={prevStep} />\r\n )}\r\n </div>\r\n <div></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <LoginDialog />\r\n </div>\r\n );\r\n}\r\n\r\nexport default Checkout;\r\n"],"sourceRoot":""}
Zerion Mini Shell 1.0