schon/storefront/app/composables/contact/useContactUs.ts

import { CONTACT_US } from '@graphql/mutations/contact';
import type { IContactUsResponse } from '@types';

interface IContactUsArguments {
	name: string;
	email: string;
	phoneNumber?: string;
	subject?: string;
	message: string;
}

export function useContactUs() {
	const { t } = useI18n();
	const { $notify } = useNuxtApp();

	const { mutate, loading, error } = useMutation<IContactUsResponse>(CONTACT_US);

	async function contactUs(args: IContactUsArguments) {
		const variables: Record<string> = {
			name: args.name,
			email: args.email,
			message: args.message,
		};

		if (args.phoneNumber) {
			variables.phoneNumber = args.phoneNumber;
		}

		if (args.subject) {
			variables.subject = args.subject;
		}

		const result = await mutate(variables);

		if (result?.data?.contactUs.received) {
			$notify({
				message: t('popup.success.contactUs'),
				type: 'success',
			});
		}
	}

	watch(error, (err) => {
		if (!err) return;
		console.error('useContactUs error:', err);
		let message = t('popup.errors.defaultError');
		if (isGraphQLError(err)) {
			message = err.graphQLErrors?.[0]?.message || message;
		} else {
			message = err.message;
		}
		$notify({
			message,
			type: 'error',
			title: t('popup.errors.main'),
		});
	});

	return {
		contactUs,
		loading,
	};
}