219 lines
11 KiB
Vue
219 lines
11 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 { Button } from '@/components/ui/button';
|
|
import {
|
|
Card,
|
|
CardContent
|
|
} from '@/components/ui/card';
|
|
import {
|
|
Field, FieldError,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
FieldSet
|
|
} from '@/components/ui/field';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Switch } from '@/components/ui/switch';
|
|
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_enabled: props.data.tiktok_shop_enabled,
|
|
tiktok_shop_admin_fee: props.data.tiktok_shop_admin_fee,
|
|
tiktok_shop_transaction_fee: props.data.tiktok_shop_transaction_fee,
|
|
tiktok_shop_payment_fee: props.data.tiktok_shop_payment_fee,
|
|
tiktok_shop_affiliate_commission: props.data.tiktok_shop_affiliate_commission,
|
|
tiktok_shop_shipping_subsidy: props.data.tiktok_shop_shipping_subsidy,
|
|
tiktok_shop_vat_rate: props.data.tiktok_shop_vat_rate,
|
|
|
|
shopee_enabled: props.data.shopee_enabled,
|
|
shopee_commission_fee: props.data.shopee_commission_fee,
|
|
shopee_transaction_fee: props.data.shopee_transaction_fee,
|
|
shopee_service_fee: props.data.shopee_service_fee,
|
|
shopee_payment_fee: props.data.shopee_payment_fee,
|
|
shopee_affiliate_commission: props.data.shopee_affiliate_commission,
|
|
shopee_shipping_subsidy: props.data.shopee_shipping_subsidy,
|
|
shopee_voucher_fee: props.data.shopee_voucher_fee,
|
|
});
|
|
|
|
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">
|
|
<Field>
|
|
<FieldLabel for="tiktok_shop_admin_fee">Biaya Admin (%)</FieldLabel>
|
|
<Input id="tiktok_shop_admin_fee" v-model="form.tiktok_shop_admin_fee" type="number"
|
|
step="0.01" min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'tiktok_shop_admin_fee')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="tiktok_shop_transaction_fee">Biaya Transaksi (%)</FieldLabel>
|
|
<Input id="tiktok_shop_transaction_fee" v-model="form.tiktok_shop_transaction_fee"
|
|
type="number" step="0.01" min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'tiktok_shop_transaction_fee')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="tiktok_shop_payment_fee">Biaya Pembayaran (%)</FieldLabel>
|
|
<Input id="tiktok_shop_payment_fee" v-model="form.tiktok_shop_payment_fee"
|
|
type="number" step="0.01" min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'tiktok_shop_payment_fee')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="tiktok_shop_affiliate_commission">Komisi Afiliasi (%)</FieldLabel>
|
|
<Input id="tiktok_shop_affiliate_commission"
|
|
v-model="form.tiktok_shop_affiliate_commission" type="number" step="0.01"
|
|
min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'tiktok_shop_affiliate_commission')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="tiktok_shop_shipping_subsidy">Subsidi Ongkir (%)</FieldLabel>
|
|
<Input id="tiktok_shop_shipping_subsidy" v-model="form.tiktok_shop_shipping_subsidy"
|
|
type="number" step="0.01" min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'tiktok_shop_shipping_subsidy')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="tiktok_shop_vat_rate">PPN / Pajak (%)</FieldLabel>
|
|
<Input id="tiktok_shop_vat_rate" v-model="form.tiktok_shop_vat_rate" type="number"
|
|
step="0.01" min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'tiktok_shop_vat_rate')" />
|
|
</Field>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<Switch id="tiktok_shop_enabled" v-model:checked="form.tiktok_shop_enabled" />
|
|
<FieldLabel for="tiktok_shop_enabled" class="mb-0 text-sm">
|
|
Aktif
|
|
</FieldLabel>
|
|
</div>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card v-show="activePlatform === 'shopee'">
|
|
<CardContent>
|
|
<FieldSet>
|
|
<FieldGroup class="grid gap-4 sm:grid-cols-2">
|
|
<Field>
|
|
<FieldLabel for="shopee_commission_fee">Komisi Shopee (%)</FieldLabel>
|
|
<Input id="shopee_commission_fee" v-model="form.shopee_commission_fee" type="number"
|
|
step="0.01" min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'shopee_commission_fee')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="shopee_transaction_fee">Biaya Transaksi (%)</FieldLabel>
|
|
<Input id="shopee_transaction_fee" v-model="form.shopee_transaction_fee"
|
|
type="number" step="0.01" min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'shopee_transaction_fee')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="shopee_service_fee">Biaya Layanan (%)</FieldLabel>
|
|
<Input id="shopee_service_fee" v-model="form.shopee_service_fee" type="number"
|
|
step="0.01" min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'shopee_service_fee')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="shopee_payment_fee">Biaya Pembayaran (%)</FieldLabel>
|
|
<Input id="shopee_payment_fee" v-model="form.shopee_payment_fee" type="number"
|
|
step="0.01" min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'shopee_payment_fee')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="shopee_affiliate_commission">Komisi Afiliasi Shopee (%)
|
|
</FieldLabel>
|
|
<Input id="shopee_affiliate_commission" v-model="form.shopee_affiliate_commission"
|
|
type="number" step="0.01" min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'shopee_affiliate_commission')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="shopee_shipping_subsidy">Subsidi Ongkir (%)</FieldLabel>
|
|
<Input id="shopee_shipping_subsidy" v-model="form.shopee_shipping_subsidy"
|
|
type="number" step="0.01" min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'shopee_shipping_subsidy')" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="shopee_voucher_fee">Biaya Voucher / Diskon (%)</FieldLabel>
|
|
<Input id="shopee_voucher_fee" v-model="form.shopee_voucher_fee" type="number"
|
|
step="0.01" min="0" max="100" />
|
|
<FieldError :errors="formErrors(form, 'shopee_voucher_fee')" />
|
|
</Field>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<Switch id="shopee_enabled" v-model:checked="form.shopee_enabled" />
|
|
<FieldLabel for="shopee_enabled" class="mb-0 text-sm">
|
|
Aktif
|
|
</FieldLabel>
|
|
</div>
|
|
</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>
|