summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/brand/components/BrandCard.jsx2
-rw-r--r--src/lib/flashSale/components/FlashSale.jsx2
-rw-r--r--src/lib/form/components/KunjunganSales.jsx215
-rw-r--r--src/lib/form/components/KunjunganService.jsx361
-rw-r--r--src/lib/form/components/Merchant.jsx56
-rw-r--r--src/lib/form/components/RequestForQuotation.jsx215
-rw-r--r--src/lib/form/components/SuratDukungan.jsx33
-rw-r--r--src/lib/home/components/BannerSection.jsx1
-rw-r--r--src/lib/home/components/CategoryDynamic.jsx2
-rw-r--r--src/lib/home/components/CategoryDynamicMobile.jsx2
-rw-r--r--src/lib/home/components/PromotionProgram.jsx12
-rw-r--r--src/lib/home/components/ServiceList.jsx6
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx1
-rw-r--r--src/lib/product/components/Product/ProductMobile.jsx1
-rw-r--r--src/lib/product/components/ProductCard.jsx27
-rw-r--r--src/lib/product/components/ProductSlider.jsx2
16 files changed, 614 insertions, 324 deletions
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index ebd41a67..dff61b24 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -11,6 +11,7 @@ const BrandCard = ({ brand }) => {
className={`py-1 px-2 border-gray_r-6 flex justify-center items-center hover:scale-110 transition duration-500 ease-in-out ${
isMobile ? 'h-16' : 'h-24'
}`}
+ aria-label={brand.name}
>
{brand.logo && (
<NextImage
@@ -20,6 +21,7 @@ const BrandCard = ({ brand }) => {
height={500}
quality={85}
className='h-full w-[122px] object-contain object-center'
+ loading='eager'
/>
)}
{!brand.logo && (
diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
index 6d90cad7..f4be279e 100644
--- a/src/lib/flashSale/components/FlashSale.jsx
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -47,6 +47,7 @@ const FlashSale = () => {
width={1080}
height={192}
className='w-full rounded mb-4 hidden sm:block'
+ loading='eager'
/>
<Image
src={flashSale.bannerMobile}
@@ -54,6 +55,7 @@ const FlashSale = () => {
width={256}
height={48}
className='w-full rounded mb-4 block sm:hidden'
+ loading='eager'
/>
<FlashSaleProduct
flashSaleId={flashSale.pricelistId}
diff --git a/src/lib/form/components/KunjunganSales.jsx b/src/lib/form/components/KunjunganSales.jsx
index ffa8f135..3779b836 100644
--- a/src/lib/form/components/KunjunganSales.jsx
+++ b/src/lib/form/components/KunjunganSales.jsx
@@ -1,17 +1,18 @@
-import odooApi from '@/core/api/odooApi'
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
-import cityApi from '@/lib/address/api/cityApi'
-import { yupResolver } from '@hookform/resolvers/yup'
-import React, { useEffect, useRef, useState } from 'react'
-import ReCAPTCHA from 'react-google-recaptcha'
-import { Controller, useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
-import * as Yup from 'yup'
-import createLeadApi from '../api/createLeadApi'
-import PageContent from '@/lib/content/components/PageContent'
-
-import useAuth from '@/core/hooks/useAuth'
-import { useRouter } from 'next/router'
+import odooApi from '@/core/api/odooApi';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import cityApi from '@/lib/address/api/cityApi';
+import stateApi from '@/lib/address/api/stateApi.js';
+import { yupResolver } from '@hookform/resolvers/yup';
+import React, { useEffect, useRef, useState } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+import createLeadApi from '../api/createLeadApi';
+import PageContent from '@/lib/content/components/PageContent';
+
+import useAuth from '@/core/hooks/useAuth';
+import { useRouter } from 'next/router';
const KunjunganSales = () => {
const {
@@ -19,44 +20,72 @@ const KunjunganSales = () => {
handleSubmit,
formState: { errors },
control,
- reset
+ reset,
+ watch,
+ setValue,
} = useForm({
resolver: yupResolver(validationSchema),
- defaultValues
- })
- const [cities, setCities] = useState([])
- const [companyTypes, setCompanyTypes] = useState([])
- const router = useRouter()
+ defaultValues,
+ });
+ const [cities, setCities] = useState([]);
+ const [state, setState] = useState([]);
+ const [companyTypes, setCompanyTypes] = useState([]);
+ const router = useRouter();
+
+ const auth = useAuth();
- const auth = useAuth()
+ const recaptchaRef = useRef(null);
-
+ if (auth == false) {
+ router.push(`/login?next=${encodeURIComponent('/kunjungan-sales')}`);
+ }
+
+ useEffect(() => {
+ const loadState = async () => {
+ let dataState = await stateApi();
+ dataState = dataState.map((state) => ({
+ value: state.id,
+ label: state.name,
+ }));
+ setState(dataState);
+ };
+ loadState();
+ }, []);
- const recaptchaRef = useRef(null)
+ const watchState = watch('state');
useEffect(() => {
- if(auth == false) {
- router.push('/login')
+ if (auth == false) {
+ return;
}
const loadCities = async () => {
- let dataCities = await cityApi()
- dataCities = dataCities.map((obj) => ({ value: obj.name, label: obj.name }))
- setCities(dataCities)
- }
+ setValue('city', '');
+ let dataCities = await cityApi({ stateId: watchState });
+ dataCities = dataCities?.map((obj) => ({
+ value: obj.name,
+ label: obj.name,
+ }));
+ setCities(dataCities);
+ };
const loadCompanyTypes = async () => {
- const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type')
- setCompanyTypes(dataCompanyTypes?.map((obj) => ({ value: obj.name, label: obj.name })))
- }
+ const dataCompanyTypes = await odooApi(
+ 'GET',
+ '/api/v1/partner/company_type'
+ );
+ setCompanyTypes(
+ dataCompanyTypes?.map((obj) => ({ value: obj.name, label: obj.name }))
+ );
+ };
- loadCompanyTypes()
- loadCities()
- }, [auth])
+ loadCompanyTypes();
+ loadCities();
+ }, [auth, watchState, setValue]);
const onSubmitHandler = async (values) => {
- const recaptchaValue = recaptchaRef.current.getValue()
+ const recaptchaValue = recaptchaRef.current.getValue();
if (!recaptchaValue) {
- toast.error('Recaptcha harus diisi')
- return
+ toast.error('Recaptcha harus diisi');
+ return;
}
const data = {
@@ -71,29 +100,37 @@ const KunjunganSales = () => {
`Unit Perusahaan: ${values.companyType}`,
`No. Handphone: ${values.mobile}`,
`Alamat Email: ${values.email}`,
- `Keterangan: ${values.description}`
- ].join('\n')
- }
+ `Keterangan: ${values.description}`,
+ ].join('\n'),
+ };
- const createLead = await createLeadApi({ data })
+ const createLead = await createLeadApi({ data });
if (createLead) {
- toast.success('Berhasil mengirimkan formulir kunjungan sales')
- reset()
- recaptchaRef.current.reset()
+ toast.success('Berhasil mengirimkan formulir kunjungan sales');
+ reset();
+ recaptchaRef.current.reset();
}
+ };
+ if (!auth) {
+ return;
}
return (
<div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
- <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Kunjungan Sales</h1>
+ <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
+ Kunjungan Sales
+ </h1>
<div className='w-full grid grid-cols-1 md:grid-cols-2 gap-x-2'>
- <form onSubmit={handleSubmit(onSubmitHandler)} className='grid grid-cols-1 gap-y-6'>
+ <form
+ onSubmit={handleSubmit(onSubmitHandler)}
+ className='grid grid-cols-1 gap-y-6'
+ >
<div
className='flex items-center bg-blue-100 border border-blue-300 text-blue-500 font-medium px-4 py-3 rounded leading-6'
role='alert'
>
- Hubungi kami untuk mendapatkan kunjungan sales kami dan dapatkan berbagai kelebihannya
- dengan menjadi pelanggan korporat kami.
+ Hubungi kami untuk mendapatkan kunjungan sales kami dan dapatkan
+ berbagai kelebihannya dengan menjadi pelanggan korporat kami.
</div>
<div>
<label className='form-label mb-2'>Nama Perusahan*</label>
@@ -104,7 +141,9 @@ const KunjunganSales = () => {
className='form-input'
aria-invalid={errors.company?.message}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.company?.message}
+ </div>
</div>
<div>
@@ -116,7 +155,9 @@ const KunjunganSales = () => {
className='form-input'
aria-invalid={errors.phone?.message}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.phone?.message}
+ </div>
</div>
<div>
@@ -128,7 +169,21 @@ const KunjunganSales = () => {
className='form-input'
aria-invalid={errors.address?.message}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.address?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.address?.message}
+ </div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Provinsi*</label>
+ <Controller
+ name='state'
+ control={control}
+ render={(props) => <HookFormSelect {...props} options={state} />}
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.stateId?.message}
+ </div>
</div>
<div>
@@ -138,7 +193,9 @@ const KunjunganSales = () => {
control={control}
render={(props) => <HookFormSelect {...props} options={cities} />}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.city?.message}
+ </div>
</div>
<div>
@@ -146,9 +203,13 @@ const KunjunganSales = () => {
<Controller
name='companyType'
control={control}
- render={(props) => <HookFormSelect {...props} options={companyTypes} />}
+ render={(props) => (
+ <HookFormSelect {...props} options={companyTypes} />
+ )}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.companyType?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.companyType?.message}
+ </div>
</div>
<div>
@@ -160,7 +221,9 @@ const KunjunganSales = () => {
className='form-input'
aria-invalid={errors.mobile?.message}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.mobile?.message}
+ </div>
</div>
<div>
@@ -172,34 +235,49 @@ const KunjunganSales = () => {
className='form-input'
aria-invalid={errors.email?.message}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.email?.message}
+ </div>
</div>
<div>
<label className='form-label mb-2'>Keterangan</label>
- <textarea {...register('description')} type='text' className='form-input' />
+ <textarea
+ {...register('description')}
+ type='text'
+ className='form-input'
+ />
</div>
- <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
+ <ReCAPTCHA
+ ref={recaptchaRef}
+ sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+ />
- <button type='submit' className='btn-yellow w-full md:w-fit ml-0 md:ml-auto'>
+ <button
+ type='submit'
+ className='btn-yellow w-full md:w-fit ml-0 md:ml-auto'
+ >
Simpan
</button>
</form>
<PageContent path='/kunjungan-sales' />
</div>
</div>
- )
-}
+ );
+};
const validationSchema = Yup.object().shape({
- email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
+ email: Yup.string()
+ .email('Format harus seperti contoh@email.com')
+ .required('Harus di-isi'),
company: Yup.string().required('Harus di-isi'),
phone: Yup.string().required('Harus di-isi'),
mobile: Yup.string().required('Harus di-isi'),
address: Yup.string().required('Harus di-isi'),
- city: Yup.string().required('Harus dipilih')
-})
+ city: Yup.string().required('Harus dipilih'),
+ state: Yup.string().required('Harus dipilih'),
+});
const defaultValues = {
email: '',
@@ -208,8 +286,9 @@ const defaultValues = {
mobile: '',
address: '',
city: '',
+ state: '',
companyType: '',
- description: ''
-}
+ description: '',
+};
-export default KunjunganSales
+export default KunjunganSales;
diff --git a/src/lib/form/components/KunjunganService.jsx b/src/lib/form/components/KunjunganService.jsx
index 5720d14e..e3c83f78 100644
--- a/src/lib/form/components/KunjunganService.jsx
+++ b/src/lib/form/components/KunjunganService.jsx
@@ -1,16 +1,17 @@
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
-import cityApi from '@/lib/address/api/cityApi'
-import { yupResolver } from '@hookform/resolvers/yup'
-import React, { useEffect, useRef, useState } from 'react'
-import ReCAPTCHA from 'react-google-recaptcha'
-import { Controller, useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
-import * as Yup from 'yup'
-import createLeadApi from '../api/createLeadApi'
-import PageContent from '@/lib/content/components/PageContent'
-import { useRouter } from 'next/router'
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import cityApi from '@/lib/address/api/cityApi';
+import stateApi from '@/lib/address/api/stateApi.js';
+import { yupResolver } from '@hookform/resolvers/yup';
+import React, { useEffect, useRef, useState } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+import createLeadApi from '../api/createLeadApi';
+import PageContent from '@/lib/content/components/PageContent';
+import { useRouter } from 'next/router';
-import useAuth from '@/core/hooks/useAuth'
+import useAuth from '@/core/hooks/useAuth';
const CreateKunjunganService = () => {
const {
@@ -18,37 +19,61 @@ const CreateKunjunganService = () => {
handleSubmit,
formState: { errors },
control,
- reset
+ reset,
+ watch,
+ setValue,
} = useForm({
resolver: yupResolver(validationSchema),
- defaultValues
- })
- const [cities, setCities] = useState([])
- const [company_unit, setCompany_unit] = useState([])
-
- const router = useRouter()
+ defaultValues,
+ });
+ const [cities, setCities] = useState([]);
+ const [state, setState] = useState([]);
+ const [company_unit, setCompany_unit] = useState([]);
- const auth = useAuth()
+ const router = useRouter();
- const recaptchaRef = useRef(null)
+ const auth = useAuth();
+ if (auth == false) {
+ router.push(`/login?next=${encodeURIComponent('/kunjungan-service')}`);
+ }
+
+ const recaptchaRef = useRef(null);
+
+ useEffect(() => {
+ const loadState = async () => {
+ let dataState = await stateApi();
+ dataState = dataState.map((state) => ({
+ value: state.id,
+ label: state.name,
+ }));
+ setState(dataState);
+ };
+ loadState();
+ }, []);
+
+ const watchState = watch('state');
useEffect(() => {
- if(auth == false) {
- router.push('/login')
+ if (auth == false) {
+ return;
}
const loadCities = async () => {
- let dataCities = await cityApi()
- dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }))
- setCities(dataCities)
- }
- loadCities()
- }, [auth])
+ setValue('city', '');
+ let dataCities = await cityApi({ stateId: watchState });
+ dataCities = dataCities.map((city) => ({
+ value: city.id,
+ label: city.name,
+ }));
+ setCities(dataCities);
+ };
+ loadCities();
+ }, [auth, watchState, setValue]);
const onSubmitHandler = async (values) => {
- const recaptchaValue = recaptchaRef.current.getValue()
+ const recaptchaValue = recaptchaRef.current.getValue();
if (!recaptchaValue) {
- toast.error('Catcha harus diisi')
- return
+ toast.error('Catcha harus diisi');
+ return;
}
const data = {
...values,
@@ -70,164 +95,212 @@ const CreateKunjunganService = () => {
' \r\n Email : ' +
values.email +
' \r\n Keterangan : ' +
- values.description
- }
+ values.description,
+ };
- const create_leads = await createLeadApi({ data })
+ const create_leads = await createLeadApi({ data });
if (create_leads) {
- toast.success('Berhasil menambahkan alamat')
- reset()
- recaptchaRef.current.reset()
+ toast.success('Berhasil menambahkan alamat');
+ reset();
+ recaptchaRef.current.reset();
}
+ };
+ if (!auth) {
+ return;
}
return (
<div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
- <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Kunjungan Service</h1>
+ <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
+ Kunjungan Service
+ </h1>
<div className='w-full p-4 bg-white border border-gray_r-6 rounded'>
<div
className='flex items-center bg-blue-100 border border-blue-400 text-blue-500 font-bold px-4 py-3 mb-4'
role='alert'
>
<p>
- Tidak punya waktu untuk melakukan service atau perawatan rutin? Silahkan hubungi teknisi
- kami untuk melakukan kunjungan ke tempat Anda di Jabodetabek.
+ Tidak punya waktu untuk melakukan service atau perawatan rutin?
+ Silahkan hubungi teknisi kami untuk melakukan kunjungan ke tempat
+ Anda di Jabodetabek.
</p>
</div>
<div className='w-full grid grid-cols-2 gap-x-2'>
-
- <form onSubmit={handleSubmit(onSubmitHandler)}>
- <div className=''>
- <div>
- <label className='form-label mb-2'>Nama Perusahan *</label>
- <input
- {...register('company')}
- placeholder='PT.Indoteknik'
- type='text'
- className='form-input'
- />
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div>
+ <form onSubmit={handleSubmit(onSubmitHandler)}>
+ <div className=''>
+ <div>
+ <label className='form-label mb-2'>Nama Perusahan *</label>
+ <input
+ {...register('company')}
+ placeholder='PT.Indoteknik'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.company?.message}
+ </div>
+ </div>
</div>
- </div>
- <div className=''>
- <div>
- <label className='form-label mb-2'>No. Telp *</label>
- <input
- {...register('phone')}
- placeholder='021-XXXX'
- type='text'
- className='form-input'
- />
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
+ <div className=''>
+ <div>
+ <label className='form-label mb-2'>No. Telp *</label>
+ <input
+ {...register('phone')}
+ placeholder='021-XXXX'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.phone?.message}
+ </div>
+ </div>
</div>
- </div>
- <div className=''>
- <div>
- <label className='form-label mb-2'>Alamat*</label>
- <input
- {...register('address')}
- placeholder='jl. Bandengan no.31 '
- type='text'
- className='form-input'
- />
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.address?.message}</div>
+ <div className=''>
+ <div>
+ <label className='form-label mb-2'>Alamat*</label>
+ <input
+ {...register('address')}
+ placeholder='jl. Bandengan no.31 '
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.address?.message}
+ </div>
+ </div>
</div>
- </div>
- <div className=''>
<div>
- <label className='form-label mb-2'>Kota*</label>
+ <label className='form-label mb-2'>Provinsi*</label>
<Controller
- name='city'
+ name='state'
control={control}
- render={(props) => <HookFormSelect {...props} options={cities} />}
+ render={(props) => (
+ <HookFormSelect {...props} options={state} />
+ )}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.state?.message}
+ </div>
</div>
- </div>
- <div className=''>
- <div>
- <label className='form-label mb-2'>Contact Person*</label>
- <input
- {...register('cp')}
- placeholder='Jhone doe'
- type='text'
- className='form-input'
- />
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.cp?.message}</div>
+ <div className=''>
+ <div>
+ <label className='form-label mb-2'>Kota*</label>
+ <Controller
+ name='city'
+ control={control}
+ render={(props) => (
+ <HookFormSelect {...props} options={cities} />
+ )}
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.city?.message}
+ </div>
+ </div>
</div>
- </div>
- <div className=''>
- <div>
- <label className='form-label mb-2'>No HP *</label>
- <input
- {...register('mobile')}
- placeholder='628XXXXXXX'
- type='text'
- className='form-input'
- />
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
+ <div className=''>
+ <div>
+ <label className='form-label mb-2'>Contact Person*</label>
+ <input
+ {...register('cp')}
+ placeholder='Jhone doe'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.cp?.message}
+ </div>
+ </div>
</div>
- </div>
- <div className=''>
- <div>
- <label className='form-label mb-2'>Alamat Email *</label>
- <input
- {...register('email')}
- placeholder='contoh@email.com'
- type='email'
- className='form-input'
- />
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
+ <div className=''>
+ <div>
+ <label className='form-label mb-2'>No HP *</label>
+ <input
+ {...register('mobile')}
+ placeholder='628XXXXXXX'
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.mobile?.message}
+ </div>
+ </div>
</div>
- </div>
- <div className=''>
- <div>
- <label className='form-label mb-2'>
- Sebutkan: Merek, Tipe, Permasalahan, Service, Perawatan
- </label>
- <textarea {...register('description')} type='text' className='form-input' />
- <div className='text-caption-2 text-danger-500 mt-1'>
- {errors.description?.message}
+ <div className=''>
+ <div>
+ <label className='form-label mb-2'>Alamat Email *</label>
+ <input
+ {...register('email')}
+ placeholder='contoh@email.com'
+ type='email'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.email?.message}
+ </div>
</div>
</div>
- </div>
- <div className=''>
- <div>
- <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
+ <div className=''>
+ <div>
+ <label className='form-label mb-2'>
+ Sebutkan: Merek, Tipe, Permasalahan, Service, Perawatan
+ </label>
+ <textarea
+ {...register('description')}
+ type='text'
+ className='form-input'
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.description?.message}
+ </div>
+ </div>
</div>
- </div>
- <div className=''>
- <div>
- <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
- Simpan
- </button>
+ <div className=''>
+ <div>
+ <ReCAPTCHA
+ ref={recaptchaRef}
+ sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+ />
+ </div>
+ </div>
+ <div className=''>
+ <div>
+ <button
+ type='submit'
+ className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
+ >
+ Simpan
+ </button>
+ </div>
</div>
- </div>
- </form>
- <PageContent path='/kunjungan-service' />
+ </form>
+ <PageContent path='/kunjungan-service' />
</div>
</div>
</div>
- )
-}
+ );
+};
const validationSchema = Yup.object().shape({
company: Yup.string().required('Harus di-isi'),
- email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
+ email: Yup.string()
+ .email('Format harus seperti contoh@email.com')
+ .required('Harus di-isi'),
phone: Yup.string().required('Harus di-isi'),
city: Yup.string().required('Harus di-isi'),
+ state: Yup.string().required('Harus dipilih'),
cp: Yup.string().required('Harus di-isi'),
mobile: Yup.string().required('Harus di-isi'),
email: Yup.string().required('Harus di-isi'),
- address: Yup.string().required('Harus di-isi')
-})
+ address: Yup.string().required('Harus di-isi'),
+});
const defaultValues = {
company: '',
email: '',
phone: '',
city: '',
+ state: '',
cp: '',
mobile: '',
email: '',
- address: ''
-}
+ address: '',
+};
-export default CreateKunjunganService
+export default CreateKunjunganService;
diff --git a/src/lib/form/components/Merchant.jsx b/src/lib/form/components/Merchant.jsx
index 85f72bf8..ee7d177d 100644
--- a/src/lib/form/components/Merchant.jsx
+++ b/src/lib/form/components/Merchant.jsx
@@ -1,5 +1,6 @@
import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
import cityApi from '@/lib/address/api/cityApi';
+import stateApi from '@/lib/address/api/stateApi.js';
import { yupResolver } from '@hookform/resolvers/yup';
import React, { useEffect, useRef, useState } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
@@ -9,8 +10,7 @@ import * as Yup from 'yup';
import createLeadApi from '../api/createLeadApi';
import PageContent from '@/lib/content/components/PageContent';
import { useRouter } from 'next/router';
-import useAuth from '@/core/hooks/useAuth'
-
+import useAuth from '@/core/hooks/useAuth';
const CreateMerchant = () => {
const {
@@ -19,6 +19,8 @@ const CreateMerchant = () => {
formState: { errors },
control,
reset,
+ watch,
+ setValue,
} = useForm({
resolver: yupResolver(validationSchema),
defaultValues,
@@ -50,27 +52,45 @@ const CreateMerchant = () => {
},
];
const [cities, setCities] = useState([]);
+ const [state, setState] = useState([]);
const [company_unit, setCompany_unit] = useState(list_unit);
const recaptchaRef = useRef(null);
- const router = useRouter()
+ const router = useRouter();
+
+ const auth = useAuth();
+ if (auth == false) {
+ router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
+ }
- const auth = useAuth()
+ useEffect(() => {
+ const loadState = async () => {
+ let dataState = await stateApi();
+ dataState = dataState.map((state) => ({
+ value: state.id,
+ label: state.name,
+ }));
+ setState(dataState);
+ };
+ loadState();
+ }, []);
+ const watchState = watch('state');
useEffect(() => {
- if(auth == false) {
- router.push('/login')
+ if (auth == false) {
+ return;
}
const loadCities = async () => {
- let dataCities = await cityApi();
- dataCities = dataCities.map((city) => ({
+ setValue('city', '');
+ let dataCities = await cityApi({ stateId: watchState });
+ dataCities = dataCities?.map((city) => ({
value: city.id,
label: city.name,
}));
setCities(dataCities);
};
loadCities();
- }, [auth]);
+ }, [auth, watchState, setValue]);
const onSubmitHandler = async (values) => {
const recaptchaValue = recaptchaRef.current.getValue();
@@ -111,6 +131,9 @@ const CreateMerchant = () => {
recaptchaRef.current.reset();
}
};
+ if (!auth) {
+ return;
+ }
return (
<div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
<h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
@@ -172,6 +195,19 @@ const CreateMerchant = () => {
</div>
</div>
</div>
+ <div>
+ <label className='form-label mb-2'>Provinsi*</label>
+ <Controller
+ name='state'
+ control={control}
+ render={(props) => (
+ <HookFormSelect {...props} options={state} />
+ )}
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.state?.message}
+ </div>
+ </div>
<div className=''>
<div>
<label className='form-label mb-2'>Kota*</label>
@@ -290,6 +326,7 @@ const validationSchema = Yup.object().shape({
.required('Harus di-isi'),
phone: Yup.string().required('Harus di-isi'),
cp: Yup.string().required('Harus di-isi'),
+ state: Yup.string().required('Harus dipilih'),
city: Yup.string().required('Harus di-isi'),
company_unit: Yup.string().required('Harus di-isi'),
address: Yup.string().required('Harus di-isi'),
@@ -300,6 +337,7 @@ const defaultValues = {
company: '',
email: '',
phone: '',
+ state: '',
city: '',
company_unit: '',
cp: '',
diff --git a/src/lib/form/components/RequestForQuotation.jsx b/src/lib/form/components/RequestForQuotation.jsx
index 68b7fa17..170a5c62 100644
--- a/src/lib/form/components/RequestForQuotation.jsx
+++ b/src/lib/form/components/RequestForQuotation.jsx
@@ -1,18 +1,19 @@
-import odooApi from '@/core/api/odooApi'
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
-import cityApi from '@/lib/address/api/cityApi'
-import { yupResolver } from '@hookform/resolvers/yup'
-import React, { useEffect, useRef, useState } from 'react'
-import ReCAPTCHA from 'react-google-recaptcha'
-import { Controller, useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
-import * as Yup from 'yup'
-import createLeadApi from '../api/createLeadApi'
-import getFileBase64 from '@/core/utils/getFileBase64'
-import PageContent from '@/lib/content/components/PageContent'
-import { useRouter } from 'next/router'
-
-import useAuth from '@/core/hooks/useAuth'
+import odooApi from '@/core/api/odooApi';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import cityApi from '@/lib/address/api/cityApi';
+import stateApi from '@/lib/address/api/stateApi.js';
+import { yupResolver } from '@hookform/resolvers/yup';
+import React, { useEffect, useRef, useState } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+import createLeadApi from '../api/createLeadApi';
+import getFileBase64 from '@/core/utils/getFileBase64';
+import PageContent from '@/lib/content/components/PageContent';
+import { useRouter } from 'next/router';
+
+import useAuth from '@/core/hooks/useAuth';
const RequestForQuotation = () => {
const {
@@ -20,47 +21,69 @@ const RequestForQuotation = () => {
handleSubmit,
formState: { errors },
control,
- reset
+ reset,
+ watch,
+ setValue,
} = useForm({
resolver: yupResolver(validationSchema),
- defaultValues
- })
- const [cities, setCities] = useState([])
+ defaultValues,
+ });
+ const [cities, setCities] = useState([]);
+ const [state, setState] = useState([]);
- const quotationFileRef = useRef(null)
- const recaptchaRef = useRef(null)
- const router = useRouter()
+ const quotationFileRef = useRef(null);
+ const recaptchaRef = useRef(null);
+ const router = useRouter();
- const auth = useAuth()
+ const auth = useAuth();
+ if (auth == false) {
+ router.push(`/login?next=${encodeURIComponent('/request-for-quotation')}`);
+ }
+ useEffect(() => {
+ const loadState = async () => {
+ let dataState = await stateApi();
+ dataState = dataState.map((state) => ({
+ value: state.id,
+ label: state.name,
+ }));
+ setState(dataState);
+ };
+ loadState();
+ }, []);
+ const watchState = watch('state');
useEffect(() => {
- if(auth == false) {
- router.push('/login')
+ if (!auth) {
+ return;
}
const loadCities = async () => {
- let dataCities = await cityApi()
- dataCities = dataCities.map((obj) => ({ value: obj.name, label: obj.name }))
- setCities(dataCities)
- }
- loadCities()
- }, [auth])
+ setValue('city', '');
+ let dataCities = await cityApi({ stateId: watchState });
+ dataCities = dataCities?.map((obj) => ({
+ value: obj.name,
+ label: obj.name,
+ }));
+ setCities(dataCities);
+ };
+ loadCities();
+ }, [auth, watchState, setValue]);
const onSubmitHandler = async (values) => {
- const recaptchaValue = recaptchaRef.current.getValue()
+ const recaptchaValue = recaptchaRef.current.getValue();
if (!recaptchaValue) {
- toast.error('Recaptcha harus diisi')
- return
+ toast.error('Recaptcha harus diisi');
+ return;
}
- const file = quotationFileRef.current.files[0]
- let fileBase64 = null
+ const file = quotationFileRef.current.files[0];
+ let fileBase64 = null;
if (typeof file !== 'undefined') {
if (file.size > 5000000) {
- toast.error('Maksimal ukuran file adalah 5MB')
- return
+ toast.error('Maksimal ukuran file adalah 5MB');
+ return;
}
- fileBase64 = await getFileBase64(file)
+ fileBase64 = await getFileBase64(file);
}
const data = {
@@ -73,33 +96,42 @@ const RequestForQuotation = () => {
`Kota: ${values.city}`,
`No. Handphone: ${values.mobile}`,
`Alamat Email: ${values.email}`,
- `Keterangan: ${values.description}`
- ].join('\n')
- }
+ `Keterangan: ${values.description}`,
+ ].join('\n'),
+ };
- if (fileBase64) data.file_quotation = fileBase64
+ if (fileBase64) data.file_quotation = fileBase64;
- const createLead = await createLeadApi({ data })
+ const createLead = await createLeadApi({ data });
if (createLead) {
- toast.success('Berhasil mengirimkan formulir request for quotation')
- reset()
- recaptchaRef.current.reset()
+ toast.success('Berhasil mengirimkan formulir request for quotation');
+ reset();
+ recaptchaRef.current.reset();
}
+ };
+ if (!auth) {
+ return;
}
return (
<div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
- <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Request for Quotation</h1>
+ <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
+ Request for Quotation
+ </h1>
<div className='w-full grid grid-cols-1 md:grid-cols-2 gap-x-2'>
- <form onSubmit={handleSubmit(onSubmitHandler)} className='grid grid-cols-1 gap-y-6'>
+ <form
+ onSubmit={handleSubmit(onSubmitHandler)}
+ className='grid grid-cols-1 gap-y-6'
+ >
<div
className='flex items-center bg-blue-100 border border-blue-300 text-blue-500 font-medium px-4 py-3 rounded leading-6'
role='alert'
>
- Halaman untuk pengajuan penawaran harga, lengkapi data di bawah ini dengan jelas untuk
- mempermudah tim support kami melayani kebutuhan Anda. Tim kami akan sesegera mungkin
- untuk membuatkan penawaran harga terbaik, hubungi kami melalui telpon jika ada
- keterlambatan pelayanan.
+ Halaman untuk pengajuan penawaran harga, lengkapi data di bawah ini
+ dengan jelas untuk mempermudah tim support kami melayani kebutuhan
+ Anda. Tim kami akan sesegera mungkin untuk membuatkan penawaran
+ harga terbaik, hubungi kami melalui telpon jika ada keterlambatan
+ pelayanan.
</div>
<div>
<label className='form-label mb-2'>Nama Perusahan*</label>
@@ -110,7 +142,9 @@ const RequestForQuotation = () => {
className='form-input'
aria-invalid={errors.company?.message}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.company?.message}
+ </div>
</div>
<div>
@@ -122,7 +156,21 @@ const RequestForQuotation = () => {
className='form-input'
aria-invalid={errors.phone?.message}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.phone?.message}
+ </div>
+ </div>
+
+ <div>
+ <label className='form-label mb-2'>Provinsi*</label>
+ <Controller
+ name='state'
+ control={control}
+ render={(props) => <HookFormSelect {...props} options={state} />}
+ />
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.state?.message}
+ </div>
</div>
<div>
@@ -132,7 +180,9 @@ const RequestForQuotation = () => {
control={control}
render={(props) => <HookFormSelect {...props} options={cities} />}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.city?.message}
+ </div>
</div>
<div>
@@ -144,7 +194,9 @@ const RequestForQuotation = () => {
className='form-input'
aria-invalid={errors.contactPerson?.message}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.contactPerson?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.contactPerson?.message}
+ </div>
</div>
<div>
@@ -156,7 +208,9 @@ const RequestForQuotation = () => {
className='form-input'
aria-invalid={errors.mobile?.message}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.mobile?.message}
+ </div>
</div>
<div>
@@ -168,39 +222,59 @@ const RequestForQuotation = () => {
className='form-input'
aria-invalid={errors.email?.message}
/>
- <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
+ <div className='text-caption-2 text-danger-500 mt-1'>
+ {errors.email?.message}
+ </div>
</div>
<div>
<label className='form-label mb-2'>Keterangan</label>
- <textarea {...register('description')} type='text' className='form-input' />
+ <textarea
+ {...register('description')}
+ type='text'
+ className='form-input'
+ />
</div>
<div>
<label className='form-label mb-2'>File Daftar Produk</label>
- <input type="file" name="quotationFile" className='form-input' ref={quotationFileRef} />
+ <input
+ type='file'
+ name='quotationFile'
+ className='form-input'
+ ref={quotationFileRef}
+ />
</div>
- <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
+ <ReCAPTCHA
+ ref={recaptchaRef}
+ sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+ />
- <button type='submit' className='btn-yellow w-full md:w-fit ml-0 md:ml-auto'>
+ <button
+ type='submit'
+ className='btn-yellow w-full md:w-fit ml-0 md:ml-auto'
+ >
Simpan
</button>
</form>
<PageContent path='/request-for-quotation' />
</div>
</div>
- )
-}
+ );
+};
const validationSchema = Yup.object().shape({
- email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
+ email: Yup.string()
+ .email('Format harus seperti contoh@email.com')
+ .required('Harus di-isi'),
company: Yup.string().required('Harus di-isi'),
phone: Yup.string().required('Harus di-isi'),
mobile: Yup.string().required('Harus di-isi'),
city: Yup.string().required('Harus dipilih'),
+ state: Yup.string().required('Harus dipilih'),
contactPerson: Yup.string().required('Harus dipilih'),
-})
+});
const defaultValues = {
email: '',
@@ -209,7 +283,8 @@ const defaultValues = {
mobile: '',
address: '',
city: '',
- description: ''
-}
+ state: '',
+ description: '',
+};
-export default RequestForQuotation
+export default RequestForQuotation;
diff --git a/src/lib/form/components/SuratDukungan.jsx b/src/lib/form/components/SuratDukungan.jsx
index 31e7ee83..fadb2c57 100644
--- a/src/lib/form/components/SuratDukungan.jsx
+++ b/src/lib/form/components/SuratDukungan.jsx
@@ -1,5 +1,6 @@
import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
import cityApi from '@/lib/address/api/cityApi';
+import stateApi from '@/lib/address/api/stateApi.js';
import { yupResolver } from '@hookform/resolvers/yup';
import React, { useEffect, useRef, useState } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
@@ -10,7 +11,7 @@ import createLeadsApi from '../api/createLeadApi';
import PageContent from '@/lib/content/components/PageContent';
-import useAuth from '@/core/hooks/useAuth'
+import useAuth from '@/core/hooks/useAuth';
import { useRouter } from 'next/router';
const CreateSuratDukungan = () => {
@@ -20,32 +21,21 @@ const CreateSuratDukungan = () => {
formState: { errors },
control,
reset,
+ watch,
+ setValue,
} = useForm({
resolver: yupResolver(validationSchema),
defaultValues,
});
- const [cities, setCities] = useState([]);
const [company_unit, setCompany_unit] = useState([]);
const recaptchaRef = useRef(null);
- const router = useRouter()
+ const router = useRouter();
- const auth = useAuth()
-
- useEffect(() => {
- if(auth == false) {
- router.push('/login')
- }
- const loadCities = async () => {
- let dataCities = await cityApi();
- dataCities = dataCities.map((city) => ({
- value: city.id,
- label: city.name,
- }));
- setCities(dataCities);
- };
- loadCities();
- }, [auth]);
+ const auth = useAuth();
+ if (auth == false) {
+ router.push(`/login?next=${encodeURIComponent('/surat-dukungan')}`);
+ }
const onSubmitHandler = async (values) => {
const recaptchaValue = recaptchaRef.current.getValue();
@@ -85,6 +75,9 @@ const CreateSuratDukungan = () => {
recaptchaRef.current.reset();
}
};
+ if (!auth) {
+ return;
+ }
return (
<div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
<h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
@@ -241,7 +234,7 @@ const CreateSuratDukungan = () => {
</div>
</form>
</div>
- <PageContent path='/surat-dukungan'/>
+ <PageContent path='/surat-dukungan' />
</div>
</div>
</div>
diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx
index 303b5c4b..898f1bf5 100644
--- a/src/lib/home/components/BannerSection.jsx
+++ b/src/lib/home/components/BannerSection.jsx
@@ -51,6 +51,7 @@ const BannerSection = () => {
src={banner.image}
alt={banner.name}
className='h-auto w-full rounded'
+ loading='eager'
/>
</Link>
))}
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index d72fe1f1..b6994f60 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -85,6 +85,7 @@ const CategoryDynamic = () => {
width={90}
height={30}
className='object-fit p-4'
+ loading='eager'
/>
<div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
<h2 className='font-semibold text-lg mr-2'>
@@ -127,6 +128,7 @@ const CategoryDynamic = () => {
height={40}
placeholder='blur'
blurDataURL='/icon.jpg'
+ loading='eager'
/>
<div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
<h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
index 67ae6f5f..5d9e872c 100644
--- a/src/lib/home/components/CategoryDynamicMobile.jsx
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -90,6 +90,7 @@ const CategoryDynamicMobile = () => {
width={30}
height={30}
className=''
+ loading='eager'
/>
<div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
<h2 className='font-semibold text-[10px] line-clamp-1'>
@@ -123,6 +124,7 @@ const CategoryDynamicMobile = () => {
width={40}
height={40}
className='p-2'
+ loading='eager'
/>
<div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
<h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index fc23bf78..d8bf3edb 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -69,7 +69,8 @@ const BannerSection = () => {
quality={85}
src={banner.image}
alt={banner.name}
- className='h-auto w-full rounded hover:scale-105 transition duration-500 ease-in-out'
+ className='rounded hover:scale-105 transition duration-500 ease-in-out'
+ loading='eager'
/>
</Link>
))}
@@ -82,12 +83,13 @@ const BannerSection = () => {
<SwiperSlide key={banner.id}>
<Link key={banner.id} href={banner.url}>
<Image
- width={439}
- height={150}
- quality={85}
+ width={350}
+ height={100}
+ quality={70}
src={banner.image}
alt={banner.name}
- className='h-auto w-full rounded '
+ className='rounded '
+ loading='eager'
/>
</Link>
</SwiperSlide>
diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx
index b3cc8fe5..e32e8747 100644
--- a/src/lib/home/components/ServiceList.jsx
+++ b/src/lib/home/components/ServiceList.jsx
@@ -18,6 +18,7 @@ const ServiceList = () => {
src='/images/icon_service/ONE-STOP-SOLUTIONS.svg'
alt=''
className='h-20 w-20 rounded'
+ loading='eager'
/>
</div>
<div className=''>
@@ -43,6 +44,7 @@ const ServiceList = () => {
src='/images/icon_service/WARRANTY.svg'
alt=''
className='h-20 w-20 rounded'
+ loading='eager'
/>
</div>
<div>
@@ -57,7 +59,7 @@ const ServiceList = () => {
</div>
<div className='w-full '>
<Link
- href='/pembayaran-tempo'
+ href='/pembayaran-tempo-detail'
className='border border-gray-200 p-2 flex items-center gap-x-2 rounded-lg'
>
<div className=''>
@@ -68,6 +70,7 @@ const ServiceList = () => {
src='/images/icon_service/DUE-PAYMENT.svg'
alt=''
className='h-20 w-20 rounded'
+ loading='eager'
/>
</div>
<div>
@@ -93,6 +96,7 @@ const ServiceList = () => {
src='/images/icon_service/TAX.svg'
alt=''
className='h-20 w-20 rounded'
+ loading='eager'
/>
</div>
<div>
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 444ddd8e..19e76a2b 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -255,6 +255,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
>
<ImageNext
src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ alt='Flash Sale'
width={17}
height={10}
/>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 113a1e42..4cfd3755 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -219,6 +219,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
>
<ImageNext
src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ alt='Flash Sale'
width={17}
height={10}
/>
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 16e20703..a8ed90a4 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -21,7 +21,6 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
voucherPastiHemat = product?.newVoucherPastiHemat[0]
? product?.newVoucherPastiHemat[0]
: product?.newVoucherPastiHemat;
- console.log('voucherPastiHemat', voucherPastiHemat);
const callForPriceWhatsapp = whatsappUrl('product', {
name: product.name,
@@ -75,7 +74,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
if (variant == 'vertical') {
return (
<div className='rounded shadow-sm border border-gray_r-4 bg-white h-[330px] md:h-[380px]'>
- <Link href={URL.product} className='border-b border-gray_r-4 relative'>
+ <Link href={URL.product} className='border-b border-gray_r-4 relative' aria-label='Produk'>
<div className='relative'>
<Image
src={image}
@@ -91,6 +90,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
className='w-4 h-5 object-contain object-top sm:h-6'
width={50}
height={50}
+ loading='eager'
/>
)}
</div>
@@ -102,6 +102,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
className='w-11 h-6 object-contain object-top ml-1 mr-1 sm:h-6'
width={50}
height={50}
+ loading='eager'
/>
)}
</div>
@@ -116,6 +117,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
className='h-full'
width={1000}
height={100}
+ loading='eager'
/>
</div>
<div className='relative'>
@@ -128,8 +130,10 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
<div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
<ImageNext
src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ alt='flash sale'
width={13}
height={5}
+ loading='eager'
/>
<span className='text-white text-[9px] md:text-[10px] font-semibold'>
{product?.flashSale?.tag != 'false' ||
@@ -151,26 +155,28 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
<div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
<div className='flex justify-between '>
{product?.manufacture?.name ? (
- <Link href={URL.manufacture} className='mb-1 mt-1 truncate'>
+ <Link href={URL.manufacture} className='mb-1 mt-1 truncate' aria-label={product.manufacture.name}>
{product.manufacture.name}
</Link>
) : (
<div>-</div>
)}
{product?.isInBu && (
- <Link href='/panduan-pick-up-service' className='group'>
+ <Link href='/panduan-pick-up-service' className='group' aria-label='pickup now'>
<Image
src='/images/PICKUP-NOW.png'
className='group-hover:scale-105 transition-transform duration-200'
alt='pickup now'
width={90}
height={12}
+ loading='eager'
/>
</Link>
)}
</div>
<Link
href={URL.product}
+ aria-label={product?.name}
className={`mb-2 !text-gray_r-12 leading-6 block line-clamp-3 h-[64px]`}
title={product?.name}
>
@@ -195,6 +201,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
rel='noopener noreferrer'
target='_blank'
href={callForPriceWhatsapp}
+ aria-label='Call for Inquiry'
>
Call for Inquiry
</a>
@@ -218,6 +225,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
rel='noopener noreferrer'
target='_blank'
href={callForPriceWhatsapp}
+ aria-label='Call for Inquiry'
>
Call for Inquiry
</a>
@@ -252,7 +260,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
return (
<div className='flex bg-white'>
<div className='w-4/12'>
- <Link href={URL.product} className='relative'>
+ <Link href={URL.product} className='relative' aria-label={product?.name}>
<div className='relative'>
<Image
src={image}
@@ -268,6 +276,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
className='w-4 h-5 object-contain object-top sm:h-6'
width={50}
height={50}
+ loading='eager'
/>
)}
</div>
@@ -279,6 +288,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
className='w-11 h-6 object-contain object-top ml-1 sm:h-6'
width={50}
height={50}
+ loading='eager'
/>
)}
</div>
@@ -296,8 +306,10 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
<div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
<ImageNext
src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ alt='flash sae'
width={15}
height={10}
+ loading='eager'
/>
<span className='text-white text-xs font-semibold'>
{' '}
@@ -309,7 +321,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
)}
{product?.manufacture?.name ? (
<div className='flex justify-between'>
- <Link href={URL.manufacture} className='mb-1'>
+ <Link href={URL.manufacture} className='mb-1' aria-label={product?.manufacture.name}>
{product.manufacture.name}
</Link>
{/* {product?.is_in_bu && (
@@ -325,6 +337,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
)}
<Link
href={URL.product}
+ aria-label={product?.name}
className={`mb-3 !text-gray_r-12 leading-6 line-clamp-3`}
>
{product?.name}
@@ -351,6 +364,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
rel='noopener noreferrer'
target='_blank'
href={callForPriceWhatsapp}
+ aria-label='Call for Inquiry'
>
Call for Inquiry
</a>
@@ -374,6 +388,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
rel='noopener noreferrer'
target='_blank'
href={callForPriceWhatsapp}
+ aria-label='Call for Inquiry'
>
Call for Inquiry
</a>
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 54f209cc..91d199a6 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -35,7 +35,7 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
<>
{bannerMode && (
<SwiperSlide>
- <Link href={products.banner.url} className='w-full h-full block'></Link>
+ <Link href={products.banner.url} className='w-full h-full block' aria-label={products.banner.name}></Link>
</SwiperSlide>
)}
{products?.products?.map((product, index) => (
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:10:26 +0000