From 3f849355048e5c280a35a5747577e5296b90e9fd Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 25 Jan 2024 15:27:27 +0700 Subject: Add all promo page --- src-migrate/modules/promo/components/Voucher.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src-migrate/modules/promo/components/Voucher.tsx (limited to 'src-migrate/modules/promo/components/Voucher.tsx') diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx new file mode 100644 index 00000000..11742f9a --- /dev/null +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -0,0 +1,11 @@ +import style from '../styles/voucher.module.css' + +const Voucher = () => { + return ( + <> +
Pakai Voucher Belanja
+ + ) +} + +export default Voucher \ No newline at end of file -- cgit v1.2.3 From 8d8c43d90373aab6238773e291a48d65d55c52a2 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 17 Feb 2024 10:23:23 +0700 Subject: Add voucher section --- src-migrate/modules/promo/components/Voucher.tsx | 73 ++++++++++++++++++++++++ 1 file changed, 73 insertions(+) (limited to 'src-migrate/modules/promo/components/Voucher.tsx') diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index 11742f9a..0706f044 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -1,9 +1,82 @@ +import { useMemo } from 'react' +import { useQuery } from 'react-query' +import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react' +import { getVoucher } from '~/services/voucher' import style from '../styles/voucher.module.css' +import Image from 'next/image' +import { useToast } from '@chakra-ui/react' + +const swiperVoucher: SwiperProps = { + autoplay: { + delay: 6000, + disableOnInteraction: false + }, + loop: false, + className: 'h-[160px] w-full', + slidesPerView: 3, + spaceBetween: 16 +} const Voucher = () => { + const toast = useToast(); + const voucherQuery = useQuery({ + queryKey: ['voucher.all-voucher'], + queryFn: getVoucher + }) + + const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]); + + const copyText = (text: string) => { + navigator.clipboard.writeText(text) + toast({ + title: 'Salin ke papan klip', + description: 'Kode voucher berhasil disalin', + status: 'success', + duration: 3000, + isClosable: true, + position: 'bottom', + }) + } + return ( <>
Pakai Voucher Belanja
+ +
+ + {voucherQuery.isLoading && ( +
+ {Array.from({ length: 3 }).map((_, index) => ( +
+ ))} +
+ )} + {!voucherQuery.isLoading && ( +
+ + {vouchers.map((voucher) => ( + +
+ {voucher.name} + +
+
{voucher.name}
+
{voucher.description} Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis magni nobis sint aspernatur soluta deserunt excepturi delectus corporis libero, voluptate odit! Cupiditate, quibusdam ipsa saepe voluptas repudiandae eum quaerat suscipit.
+
+
+
Kode Promo
+
{voucher.code}
+
+ +
+
+
+ + ))} + +
+ )} + ) } -- cgit v1.2.3 From 040657403a01205b22e1028d8ebea971f5df9ac5 Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Tue, 4 Jun 2024 13:28:20 +0700 Subject: promo line --- src-migrate/modules/promo/components/Voucher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src-migrate/modules/promo/components/Voucher.tsx') diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index 0706f044..14d3c301 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -61,7 +61,7 @@ const Voucher = () => {
{voucher.name}
-
{voucher.description} Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis magni nobis sint aspernatur soluta deserunt excepturi delectus corporis libero, voluptate odit! Cupiditate, quibusdam ipsa saepe voluptas repudiandae eum quaerat suscipit.
+
{voucher.description}
Kode Promo
-- cgit v1.2.3 From 367bf6f382392774680abcf4a5ca4b4d03915650 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 8 Jul 2024 14:31:45 +0700 Subject: update mobile view --- src-migrate/modules/promo/components/Voucher.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) (limited to 'src-migrate/modules/promo/components/Voucher.tsx') diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index 14d3c301..397134e8 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -5,25 +5,27 @@ import { getVoucher } from '~/services/voucher' import style from '../styles/voucher.module.css' import Image from 'next/image' import { useToast } from '@chakra-ui/react' +import useDevice from '@/core/hooks/useDevice'; -const swiperVoucher: SwiperProps = { - autoplay: { - delay: 6000, - disableOnInteraction: false - }, - loop: false, - className: 'h-[160px] w-full', - slidesPerView: 3, - spaceBetween: 16 -} const Voucher = () => { + const { isMobile } = useDevice(); const toast = useToast(); const voucherQuery = useQuery({ queryKey: ['voucher.all-voucher'], queryFn: getVoucher }) - + + const swiperVoucher: SwiperProps = { + autoplay: { + delay: 6000, + disableOnInteraction: false + }, + loop: false, + className: 'h-[160px] w-full', + slidesPerView: isMobile ? 1.2 : 3, + spaceBetween: 16 + } const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]); const copyText = (text: string) => { -- cgit v1.2.3 From aedf523be9b0faf9cdd7a2231912a074fccdb262 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 8 Jul 2024 15:00:29 +0700 Subject: update salin voucher --- src-migrate/modules/promo/components/Voucher.tsx | 54 ++++++++++++++++++------ 1 file changed, 42 insertions(+), 12 deletions(-) (limited to 'src-migrate/modules/promo/components/Voucher.tsx') diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index 397134e8..c978dc7b 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -7,7 +7,6 @@ import Image from 'next/image' import { useToast } from '@chakra-ui/react' import useDevice from '@/core/hooks/useDevice'; - const Voucher = () => { const { isMobile } = useDevice(); const toast = useToast(); @@ -26,18 +25,50 @@ const Voucher = () => { slidesPerView: isMobile ? 1.2 : 3, spaceBetween: 16 } + const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]); const copyText = (text: string) => { - navigator.clipboard.writeText(text) - toast({ - title: 'Salin ke papan klip', - description: 'Kode voucher berhasil disalin', - status: 'success', - duration: 3000, - isClosable: true, - position: 'bottom', - }) + if (navigator.clipboard && navigator.clipboard.writeText) { + navigator.clipboard.writeText(text) + .then(() => { + toast({ + title: 'Salin ke papan klip', + description: 'Kode voucher berhasil disalin', + status: 'success', + duration: 3000, + isClosable: true, + position: 'bottom', + }) + }) + .catch(() => { + fallbackCopyTextToClipboard(text); + }); + } else { + fallbackCopyTextToClipboard(text); + } + } + + const fallbackCopyTextToClipboard = (text: string) => { + const textArea = document.createElement("textarea"); + textArea.value = text; + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + try { + document.execCommand('copy'); + toast({ + title: 'Salin ke papan klip', + description: 'Kode voucher berhasil disalin', + status: 'success', + duration: 3000, + isClosable: true, + position: 'bottom', + }) + } catch (err) { + console.error('Fallback: Oops, unable to copy', err); + } + document.body.removeChild(textArea); } return ( @@ -78,9 +109,8 @@ const Voucher = () => {
)} - ) } -export default Voucher \ No newline at end of file +export default Voucher -- cgit v1.2.3 From 6a9e4aaaf73677b3b0650e93560c6738781f76c2 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 8 Jul 2024 15:13:01 +0700 Subject: update button salin voucher --- src-migrate/modules/promo/components/Voucher.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/promo/components/Voucher.tsx') diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index c978dc7b..b5a25aa9 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -28,7 +28,8 @@ const Voucher = () => { const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]); - const copyText = (text: string) => { + const copyText = (text: string, event: React.MouseEvent) => { + event.preventDefault(); if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text) .then(() => { @@ -100,7 +101,7 @@ const Voucher = () => {
Kode Promo
{voucher.code}
- +
-- cgit v1.2.3 From 120804d474b12743fb7e6fe9a5a3b024e52707d7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 8 Jul 2024 15:16:34 +0700 Subject: update button salin voucher --- src-migrate/modules/promo/components/Voucher.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) (limited to 'src-migrate/modules/promo/components/Voucher.tsx') diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index b5a25aa9..9e28a583 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -28,8 +28,7 @@ const Voucher = () => { const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]); - const copyText = (text: string, event: React.MouseEvent) => { - event.preventDefault(); + const copyText = (text: string) => { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text) .then(() => { @@ -53,6 +52,17 @@ const Voucher = () => { const fallbackCopyTextToClipboard = (text: string) => { const textArea = document.createElement("textarea"); textArea.value = text; + // Tambahkan style untuk menyembunyikan textArea secara visual + textArea.style.position = 'fixed'; + textArea.style.top = '0'; + textArea.style.left = '0'; + textArea.style.width = '2em'; + textArea.style.height = '2em'; + textArea.style.padding = '0'; + textArea.style.border = 'none'; + textArea.style.outline = 'none'; + textArea.style.boxShadow = 'none'; + textArea.style.background = 'transparent'; document.body.appendChild(textArea); textArea.focus(); textArea.select(); @@ -101,7 +111,7 @@ const Voucher = () => {
Kode Promo
{voucher.code}
- + -- cgit v1.2.3 From 2fbf5023e0d29765458b3385f354b416d08c42c4 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 8 Jul 2024 15:32:34 +0700 Subject: update position toast --- src-migrate/modules/promo/components/Voucher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src-migrate/modules/promo/components/Voucher.tsx') diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index 9e28a583..89b08a01 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -38,7 +38,7 @@ const Voucher = () => { status: 'success', duration: 3000, isClosable: true, - position: 'bottom', + position: 'top', }) }) .catch(() => { -- cgit v1.2.3 From ffaf9994e8c47c5a32a2091b7d0949302528ee2e Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 8 Jul 2024 17:06:55 +0700 Subject: update button voucher --- src-migrate/modules/promo/components/Voucher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src-migrate/modules/promo/components/Voucher.tsx') diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index 89b08a01..64b6b935 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -74,7 +74,7 @@ const Voucher = () => { status: 'success', duration: 3000, isClosable: true, - position: 'bottom', + position: 'top', }) } catch (err) { console.error('Fallback: Oops, unable to copy', err); -- cgit v1.2.3 From 061400a92ef10ac5f9eb1ac05a7b97bd4b3a0cd5 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 11 Jul 2024 14:09:29 +0700 Subject: update voucher default & coucher by id --- src-migrate/modules/promo/components/Voucher.tsx | 67 ++++++++++++++++++------ 1 file changed, 50 insertions(+), 17 deletions(-) (limited to 'src-migrate/modules/promo/components/Voucher.tsx') diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index 64b6b935..729d957e 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -1,32 +1,65 @@ -import { useMemo } from 'react' -import { useQuery } from 'react-query' -import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react' -import { getVoucher } from '~/services/voucher' -import style from '../styles/voucher.module.css' -import Image from 'next/image' -import { useToast } from '@chakra-ui/react' +import { useMemo, useState, useEffect } from 'react'; +import { useQuery } from 'react-query'; +import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; +import { getVoucherAll } from '~/services/voucher'; +import style from '../styles/voucher.module.css'; +import Image from 'next/image'; +import { useToast } from '@chakra-ui/react'; import useDevice from '@/core/hooks/useDevice'; +import useAuth from '@/core/hooks/useAuth'; +import { getVoucher } from '../../../../src/lib/checkout/api/getVoucher'; -const Voucher = () => { +interface Auth { + id: string; +} +interface Voucher { + id: string; + image: string; + name: string; + description: string; + code: string; +} + +const VoucherComponent = () => { + const [listVouchers, setListVouchers] = useState(null); + const [loadingVoucher, setLoadingVoucher] = useState(true); const { isMobile } = useDevice(); + const auth = useAuth() as unknown as Auth; const toast = useToast(); + + useEffect(() => { + if (!listVouchers && auth?.id) { + (async () => { + try { + const dataVoucher = await getVoucher(auth.id); + setListVouchers(dataVoucher); + } finally { + setLoadingVoucher(false); + } + })(); + } + }, [auth?.id, listVouchers]); + const voucherQuery = useQuery({ queryKey: ['voucher.all-voucher'], - queryFn: getVoucher - }) - + queryFn: getVoucherAll, + }); + const swiperVoucher: SwiperProps = { autoplay: { delay: 6000, - disableOnInteraction: false + disableOnInteraction: false, }, loop: false, className: 'h-[160px] w-full', slidesPerView: isMobile ? 1.2 : 3, - spaceBetween: 16 - } + spaceBetween: 16, + }; - const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]); + const dataVouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]); + + const vouchers = auth?.id? listVouchers : dataVouchers; + const copyText = (text: string) => { if (navigator.clipboard && navigator.clipboard.writeText) { @@ -98,7 +131,7 @@ const Voucher = () => { {!voucherQuery.isLoading && (
- {vouchers.map((voucher) => ( + {vouchers?.map((voucher) => (
{voucher.name} @@ -124,4 +157,4 @@ const Voucher = () => { ) } -export default Voucher +export default VoucherComponent -- cgit v1.2.3 From ec726a8d106992b4e4a9fd79863b64ea2112a218 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 17 Jul 2024 16:49:26 +0700 Subject: update voucher --- src-migrate/modules/promo/components/Voucher.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/promo/components/Voucher.tsx') diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index 729d957e..e5877e51 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -52,8 +52,8 @@ const VoucherComponent = () => { }, loop: false, className: 'h-[160px] w-full', - slidesPerView: isMobile ? 1.2 : 3, - spaceBetween: 16, + slidesPerView: isMobile ? 1.2 : 3.2, + spaceBetween: 2, }; const dataVouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]); -- cgit v1.2.3