schon/storefront/app/composables/wishlist/useWishlistOverwrite.ts
Alexandr SaVBaD Waltz 2ea18eb8a6 feat(storefront): refactor i18n and cart/wishlist handling for improved user experience
Refactored i18n configuration, replacing `DEFAULT_LOCALE` with `DEFAULT_LOCALE_FALLBACK` and enhancing environment-based locale validation. Improved cookie persistence for cart and wishlist, ensuring fallback handling for unauthenticated users.

Enhancements:
- Added `createProjectKey` utility for consistent project key generation.
- Reworked cart and wishlist composables (`useOrderOverwrite`, `useWishlistOverwrite`) to decouple product identifier and handle cookies robustly.
- Centralized `DEFAULT_LOCALE` logic for better maintainability.
- Refined `useOrderSync` and `useWishlistSync` for clean synchronization across auth states.
- Updated SCSS in hero and header styles for alignment corrections.

Breaking Changes: `DEFAULT_LOCALE` constant removed; replaced with runtime config and fallback logic. Consumers must adapt to `DEFAULT_LOCALE_FALLBACK` and `$appHelpers.DEFAULT_LOCALE`.
2026-02-28 22:38:45 +03:00

263 lines
6 KiB
TypeScript

import {useNotification} from '@composables/notification';
import {
ADD_TO_WISHLIST,
BULK_WISHLIST,
REMOVE_ALL_FROM_WISHLIST,
REMOVE_FROM_WISHLIST,
} from '@graphql/mutations/wishlist';
import type {
IAddToWishlistResponse,
IBulkWishlistResponse,
IRemoveAllFromWishlistResponse,
IRemoveFromWishlistResponse,
} from '@types';
interface IOverwriteWishlistArguments {
type: string;
productUuid: string;
productName: string;
bulkAction?: string;
isBulkSync?: boolean;
products?: {
uuid: string;
}[];
}
export function useWishlistOverwrite() {
const { t } = useI18n();
const wishlistStore = useWishlistStore();
const userStore = useUserStore();
const { $appHelpers } = useNuxtApp();
const isAuthenticated = computed(() => userStore.isAuthenticated);
const wishlistUuid = computed(() => wishlistStore.wishlist?.uuid);
const cookieWishlist = useCookie($appHelpers.COOKIES_WISHLIST_KEY, {
default: () => [],
path: '/',
watch: true,
});
const {
mutate: addMutate,
loading: addLoading,
error: addError,
} = useMutation<IAddToWishlistResponse>(ADD_TO_WISHLIST);
const {
mutate: removeMutate,
loading: removeLoading,
error: removedError,
} = useMutation<IRemoveFromWishlistResponse>(REMOVE_FROM_WISHLIST);
const {
mutate: removeAllMutate,
loading: removeAllLoading,
error: removeAllError,
} = useMutation<IRemoveAllFromWishlistResponse>(REMOVE_ALL_FROM_WISHLIST);
const {
mutate: bulkMutate,
loading: bulkLoading,
error: bulkError,
} = useMutation<IBulkWishlistResponse>(BULK_WISHLIST);
async function overwriteWishlist(args: IOverwriteWishlistArguments) {
if (isAuthenticated.value) {
switch (args.type) {
case 'add': {
const addResult = await addMutate({
wishlistUuid: wishlistUuid.value,
productUuid: args.productUuid,
});
if (addResult?.data?.addWishlistProduct?.wishlist) {
wishlistStore.setWishlist(addResult.data.addWishlistProduct.wishlist);
useNotification({
message: t('popup.success.addToWishlist', {
product: args.productName,
}),
type: 'success',
});
}
break;
}
case 'remove': {
const removeResult = await removeMutate({
wishlistUuid: wishlistUuid.value,
productUuid: args.productUuid,
});
if (removeResult?.data?.removeWishlistProduct?.wishlist) {
wishlistStore.setWishlist(removeResult.data.removeWishlistProduct.wishlist);
useNotification({
message: t('popup.success.removeFromWishlist', {
product: args.productName,
}),
type: 'success',
});
}
break;
}
case 'removeAll': {
const removeAllResult = await removeAllMutate({
wishlistUuid: wishlistUuid.value,
productUuid: args.productUuid,
});
if (removeAllResult?.data?.removeAllWishlistProducts?.wishlist) {
wishlistStore.setWishlist(removeAllResult.data.removeAllWishlistProducts.wishlist);
useNotification({
message: t('popup.success.removeAllFromWishlist'),
type: 'success',
});
}
break;
}
case 'bulk': {
const bulkResult = await bulkMutate({
wishlistUuid: wishlistUuid.value,
action: args.bulkAction,
products: args.products,
});
if (bulkResult?.data?.bulkWishlistAction?.wishlist) {
wishlistStore.setWishlist(bulkResult.data.bulkWishlistAction.wishlist);
if (args.isBulkSync) {
cookieWishlist.value = [];
} else {
useNotification({
message: t('popup.success.bulkRemoveWishlist'),
type: 'success',
});
}
}
break;
}
default:
console.error('No type provided for overwriteWishlist');
}
} else {
switch (args.type) {
case 'add': {
const current = Array.isArray(cookieWishlist.value)
? [...cookieWishlist.value]
: [];
if (current.includes(args.productUuid)) {
useNotification({
message: t('popup.errors.alreadyInWishlist', {
product: args.productName,
}),
type: 'warning',
});
return;
}
current.push(args.productUuid);
cookieWishlist.value = current;
useNotification({
message: t('popup.success.addToWishlist', {
product: args.productName,
}),
type: 'success',
});
break;
}
case 'remove': {
cookieWishlist.value = Array.isArray(cookieWishlist.value)
? cookieWishlist.value.filter(
(uuid) => uuid !== args.productUuid
)
: [];
useNotification({
message: t('popup.success.removeFromWishlist', {
product: args.productName,
}),
type: 'success',
});
break;
}
case 'removeAll': {
cookieWishlist.value = [];
useNotification({
message: t('popup.success.removeAllFromWishlist'),
type: 'success',
});
break;
}
case 'bulk': {
const bulkResult = await bulkMutate({
wishlistUuid: wishlistUuid.value,
action: args.bulkAction,
products: args.products,
});
if (bulkResult?.data?.bulkWishlistAction?.wishlist) {
wishlistStore.setWishlist(bulkResult.data.bulkWishlistAction.wishlist);
if (args.isBulkSync) {
cookieWishlist.value = [];
} else {
useNotification({
message: t('popup.success.bulkRemoveWishlist'),
type: 'success',
});
}
}
break;
}
default:
console.error('No type provided for overwriteWishlist');
}
}
}
watch(
[addError, removedError, removeAllError, bulkError],
(errors) => {
const err = errors.find(Boolean);
if (!err) return;
console.error('useWishlistOverwrite error:', err);
let message = t('popup.errors.defaultError');
if (isGraphQLError(err)) {
message = err.graphQLErrors?.[0]?.message || message;
} else {
message = err.message;
}
useNotification({
message,
type: 'error',
title: t('popup.errors.main'),
});
}
);
return {
addLoading,
removeLoading,
removeAllLoading,
bulkLoading,
overwriteWishlist,
};
}