store/resources/js/components/admin/setting/MarketplaceSection.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_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_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 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_admin_fee"
                                    v-model="form.tiktok_shop_admin_fee"
                                    label="Biaya Admin"
                                    :errors="feeErrors('tiktok_shop_admin_fee')"
                                />

                                <MarketplaceFeeField
                                    id="tiktok_shop_transaction_fee"
                                    v-model="form.tiktok_shop_transaction_fee"
                                    label="Biaya Transaksi"
                                    :errors="feeErrors('tiktok_shop_transaction_fee')"
                                />

                                <MarketplaceFeeField
                                    id="tiktok_shop_payment_fee"
                                    v-model="form.tiktok_shop_payment_fee"
                                    label="Biaya Pembayaran"
                                    :errors="feeErrors('tiktok_shop_payment_fee')"
                                />

                                <MarketplaceFeeField
                                    id="tiktok_shop_affiliate_commission"
                                    v-model="form.tiktok_shop_affiliate_commission"
                                    label="Komisi Afiliasi"
                                    :errors="feeErrors('tiktok_shop_affiliate_commission')"
                                />

                                <MarketplaceFeeField
                                    id="tiktok_shop_shipping_subsidy"
                                    v-model="form.tiktok_shop_shipping_subsidy"
                                    label="Subsidi Ongkir"
                                    :errors="feeErrors('tiktok_shop_shipping_subsidy')"
                                />

                                <MarketplaceFeeField
                                    id="tiktok_shop_vat_rate"
                                    v-model="form.tiktok_shop_vat_rate"
                                    label="PPN / Pajak"
                                    :errors="feeErrors('tiktok_shop_vat_rate')"
                                />
                            </FieldGroup>
                        </FieldSet>
                    </CardContent>
                </Card>

                <Card v-show="activePlatform === 'shopee'">
                    <CardContent>
                        <FieldSet>
                            <FieldGroup class="grid gap-4 sm:grid-cols-2">
                                <MarketplaceFeeField
                                    id="shopee_commission_fee"
                                    v-model="form.shopee_commission_fee"
                                    label="Komisi Shopee"
                                    :errors="feeErrors('shopee_commission_fee')"
                                />

                                <MarketplaceFeeField
                                    id="shopee_transaction_fee"
                                    v-model="form.shopee_transaction_fee"
                                    label="Biaya Transaksi"
                                    :errors="feeErrors('shopee_transaction_fee')"
                                />

                                <MarketplaceFeeField
                                    id="shopee_service_fee"
                                    v-model="form.shopee_service_fee"
                                    label="Biaya Layanan"
                                    :errors="feeErrors('shopee_service_fee')"
                                />

                                <MarketplaceFeeField
                                    id="shopee_payment_fee"
                                    v-model="form.shopee_payment_fee"
                                    label="Biaya Pembayaran"
                                    :errors="feeErrors('shopee_payment_fee')"
                                />

                                <MarketplaceFeeField
                                    id="shopee_affiliate_commission"
                                    v-model="form.shopee_affiliate_commission"
                                    label="Komisi Afiliasi Shopee"
                                    :errors="feeErrors('shopee_affiliate_commission')"
                                />

                                <MarketplaceFeeField
                                    id="shopee_shipping_subsidy"
                                    v-model="form.shopee_shipping_subsidy"
                                    label="Subsidi Ongkir"
                                    :errors="feeErrors('shopee_shipping_subsidy')"
                                />

                                <MarketplaceFeeField
                                    id="shopee_voucher_fee"
                                    v-model="form.shopee_voucher_fee"
                                    label="Biaya Voucher / Diskon"
                                    :errors="feeErrors('shopee_voucher_fee')"
                                />
                            </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>