From 4339c49be8f30dbb47b6882e61e909837dc91e81 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 31 Jul 2024 15:39:21 +0700 Subject: update auto reload add cart --- src-migrate/modules/product-detail/components/AddToCart.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx index 097db98a..c4df555b 100644 --- a/src-migrate/modules/product-detail/components/AddToCart.tsx +++ b/src-migrate/modules/product-detail/components/AddToCart.tsx @@ -51,6 +51,9 @@ const AddToCart = ({ error: { title: 'Menambahkan ke keranjang', description: 'Gagal menambahkan ke keranjang belanja' }, } ) + setTimeout(() => { + window.location.reload(); + }, 1500); if (source === 'buy') { router.push('/shop/checkout?source=buy') -- cgit v1.2.3 From 0abd42f8b528b3166169fef7093d4d8b22f3fb79 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 1 Aug 2024 08:48:48 +0700 Subject: add pop up when hit keranjang button --- .../product-detail/components/AddToCart.tsx | 83 +++++++++++++++++++--- .../product-detail/components/PriceAction.tsx | 2 + .../product-detail/components/ProductDetail.tsx | 2 +- .../modules/product-promo/components/AddToCart.tsx | 65 ++++++++++++++++- .../modules/product-promo/components/Card.tsx | 9 +-- .../modules/product-promo/components/Section.tsx | 8 ++- 6 files changed, 149 insertions(+), 20 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx index c4df555b..b2fed55d 100644 --- a/src-migrate/modules/product-detail/components/AddToCart.tsx +++ b/src-migrate/modules/product-detail/components/AddToCart.tsx @@ -1,19 +1,28 @@ -import { Button, useToast } from '@chakra-ui/react' +import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import { Button, Link, useToast } from '@chakra-ui/react' +import product from 'next-seo/lib/jsonld/product' import { useRouter } from 'next/router' - +import { useState } from 'react' +import Image from '~/components/ui/image' import { getAuth } from '~/libs/auth' import { upsertUserCart } from '~/services/cart' +import LazyLoad from 'react-lazy-load'; +import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar'; +import { IProductDetail } from '~/types/product'; +import ImageNext from 'next/image'; type Props = { variantId: number | null, quantity?: number; source?: 'buy' | 'add_to_cart'; + products : IProductDetail } const AddToCart = ({ variantId, quantity = 1, - source = 'add_to_cart' + source = 'add_to_cart', + products }: Props) => { const auth = getAuth() const router = useRouter() @@ -21,6 +30,15 @@ const AddToCart = ({ position: 'top', isClosable: true }) + const [product, setProducts] = useState(products); + + const productSimilarQuery = [ + product?.name, + `fq=-product_id_i:${product.id}`, + `fq=-manufacture_id_i:${product.manufacture?.id || 0}`, + ].join('&'); + + const [addCartAlert, setAddCartAlert] = useState(false); const handleClick = async () => { if (typeof auth !== 'object') { @@ -34,6 +52,7 @@ const AddToCart = ({ isNaN(quantity) || typeof auth !== 'object' ) return; + setAddCartAlert(true); toast.promise( upsertUserCart({ @@ -51,9 +70,8 @@ const AddToCart = ({ error: { title: 'Menambahkan ke keranjang', description: 'Gagal menambahkan ke keranjang belanja' }, } ) - setTimeout(() => { - window.location.reload(); - }, 1500); + + if (source === 'buy') { router.push('/shop/checkout?source=buy') @@ -72,10 +90,55 @@ const AddToCart = ({ } return ( - +
+ + { + setAddCartAlert(false); + setTimeout(() => { + window.location.reload(); + }, 1500); + }} + > +
+
+ +
+
+ {product.name} +
+
+ + Lihat Keranjang + +
+
+ +
+
+ Kamu Mungkin Juga Suka +
+ + + +
+ +
) } -export default AddToCart \ No newline at end of file +export default AddToCart \ No newline at end of file diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx index 81271f6e..9021264e 100644 --- a/src-migrate/modules/product-detail/components/PriceAction.tsx +++ b/src-migrate/modules/product-detail/components/PriceAction.tsx @@ -97,12 +97,14 @@ const PriceAction = ({ product }: Props) => { className={style['quantity-input']} /> {!isApproval && ( diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index fad35a7d..e4555913 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -129,7 +129,7 @@ const ProductDetail = ({ product }: Props) => { )}
- {!!activeVariantId && !isApproval && } + {!!activeVariantId && !isApproval && }

diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx index 87017c14..488f3f98 100644 --- a/src-migrate/modules/product-promo/components/AddToCart.tsx +++ b/src-migrate/modules/product-promo/components/AddToCart.tsx @@ -9,19 +9,34 @@ import { IPromotion } from '~/types/promotion' import DesktopView from '../../../../src/core/components/views/DesktopView'; import MobileView from '../../../../src/core/components/views/MobileView'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import ImageNext from 'next/image'; +import Link from 'next/link' +import LazyLoad from 'react-lazy-load' +import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar'; +import { IProductDetail } from '~/types/product'; type Props = { promotion: IPromotion + product: IProductDetail } type Status = 'idle' | 'loading' | 'success' -const ProductPromoAddToCart = ({ promotion }: Props) => { +const ProductPromoAddToCart = ({product, promotion }: Props) => { + console.log("promotion",promotion) const auth = getAuth() const toast = useToast() const router = useRouter() const [status, setStatus] = useState('idle') + + const productSimilarQuery = [ + promotion?.name, + `fq=-product_id_i:${promotion.products[0].product_id}`, + ].join('&'); + + const [addCartAlert, setAddCartAlert] = useState(false); const handleButton = async () => { if (typeof auth !== 'object') { @@ -42,7 +57,7 @@ const ProductPromoAddToCart = ({ promotion }: Props) => { qtyAppend: true }) setStatus('idle') - + setAddCartAlert(true); toast({ title: 'Tambah ke keranjang', description: 'Berhasil menambahkan barang ke keranjang belanja', @@ -51,6 +66,9 @@ const ProductPromoAddToCart = ({ promotion }: Props) => { isClosable: true, position: 'top', }) + // setTimeout(() => { + // window.location.reload(); + // }, 1500); } useEffect(() => { @@ -92,6 +110,49 @@ const ProductPromoAddToCart = ({ promotion }: Props) => { {status === 'success' && Berhasil} {status !== 'success' && Keranjang} + { + setAddCartAlert(false); + setTimeout(() => { + window.location.reload(); + }, 1500); + }} + > +
+
+ +
+
+ {product.name} +
+
+ + Lihat Keranjang + +
+
+ +
+
+ Kamu Mungkin Juga Suka +
+ + + +
+

) diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx index 728d23ca..b286aa5b 100644 --- a/src-migrate/modules/product-promo/components/Card.tsx +++ b/src-migrate/modules/product-promo/components/Card.tsx @@ -15,16 +15,17 @@ import clsxm from '~/libs/clsxm' import ProductPromoItem from './Item' import ProductPromoAddToCart from "./AddToCart" import ProductPromoCardCountdown from "./CardCountdown" +import { IProductDetail } from '~/types/product'; import MobileView from '../../../../src/core/components/views/MobileView'; import DesktopView from '../../../../src/core/components/views/DesktopView'; type Props = { promotion: IPromotion - + product: IProductDetail } -const ProductPromoCard = ({ promotion}: Props) => { +const ProductPromoCard = ({product, promotion}: Props) => { const [products, setProducts] = useState([]) const [freeProducts, setFreeProducts] = useState([]) const [error, setError] = useState(null) @@ -132,7 +133,7 @@ const ProductPromoCard = ({ promotion}: Props) => {
- +
@@ -189,7 +190,7 @@ const ProductPromoCard = ({ promotion}: Props) => {
- +
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index 4e8a7dd5..ff565539 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -9,12 +9,14 @@ import { IPromotion } from '~/types/promotion' import { useModalStore } from "../stores/useModalStore" import ProductPromoCard from './Card' import ProductPromoModal from "./Modal" +import { IProductDetail } from '~/types/product'; type Props = { productId: number; + product: IProductDetail } -const ProductPromoSection = ({ productId }: Props) => { +const ProductPromoSection = ({product, productId }: Props) => { const promotionsQuery = useQuery({ queryKey: [`promotions.highlight`, productId], queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] } @@ -23,7 +25,7 @@ const ProductPromoSection = ({ productId }: Props) => { const promotions = promotionsQuery.data const { openModal } = useModalStore() - + console.log("productId",productId) return ( 0) || false} @@ -50,7 +52,7 @@ const ProductPromoSection = ({ productId }: Props) => { > {promotions?.data.map((promotion) => (
- +
))} -- cgit v1.2.3 From 7dbca25dede6cf213831f45321f5c7a28b4a6122 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 1 Aug 2024 09:07:41 +0700 Subject: add parameter product --- src-migrate/modules/product-promo/components/Modal.tsx | 8 ++++++-- src-migrate/modules/product-promo/components/ModalContent.tsx | 9 ++++++--- src-migrate/modules/product-promo/components/Section.tsx | 2 +- src-migrate/modules/promo/components/PromoList.tsx | 4 ++-- 4 files changed, 15 insertions(+), 8 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-promo/components/Modal.tsx b/src-migrate/modules/product-promo/components/Modal.tsx index 0de672c2..1722b9df 100644 --- a/src-migrate/modules/product-promo/components/Modal.tsx +++ b/src-migrate/modules/product-promo/components/Modal.tsx @@ -3,8 +3,12 @@ import { Modal } from "~/components/ui/modal" import { useModalStore } from '../stores/useModalStore' import ProductPromoCategoryTab from './CategoryTab' import ProductPromoModalContent from './ModalContent' +import { IProductDetail } from '~/types/product'; -const ProductPromoModal = () => { +type Props = { + product: IProductDetail +} +const ProductPromoModal = ({product}:Props) => { const { active, closeModal } = useModalStore() return ( @@ -17,7 +21,7 @@ const ProductPromoModal = () => {
- + ) } diff --git a/src-migrate/modules/product-promo/components/ModalContent.tsx b/src-migrate/modules/product-promo/components/ModalContent.tsx index ab5129f8..44ad52d6 100644 --- a/src-migrate/modules/product-promo/components/ModalContent.tsx +++ b/src-migrate/modules/product-promo/components/ModalContent.tsx @@ -5,8 +5,11 @@ import { getVariantPromoByCategory } from "~/services/productVariant" import { useModalStore } from "../stores/useModalStore" import ProductPromoCard from "./Card" - -const ProductPromoModalContent = () => { +import { IProductDetail } from '~/types/product'; +type Props = { + product: IProductDetail +} +const ProductPromoModalContent = ({product}:Props) => { const { activeTab, variantId } = useModalStore() const promotionsQuery = useQuery( @@ -24,7 +27,7 @@ const ProductPromoModalContent = () => {
{promotions?.data.map((promo) => ( - + ))} {promotions?.data.length === 0 && (
Belum ada promo pada kategori ini
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index ff565539..05b849c7 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -32,7 +32,7 @@ const ProductPromoSection = ({product, productId }: Props) => { height='450px' duration='700ms' > - + {promotions?.data && promotions?.data.length > 0 && (
diff --git a/src-migrate/modules/promo/components/PromoList.tsx b/src-migrate/modules/promo/components/PromoList.tsx index 42725034..4d0db3c2 100644 --- a/src-migrate/modules/promo/components/PromoList.tsx +++ b/src-migrate/modules/promo/components/PromoList.tsx @@ -114,7 +114,7 @@ const PromoList: React.FC = ({ selectedPromo }) => { {promoData?.map((promotion: IPromotion) => (
- +
))} @@ -122,7 +122,7 @@ const PromoList: React.FC = ({ selectedPromo }) => { )} {isMobile && (promoData?.map((promotion: IPromotion) => (
- +
)))} -- cgit v1.2.3 From 285e91d4b63ca8dbd0a9f55e9c7db8b833749c0a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 1 Aug 2024 13:28:41 +0700 Subject: update popup cart --- .../modules/product-detail/components/AddToCart.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx index b2fed55d..42586032 100644 --- a/src-migrate/modules/product-detail/components/AddToCart.tsx +++ b/src-migrate/modules/product-detail/components/AddToCart.tsx @@ -10,6 +10,7 @@ import LazyLoad from 'react-lazy-load'; import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar'; import { IProductDetail } from '~/types/product'; import ImageNext from 'next/image'; +import { useProductCartContext } from '@/contexts/ProductCartContext' type Props = { variantId: number | null, @@ -31,7 +32,9 @@ const AddToCart = ({ isClosable: true }) const [product, setProducts] = useState(products); - + const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } = + useProductCartContext() + const productSimilarQuery = [ product?.name, `fq=-product_id_i:${product.id}`, @@ -53,7 +56,7 @@ const AddToCart = ({ typeof auth !== 'object' ) return; setAddCartAlert(true); - + setRefreshCart(true) toast.promise( upsertUserCart({ userId: auth.id, @@ -100,10 +103,11 @@ const AddToCart = ({ active={addCartAlert} close={() => { setAddCartAlert(false); - setTimeout(() => { - window.location.reload(); - }, 1500); - }} + // setTimeout(() => { + // window.location.reload(); + // }, 1500); + } + } >
-- cgit v1.2.3 From 42829a0907590139ecf4328a7a9ff9f6504a9113 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 1 Aug 2024 13:40:57 +0700 Subject: update pop up cart --- src-migrate/modules/product-detail/components/AddToCart.tsx | 5 +---- src-migrate/modules/product-promo/components/AddToCart.tsx | 12 ++++-------- 2 files changed, 5 insertions(+), 12 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx index 42586032..644d5b90 100644 --- a/src-migrate/modules/product-detail/components/AddToCart.tsx +++ b/src-migrate/modules/product-detail/components/AddToCart.tsx @@ -56,7 +56,7 @@ const AddToCart = ({ typeof auth !== 'object' ) return; setAddCartAlert(true); - setRefreshCart(true) + setRefreshCart(true); toast.promise( upsertUserCart({ userId: auth.id, @@ -103,9 +103,6 @@ const AddToCart = ({ active={addCartAlert} close={() => { setAddCartAlert(false); - // setTimeout(() => { - // window.location.reload(); - // }, 1500); } } > diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx index 488f3f98..aae5cfc0 100644 --- a/src-migrate/modules/product-promo/components/AddToCart.tsx +++ b/src-migrate/modules/product-promo/components/AddToCart.tsx @@ -15,6 +15,7 @@ import Link from 'next/link' import LazyLoad from 'react-lazy-load' import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar'; import { IProductDetail } from '~/types/product'; +import { useProductCartContext } from '@/contexts/ProductCartContext' type Props = { promotion: IPromotion @@ -24,13 +25,13 @@ type Props = { type Status = 'idle' | 'loading' | 'success' const ProductPromoAddToCart = ({product, promotion }: Props) => { - console.log("promotion",promotion) const auth = getAuth() const toast = useToast() const router = useRouter() const [status, setStatus] = useState('idle') - + const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } = + useProductCartContext() const productSimilarQuery = [ promotion?.name, `fq=-product_id_i:${promotion.products[0].product_id}`, @@ -58,6 +59,7 @@ const ProductPromoAddToCart = ({product, promotion }: Props) => { }) setStatus('idle') setAddCartAlert(true); + setRefreshCart(true); toast({ title: 'Tambah ke keranjang', description: 'Berhasil menambahkan barang ke keranjang belanja', @@ -66,9 +68,6 @@ const ProductPromoAddToCart = ({product, promotion }: Props) => { isClosable: true, position: 'top', }) - // setTimeout(() => { - // window.location.reload(); - // }, 1500); } useEffect(() => { @@ -116,9 +115,6 @@ const ProductPromoAddToCart = ({product, promotion }: Props) => { active={addCartAlert} close={() => { setAddCartAlert(false); - setTimeout(() => { - window.location.reload(); - }, 1500); }} >
-- cgit v1.2.3 From 3542d65853072df17355f47a6abc3622375807ab Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 1 Aug 2024 17:10:17 +0700 Subject: update setRefresh cart --- src-migrate/modules/product-detail/components/AddToCart.tsx | 2 +- src-migrate/modules/product-promo/components/AddToCart.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx index 644d5b90..0ac8229e 100644 --- a/src-migrate/modules/product-detail/components/AddToCart.tsx +++ b/src-migrate/modules/product-detail/components/AddToCart.tsx @@ -55,8 +55,8 @@ const AddToCart = ({ isNaN(quantity) || typeof auth !== 'object' ) return; - setAddCartAlert(true); setRefreshCart(true); + setAddCartAlert(true); toast.promise( upsertUserCart({ userId: auth.id, diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx index aae5cfc0..f066a4c8 100644 --- a/src-migrate/modules/product-promo/components/AddToCart.tsx +++ b/src-migrate/modules/product-promo/components/AddToCart.tsx @@ -58,8 +58,8 @@ const ProductPromoAddToCart = ({product, promotion }: Props) => { qtyAppend: true }) setStatus('idle') - setAddCartAlert(true); setRefreshCart(true); + setAddCartAlert(true); toast({ title: 'Tambah ke keranjang', description: 'Berhasil menambahkan barang ke keranjang belanja', -- cgit v1.2.3 From f86b2adc680a9c6fa0ac92c84bf6d14e2f866d9a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 2 Aug 2024 14:48:51 +0700 Subject: update popup cart --- .../product-detail/components/AddToCart.tsx | 79 ++++++++++++++++++++-- .../product-detail/components/PriceAction.tsx | 2 + .../product-detail/components/ProductDetail.tsx | 2 +- .../modules/product-promo/components/AddToCart.tsx | 61 ++++++++++++++++- .../modules/product-promo/components/Card.tsx | 10 +-- .../modules/product-promo/components/Modal.tsx | 8 ++- .../product-promo/components/ModalContent.tsx | 8 ++- .../modules/product-promo/components/Section.tsx | 8 ++- src-migrate/modules/promo/components/PromoList.tsx | 4 +- 9 files changed, 157 insertions(+), 25 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx index 097db98a..320b7234 100644 --- a/src-migrate/modules/product-detail/components/AddToCart.tsx +++ b/src-migrate/modules/product-detail/components/AddToCart.tsx @@ -1,19 +1,28 @@ -import { Button, useToast } from '@chakra-ui/react' +import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import { Button, Link, useToast } from '@chakra-ui/react' +import product from 'next-seo/lib/jsonld/product' import { useRouter } from 'next/router' - +import { useState } from 'react' +import Image from '~/components/ui/image' import { getAuth } from '~/libs/auth' import { upsertUserCart } from '~/services/cart' - +import LazyLoad from 'react-lazy-load'; +import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar'; +import { IProductDetail } from '~/types/product'; +import ImageNext from 'next/image'; +import { useProductCartContext } from '@/contexts/ProductCartContext' type Props = { variantId: number | null, quantity?: number; source?: 'buy' | 'add_to_cart'; + products : IProductDetail } const AddToCart = ({ variantId, quantity = 1, - source = 'add_to_cart' + source = 'add_to_cart', + products }: Props) => { const auth = getAuth() const router = useRouter() @@ -22,6 +31,18 @@ const AddToCart = ({ isClosable: true }) + const [product, setProducts] = useState(products); + + const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } = + useProductCartContext() + + const productSimilarQuery = [ + product?.name, + `fq=-product_id_i:${product.id}`, + `fq=-manufacture_id_i:${product.manufacture?.id || 0}`, + ].join('&'); + const [addCartAlert, setAddCartAlert] = useState(false); + const handleClick = async () => { if (typeof auth !== 'object') { const currentUrl = encodeURIComponent(router.asPath) @@ -35,6 +56,9 @@ const AddToCart = ({ typeof auth !== 'object' ) return; + setRefreshCart(true); + setAddCartAlert(true); + toast.promise( upsertUserCart({ userId: auth.id, @@ -69,9 +93,50 @@ const AddToCart = ({ } return ( - +
+ + { + setAddCartAlert(false); + }} + > +
+
+ +
+
+ {product.name} +
+
+ + Lihat Keranjang + +
+
+
+
+ Kamu Mungkin Juga Suka +
+ + + +
+ +
) } diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx index 81271f6e..9021264e 100644 --- a/src-migrate/modules/product-detail/components/PriceAction.tsx +++ b/src-migrate/modules/product-detail/components/PriceAction.tsx @@ -97,12 +97,14 @@ const PriceAction = ({ product }: Props) => { className={style['quantity-input']} /> {!isApproval && ( diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index fad35a7d..e4555913 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -129,7 +129,7 @@ const ProductDetail = ({ product }: Props) => { )}
- {!!activeVariantId && !isApproval && } + {!!activeVariantId && !isApproval && }

diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx index 87017c14..10904f90 100644 --- a/src-migrate/modules/product-promo/components/AddToCart.tsx +++ b/src-migrate/modules/product-promo/components/AddToCart.tsx @@ -9,19 +9,34 @@ import { IPromotion } from '~/types/promotion' import DesktopView from '../../../../src/core/components/views/DesktopView'; import MobileView from '../../../../src/core/components/views/MobileView'; - +import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import ImageNext from 'next/image'; +import Link from 'next/link' +import LazyLoad from 'react-lazy-load' +import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar'; +import { IProductDetail } from '~/types/product'; +import { useProductCartContext } from '@/contexts/ProductCartContext' type Props = { promotion: IPromotion + product: IProductDetail } type Status = 'idle' | 'loading' | 'success' -const ProductPromoAddToCart = ({ promotion }: Props) => { +const ProductPromoAddToCart = ({product, promotion }: Props) => { const auth = getAuth() const toast = useToast() const router = useRouter() const [status, setStatus] = useState('idle') + const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } = + useProductCartContext() + + const productSimilarQuery = [ + promotion?.name, + `fq=-product_id_i:${promotion.products[0].product_id}`, + ].join('&'); + const [addCartAlert, setAddCartAlert] = useState(false); const handleButton = async () => { if (typeof auth !== 'object') { @@ -42,7 +57,8 @@ const ProductPromoAddToCart = ({ promotion }: Props) => { qtyAppend: true }) setStatus('idle') - + setRefreshCart(true); + setAddCartAlert(true); toast({ title: 'Tambah ke keranjang', description: 'Berhasil menambahkan barang ke keranjang belanja', @@ -92,6 +108,45 @@ const ProductPromoAddToCart = ({ promotion }: Props) => { {status === 'success' && Berhasil} {status !== 'success' && Keranjang} + { + setAddCartAlert(false); + }} + > +
+
+ +
+
+ {product.name} +
+
+ + Lihat Keranjang + +
+
+
+
+ Kamu Mungkin Juga Suka +
+ + + +
+

) diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx index 728d23ca..5c323276 100644 --- a/src-migrate/modules/product-promo/components/Card.tsx +++ b/src-migrate/modules/product-promo/components/Card.tsx @@ -15,16 +15,16 @@ import clsxm from '~/libs/clsxm' import ProductPromoItem from './Item' import ProductPromoAddToCart from "./AddToCart" import ProductPromoCardCountdown from "./CardCountdown" - +import { IProductDetail } from '~/types/product'; import MobileView from '../../../../src/core/components/views/MobileView'; import DesktopView from '../../../../src/core/components/views/DesktopView'; type Props = { promotion: IPromotion - + product: IProductDetail } -const ProductPromoCard = ({ promotion}: Props) => { +const ProductPromoCard = ({product, promotion}: Props) => { const [products, setProducts] = useState([]) const [freeProducts, setFreeProducts] = useState([]) const [error, setError] = useState(null) @@ -132,7 +132,7 @@ const ProductPromoCard = ({ promotion}: Props) => {
- +
@@ -189,7 +189,7 @@ const ProductPromoCard = ({ promotion}: Props) => {
- +
diff --git a/src-migrate/modules/product-promo/components/Modal.tsx b/src-migrate/modules/product-promo/components/Modal.tsx index 0de672c2..1722b9df 100644 --- a/src-migrate/modules/product-promo/components/Modal.tsx +++ b/src-migrate/modules/product-promo/components/Modal.tsx @@ -3,8 +3,12 @@ import { Modal } from "~/components/ui/modal" import { useModalStore } from '../stores/useModalStore' import ProductPromoCategoryTab from './CategoryTab' import ProductPromoModalContent from './ModalContent' +import { IProductDetail } from '~/types/product'; -const ProductPromoModal = () => { +type Props = { + product: IProductDetail +} +const ProductPromoModal = ({product}:Props) => { const { active, closeModal } = useModalStore() return ( @@ -17,7 +21,7 @@ const ProductPromoModal = () => {
- + ) } diff --git a/src-migrate/modules/product-promo/components/ModalContent.tsx b/src-migrate/modules/product-promo/components/ModalContent.tsx index ab5129f8..256ef61a 100644 --- a/src-migrate/modules/product-promo/components/ModalContent.tsx +++ b/src-migrate/modules/product-promo/components/ModalContent.tsx @@ -6,7 +6,11 @@ import { getVariantPromoByCategory } from "~/services/productVariant" import { useModalStore } from "../stores/useModalStore" import ProductPromoCard from "./Card" -const ProductPromoModalContent = () => { +import { IProductDetail } from '~/types/product'; +type Props = { + product: IProductDetail +} +const ProductPromoModalContent = ({product}:Props) => { const { activeTab, variantId } = useModalStore() const promotionsQuery = useQuery( @@ -24,7 +28,7 @@ const ProductPromoModalContent = () => {
{promotions?.data.map((promo) => ( - + ))} {promotions?.data.length === 0 && (
Belum ada promo pada kategori ini
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index 4e8a7dd5..2c94c2bb 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -9,12 +9,14 @@ import { IPromotion } from '~/types/promotion' import { useModalStore } from "../stores/useModalStore" import ProductPromoCard from './Card' import ProductPromoModal from "./Modal" +import { IProductDetail } from '~/types/product'; type Props = { productId: number; + product: IProductDetail; } -const ProductPromoSection = ({ productId }: Props) => { +const ProductPromoSection = ({ product, productId }: Props) => { const promotionsQuery = useQuery({ queryKey: [`promotions.highlight`, productId], queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] } @@ -30,7 +32,7 @@ const ProductPromoSection = ({ productId }: Props) => { height='450px' duration='700ms' > - + {promotions?.data && promotions?.data.length > 0 && (
@@ -50,7 +52,7 @@ const ProductPromoSection = ({ productId }: Props) => { > {promotions?.data.map((promotion) => (
- +
))} diff --git a/src-migrate/modules/promo/components/PromoList.tsx b/src-migrate/modules/promo/components/PromoList.tsx index 42725034..4d0db3c2 100644 --- a/src-migrate/modules/promo/components/PromoList.tsx +++ b/src-migrate/modules/promo/components/PromoList.tsx @@ -114,7 +114,7 @@ const PromoList: React.FC = ({ selectedPromo }) => { {promoData?.map((promotion: IPromotion) => (
- +
))} @@ -122,7 +122,7 @@ const PromoList: React.FC = ({ selectedPromo }) => { )} {isMobile && (promoData?.map((promotion: IPromotion) => (
- +
)))} -- cgit v1.2.3 From 0f4938c0f9ce12d60bac2eb012a98b818fcd5110 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 6 Aug 2024 08:59:31 +0700 Subject: update refresh cart --- src-migrate/modules/product-detail/components/AddToCart.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx index 6c9aedf8..c73d7b36 100644 --- a/src-migrate/modules/product-detail/components/AddToCart.tsx +++ b/src-migrate/modules/product-detail/components/AddToCart.tsx @@ -34,8 +34,7 @@ const AddToCart = ({ const [product, setProducts] = useState(products); - const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } = - useProductCartContext() + const {setRefreshCart} = useProductCartContext() const productSimilarQuery = [ product?.name, @@ -50,16 +49,17 @@ const AddToCart = ({ router.push(`/login?next=${currentUrl}`) return; } - + if ( !variantId || isNaN(quantity) || typeof auth !== 'object' ) return; - + setRefreshCart(true); + // console.log('Refresh cart triggered'); setAddCartAlert(true); - + toast.promise( upsertUserCart({ userId: auth.id, @@ -78,7 +78,7 @@ const AddToCart = ({ ) - + if (source === 'buy') { router.push('/shop/checkout?source=buy') } -- cgit v1.2.3 From 1ce47f63e967d32d8e6026c0f2e8da931d23fd4c Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 6 Aug 2024 10:21:43 +0700 Subject: update add to cart pop up --- .../product-detail/components/AddToCart.tsx | 59 +++++++++++++++++++++- .../modules/product-promo/components/AddToCart.tsx | 56 +++++++++++++++++++- 2 files changed, 111 insertions(+), 4 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx index c73d7b36..bebc793f 100644 --- a/src-migrate/modules/product-detail/components/AddToCart.tsx +++ b/src-migrate/modules/product-detail/components/AddToCart.tsx @@ -1,4 +1,5 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import style from '../styles/price-action.module.css'; import { Button, Link, useToast } from '@chakra-ui/react' import product from 'next-seo/lib/jsonld/product' import { useRouter } from 'next/router' @@ -11,6 +12,9 @@ import ProductSimilar from '../../../../src/lib/product/components/ProductSimila import { IProductDetail } from '~/types/product'; import ImageNext from 'next/image'; import { useProductCartContext } from '@/contexts/ProductCartContext' +import { createSlug } from '~/libs/slug' +import formatCurrency from '~/libs/formatCurrency' +import { useProductDetail } from '../stores/useProductDetail'; type Props = { variantId: number | null, @@ -32,6 +36,10 @@ const AddToCart = ({ isClosable: true }) + const { + askAdminUrl, + } = useProductDetail(); + const [product, setProducts] = useState(products); const {setRefreshCart} = useProductCartContext() @@ -118,8 +126,55 @@ const AddToCart = ({ height={80} />
-
- {product.name} +
+ {!!product.manufacture.name ? ( + + {product.manufacture.name} + + ) : '-'} +

+ {product.name} +

+

+ {product.code} +

+ {!!product.lowest_price && product.lowest_price.price > 0 && ( + <> +
+ {product.lowest_price.discount_percentage > 0 && ( + <> +
+ {Math.floor(product.lowest_price.discount_percentage)}% +
+
+ Rp {formatCurrency(product.lowest_price.price || 0)} +
+ + )} +
+ Rp {formatCurrency(product.lowest_price.price_discount || 0)} +
+
+ + )} + + {!!product.lowest_price && product.lowest_price.price === 0 && ( + + Hubungi kami untuk dapatkan harga terbaik,{' '} + + klik disini + + + )}
{ + const auth = getAuth() const toast = useToast() const router = useRouter() + const {askAdminUrl} = useProductDetail(); const [status, setStatus] = useState('idle') const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } = useProductCartContext() @@ -126,8 +131,55 @@ const ProductPromoAddToCart = ({product, promotion }: Props) => { height={80} />
-
- {product.name} +
+ {!!product.manufacture.name ? ( + + {product.manufacture.name} + + ) : '-'} +

+ {product.name} +

+

+ {product.code} +

+ {!!product.lowest_price && product.lowest_price.price > 0 && ( + <> +
+ {product.lowest_price.discount_percentage > 0 && ( + <> +
+ {Math.floor(product.lowest_price.discount_percentage)}% +
+
+ Rp {formatCurrency(product.lowest_price.price || 0)} +
+ + )} +
+ Rp {formatCurrency(product.lowest_price.price_discount || 0)} +
+
+ + )} + + {!!product.lowest_price && product.lowest_price.price === 0 && ( + + Hubungi kami untuk dapatkan harga terbaik,{' '} + + klik disini + + + )}
Date: Thu, 8 Aug 2024 11:37:58 +0700 Subject: update quotation pop up --- src-migrate/modules/product-detail/components/AddToCart.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx index bebc793f..2f87311f 100644 --- a/src-migrate/modules/product-detail/components/AddToCart.tsx +++ b/src-migrate/modules/product-detail/components/AddToCart.tsx @@ -65,7 +65,6 @@ const AddToCart = ({ ) return; setRefreshCart(true); - // console.log('Refresh cart triggered'); setAddCartAlert(true); toast.promise( -- cgit v1.2.3 From 079f8029445fdd243e267a4af7c7a4d5780afa24 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 8 Aug 2024 14:11:32 +0700 Subject: update pop up quotation & cart --- .../product-detail/components/AddToCart.tsx | 47 +++++++++++++--------- 1 file changed, 27 insertions(+), 20 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx index 2f87311f..a5284637 100644 --- a/src-migrate/modules/product-detail/components/AddToCart.tsx +++ b/src-migrate/modules/product-detail/components/AddToCart.tsx @@ -3,7 +3,7 @@ import style from '../styles/price-action.module.css'; import { Button, Link, useToast } from '@chakra-ui/react' import product from 'next-seo/lib/jsonld/product' import { useRouter } from 'next/router' -import { useState } from 'react' +import { useEffect, useState } from 'react' import Image from '~/components/ui/image' import { getAuth } from '~/libs/auth' import { upsertUserCart } from '~/services/cart' @@ -23,6 +23,8 @@ type Props = { products : IProductDetail } +type Status = 'idle' | 'loading' | 'success' + const AddToCart = ({ variantId, quantity = 1, @@ -41,8 +43,9 @@ const AddToCart = ({ } = useProductDetail(); const [product, setProducts] = useState(products); - - const {setRefreshCart} = useProductCartContext() + const [status, setStatus] = useState('idle') + const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } = + useProductCartContext() const productSimilarQuery = [ product?.name, @@ -51,7 +54,7 @@ const AddToCart = ({ ].join('&'); const [addCartAlert, setAddCartAlert] = useState(false); - const handleClick = async () => { + const handleButton = async () => { if (typeof auth !== 'object') { const currentUrl = encodeURIComponent(router.asPath) router.push(`/login?next=${currentUrl}`) @@ -63,33 +66,37 @@ const AddToCart = ({ isNaN(quantity) || typeof auth !== 'object' ) return; - - setRefreshCart(true); - setAddCartAlert(true); - - toast.promise( - upsertUserCart({ - userId: auth.id, + if (status === 'success') return + setStatus('loading') + await upsertUserCart({ + userId: auth.id, type: 'product', id: variantId, qty: quantity, selected: true, source: source, qtyAppend: true - }), - { - loading: { title: 'Menambahkan ke keranjang', description: 'Mohon tunggu...' }, - success: { title: 'Menambahkan ke keranjang', description: 'Berhasil menambahkan ke keranjang belanja' }, - error: { title: 'Menambahkan ke keranjang', description: 'Gagal menambahkan ke keranjang belanja' }, - } - ) - + }) + setStatus('idle') + setRefreshCart(true); + setAddCartAlert(true); + toast({ + title: 'Tambah ke keranjang', + description: 'Berhasil menambahkan barang ke keranjang belanja', + status: 'success', + duration: 3000, + isClosable: true, + position: 'top', + }) if (source === 'buy') { router.push('/shop/checkout?source=buy') } } + useEffect(() => { + if (status === 'success') setTimeout(() => { setStatus('idle') }, 3000) + }, [status]) const btnConfig = { 'add_to_cart': { @@ -104,7 +111,7 @@ const AddToCart = ({ return (
- Date: Thu, 8 Aug 2024 16:22:00 +0700 Subject: update link button --- src-migrate/modules/product-promo/components/AddToCart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx index 8567dad8..3d0955e3 100644 --- a/src-migrate/modules/product-promo/components/AddToCart.tsx +++ b/src-migrate/modules/product-promo/components/AddToCart.tsx @@ -132,7 +132,7 @@ const ProductPromoAddToCart = ({product, promotion }: Props) => { />
- {!!product.manufacture.name ? ( + {!!product?.manufacture?.name ? ( Date: Tue, 13 Aug 2024 14:39:08 +0700 Subject: add feature pickup service --- src-migrate/modules/cart/components/Item.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx index 47893498..44ec4fd5 100644 --- a/src-migrate/modules/cart/components/Item.tsx +++ b/src-migrate/modules/cart/components/Item.tsx @@ -17,11 +17,11 @@ import CartItemSelect from './ItemSelect' type Props = { item: CartItemProps editable?: boolean + selfPicking?: boolean pilihSemuaCart?: boolean } -const CartItem = ({ item, editable = true,}: Props) => { - +const CartItem = ({ item, editable = true, selfPicking}: Props) => { return (
{item.cart_type === 'promotion' && ( @@ -53,6 +53,7 @@ const CartItem = ({ item, editable = true,}: Props) => {
+ {/* disini */}
-- cgit v1.2.3 From a72f9273664715e9708523ca1a6a4554bd22c917 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 13 Aug 2024 15:37:29 +0700 Subject: update pickup service add field --- src-migrate/modules/cart/components/Item.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx index 44ec4fd5..25df62fe 100644 --- a/src-migrate/modules/cart/components/Item.tsx +++ b/src-migrate/modules/cart/components/Item.tsx @@ -54,6 +54,7 @@ const CartItem = ({ item, editable = true, selfPicking}: Props) => {
{/* disini */} + {/* {selfPicking && (item.is_in_bu) && (item.on_hand_qty > item.quantity)} */}
-- cgit v1.2.3 From 62704c101d17afb7f71389ef23d6183b2cd16dfa Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 14 Aug 2024 15:11:33 +0700 Subject: update self picking di product card --- src-migrate/modules/cart/components/Item.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx index 25df62fe..ce4c5bff 100644 --- a/src-migrate/modules/cart/components/Item.tsx +++ b/src-migrate/modules/cart/components/Item.tsx @@ -54,7 +54,11 @@ const CartItem = ({ item, editable = true, selfPicking}: Props) => {
{/* disini */} - {/* {selfPicking && (item.is_in_bu) && (item.on_hand_qty > item.quantity)} */} + {selfPicking && (item.is_in_bu) && (item.on_hand_qty > item.quantity) && ( +
+ Barang ini bisa di pickup maksimal pukul 16.00 +
+ )}
-- cgit v1.2.3 From 08e5b76ba58645929ddeda1830f85f3eaf43969e Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 14 Aug 2024 17:01:44 +0700 Subject: update pickup service logic --- src-migrate/modules/cart/components/Item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx index ce4c5bff..272fa622 100644 --- a/src-migrate/modules/cart/components/Item.tsx +++ b/src-migrate/modules/cart/components/Item.tsx @@ -54,7 +54,7 @@ const CartItem = ({ item, editable = true, selfPicking}: Props) => {
{/* disini */} - {selfPicking && (item.is_in_bu) && (item.on_hand_qty > item.quantity) && ( + {selfPicking && (item.is_in_bu) && (item.on_hand_qty >= item.quantity) && (
Barang ini bisa di pickup maksimal pukul 16.00
-- cgit v1.2.3 From ad82ceb618565eec7b1e955c8ba12243d26253f1 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 15 Aug 2024 11:27:35 +0700 Subject: update view --- src-migrate/modules/cart/components/Item.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx index 272fa622..a9b2d968 100644 --- a/src-migrate/modules/cart/components/Item.tsx +++ b/src-migrate/modules/cart/components/Item.tsx @@ -22,6 +22,8 @@ type Props = { } const CartItem = ({ item, editable = true, selfPicking}: Props) => { + console.log("item",item) + console.log("selfPicking",selfPicking) return (
{item.cart_type === 'promotion' && ( @@ -55,8 +57,8 @@ const CartItem = ({ item, editable = true, selfPicking}: Props) => {
{/* disini */} {selfPicking && (item.is_in_bu) && (item.on_hand_qty >= item.quantity) && ( -
- Barang ini bisa di pickup maksimal pukul 16.00 +
+ *Barang ini bisa di pickup maksimal pukul 16.00
)} -- cgit v1.2.3 From 33363a1a8dc7f4641b7b054dc72339bf53495102 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 15 Aug 2024 16:55:28 +0700 Subject: update pickup image on product card --- src-migrate/modules/cart/components/Item.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx index a9b2d968..a54d4648 100644 --- a/src-migrate/modules/cart/components/Item.tsx +++ b/src-migrate/modules/cart/components/Item.tsx @@ -22,8 +22,6 @@ type Props = { } const CartItem = ({ item, editable = true, selfPicking}: Props) => { - console.log("item",item) - console.log("selfPicking",selfPicking) return (
{item.cart_type === 'promotion' && ( -- cgit v1.2.3 From 00df44e6f25eaeabc56ebba8b4e9b1cb692928d7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 20 Aug 2024 10:27:32 +0700 Subject: add new register --- src-migrate/modules/register/components/Form.tsx | 89 ++++---- .../modules/register/components/FormBisnis.tsx | 230 +++++++++++++++++++++ .../register/components/RegistrasiBisnis.tsx | 105 ++++++++++ .../register/components/RegistrasiIndividu.tsx | 11 + src-migrate/modules/register/index.tsx | 126 ++++++++--- .../modules/register/stores/useRegisterStore.ts | 1 + 6 files changed, 481 insertions(+), 81 deletions(-) create mode 100644 src-migrate/modules/register/components/FormBisnis.tsx create mode 100644 src-migrate/modules/register/components/RegistrasiBisnis.tsx create mode 100644 src-migrate/modules/register/components/RegistrasiIndividu.tsx (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index b834f97a..7d18f4ee 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -9,7 +9,12 @@ import { useRouter } from "next/router"; import { UseToastOptions, useToast } from "@chakra-ui/react"; import Link from "next/link"; -const Form = () => { +interface FormProps { + type: string; + required: boolean; +} + +const Form: React.FC = ({ type, required }) => { const { form, isCheckedTNC, @@ -75,25 +80,9 @@ const Form = () => { return (
-
- - - -
- + {
- - - - - {!!errors.phone && {errors.phone}} -
- -
- + { {!!errors.email && {errors.email}}
- +
- + { {!!errors.password && {errors.password}}
- +
+ + + + + {!!errors.phone && {errors.phone}} +
+ + {type==='individu' && ( + <> + + + + + + + )} - - ) } diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx new file mode 100644 index 00000000..85e37875 --- /dev/null +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -0,0 +1,230 @@ +import { ChangeEvent, useMemo } from "react"; +import { useMutation } from "react-query"; +import { useRegisterStore } from "../stores/useRegisterStore"; +import { RegisterProps } from "~/types/auth"; +import { registerUser } from "~/services/auth"; +import { useRouter } from "next/router"; +import { UseToastOptions, useToast } from "@chakra-ui/react"; +import Link from "next/link"; +import getFileBase64 from '@/core/utils/getFileBase64' + +interface FormProps { + type: string; + required: boolean; +} + +const Form: React.FC = ({ type, required }) => { + const { + form, + isCheckedTNC, + isValidCaptcha, + errors, + updateForm, + validate, + } = useRegisterStore() + + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) + + const router = useRouter() + const toast = useToast() + + const handleInputChange = (event: ChangeEvent) => { + const { name, value } = event.target; + updateForm(name, value) + validate() + } + + const handleFileChange = async (event: ChangeEvent) => { + let fileBase64 = '' + const file = event.target.files?.[0]; + if (file) { + if (typeof file !== 'undefined') { + if (file.size > 5000000) { + // toast.error('Maksimal ukuran file adalah 5MB') + return + } + fileBase64 = await getFileBase64(file) + } + updateForm("document", fileBase64); // Menyimpan file ke dalam form state + validate(); + } + } + + const mutation = useMutation({ + mutationFn: (data: RegisterProps) => registerUser(data) + }) + + const handleSubmit = async (e: ChangeEvent) => { + e.preventDefault() + + const response = await mutation.mutateAsync(form) + + if (response?.register === true) { + const urlParams = new URLSearchParams({ + activation: 'otp', + email: form.email, + redirect: (router.query?.next || '/') as string + }) + router.push(`${router.route}?${urlParams}`) + } + + const toastProps: UseToastOptions = { + duration: 5000, + isClosable: true + } + + switch (response?.reason) { + case 'EMAIL_USED': + toast({ + ...toastProps, + title: 'Email sudah digunakan', + status: 'warning' + }) + break; + case 'NOT_ACTIVE': + const activationUrl = `${router.route}?activation=email` + toast({ + ...toastProps, + title: 'Akun belum aktif', + description: <>Akun sudah terdaftar namun belum aktif. Klik untuk aktivasi akun, + status: 'warning' + }) + break + } + } + + + return ( +
+
+ + + + + {!!errors.email && {errors.email}} +
+ +
+ +
+ + + +
+
+ +
+ +
+ +
+ Kategori: Industri Otomotif, Bengkel, Car Wash +
+ +
+ + + + + {!!errors.name && {errors.name}} +
+ +
+ + + + + {!!errors.phone && {errors.phone}} +
+ +
+ + + + + {/* {!!errors.document && {errors.document}} */} +
+ +
+ + + + + {/* {!!errors.document && {errors.document}} */} +
+ + +
+ ) +} + +export default Form \ No newline at end of file diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx new file mode 100644 index 00000000..217b4c79 --- /dev/null +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -0,0 +1,105 @@ +import { useState } from "react"; +import FormBisnis from "./FormBisnis"; +import Form from "./Form"; +import TermCondition from "./TermCondition"; +import FormCaptcha from "./FormCaptcha"; +import { Radio, RadioGroup, Stack, Divider } from '@chakra-ui/react' +import React from "react"; +import { + ChevronDownIcon, + ChevronRightIcon +} from '@heroicons/react/24/outline'; + +const RegistrasiBisnis = () => { + const [isPKP, setIsPKP] = useState(false); + const [isTerdaftar, setIsTerdaftar] = useState(false); + const [isIndividuRequired, setIsIndividuRequired] = useState(true); + const [isBisnisRequired, setIsBisnisRequired] = useState(true); + const [selectedValue, setSelectedValue] = useState('PKP'); + + const handleChange = (value: string) => { + setSelectedValue(value); + if (value === "PKP") { + setIsPKP(true); + setIsIndividuRequired(true); // Show and require Individu form + } else { + setIsPKP(false); + setIsIndividuRequired(false); // Hide and make optional the Individu form + } + }; + + const handleClick = () => { + setIsIndividuRequired(!isIndividuRequired) + }; + + const handleClickBisnis = () => { + setIsBisnisRequired(!isBisnisRequired) + }; + + return ( + <> +
+

Tipe Bisnis

+ + + PKP + Non-PKP + + +
+
+
+
+

Data Akun

+ {isIndividuRequired ? ( +
+ +
+ ) : ( + + )} +
+ {isIndividuRequired && ( +
+ +
+
+ )} +
+
+
+
+
+

Data Bisnis

+ {isBisnisRequired ? ( +
+ +
+ ) : ( + + )} +
+ {isBisnisRequired && ( +
+ +
+

Bisnis Terdaftar di Indoteknik?

+ + + Sudah Terdaftar + Belum Terdaftar + + +
+ +
+ )} +
+
+ + + + ); +}; + +export default RegistrasiBisnis; diff --git a/src-migrate/modules/register/components/RegistrasiIndividu.tsx b/src-migrate/modules/register/components/RegistrasiIndividu.tsx new file mode 100644 index 00000000..eff86124 --- /dev/null +++ b/src-migrate/modules/register/components/RegistrasiIndividu.tsx @@ -0,0 +1,11 @@ +import Form from "./Form"; +const RegistrasiIndividu = () => { + + return ( + <> + + + ); +}; + +export default RegistrasiIndividu; diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index 00931284..9b3f5509 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -1,43 +1,101 @@ -import PageContent from "~/modules/page-content" -import Form from "./components/Form" -import Link from "next/link" -import Image from "next/image" -import IndoteknikLogo from "~/images/logo.png" -import AccountActivation from "../account-activation" +import PageContent from "~/modules/page-content"; +import Form from "./components/Form"; +import RegistrasiIndividu from "./components/RegistrasiIndividu"; +import RegistrasiBisnis from "./components/RegistrasiBisnis"; +import FormBisnis from "./components/FormBisnis"; +import Link from "next/link"; +import Image from "next/image"; +import IndoteknikLogo from "~/images/logo.png"; +import AccountActivation from "../account-activation"; +import { useState } from "react"; const LOGO_WIDTH = 150; const LOGO_HEIGHT = LOGO_WIDTH / 3; const Register = () => { + const [isIndividuClicked, setIsIndividuClicked] = useState(true); + const [isBisnisClicked, setIsBisnisClicked] = useState(false); + + const handleIndividuClick = () => { + setIsIndividuClicked(true); + setIsBisnisClicked(false); + }; + + const handleBisnisClick = () => { + setIsIndividuClicked(false); + setIsBisnisClicked(true); + }; + return (
-
-
- - Logo Indoteknik - - -

- Daftar Akun Indoteknik -

-

- Buat akun sekarang lebih mudah dan terverifikasi -

- - - -
- Sudah punya akun Indoteknik?{' '} - - Masuk +
+
+
+ + Logo Indoteknik -
-
- Akun anda belum aktif?{' '} - - Aktivasi - +

+ Daftar Akun Indoteknik +

+

+ Buat akun sekarang lebih mudah dan terverifikasi +

+ + +
+
+

Individu

+
+
+

Bisnis

+
+
+
+ {isIndividuClicked && ( +
+ +
+ )} + {isBisnisClicked && ( +
+ +
+ )} +
+
+
+ Sudah punya akun Indoteknik?{" "} + + Masuk + +
+
+ Akun anda belum aktif?{" "} + + Aktivasi + +
+
@@ -48,7 +106,7 @@ const Register = () => {
- ) -} + ); +}; -export default Register \ No newline at end of file +export default Register; diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts index d8abf52b..1438ccc2 100644 --- a/src-migrate/modules/register/stores/useRegisterStore.ts +++ b/src-migrate/modules/register/stores/useRegisterStore.ts @@ -29,6 +29,7 @@ export const useRegisterStore = create((set, get) => ({ email: '', password: '', phone: '', + document: File, }, updateForm: (name, value) => set((state) => ({ form: { ...state.form, [name]: value } })), -- cgit v1.2.3 From cf0f7a934bcf256d1daeee98e9f66397fb64b1ee Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 20 Aug 2024 11:47:29 +0700 Subject: update new register --- .../modules/register/components/FormBisnis.tsx | 98 +++++++++++++++------- .../register/components/RegistrasiBisnis.tsx | 29 ++++++- src-migrate/modules/register/index.tsx | 4 +- 3 files changed, 96 insertions(+), 35 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 85e37875..6f94748b 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useMemo } from "react"; +import { ChangeEvent, useEffect, useMemo, useState } from "react"; import { useMutation } from "react-query"; import { useRegisterStore } from "../stores/useRegisterStore"; import { RegisterProps } from "~/types/auth"; @@ -7,12 +7,21 @@ import { useRouter } from "next/router"; import { UseToastOptions, useToast } from "@chakra-ui/react"; import Link from "next/link"; import getFileBase64 from '@/core/utils/getFileBase64' +import { Controller, useForm } from 'react-hook-form' +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' +import odooApi from "~/libs/odooApi"; interface FormProps { type: string; required: boolean; } +interface Industry { + label: string; + value: string; + category: string; +} + const Form: React.FC = ({ type, required }) => { const { form, @@ -23,11 +32,42 @@ const Form: React.FC = ({ type, required }) => { validate, } = useRegisterStore() + const { control, watch, setValue } = useForm(); + const [selectedCategory, setSelectedCategory] = useState(''); + + const [industries, setIndustries] = useState([]); + const [companyTypes, setCompanyTypes] = useState([]) const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) const router = useRouter() const toast = useToast() + useEffect(() => { + const loadCompanyTypes = async () => { + const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type') + setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name }))) + } + loadCompanyTypes() + }, []) + + useEffect(() => { + const loadIndustries = async () => { + const dataIndustries = await odooApi('GET', '/api/v1/partner/industry') + setIndustries(dataIndustries?.map((o: { id: any; name: any; category:any; }) => ({ value: o.id, label: o.name, category:o.category }))) + } + loadIndustries() + }, []) + + const selectedIndustry = watch('industry'); + + useEffect(() => { + const selected = industries.find(industry => industry.value === selectedIndustry); + if (selected) { + setSelectedCategory(selected.category); + } + }, [selectedIndustry, industries]); + + const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; updateForm(name, value) @@ -93,7 +133,6 @@ const Form: React.FC = ({ type, required }) => { } } - return (
@@ -119,37 +158,36 @@ const Form: React.FC = ({ type, required }) => { Nama Bisnis (opsional)
- - - -
+
+ } + /> +
+ +
-
+
-
- -
- Kategori: Industri Otomotif, Bengkel, Car Wash + } + /> + Kategori : {selectedCategory}
@@ -216,13 +254,13 @@ const Form: React.FC = ({ type, required }) => { {/* {!!errors.document && {errors.document}} */}
- + */} ) } diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx index 217b4c79..c093d556 100644 --- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useMemo, useState } from "react"; import FormBisnis from "./FormBisnis"; import Form from "./Form"; import TermCondition from "./TermCondition"; @@ -9,6 +9,10 @@ import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'; +import { useRegisterStore } from "../stores/useRegisterStore"; +import { useMutation } from "react-query"; +import { RegisterProps } from "~/types/auth"; +import { registerUser } from "~/services/auth"; const RegistrasiBisnis = () => { const [isPKP, setIsPKP] = useState(false); @@ -16,6 +20,18 @@ const RegistrasiBisnis = () => { const [isIndividuRequired, setIsIndividuRequired] = useState(true); const [isBisnisRequired, setIsBisnisRequired] = useState(true); const [selectedValue, setSelectedValue] = useState('PKP'); + const { + form, + isCheckedTNC, + isValidCaptcha, + errors, + updateForm, + validate, + } = useRegisterStore() + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) + const mutation = useMutation({ + mutationFn: (data: RegisterProps) => registerUser(data) + }) const handleChange = (value: string) => { setSelectedValue(value); @@ -38,8 +54,8 @@ const RegistrasiBisnis = () => { return ( <> -
-

Tipe Bisnis

+
+

Tipe Bisnis

PKP @@ -98,6 +114,13 @@ const RegistrasiBisnis = () => {
+ ); }; diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index 9b3f5509..e89a6de3 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -45,14 +45,14 @@ const Register = () => {

Daftar Akun Indoteknik

-

+

Buat akun sekarang lebih mudah dan terverifikasi

-
+
Date: Tue, 20 Aug 2024 15:21:31 +0700 Subject: update new register --- .../modules/register/components/FormBisnis.tsx | 135 ++++++++++----------- .../register/components/RegistrasiBisnis.tsx | 25 +++- .../modules/register/stores/useRegisterStore.ts | 30 +++++ 3 files changed, 120 insertions(+), 70 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 6f94748b..72921c2b 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -22,41 +22,41 @@ interface Industry { category: string; } -const Form: React.FC = ({ type, required }) => { +const FormBisnis: React.FC = ({ type, required }) => { const { - form, + formBisnis, isCheckedTNC, isValidCaptcha, errors, - updateForm, - validate, + updateFormBisnis, + validateFormBisnis, } = useRegisterStore() const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); const [industries, setIndustries] = useState([]); - const [companyTypes, setCompanyTypes] = useState([]) - const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) + const [companyTypes, setCompanyTypes] = useState([]); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); - const router = useRouter() - const toast = useToast() + const router = useRouter(); + const toast = useToast(); useEffect(() => { const loadCompanyTypes = async () => { - const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type') - setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name }))) - } - loadCompanyTypes() - }, []) + const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type'); + setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name }))); + }; + loadCompanyTypes(); + }, []); useEffect(() => { const loadIndustries = async () => { - const dataIndustries = await odooApi('GET', '/api/v1/partner/industry') - setIndustries(dataIndustries?.map((o: { id: any; name: any; category:any; }) => ({ value: o.id, label: o.name, category:o.category }))) - } - loadIndustries() - }, []) + const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); + setIndustries(dataIndustries?.map((o: { id: any; name: any; category: any; }) => ({ value: o.id, label: o.name, category: o.category }))); + }; + loadIndustries(); + }, []); const selectedIndustry = watch('industry'); @@ -67,51 +67,50 @@ const Form: React.FC = ({ type, required }) => { } }, [selectedIndustry, industries]); - const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; - updateForm(name, value) - validate() - } + updateFormBisnis(name, value); + validateFormBisnis(); + }; const handleFileChange = async (event: ChangeEvent) => { - let fileBase64 = '' + let fileBase64 = ''; const file = event.target.files?.[0]; if (file) { if (typeof file !== 'undefined') { if (file.size > 5000000) { // toast.error('Maksimal ukuran file adalah 5MB') - return + return; } - fileBase64 = await getFileBase64(file) + fileBase64 = await getFileBase64(file); } - updateForm("document", fileBase64); // Menyimpan file ke dalam form state - validate(); + updateFormBisnis("document", fileBase64); // Menyimpan file ke dalam formBisnis state + validateFormBisnis(); } - } + }; const mutation = useMutation({ mutationFn: (data: RegisterProps) => registerUser(data) - }) + }); const handleSubmit = async (e: ChangeEvent) => { - e.preventDefault() + e.preventDefault(); - const response = await mutation.mutateAsync(form) + const response = await mutation.mutateAsync(formBisnis); if (response?.register === true) { const urlParams = new URLSearchParams({ activation: 'otp', - email: form.email, + email: formBisnis.email, redirect: (router.query?.next || '/') as string - }) - router.push(`${router.route}?${urlParams}`) + }); + router.push(`${router.route}?${urlParams}`); } const toastProps: UseToastOptions = { duration: 5000, isClosable: true - } + }; switch (response?.reason) { case 'EMAIL_USED': @@ -119,19 +118,19 @@ const Form: React.FC = ({ type, required }) => { ...toastProps, title: 'Email sudah digunakan', status: 'warning' - }) + }); break; case 'NOT_ACTIVE': - const activationUrl = `${router.route}?activation=email` + const activationUrl = `${router.route}?activation=email`; toast({ ...toastProps, title: 'Akun belum aktif', description: <>Akun sudah terdaftar namun belum aktif. Klik untuk aktivasi akun, status: 'warning' - }) - break + }); + break; } - } + }; return (
@@ -144,7 +143,7 @@ const Form: React.FC = ({ type, required }) => { name='email' className='form-input mt-3' placeholder='example@email.com' - value={form.email} + value={formBisnis.email} onChange={handleInputChange} autoComplete="username" aria-invalid={!!errors.email} @@ -158,36 +157,36 @@ const Form: React.FC = ({ type, required }) => { Nama Bisnis (opsional)
-
- } - /> -
- -
+
+ } + /> +
+ +
- } - /> - Kategori : {selectedCategory} + } + /> + Kategori : {selectedCategory}
@@ -199,7 +198,7 @@ const Form: React.FC = ({ type, required }) => { name='name' className='form-input mt-3' placeholder='Masukan nama lengkap anda' - value={form.name} + value={formBisnis.name} onChange={handleInputChange} aria-invalid={!!errors.name} /> @@ -216,7 +215,7 @@ const Form: React.FC = ({ type, required }) => { name='phone' className='form-input mt-3' placeholder='08xxxxxxxx' - value={form.phone} + value={formBisnis.phone} onChange={handleInputChange} aria-invalid={!!errors.phone} /> @@ -265,4 +264,4 @@ const Form: React.FC = ({ type, required }) => { ) } -export default Form \ No newline at end of file +export default FormBisnis; diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx index c093d556..2c429f2d 100644 --- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -20,8 +20,10 @@ const RegistrasiBisnis = () => { const [isIndividuRequired, setIsIndividuRequired] = useState(true); const [isBisnisRequired, setIsBisnisRequired] = useState(true); const [selectedValue, setSelectedValue] = useState('PKP'); + const [selectedValueBisnis, setSelectedValueBisnis] = useState('true'); const { form, + formBisnis, isCheckedTNC, isValidCaptcha, errors, @@ -44,6 +46,15 @@ const RegistrasiBisnis = () => { } }; + const handleChangeBisnis = (value: string) => { + setSelectedValueBisnis(value); + if (value === "true") { + setIsBisnisRequired(true); // Show and require Individu form + } else { + setIsBisnisRequired(false); // Hide and make optional the Individu form + } + }; + const handleClick = () => { setIsIndividuRequired(!isIndividuRequired) }; @@ -52,6 +63,15 @@ const RegistrasiBisnis = () => { setIsBisnisRequired(!isBisnisRequired) }; + const handleSubmit = () => { + console.log("form",form) + console.log("form Bisnis",formBisnis) + }; + console.log("isFormValid",isFormValid) + console.log("isCheckedTNC",isCheckedTNC) + console.log("mutation.isLoading",mutation.isLoading) + console.log("isValidCaptcha",isValidCaptcha) + return ( <>
@@ -100,7 +120,7 @@ const RegistrasiBisnis = () => {

Bisnis Terdaftar di Indoteknik?

- + Sudah Terdaftar Belum Terdaftar @@ -112,15 +132,16 @@ const RegistrasiBisnis = () => { )}
- + ); }; diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts index 1438ccc2..19a055ae 100644 --- a/src-migrate/modules/register/stores/useRegisterStore.ts +++ b/src-migrate/modules/register/stores/useRegisterStore.ts @@ -5,6 +5,7 @@ import { ZodError } from 'zod'; type State = { form: RegisterProps; + formBisnis: RegisterProps; errors: { [key in keyof RegisterProps]?: string; }; @@ -15,11 +16,13 @@ type State = { type Action = { updateForm: (name: string, value: string) => void; + updateFormBisnis: (name: string, value: string) => void; updateValidCaptcha: (value: boolean) => void; toggleCheckTNC: () => void; openTNC: () => void; closeTNC: () => void; validate: () => void; + validateFormBisnis: () => void; }; export const useRegisterStore = create((set, get) => ({ @@ -31,8 +34,19 @@ export const useRegisterStore = create((set, get) => ({ phone: '', document: File, }, + formBisnis: { + company: '', + name: '', + email: '', + password: '', + phone: '', + document: File, + }, updateForm: (name, value) => set((state) => ({ form: { ...state.form, [name]: value } })), + + updateFormBisnis: (name, value) => + set((state) => ({ formBisnis: { ...state.formBisnis, [name]: value } })), errors: {}, validate: () => { @@ -49,6 +63,22 @@ export const useRegisterStore = create((set, get) => ({ } } }, + + validateFormBisnis: () => { + try { + registerSchema.parse(get().formBisnis); + set({ errors: {} }); + } catch (error) { + if (error instanceof ZodError) { + const errors: State['errors'] = {}; + error.errors.forEach( + (e) => (errors[e.path[0] as keyof RegisterProps] = e.message) + ); + set({ errors }); + } + } + }, + isCheckedTNC: false, toggleCheckTNC: () => set((state) => ({ isCheckedTNC: !state.isCheckedTNC })), -- cgit v1.2.3 From 0427b70917d7623d5de1969b99e9c198c38ccca7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 20 Aug 2024 15:53:01 +0700 Subject: = ({ type, required }) => { {type==='individu' && ( <> - + {/* */}
+

+ - ); }; diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts index 19a055ae..5312bd6c 100644 --- a/src-migrate/modules/register/stores/useRegisterStore.ts +++ b/src-migrate/modules/register/stores/useRegisterStore.ts @@ -32,7 +32,12 @@ export const useRegisterStore = create((set, get) => ({ email: '', password: '', phone: '', - document: File, + document: '', + nameWajibPajak: '', + industry: '', + badanUsaha: '', + jenisUsaha: '', + npwp: '' }, formBisnis: { company: '', @@ -40,7 +45,12 @@ export const useRegisterStore = create((set, get) => ({ email: '', password: '', phone: '', - document: File, + document: '', + nameWajibPajak: '', + industry: '', + badanUsaha: '', + jenisUsaha: '', + npwp: '' }, updateForm: (name, value) => set((state) => ({ form: { ...state.form, [name]: value } })), -- cgit v1.2.3 From 2f106583f644e29019828a9e8ed82e23c7c67d0a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 21 Aug 2024 10:01:27 +0700 Subject: update view new register --- .../modules/register/components/FormBisnis.tsx | 21 ++++++----- .../register/components/RegistrasiBisnis.tsx | 44 ++++++++++++---------- .../modules/register/components/TermCondition.tsx | 2 +- src-migrate/modules/register/index.tsx | 2 +- .../modules/register/stores/useRegisterStore.ts | 2 + 5 files changed, 40 insertions(+), 31 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 72921c2b..7b301dc5 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -59,15 +59,16 @@ const FormBisnis: React.FC = ({ type, required }) => { }, []); const selectedIndustry = watch('industry'); - useEffect(() => { const selected = industries.find(industry => industry.value === selectedIndustry); + console.log("selected",selected) if (selected) { setSelectedCategory(selected.category); } }, [selectedIndustry, industries]); const handleInputChange = (event: ChangeEvent) => { + console.log("event",event) const { name, value } = event.target; updateFormBisnis(name, value); validateFormBisnis(); @@ -135,7 +136,7 @@ const FormBisnis: React.FC = ({ type, required }) => { return (
- + = ({ type, required }) => {
-