@revenexx/cover 0.1.0

package/app/components/cart/drawer/CartDrawer.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const { icon } = useIcons();
+
+const { t } = useI18n();
+const { to } = useAppUrl();
+const { isOpen, items, isEmpty } = storeToRefs(useCartStore());
+const { public: { taxIncludedPrices } } = useRuntimeConfig();
+</script>
+
+<template>
+	<USlideover
+		v-model:open="isOpen"
+		title="Cart"
+		side="right"
+	>
+		<template #body>
+			<UiFeedbackEmptyState
+				v-if="isEmpty"
+				:icon="icon('cart')"
+				:title="t('cart.emptyState.title')"
+				:description="t('cart.emptyState.description')"
+			>
+				<UButton
+					class="mt-4"
+					color="primary"
+					variant="soft"
+					:to="to('/')"
+					:label="t('cart.emptyState.goToShop')"
+					tabindex="0"
+					@click="isOpen = false"
+				/>
+			</UiFeedbackEmptyState>
+			<ul
+				v-else
+				class="divide-y divide-(--ui-border) list-none p-0 m-0"
+			>
+				<CartItem
+					v-for="item in items"
+					:key="item.id"
+					:item="item"
+					:show-tax-included-price="taxIncludedPrices"
+				/>
+			</ul>
+		</template>
+		<template #footer>
+			<CartSummary v-if="!isEmpty" />
+		</template>
+	</USlideover>
+</template>

package/app/components/cart/item/CartItem.vue

