222 lines
9.9 KiB
Vue
222 lines
9.9 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import { Save, ShoppingBag, Store } from '@lucide/vue';
|
|
import { ref } from 'vue';
|
|
import { toast } from 'vue-sonner';
|
|
import MarketplaceFeeField from '@/components/admin/setting/MarketplaceFeeField.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Card,
|
|
CardContent
|
|
} from '@/components/ui/card';
|
|
import {
|
|
FieldGroup,
|
|
FieldSet
|
|
} from '@/components/ui/field';
|
|
import { formErrors } from '@/lib/form';
|
|
import { cn } from '@/lib/utils';
|
|
import type {
|
|
MarketplacePlatform,
|
|
MarketplaceSettingsData,
|
|
} from '@/types/setting';
|
|
|
|
const props = defineProps<{
|
|
data: MarketplaceSettingsData;
|
|
}>();
|
|
|
|
const activePlatform = ref<MarketplacePlatform>('tiktok_shop');
|
|
|
|
const platformItems: Array<{
|
|
key: MarketplacePlatform;
|
|
label: string;
|
|
icon: typeof Store;
|
|
}> = [
|
|
{ key: 'tiktok_shop', label: 'TikTok Shop', icon: Store },
|
|
{ key: 'shopee', label: 'Shopee', icon: ShoppingBag },
|
|
];
|
|
|
|
const form = useForm({
|
|
tiktok_shop_platform_commission: { ...props.data.tiktok_shop_platform_commission },
|
|
tiktok_shop_logistics_service_fee: { ...props.data.tiktok_shop_logistics_service_fee },
|
|
tiktok_shop_dynamic_commission: { ...props.data.tiktok_shop_dynamic_commission },
|
|
tiktok_shop_order_processing_fee: { ...props.data.tiktok_shop_order_processing_fee },
|
|
tiktok_shop_affiliate: { ...props.data.tiktok_shop_affiliate },
|
|
tiktok_shop_pre_order_service_fee: { ...props.data.tiktok_shop_pre_order_service_fee },
|
|
|
|
shopee_admin_fee: { ...props.data.shopee_admin_fee },
|
|
shopee_program_fee: { ...props.data.shopee_program_fee },
|
|
shopee_shipping_savings: { ...props.data.shopee_shipping_savings },
|
|
shopee_premium: { ...props.data.shopee_premium },
|
|
shopee_service_fee: { ...props.data.shopee_service_fee },
|
|
shopee_order_processing_fee: { ...props.data.shopee_order_processing_fee },
|
|
shopee_ams_commission_fee: { ...props.data.shopee_ams_commission_fee },
|
|
shopee_pre_order: { ...props.data.shopee_pre_order },
|
|
shopee_live_extra: { ...props.data.shopee_live_extra },
|
|
});
|
|
|
|
function feeErrors(key: string): string[] {
|
|
return [
|
|
...formErrors(form, `${key}.scope`),
|
|
...formErrors(form, `${key}.value_type`),
|
|
...formErrors(form, `${key}.value`),
|
|
];
|
|
}
|
|
|
|
function submit() {
|
|
form.put('/admin/system/setting/marketplace', {
|
|
preserveScroll: true,
|
|
onError: () => {
|
|
toast.error('Gagal menyimpan pengaturan marketplace.');
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form @submit.prevent="submit">
|
|
<div class="flex flex-col gap-6 lg:flex-row">
|
|
<nav class="flex shrink-0 flex-row gap-1 overflow-x-auto lg:w-44 lg:flex-col lg:overflow-visible">
|
|
<button v-for="item in platformItems" :key="item.key" type="button" :class="cn(
|
|
'inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors',
|
|
activePlatform === item.key
|
|
? 'bg-accent text-accent-foreground'
|
|
: 'text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground',
|
|
)" @click="activePlatform = item.key">
|
|
<component :is="item.icon" class="size-4 shrink-0" />
|
|
{{ item.label }}
|
|
</button>
|
|
</nav>
|
|
|
|
<div class="min-w-0 flex-1 space-y-6">
|
|
<Card v-show="activePlatform === 'tiktok_shop'">
|
|
<CardContent>
|
|
<FieldSet>
|
|
<FieldGroup class="grid gap-4 sm:grid-cols-2">
|
|
<MarketplaceFeeField
|
|
id="tiktok_shop_platform_commission"
|
|
v-model="form.tiktok_shop_platform_commission"
|
|
label="Biaya Komisi Platform"
|
|
:errors="feeErrors('tiktok_shop_platform_commission')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="tiktok_shop_logistics_service_fee"
|
|
v-model="form.tiktok_shop_logistics_service_fee"
|
|
label="Biaya Layanan Logistik"
|
|
:errors="feeErrors('tiktok_shop_logistics_service_fee')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="tiktok_shop_dynamic_commission"
|
|
v-model="form.tiktok_shop_dynamic_commission"
|
|
label="Komisi Dinamis"
|
|
:errors="feeErrors('tiktok_shop_dynamic_commission')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="tiktok_shop_order_processing_fee"
|
|
v-model="form.tiktok_shop_order_processing_fee"
|
|
label="Biaya Pemrosesan Pesanan"
|
|
:errors="feeErrors('tiktok_shop_order_processing_fee')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="tiktok_shop_affiliate"
|
|
v-model="form.tiktok_shop_affiliate"
|
|
label="Affiliate"
|
|
:errors="feeErrors('tiktok_shop_affiliate')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="tiktok_shop_pre_order_service_fee"
|
|
v-model="form.tiktok_shop_pre_order_service_fee"
|
|
label="Biaya Layanan Pre Order"
|
|
:errors="feeErrors('tiktok_shop_pre_order_service_fee')"
|
|
/>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card v-show="activePlatform === 'shopee'">
|
|
<CardContent>
|
|
<FieldSet>
|
|
<FieldGroup class="grid gap-4 sm:grid-cols-2">
|
|
<MarketplaceFeeField
|
|
id="shopee_admin_fee"
|
|
v-model="form.shopee_admin_fee"
|
|
label="Biaya Administrasi"
|
|
:errors="feeErrors('shopee_admin_fee')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="shopee_program_fee"
|
|
v-model="form.shopee_program_fee"
|
|
label="Biaya Program"
|
|
:errors="feeErrors('shopee_program_fee')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="shopee_shipping_savings"
|
|
v-model="form.shopee_shipping_savings"
|
|
label="Hemat Biaya Kirim"
|
|
:errors="feeErrors('shopee_shipping_savings')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="shopee_premium"
|
|
v-model="form.shopee_premium"
|
|
label="Premi"
|
|
:errors="feeErrors('shopee_premium')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="shopee_service_fee"
|
|
v-model="form.shopee_service_fee"
|
|
label="Biaya Layanan"
|
|
:errors="feeErrors('shopee_service_fee')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="shopee_order_processing_fee"
|
|
v-model="form.shopee_order_processing_fee"
|
|
label="Biaya Proses Pesanan"
|
|
:errors="feeErrors('shopee_order_processing_fee')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="shopee_ams_commission_fee"
|
|
v-model="form.shopee_ams_commission_fee"
|
|
label="Biaya Komisi AMS"
|
|
:errors="feeErrors('shopee_ams_commission_fee')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="shopee_pre_order"
|
|
v-model="form.shopee_pre_order"
|
|
label="Pre Order"
|
|
:errors="feeErrors('shopee_pre_order')"
|
|
/>
|
|
|
|
<MarketplaceFeeField
|
|
id="shopee_live_extra"
|
|
v-model="form.shopee_live_extra"
|
|
label="Live Extra"
|
|
:errors="feeErrors('shopee_live_extra')"
|
|
/>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div class="flex justify-end">
|
|
<Button type="submit" :disabled="form.processing">
|
|
<Save class="size-4" />
|
|
{{ form.processing ? 'Menyimpan...' : 'Simpan' }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|