|
|
@ -46,6 +46,7 @@ import { ShopDescriptionSuggestion } from '@/components/shop/shop-ai-prompt'; |
|
|
import PhoneNumberInput from '@/components/ui/phone-input'; |
|
|
import PhoneNumberInput from '@/components/ui/phone-input'; |
|
|
import DatePicker from '@/components/ui/date-picker'; |
|
|
import DatePicker from '@/components/ui/date-picker'; |
|
|
import { addDays, addMinutes, isSameDay, isToday } from 'date-fns'; |
|
|
import { addDays, addMinutes, isSameDay, isToday } from 'date-fns'; |
|
|
|
|
|
import { useEffect } from 'react'; |
|
|
|
|
|
|
|
|
// const socialIcon = [
|
|
|
// const socialIcon = [
|
|
|
// {
|
|
|
// {
|
|
|
@ -93,13 +94,26 @@ type FormValues = { |
|
|
settings: ShopSettings; |
|
|
settings: ShopSettings; |
|
|
isShopUnderMaintenance?: boolean; |
|
|
isShopUnderMaintenance?: boolean; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const socialMedias = ['telegram', 'whatsapp', 'instagram']; |
|
|
const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
|
|
|
const [initialFormValues, setInitialFormValues] = useState({}); |
|
|
const [location] = useAtom(locationAtom); |
|
|
const [location] = useAtom(locationAtom); |
|
|
const { mutate: createShop, isLoading: creating } = useCreateShopMutation(); |
|
|
const { mutate: createShop, isLoading: creating } = useCreateShopMutation(); |
|
|
const { mutate: updateShop, isLoading: updating } = useUpdateShopMutation(); |
|
|
const { mutate: updateShop, isLoading: updating } = useUpdateShopMutation(); |
|
|
// const { permissions } = getAuthCredentials();
|
|
|
// const { permissions } = getAuthCredentials();
|
|
|
// let permission = hasAccess(adminAndOwnerOnly, permissions);
|
|
|
// let permission = hasAccess(adminAndOwnerOnly, permissions);
|
|
|
const { permissions } = getAuthCredentials(); |
|
|
const { permissions } = getAuthCredentials(); |
|
|
|
|
|
const defaultSocialMedias = { |
|
|
|
|
|
telegram: '', |
|
|
|
|
|
whatsapp: '', |
|
|
|
|
|
instagram: '', |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const formDefaults = { |
|
|
|
|
|
...initialValues, |
|
|
|
|
|
social_medias: { ...defaultSocialMedias, ...initialValues?.social_medias }, |
|
|
|
|
|
}; |
|
|
const { |
|
|
const { |
|
|
register, |
|
|
register, |
|
|
handleSubmit, |
|
|
handleSubmit, |
|
|
@ -110,29 +124,10 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
control, |
|
|
control, |
|
|
} = useForm<FormValues>({ |
|
|
} = useForm<FormValues>({ |
|
|
shouldUnregister: true, |
|
|
shouldUnregister: true, |
|
|
...(initialValues |
|
|
|
|
|
? { |
|
|
|
|
|
defaultValues: { |
|
|
|
|
|
...initialValues, |
|
|
|
|
|
logo: getFormattedImage(initialValues?.logo as IImage), |
|
|
|
|
|
cover_image: getFormattedImage( |
|
|
|
|
|
initialValues?.cover_image as IImage, |
|
|
|
|
|
), |
|
|
|
|
|
settings: { |
|
|
|
|
|
...initialValues?.settings, |
|
|
|
|
|
socials: initialValues?.settings?.socials |
|
|
|
|
|
? initialValues?.settings?.socials.map((social: any) => ({ |
|
|
|
|
|
icon: updatedIcons?.find( |
|
|
|
|
|
(icon) => icon?.value === social?.icon, |
|
|
|
|
|
), |
|
|
|
|
|
url: social?.url, |
|
|
|
|
|
})) |
|
|
|
|
|
: [], |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
} |
|
|
|
|
|
: {}), |
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
|
|
|
|
defaultValues: { |
|
|
|
|
|
...formDefaults, |
|
|
|
|
|
logo: formDefaults.logo_url, |
|
|
|
|
|
}, |
|
|
resolver: yupResolver(shopValidationSchema), |
|
|
resolver: yupResolver(shopValidationSchema), |
|
|
}); |
|
|
}); |
|
|
const router = useRouter(); |
|
|
const router = useRouter(); |
|
|
@ -146,9 +141,9 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
language: locale!, |
|
|
language: locale!, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const generateName = watch('name'); |
|
|
|
|
|
|
|
|
const generateName = watch('title'); |
|
|
const shopDescriptionSuggestionLists = useMemo(() => { |
|
|
const shopDescriptionSuggestionLists = useMemo(() => { |
|
|
return ShopDescriptionSuggestion({ name: generateName ?? '' }); |
|
|
|
|
|
|
|
|
return ShopDescriptionSuggestion({ title: generateName ?? '' }); |
|
|
}, [generateName]); |
|
|
}, [generateName]); |
|
|
|
|
|
|
|
|
const handleGenerateDescription = useCallback(() => { |
|
|
const handleGenerateDescription = useCallback(() => { |
|
|
@ -161,7 +156,7 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
}); |
|
|
}); |
|
|
}, [generateName]); |
|
|
}, [generateName]); |
|
|
|
|
|
|
|
|
const slugAutoSuggest = formatSlug(watch('name')); |
|
|
|
|
|
|
|
|
const slugAutoSuggest = formatSlug(watch('title')); |
|
|
|
|
|
|
|
|
const startDate = useWatch({ |
|
|
const startDate = useWatch({ |
|
|
name: 'settings.shopMaintenance.start', |
|
|
name: 'settings.shopMaintenance.start', |
|
|
@ -171,56 +166,54 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
name: 'settings.shopMaintenance.until', |
|
|
name: 'settings.shopMaintenance.until', |
|
|
control, |
|
|
control, |
|
|
}); |
|
|
}); |
|
|
console.log({ startDate }); |
|
|
|
|
|
const isMaintenanceMode = watch('settings.isShopUnderMaintenance'); |
|
|
const isMaintenanceMode = watch('settings.isShopUnderMaintenance'); |
|
|
|
|
|
|
|
|
const today = new Date(); |
|
|
const today = new Date(); |
|
|
|
|
|
|
|
|
const { t } = useTranslation(); |
|
|
const { t } = useTranslation(); |
|
|
const { fields, append, remove } = useFieldArray({ |
|
|
|
|
|
control, |
|
|
|
|
|
name: 'settings.socials', |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
// const { fields, append, remove } = useFieldArray({
|
|
|
|
|
|
// control,
|
|
|
|
|
|
// name: 'settings.socials',
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
const [isSlugDisable, setIsSlugDisable] = useState<boolean>(true); |
|
|
const [isSlugDisable, setIsSlugDisable] = useState<boolean>(true); |
|
|
const isSlugEditable = |
|
|
|
|
|
(router?.query?.action === 'edit' || router?.pathname === '/[shop]/edit') && |
|
|
|
|
|
router?.locale === Config.defaultLanguage; |
|
|
|
|
|
|
|
|
const isSlugEditable = router?.pathname === '/shop/create'; |
|
|
|
|
|
const isEdited = |
|
|
|
|
|
JSON.stringify(initialFormValues) !== JSON.stringify(watch()); |
|
|
|
|
|
|
|
|
|
|
|
// &&
|
|
|
|
|
|
// router?.locale === Config.defaultLanguage;
|
|
|
|
|
|
|
|
|
function onSubmit(values: FormValues) { |
|
|
function onSubmit(values: FormValues) { |
|
|
const settings = { |
|
|
|
|
|
...values?.settings, |
|
|
|
|
|
location: { ...omit(values?.settings?.location, '__typename') }, |
|
|
|
|
|
socials: values?.settings?.socials |
|
|
|
|
|
? values?.settings?.socials?.map((social: any) => ({ |
|
|
|
|
|
icon: social?.icon?.value, |
|
|
|
|
|
url: social?.url, |
|
|
|
|
|
})) |
|
|
|
|
|
: [], |
|
|
|
|
|
shopMaintenance: values?.settings?.shopMaintenance, |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
// const settings = {
|
|
|
|
|
|
// ...values?.settings,
|
|
|
|
|
|
// location: { ...omit(values?.settings?.location, '__typename') },
|
|
|
|
|
|
// socials: values?.settings?.socials
|
|
|
|
|
|
// ? values?.settings?.socials?.map((social: any) => ({
|
|
|
|
|
|
// icon: social?.icon?.value,
|
|
|
|
|
|
// url: social?.url,
|
|
|
|
|
|
// }))
|
|
|
|
|
|
// : [],
|
|
|
|
|
|
// shopMaintenance: values?.settings?.shopMaintenance,
|
|
|
|
|
|
// };
|
|
|
|
|
|
console.log(values); |
|
|
|
|
|
|
|
|
if (initialValues) { |
|
|
if (initialValues) { |
|
|
const { ...restAddress } = values.address; |
|
|
|
|
|
updateShop({ |
|
|
|
|
|
id: initialValues?.id as string, |
|
|
|
|
|
...values, |
|
|
|
|
|
address: restAddress, |
|
|
|
|
|
settings, |
|
|
|
|
|
balance: { |
|
|
|
|
|
id: initialValues.balance?.id, |
|
|
|
|
|
...values.balance, |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
if (isEdited) { |
|
|
|
|
|
updateShop(values); |
|
|
|
|
|
} |
|
|
} else { |
|
|
} else { |
|
|
createShop({ |
|
|
|
|
|
...values, |
|
|
|
|
|
settings, |
|
|
|
|
|
balance: { |
|
|
|
|
|
...values.balance, |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
createShop(values); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
setInitialFormValues(watch()); |
|
|
|
|
|
}, []); |
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
if (slugAutoSuggest) { |
|
|
|
|
|
setValue('slug', slugAutoSuggest); // Update form state with the slug
|
|
|
|
|
|
} |
|
|
|
|
|
}, [slugAutoSuggest, setValue]); |
|
|
|
|
|
|
|
|
const isGoogleMapActive = options?.useGoogleMap; |
|
|
const isGoogleMapActive = options?.useGoogleMap; |
|
|
const askForAQuote = watch('settings.askForAQuote.enable'); |
|
|
const askForAQuote = watch('settings.askForAQuote.enable'); |
|
|
@ -280,7 +273,7 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
/> |
|
|
/> |
|
|
|
|
|
|
|
|
<Card className="w-full sm:w-8/12 md:w-2/3"> |
|
|
<Card className="w-full sm:w-8/12 md:w-2/3"> |
|
|
<FileInput name="cover_image" control={control} multiple={false} /> |
|
|
|
|
|
|
|
|
<FileInput name="images" control={control} multiple={true} /> |
|
|
</Card> |
|
|
</Card> |
|
|
</div> |
|
|
</div> |
|
|
<div className="flex flex-wrap pb-8 my-5 border-b border-dashed border-border-base sm:my-8"> |
|
|
<div className="flex flex-wrap pb-8 my-5 border-b border-dashed border-border-base sm:my-8"> |
|
|
@ -292,10 +285,10 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
<Card className="w-full sm:w-8/12 md:w-2/3"> |
|
|
<Card className="w-full sm:w-8/12 md:w-2/3"> |
|
|
<Input |
|
|
<Input |
|
|
label={t('form:input-label-name')} |
|
|
label={t('form:input-label-name')} |
|
|
{...register('name')} |
|
|
|
|
|
|
|
|
{...register('title')} |
|
|
variant="outline" |
|
|
variant="outline" |
|
|
className="mb-5" |
|
|
className="mb-5" |
|
|
error={t(errors.name?.message!)} |
|
|
|
|
|
|
|
|
error={t(errors.title?.message!)} |
|
|
required |
|
|
required |
|
|
/> |
|
|
/> |
|
|
|
|
|
|
|
|
@ -303,8 +296,8 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
<div className="relative mb-5"> |
|
|
<div className="relative mb-5"> |
|
|
<Input |
|
|
<Input |
|
|
label={t('form:input-label-slug')} |
|
|
label={t('form:input-label-slug')} |
|
|
{...register('slug')} |
|
|
|
|
|
error={t(errors.slug?.message!)} |
|
|
|
|
|
|
|
|
{...register('slug')} // Register slug field for form handling
|
|
|
|
|
|
error={t(errors.slug?.message!)} // Display error message if any
|
|
|
variant="outline" |
|
|
variant="outline" |
|
|
disabled={isSlugDisable} |
|
|
disabled={isSlugDisable} |
|
|
/> |
|
|
/> |
|
|
@ -321,7 +314,6 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
<Input |
|
|
<Input |
|
|
label={t('form:input-label-slug')} |
|
|
label={t('form:input-label-slug')} |
|
|
{...register('slug')} |
|
|
{...register('slug')} |
|
|
value={slugAutoSuggest} |
|
|
|
|
|
variant="outline" |
|
|
variant="outline" |
|
|
className="mb-5" |
|
|
className="mb-5" |
|
|
disabled |
|
|
disabled |
|
|
@ -354,33 +346,41 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
<Card className="w-full sm:w-8/12 md:w-2/3"> |
|
|
<Card className="w-full sm:w-8/12 md:w-2/3"> |
|
|
<Input |
|
|
<Input |
|
|
label={t('form:input-label-account-holder-name')} |
|
|
label={t('form:input-label-account-holder-name')} |
|
|
{...register('balance.payment_info.name')} |
|
|
|
|
|
|
|
|
{...register('account_holder_name')} |
|
|
variant="outline" |
|
|
variant="outline" |
|
|
className="mb-5" |
|
|
className="mb-5" |
|
|
error={t(errors.balance?.payment_info?.name?.message!)} |
|
|
|
|
|
|
|
|
error={t(errors.account_holder_name?.message!)} |
|
|
required |
|
|
required |
|
|
/> |
|
|
/> |
|
|
<Input |
|
|
<Input |
|
|
label={t('form:input-label-account-holder-email')} |
|
|
label={t('form:input-label-account-holder-email')} |
|
|
{...register('balance.payment_info.email')} |
|
|
|
|
|
|
|
|
{...register('account_holder_email')} |
|
|
variant="outline" |
|
|
variant="outline" |
|
|
className="mb-5" |
|
|
className="mb-5" |
|
|
error={t(errors.balance?.payment_info?.email?.message!)} |
|
|
|
|
|
|
|
|
error={t(errors.account_holder_email?.message!)} |
|
|
required |
|
|
required |
|
|
/> |
|
|
/> |
|
|
<Input |
|
|
<Input |
|
|
label={t('form:input-label-bank-name')} |
|
|
label={t('form:input-label-bank-name')} |
|
|
{...register('balance.payment_info.bank')} |
|
|
|
|
|
|
|
|
{...register('bank_name')} |
|
|
variant="outline" |
|
|
variant="outline" |
|
|
className="mb-5" |
|
|
className="mb-5" |
|
|
error={t(errors.balance?.payment_info?.bank?.message!)} |
|
|
|
|
|
|
|
|
error={t(errors.bank_name?.message!)} |
|
|
required |
|
|
required |
|
|
/> |
|
|
/> |
|
|
<Input |
|
|
<Input |
|
|
label={t('form:input-label-account-number')} |
|
|
label={t('form:input-label-account-number')} |
|
|
{...register('balance.payment_info.account')} |
|
|
|
|
|
|
|
|
{...register('account_number')} |
|
|
|
|
|
variant="outline" |
|
|
|
|
|
error={t(errors.account_number?.message!)} |
|
|
|
|
|
className="mb-5" |
|
|
|
|
|
required |
|
|
|
|
|
/> |
|
|
|
|
|
<Input |
|
|
|
|
|
label={t('form:input-label-iban-number')} |
|
|
|
|
|
{...register('iban_number')} |
|
|
variant="outline" |
|
|
variant="outline" |
|
|
error={t(errors.balance?.payment_info?.account?.message!)} |
|
|
|
|
|
|
|
|
error={t(errors.iban_number?.message!)} |
|
|
required |
|
|
required |
|
|
/> |
|
|
/> |
|
|
</Card> |
|
|
</Card> |
|
|
@ -393,7 +393,7 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
/> |
|
|
/> |
|
|
|
|
|
|
|
|
<Card className="w-full sm:w-8/12 md:w-2/3"> |
|
|
<Card className="w-full sm:w-8/12 md:w-2/3"> |
|
|
{isGoogleMapActive && ( |
|
|
|
|
|
|
|
|
{/* {isGoogleMapActive && ( |
|
|
<div className="mb-5"> |
|
|
<div className="mb-5"> |
|
|
<Label>{t('form:input-label-autocomplete')}</Label> |
|
|
<Label>{t('form:input-label-autocomplete')}</Label> |
|
|
<Controller |
|
|
<Controller |
|
|
@ -419,45 +419,45 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
)} |
|
|
)} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
)} |
|
|
|
|
|
|
|
|
)} */} |
|
|
<Input |
|
|
<Input |
|
|
label={t('form:input-label-country')} |
|
|
label={t('form:input-label-country')} |
|
|
{...register('address.country')} |
|
|
|
|
|
|
|
|
{...register('country')} |
|
|
variant="outline" |
|
|
variant="outline" |
|
|
className="mb-5" |
|
|
className="mb-5" |
|
|
error={t(errors.address?.country?.message!)} |
|
|
|
|
|
|
|
|
error={t(errors.country?.message!)} |
|
|
/> |
|
|
/> |
|
|
<Input |
|
|
<Input |
|
|
label={t('form:input-label-city')} |
|
|
label={t('form:input-label-city')} |
|
|
{...register('address.city')} |
|
|
|
|
|
|
|
|
{...register('city')} |
|
|
variant="outline" |
|
|
variant="outline" |
|
|
className="mb-5" |
|
|
className="mb-5" |
|
|
error={t(errors.address?.city?.message!)} |
|
|
|
|
|
|
|
|
error={t(errors.city?.message!)} |
|
|
/> |
|
|
/> |
|
|
<Input |
|
|
|
|
|
|
|
|
{/* <Input |
|
|
label={t('form:input-label-state')} |
|
|
label={t('form:input-label-state')} |
|
|
{...register('address.state')} |
|
|
|
|
|
|
|
|
{...register('address')} |
|
|
variant="outline" |
|
|
variant="outline" |
|
|
className="mb-5" |
|
|
className="mb-5" |
|
|
error={t(errors.address?.state?.message!)} |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
error={t(errors.address?.message!)} |
|
|
|
|
|
/> */} |
|
|
<Input |
|
|
<Input |
|
|
label={t('form:input-label-zip')} |
|
|
label={t('form:input-label-zip')} |
|
|
{...register('address.zip')} |
|
|
|
|
|
|
|
|
{...register('zip_address')} |
|
|
variant="outline" |
|
|
variant="outline" |
|
|
className="mb-5" |
|
|
className="mb-5" |
|
|
error={t(errors.address?.zip?.message!)} |
|
|
|
|
|
|
|
|
error={t(errors.zip_address?.message!)} |
|
|
/> |
|
|
/> |
|
|
<TextArea |
|
|
<TextArea |
|
|
label={t('form:input-label-street-address')} |
|
|
label={t('form:input-label-street-address')} |
|
|
{...register('address.street_address')} |
|
|
|
|
|
|
|
|
{...register('address')} |
|
|
variant="outline" |
|
|
variant="outline" |
|
|
error={t(errors.address?.street_address?.message!)} |
|
|
|
|
|
|
|
|
error={t(errors.address?.message!)} |
|
|
/> |
|
|
/> |
|
|
</Card> |
|
|
</Card> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
{permissions?.includes(STORE_OWNER) ? ( |
|
|
|
|
|
|
|
|
{/* {permissions?.includes(STORE_OWNER) ? ( |
|
|
<div className="flex flex-wrap pb-8 my-5 border-b border-dashed border-border-base sm:my-8"> |
|
|
<div className="flex flex-wrap pb-8 my-5 border-b border-dashed border-border-base sm:my-8"> |
|
|
<Description |
|
|
<Description |
|
|
title={t('form:form-notification-title')} |
|
|
title={t('form:form-notification-title')} |
|
|
@ -489,7 +489,7 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
</div> |
|
|
</div> |
|
|
) : ( |
|
|
) : ( |
|
|
'' |
|
|
'' |
|
|
)} |
|
|
|
|
|
|
|
|
)} */} |
|
|
<div className="flex flex-wrap pb-8 my-5 border-b border-gray-300 border-dashed sm:my-8"> |
|
|
<div className="flex flex-wrap pb-8 my-5 border-b border-gray-300 border-dashed sm:my-8"> |
|
|
<Description |
|
|
<Description |
|
|
title={t('form:shop-settings')} |
|
|
title={t('form:shop-settings')} |
|
|
@ -501,16 +501,16 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
<PhoneNumberInput |
|
|
<PhoneNumberInput |
|
|
label={t('form:input-label-contact')} |
|
|
label={t('form:input-label-contact')} |
|
|
required |
|
|
required |
|
|
{...register('settings.contact')} |
|
|
|
|
|
|
|
|
{...register('phone_number')} |
|
|
control={control} |
|
|
control={control} |
|
|
error={t(errors.settings?.contact?.message!)} |
|
|
|
|
|
|
|
|
error={t(errors.phone_number?.message!)} |
|
|
/> |
|
|
/> |
|
|
<Input |
|
|
<Input |
|
|
label={t('form:input-label-website')} |
|
|
label={t('form:input-label-website')} |
|
|
{...register('settings.website')} |
|
|
|
|
|
|
|
|
{...register('website')} |
|
|
variant="outline" |
|
|
variant="outline" |
|
|
className="mb-5" |
|
|
className="mb-5" |
|
|
error={t(errors.settings?.website?.message!)} |
|
|
|
|
|
|
|
|
error={t(errors.website?.message!)} |
|
|
required |
|
|
required |
|
|
/> |
|
|
/> |
|
|
</Card> |
|
|
</Card> |
|
|
@ -524,66 +524,21 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
/> |
|
|
/> |
|
|
|
|
|
|
|
|
<Card className="w-full sm:w-8/12 md:w-2/3"> |
|
|
<Card className="w-full sm:w-8/12 md:w-2/3"> |
|
|
<div> |
|
|
|
|
|
{fields?.map( |
|
|
|
|
|
(item: ShopSocialInput & { id: string }, index: number) => ( |
|
|
|
|
|
<div |
|
|
|
|
|
className="py-5 border-b border-dashed border-border-200 first:mt-0 first:border-t-0 first:pt-0 last:border-b-0 md:py-8 md:first:mt-0" |
|
|
|
|
|
key={item.id} |
|
|
|
|
|
> |
|
|
|
|
|
<div className="grid grid-cols-1 gap-5 sm:grid-cols-5"> |
|
|
|
|
|
<div className="sm:col-span-2"> |
|
|
|
|
|
<Label>{t('form:input-label-select-platform')}</Label> |
|
|
|
|
|
<SelectInput |
|
|
|
|
|
name={`settings.socials.${index}.icon` as const} |
|
|
|
|
|
control={control} |
|
|
|
|
|
options={updatedIcons} |
|
|
|
|
|
isClearable={true} |
|
|
|
|
|
defaultValue={item?.icon!} |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
{/* <Input |
|
|
|
|
|
className="sm:col-span-2" |
|
|
|
|
|
label={t("form:input-label-icon")} |
|
|
|
|
|
variant="outline" |
|
|
|
|
|
{...register(`settings.socials.${index}.icon` as const)} |
|
|
|
|
|
defaultValue={item?.icon!} // make sure to set up defaultValue
|
|
|
|
|
|
/> */} |
|
|
|
|
|
<Input |
|
|
|
|
|
className="sm:col-span-2" |
|
|
|
|
|
label={t('form:input-label-url')} |
|
|
|
|
|
variant="outline" |
|
|
|
|
|
{...register(`settings.socials.${index}.url` as const)} |
|
|
|
|
|
error={t( |
|
|
|
|
|
errors?.settings?.socials?.[index]?.url?.message!, |
|
|
|
|
|
)} |
|
|
|
|
|
defaultValue={item.url!} // make sure to set up defaultValue
|
|
|
|
|
|
required |
|
|
|
|
|
/> |
|
|
|
|
|
<button |
|
|
|
|
|
onClick={() => { |
|
|
|
|
|
remove(index); |
|
|
|
|
|
}} |
|
|
|
|
|
type="button" |
|
|
|
|
|
className="text-sm text-red-500 transition-colors duration-200 hover:text-red-700 focus:outline-none sm:col-span-1 sm:mt-4" |
|
|
|
|
|
> |
|
|
|
|
|
{t('form:button-label-remove')} |
|
|
|
|
|
</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
), |
|
|
|
|
|
)} |
|
|
|
|
|
</div> |
|
|
|
|
|
<Button |
|
|
|
|
|
type="button" |
|
|
|
|
|
onClick={() => append({ icon: '', url: '' })} |
|
|
|
|
|
className="w-full text-sm sm:w-auto md:text-base" |
|
|
|
|
|
> |
|
|
|
|
|
{t('form:button-label-add-social')} |
|
|
|
|
|
</Button> |
|
|
|
|
|
|
|
|
{socialMedias.map((platform) => ( |
|
|
|
|
|
<div key={platform} className="mb-5"> |
|
|
|
|
|
<Input |
|
|
|
|
|
label={`${ |
|
|
|
|
|
platform.charAt(0).toUpperCase() + platform.slice(1) |
|
|
|
|
|
} URL`}
|
|
|
|
|
|
{...register(`social_medias.${platform}` as const)} |
|
|
|
|
|
variant="outline" |
|
|
|
|
|
error={errors?.social_medias?.[platform]?.message} |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
))} |
|
|
</Card> |
|
|
</Card> |
|
|
</div> |
|
|
</div> |
|
|
{!permissions?.includes(SUPER_ADMIN) ? ( |
|
|
|
|
|
|
|
|
{/* {!permissions?.includes(SUPER_ADMIN) ? ( |
|
|
<div className="flex flex-wrap pb-8 my-5 border-b border-gray-300 border-dashed sm:my-8"> |
|
|
<div className="flex flex-wrap pb-8 my-5 border-b border-gray-300 border-dashed sm:my-8"> |
|
|
<Description |
|
|
<Description |
|
|
title="Shop maintenance settings " |
|
|
title="Shop maintenance settings " |
|
|
@ -691,8 +646,8 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
</div> |
|
|
</div> |
|
|
) : ( |
|
|
) : ( |
|
|
'' |
|
|
'' |
|
|
)} |
|
|
|
|
|
{!permissions?.includes(SUPER_ADMIN) && |
|
|
|
|
|
|
|
|
)} */} |
|
|
|
|
|
{!permissions?.includes(SUPER_ADMIN) && |
|
|
!permissions?.includes(STAFF) && |
|
|
!permissions?.includes(STAFF) && |
|
|
!Boolean(initialValues?.is_active) && |
|
|
!Boolean(initialValues?.is_active) && |
|
|
Boolean(options?.isMultiCommissionRate) ? ( |
|
|
Boolean(options?.isMultiCommissionRate) ? ( |
|
|
@ -740,8 +695,9 @@ const ShopForm = ({ initialValues }: { initialValues?: Shop }) => { |
|
|
<StickyFooterPanel className="z-0"> |
|
|
<StickyFooterPanel className="z-0"> |
|
|
<div className="mb-5 text-end"> |
|
|
<div className="mb-5 text-end"> |
|
|
<Button |
|
|
<Button |
|
|
|
|
|
type="submit" |
|
|
loading={creating || updating} |
|
|
loading={creating || updating} |
|
|
disabled={creating || updating} |
|
|
|
|
|
|
|
|
disabled={creating || updating || !isEdited} |
|
|
> |
|
|
> |
|
|
{initialValues |
|
|
{initialValues |
|
|
? t('form:button-label-update') |
|
|
? t('form:button-label-update') |
|
|
|
sina_sajjadi
4 weeks ago