@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import { productApi } from "../../../api/product";
+import { getPriceWithOptionalTax, slugify } from "../../../composables/useProducts";
+import type { CartItem } from "../../../interfaces/cart-item";
+import type { ProductDetail } from "../../../interfaces/product-detail";
+
+const { icon } = useIcons();
+
+const props = defineProps<{
+	item: CartItem;
+	readonly?: boolean;
+	showTaxIncludedPrice?: boolean;
+}>();
+
+const { getImage } = useProductImage();
+const cart = useCartStore();
+const { t } = useI18n();
+const { public: { locale, currency } } = useRuntimeConfig();
+
+const effectivePrice = computed(() => cart.getEffectivePrice(props.item.id));
+const taxRate = computed(() => {
+	if (typeof props.item.taxRate === "number" && Number.isFinite(props.item.taxRate)) {
+		return props.item.taxRate;
+	}
+
+	return cart.TAX_RATE;
+});
+const displayPrice = computed(() =>
+	getPriceWithOptionalTax(
+		effectivePrice.value,
+		taxRate.value,
+		props.showTaxIncludedPrice ?? false,
+	),
+);
+const formattedPrice = computed(() =>
+	displayPrice.value.toLocaleString(locale as string, { style: "currency", currency: currency as string }),
+);
+const maxOrderQuantity = computed(() => props.item.maxOrderQuantity);
+const localePath = useLocalePath();
+const fallbackCategorySlug = ref<string | null>(null);
+const fallbackSubcategorySlug = ref<string | null>(null);
+
+async function loadFallbackSlugs() {
+	if (props.item.categorySlug && props.item.subcategorySlug) {
+		return;
+	}
+
+	try {
+		const detail = await $fetch<ProductDetail | null>(productApi.detail(props.item.id));
+		if (!detail) {
+			return;
+		}
+		const slugCategory = detail.categories.find(category => category.type === "slug");
+		const segments = slugCategory?.name.split("/") ?? [];
+		const category = segments[0] ?? null;
+		const subcategory = segments[1] && segments[1] !== "product" ? segments[1] : null;
+
+		if (category) {
+			fallbackCategorySlug.value = category;
+		}
+		if (subcategory) {
+			fallbackSubcategorySlug.value = subcategory;
+		}
+	}
+	catch {
+		fallbackCategorySlug.value = null;
+		fallbackSubcategorySlug.value = null;
+	}
+}
+
+const detailUrl = computed(() => {
+	const categorySlug = props.item.categorySlug ?? fallbackCategorySlug.value;
+	const subcategorySlug = props.item.subcategorySlug ?? fallbackSubcategorySlug.value;
+	if (!categorySlug || !subcategorySlug) {
+		return null;
+	}
+
+	return localePath(`/category/${categorySlug}/${subcategorySlug}/product/${slugify(props.item)}`);
+});
+const inputValue = ref(String(props.item.quantity));
+const confirmOpen = ref(false);
+
+const parsedInputQuantity = computed(() => {
+	const sanitized = inputValue.value.replace(/[^0-9]/g, "");
+	return parseInt(sanitized, 10) || 0;
+});
+const quantityInvalid = computed(() => parsedInputQuantity.value < 1);
+const quantityExceeded = computed(() => {
+	if (typeof maxOrderQuantity.value !== "number") {
+		return false;
+	}
+
+	return parsedInputQuantity.value > maxOrderQuantity.value;
+});
+const currentCartQuantity = computed(() => props.item.quantity);
+
+let quantityErrorTimer: ReturnType<typeof setTimeout> | null = null;
+const showQuantityError = ref(false);
+const maxExceededAttempted = ref(false);
+
+function triggerQuantityError() {
+	showQuantityError.value = true;
+	if (quantityErrorTimer !== null) {
+		clearTimeout(quantityErrorTimer);
+	}
+	quantityErrorTimer = setTimeout(() => {
+		showQuantityError.value = false;
+		maxExceededAttempted.value = false;
+		quantityErrorTimer = null;
+	}, 2000);
+}
+
+const ariaQuantityOfLabel = computed(() =>
+	t("cart.item.ariaQuantityOf", { name: props.item.name, quantity: props.item.quantity }),
+);
+const ariaDecreaseQuantityLabel = computed(() =>
+	t("cart.item.ariaDecreaseQuantity", { name: props.item.name }),
+);
+const ariaInputQuantityLabel = computed(() =>
+	t("cart.item.ariaInputQuantity", { name: props.item.name }),
+);
+const ariaIncreaseQuantityLabel = computed(() =>
+	t("cart.item.ariaIncreaseQuantity", { name: props.item.name }),
+);
+
+watch(() => props.item.quantity, (val: number) => {
+	inputValue.value = String(val);
+});
+
+function applyQuantity(nextQuantity: number) {
+	if (typeof maxOrderQuantity.value === "number" && nextQuantity > maxOrderQuantity.value) {
+		maxExceededAttempted.value = true;
+		triggerQuantityError();
+		return;
+	}
+	cart.updateQuantity(props.item.id, nextQuantity);
+}
+
+function decrease() {
+	applyQuantity(props.item.quantity - 1);
+}
+
+function increase() {
+	applyQuantity(props.item.quantity + 1);
+}
+
+function onQuantityInput(event: Event) {
+	const input = event.target as HTMLInputElement;
+	const sanitized = input.value.replace(/[^0-9]/g, "");
+	inputValue.value = sanitized;
+}
+
+function commitInput() {
+	if (quantityInvalid.value || quantityExceeded.value) {
+		triggerQuantityError();
+		inputValue.value = String(props.item.quantity);
+		return;
+	}
+
+	applyQuantity(parsedInputQuantity.value);
+}
+
+onUnmounted(() => {
+	if (quantityErrorTimer !== null) {
+		clearTimeout(quantityErrorTimer);
+		quantityErrorTimer = null;
+	}
+});
+
+onMounted(() => {
+	if (!props.item.categorySlug || !props.item.subcategorySlug) {
+		void loadFallbackSlugs();
+	}
+});
+</script>
+
+<template>
+	<li class="flex items-start gap-3 py-3">
+		<div class="w-14 h-14 shrink-0 flex items-center justify-center mt-0.5">
+			<NuxtLink
+				v-if="detailUrl"
+				:to="detailUrl"
+				class="contents"
+				:aria-label="item.name"
+			>
+				<img
+					:src="getImage(item.image)"
+					:alt="item.name"
+					class="max-h-full max-w-full object-contain"
+				>
+			</NuxtLink>
+			<div
+				v-else
+				class="contents"
+			>
+				<img
+					:src="getImage(item.image)"
+					:alt="item.name"
+					class="max-h-full max-w-full object-contain"
+				>
+			</div>
+		</div>
+		<div class="flex flex-col gap-0.5 flex-1">
+			<NuxtLink
+				v-if="detailUrl"
+				:to="detailUrl"
+				class="text-sm font-medium text-highlighted leading-snug hover:underline"
+			>
+				{{ item.name }}
+			</NuxtLink>
+			<span
+				v-else
+				class="text-sm font-medium text-highlighted leading-snug"
+			>
+				{{ item.name }}
+			</span>
+			<span class="text-xs text-muted">{{ item.sku }}</span>
+			<span class="text-sm font-medium">{{ formattedPrice }}</span>
+			<div class="flex items-center gap-1 mt-1">
+				<template v-if="readonly">
+					<span
+						class="text-sm text-highlighted"
+						:aria-label="ariaQuantityOfLabel"
+					>{{ item.quantity }}</span>
+				</template>
+				<template v-else>
+					<UButton
+						:icon="icon('minus')"
+						color="primary"
+						variant="soft"
+						size="xs"
+						tabindex="0"
+						:aria-label="ariaDecreaseQuantityLabel"
+						@click="decrease"
+					/>
+					<input
+						v-model="inputValue"
+						type="text"
+						inputmode="numeric"
+						:aria-label="ariaInputQuantityLabel"
+						class="w-10 text-center text-sm border border-(--ui-border) rounded px-1 py-0.5
+						bg-transparent focus:outline-none focus:ring-1 focus:ring-(--ui-primary)"
+						@input="onQuantityInput"
+						@keydown.enter.prevent="commitInput"
+						@blur="commitInput"
+					>
+					<UButton
+						:icon="icon('plus')"
+						color="primary"
+						variant="soft"
+						size="xs"
+						tabindex="0"
+						:aria-label="ariaIncreaseQuantityLabel"
+						@click="increase"
+					/>
+				</template>
+			</div>
+			<UiFeedbackErrorBoundary
+				v-if="showQuantityError && maxExceededAttempted && maxOrderQuantity"
+				:title="t('product.actions.maxQuantityReachedTitle', { count: currentCartQuantity })"
+				:description="t('product.actions.maxQuantityReachedDescription', { max: maxOrderQuantity })"
+				:show-retry="false"
+			/>
+			<UiFeedbackErrorBoundary
+				v-if="showQuantityError && quantityInvalid"
+				:title="t('product.actions.invalidQuantityTitle')"
+				:description="t('product.actions.invalidQuantityDescription')"
+				:show-retry="false"
+			/>
+		</div>
+		<UButton
+			v-if="!readonly"
+			:icon="icon('delete')"
+			color="primary"
+			variant="ghost"
+			size="xs"
+			tabindex="0"
+			class="self-start shrink-0"
+			:aria-label="t('cart.item.ariaRemoveFromCart', { name: item.name })"
+			@click="confirmOpen = true"
+		/>
+	</li>
+
+	<UModal
+		v-model:open="confirmOpen"
+		:title="t('cart.item.removeTitle')"
+	>
+		<template #body>
+			<p class="text-sm text-muted">
+				<i18n-t
+					keypath="cart.item.removeConfirm"
+					tag="span"
+				>
+					<template #name>
+						<span class="font-medium text-highlighted">{{ item.name }}</span>
+					</template>
+				</i18n-t>
+			</p>
+		</template>
+		<template #footer>
+			<UButton
+				color="neutral"
+				variant="ghost"
+				tabindex="0"
+				@click="confirmOpen = false"
+			>
+				{{ t('cart.item.cancel') }}
+			</UButton>
+			<UButton
+				color="primary"
+				tabindex="0"
+				@click="cart.removeItem(item.id); confirmOpen = false"
+			>
+				{{ t('cart.item.remove') }}
+			</UButton>
+		</template>
+	</UModal>
+</template>

