280 lines
16 KiB
Vue
280 lines
16 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, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldSet } from '@/components/ui/field';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Switch } from '@/components/ui/switch';
|
|
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,
|
|
tiktok_shop_url: props.data.tiktok_shop_url ?? '',
|
|
tiktok_shop_id: props.data.tiktok_shop_id ?? '',
|
|
|
|
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,
|
|
shopee_shop_url: props.data.shopee_shop_url ?? '',
|
|
shopee_shop_id: props.data.shopee_shop_id ?? '',
|
|
});
|
|
|
|
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'">
|
|
<CardHeader>
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div>
|
|
<CardTitle>TikTok Shop</CardTitle>
|
|
<CardDescription>
|
|
Biaya dan konfigurasi penjualan di TikTok Shop.
|
|
</CardDescription>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</CardHeader>
|
|
<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" />
|
|
<FieldDescription>Komisi platform TikTok Shop.</FieldDescription>
|
|
<FieldError
|
|
:errors="form.errors.tiktok_shop_admin_fee ? [form.errors.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="form.errors.tiktok_shop_transaction_fee ? [form.errors.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="form.errors.tiktok_shop_payment_fee ? [form.errors.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" />
|
|
<FieldDescription>Biaya jika penjualan via afiliasi/kreator.</FieldDescription>
|
|
<FieldError
|
|
:errors="form.errors.tiktok_shop_affiliate_commission ? [form.errors.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="form.errors.tiktok_shop_shipping_subsidy ? [form.errors.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="form.errors.tiktok_shop_vat_rate ? [form.errors.tiktok_shop_vat_rate] : []" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="tiktok_shop_url">URL Toko</FieldLabel>
|
|
<Input id="tiktok_shop_url" v-model="form.tiktok_shop_url" type="url"
|
|
placeholder="https://www.tiktok.com/@toko" />
|
|
<FieldError
|
|
:errors="form.errors.tiktok_shop_url ? [form.errors.tiktok_shop_url] : []" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="tiktok_shop_id">Shop ID</FieldLabel>
|
|
<Input id="tiktok_shop_id" v-model="form.tiktok_shop_id"
|
|
placeholder="ID toko TikTok Shop" />
|
|
<FieldError
|
|
:errors="form.errors.tiktok_shop_id ? [form.errors.tiktok_shop_id] : []" />
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card v-show="activePlatform === 'shopee'">
|
|
<CardHeader>
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div>
|
|
<CardTitle>Shopee</CardTitle>
|
|
<CardDescription>
|
|
Biaya dan konfigurasi penjualan di Shopee.
|
|
</CardDescription>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</CardHeader>
|
|
<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" />
|
|
<FieldDescription>Komisi penjualan kategori umum.</FieldDescription>
|
|
<FieldError
|
|
:errors="form.errors.shopee_commission_fee ? [form.errors.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="form.errors.shopee_transaction_fee ? [form.errors.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" />
|
|
<FieldDescription>Biaya program Shopee (jika berlaku).</FieldDescription>
|
|
<FieldError
|
|
:errors="form.errors.shopee_service_fee ? [form.errors.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="form.errors.shopee_payment_fee ? [form.errors.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" />
|
|
<FieldDescription>Shopee Affiliate / kolaborasi kreator.</FieldDescription>
|
|
<FieldError
|
|
:errors="form.errors.shopee_affiliate_commission ? [form.errors.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="form.errors.shopee_shipping_subsidy ? [form.errors.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" />
|
|
<FieldDescription>Estimasi biaya voucher toko atau campaign.</FieldDescription>
|
|
<FieldError
|
|
:errors="form.errors.shopee_voucher_fee ? [form.errors.shopee_voucher_fee] : []" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="shopee_shop_url">URL Toko</FieldLabel>
|
|
<Input id="shopee_shop_url" v-model="form.shopee_shop_url" type="url"
|
|
placeholder="https://shopee.co.id/namatoko" />
|
|
<FieldError
|
|
:errors="form.errors.shopee_shop_url ? [form.errors.shopee_shop_url] : []" />
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel for="shopee_shop_id">Shop ID</FieldLabel>
|
|
<Input id="shopee_shop_id" v-model="form.shopee_shop_id"
|
|
placeholder="ID toko Shopee" />
|
|
<FieldError
|
|
:errors="form.errors.shopee_shop_id ? [form.errors.shopee_shop_id] : []" />
|
|
</Field>
|
|
</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>
|