package/app/components/cart/manage/CartNameModal.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+/** Name dialog for carts — create and rename share the same form. */
+const props = defineProps<{
+	mode: "create" | "rename";
+	initialName?: string;
+}>();
+
+const emit = defineEmits<{
+	(e: "save", name: string): void;
+}>();
+
+const open = defineModel<boolean>("open", { default: false });
+
+const { t } = useI18n();
+
+const name = ref("");
+
+watch(open, (value) => {
+	if (value) {
+		name.value = props.mode === "rename" ? (props.initialName ?? "") : "";
+	}
+});
+
+function save(): void {
+	if (!name.value.trim()) {
+		return;
+	}
+	emit("save", name.value.trim());
+	open.value = false;
+}
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="mode === 'create' ? t('cart.multi.newCartTitle') : t('cart.multi.renameTitle')"
+	>
+		<template #body>
+			<UFormField
+				:label="t('cart.multi.nameLabel')"
+				required
+			>
+				<UInput
+					v-model="name"
+					class="w-full"
+					:placeholder="t('cart.multi.namePlaceholder')"
+					@keydown.enter="save"
+				/>
+			</UFormField>
+		</template>
+		<template #footer>
+			<UButton
+				color="neutral"
+				variant="ghost"
+				tabindex="0"
+				:label="t('cart.item.cancel')"
+				@click="open = false"
+			/>
+			<UButton
+				color="primary"
+				tabindex="0"
+				:disabled="!name.trim()"
+				:label="mode === 'create' ? t('cart.multi.create') : t('cart.multi.rename')"
+				@click="save"
+			/>
+		</template>
+	</UModal>
+</template>