@teamnovu/kit-shopware-composables 0.0.2 → 0.0.4

package/src/query/context/useUpdateContextMutation.ts

@@ -0,0 +1,36 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import { useShopwareQueryClient } from '../../inject'
+import { contextKeys } from '../../keys'
+import type { OperationBody, OperationKey, OperationResponse } from '../types/query'
+
+const updateContextOperation = 'updateContext patch /context' satisfies OperationKey
+
+export function useUpdateContextMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof updateContextOperation>,
+    unknown,
+    OperationBody<typeof updateContextOperation>
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (body: OperationBody<typeof updateContextOperation>) => {
+      // Prevent race condition by cancelling the query before the mutation is executed
+      queryClient.cancelQueries({ queryKey: contextKeys.all() })
+
+      return client.query(updateContextOperation, {
+        body,
+      })
+    },
+
+    onSuccess: (newContext, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: contextKeys.all() })
+
+      unref(unref(mutationOptions)?.onSuccess)?.(newContext, variables, context)
+    },
+  })
+}

package/src/query/customer/index.ts

@@ -0,0 +1,6 @@
+export * from './useChangeEmailMutation'
+export * from './useChangeProfileMutation'
+export * from './useLoginCustomerMutation'
+export * from './useLogoutCustomerMutation'
+export * from './useReadCustomerQuery'
+export * from './useRegisterCustomerMutation'

package/src/query/customer/useChangeEmailMutation.ts

@@ -0,0 +1,32 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import type { OperationKey, OperationOptions, OperationResponse } from '../types/query'
+import { useShopwareQueryClient } from '../../inject'
+import { customerKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+
+const changeEmailOperation = 'changeEmail post /account/change-email' satisfies OperationKey
+
+export function useChangeEmailMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof changeEmailOperation>,
+    unknown,
+    OperationOptions<typeof changeEmailOperation>
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (options: OperationOptions<typeof changeEmailOperation>) => {
+      return client.query(changeEmailOperation, unrefOptions(options))
+    },
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: customerKeys.get() })
+
+      unref(unref(mutationOptions)?.onSuccess)?.(data, variables, context)
+    },
+  })
+}
+

package/src/query/customer/useChangeProfileMutation.ts

@@ -0,0 +1,32 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import type { OperationKey, OperationOptions, OperationResponse } from '../types/query'
+import { useShopwareQueryClient } from '../../inject'
+import { customerKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+
+const changeProfileOperation = 'changeProfile post /account/change-profile' satisfies OperationKey
+
+export function useChangeProfileMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof changeProfileOperation>,
+    unknown,
+    OperationOptions<typeof changeProfileOperation>
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (options: OperationOptions<typeof changeProfileOperation>) => {
+      return client.query(changeProfileOperation, unrefOptions(options))
+    },
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: customerKeys.get() })
+
+      unref(unref(mutationOptions)?.onSuccess)?.(data, variables, context)
+    },
+  })
+}
+

package/src/query/customer/useLoginCustomerMutation.ts

@@ -0,0 +1,42 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import type { OperationBody, OperationKey, OperationResponse } from '../types/query'
+import { useShopwareQueryClient } from '../../inject'
+import { contextKeys, cartKeys, customerKeys } from '../../keys'
+
+const loginCustomerOperation = 'loginCustomer post /account/login' satisfies OperationKey
+
+export function useLoginCustomerMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof loginCustomerOperation>,
+    unknown,
+    OperationBody<typeof loginCustomerOperation>
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (body: OperationBody<typeof loginCustomerOperation>) => {
+      const response = await client.queryRaw(loginCustomerOperation, {
+        body,
+      })
+
+      const contextToken = response.headers.get('sw-context-token')
+
+      if (contextToken) {
+        client.setContextToken(contextToken)
+      }
+
+      return response.json()
+    },
+    onSuccess: (newCustomer, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: contextKeys.all() })
+      queryClient.invalidateQueries({ queryKey: cartKeys.get() })
+      queryClient.invalidateQueries({ queryKey: customerKeys.get() })
+
+      unref(unref(mutationOptions)?.onSuccess)?.(newCustomer, variables, context)
+    },
+  })
+}

package/src/query/customer/useLogoutCustomerMutation.ts

@@ -0,0 +1,32 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import type { OperationKey, OperationOptions, OperationResponse } from '../types/query'
+import { useShopwareQueryClient } from '../../inject'
+import { customerKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+
+const logoutOperation = 'logoutCustomer post /account/logout' satisfies OperationKey
+
+export function useLogoutCustomerMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof logoutOperation>,
+    unknown,
+    OperationOptions<typeof logoutOperation>
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (options?: OperationOptions<typeof logoutOperation>) => {
+      return client.query(logoutOperation, unrefOptions(options))
+    },
+    onSuccess: (data, variables, context) => {
+      queryClient.removeQueries({ queryKey: customerKeys.get() })
+
+      unref(unref(mutationOptions)?.onSuccess)?.(data, variables, context)
+    },
+  })
+}
+

package/src/query/customer/useReadCustomerQuery.ts

@@ -0,0 +1,27 @@
+import { queryOptions, useQuery } from '@tanstack/vue-query'
+import { useShopwareQueryClient } from '../../inject'
+import { customerKeys } from '../../keys'
+import { unrefOptions } from '../../util'
+import type { OperationKey, OperationOptions } from '../types/query'
+
+const readCustomer = 'readCustomer post /account/customer' satisfies OperationKey
+
+export function useReadCustomerQueryOptions(
+  options?: OperationOptions<typeof readCustomer>,
+) {
+  const client = useShopwareQueryClient()
+  const queryKey = customerKeys.get()
+
+  return queryOptions({
+    queryKey,
+    queryFn: async () => {
+      return client.query(readCustomer, unrefOptions(options))
+    },
+  })
+}
+
+export function useReadCustomerQuery(
+  options?: OperationOptions<typeof readCustomer>,
+) {
+  return useQuery(useReadCustomerQueryOptions(options))
+}

package/src/query/customer/useRegisterCustomerMutation.ts

@@ -0,0 +1,32 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import type { OperationKey, OperationOptions, OperationResponse } from '../types/query'
+import { useShopwareQueryClient } from '../../inject'
+import { customerKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+
+const registerOperation = 'register post /account/register' satisfies OperationKey
+
+export function useRegisterCustomerMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof registerOperation>,
+    unknown,
+    OperationOptions<typeof registerOperation>
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (options: OperationOptions<typeof registerOperation>) => {
+      return client.query(registerOperation, unrefOptions(options))
+    },
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: customerKeys.get() })
+
+      unref(unref(mutationOptions)?.onSuccess)?.(data, variables, context)
+    },
+  })
+}
+

package/src/query/index.ts

@@ -0,0 +1,10 @@
+export * from './address'
+export * from './cart'
+export * from './checkout'
+export * from './context'
+export * from './customer'
+export * from './order'
+export * from './payment'
+export * from './products'
+export * from './shipping'
+export * from './types'

package/src/query/order/index.ts

@@ -0,0 +1 @@
+export * from './useReadOrderQuery'

package/src/query/order/useReadOrderQuery.ts

@@ -0,0 +1,33 @@
+import { queryOptions, useQuery } from '@tanstack/vue-query'
+import { useShopwareQueryClient } from '../../inject'
+import { orderKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+import type { OperationKey, OperationOptions } from '../types/query'
+
+const readOrderOperation = 'readOrder post /order' satisfies OperationKey
+
+export function useReadOrderQueryOptions(
+  options?: OperationOptions<typeof readOrderOperation>,
+) {
+  const client = useShopwareQueryClient()
+  const queryKey = orderKeys.detail(options)
+
+  return queryOptions({
+    queryKey,
+    queryFn: async ({ signal }) => {
+      const opts = unrefOptions(options)
+      return client.query(readOrderOperation, {
+        ...opts,
+        signal,
+      })
+    },
+    enabled: !!options,
+  })
+}
+
+export function useReadOrderQuery(
+  options?: OperationOptions<typeof readOrderOperation>,
+) {
+  return useQuery(useReadOrderQueryOptions(options))
+}
+

package/src/query/payment/index.ts

@@ -0,0 +1,3 @@
+export * from './useReadPaymentMethodQuery'
+export * from './useHandlePaymentMutation'
+export * from './useOrderSetPaymentMutation'

package/src/query/payment/useHandlePaymentMutation.ts

@@ -0,0 +1,27 @@
+import { useMutation, UseMutationOptions } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import type { OperationKey, OperationOptions, OperationResponse } from '../types/query'
+import { useShopwareQueryClient } from '../../inject'
+import { unrefOptions } from '../../util/unrefOptions'
+
+const handlePaymentOperation = 'handlePaymentMethod post /handle-payment' satisfies OperationKey
+
+export function useHandlePaymentMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof handlePaymentOperation>,
+    unknown,
+    OperationOptions<typeof handlePaymentOperation>
+  >,
+) {
+  const client = useShopwareQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (options: OperationOptions<typeof handlePaymentOperation>) => {
+      return client.query(handlePaymentOperation, unrefOptions(options))
+    },
+    onSuccess: (data, variables, context) => {
+      unref(unref(mutationOptions)?.onSuccess)?.(data, variables, context)
+    },
+  })
+}

package/src/query/payment/useOrderSetPaymentMutation.ts

@@ -0,0 +1,32 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import type { OperationKey, OperationOptions, OperationResponse } from '../types/query'
+import { useShopwareQueryClient } from '../../inject'
+import { orderKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+
+const orderSetPaymentOperation = 'orderSetPayment post /order/payment' satisfies OperationKey
+
+export function useOrderSetPaymentMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof orderSetPaymentOperation>,
+    unknown,
+    OperationOptions<typeof orderSetPaymentOperation>
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (options: OperationOptions<typeof orderSetPaymentOperation>) => {
+      return client.query(orderSetPaymentOperation, unrefOptions(options))
+    },
+    onSuccess: (data, variables, context) => {
+      // Invalidate order queries to refetch updated payment information
+      queryClient.invalidateQueries({ queryKey: orderKeys.all() })
+
+      unref(unref(mutationOptions)?.onSuccess)?.(data, variables, context)
+    },
+  })
+}

package/src/query/payment/useReadPaymentMethodQuery.ts

@@ -0,0 +1,30 @@
+import { queryOptions, useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
+import { useShopwareQueryClient } from '../../inject'
+import { paymentKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+import type { OperationKey, OperationOptions } from '../types/query'
+
+export const readPaymentMethodOperation = 'readPaymentMethod post /payment-method' satisfies OperationKey
+
+export function useReadPaymentMethodQueryOptions(
+  options?: OperationOptions<typeof readPaymentMethodOperation>,
+) {
+  const client = useShopwareQueryClient()
+  const queryKey = paymentKeys.list(computed(() => unrefOptions(options)?.body))
+
+  return queryOptions({
+    queryKey,
+    queryFn: ({ signal }) =>
+      client.query(readPaymentMethodOperation, {
+        ...unrefOptions(options),
+        signal,
+      }),
+  })
+}
+
+export function useReadPaymentMethodQuery(
+  options?: OperationOptions<typeof readPaymentMethodOperation>,
+) {
+  return useQuery(useReadPaymentMethodQueryOptions(options))
+}

package/src/query/products/index.ts

@@ -0,0 +1,3 @@
+export * from './useReadCategoryListQuery'
+export * from './useReadCompactProductListingQuery'
+export * from './useReadCustomProductDetailQuery'

package/src/query/products/useReadCategoryListQuery.ts

@@ -0,0 +1,28 @@
+import { queryOptions, useQuery } from '@tanstack/vue-query'
+import { useShopwareQueryClient } from '../../inject'
+import { categoryKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+import type { OperationKey, OperationOptions } from '../types/query'
+
+const readCategoryListOperation = 'readCategoryList post /category' satisfies OperationKey
+
+export const useReadCategoryListQueryOptions = function useReadCategoryListQueryOptions(
+  options?: OperationOptions<typeof readCategoryListOperation>,
+) {
+  const client = useShopwareQueryClient()
+  const queryKey = categoryKeys.list(options)
+
+  return queryOptions({
+    queryKey,
+    queryFn: async ({ signal }) => {
+      return client.query(readCategoryListOperation, {
+        ...unrefOptions(options),
+        signal,
+      })
+    },
+  })
+}
+
+export function useReadCategoryListQuery(options?: OperationOptions<typeof readCategoryListOperation>) {
+  return useQuery(useReadCategoryListQueryOptions(options))
+}

package/src/query/products/useReadCompactProductListingQuery.ts

@@ -0,0 +1,41 @@
+import { queryOptions, useQuery } from '@tanstack/vue-query'
+import type { MaybeRef } from 'vue'
+import { unref } from 'vue'
+import { useShopwareQueryClient } from '../../inject'
+import { productKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+import { relativizeSeoUrl } from '../../util/url'
+import type { OperationKey, OperationOptions } from '../types/query'
+
+// eslint-disable-next-line @stylistic/max-len
+const readListingOperation = 'readCompactProductListing post /novu/headless/product-listing/{seoUrl}' satisfies OperationKey
+
+export function useReadCompactProductListingQueryOptions(
+  seoUrl: MaybeRef<string>,
+  options?: OperationOptions<typeof readListingOperation, 'params'>,
+) {
+  const client = useShopwareQueryClient()
+  const queryKey = productKeys.list(seoUrl, options)
+
+  return queryOptions({
+    queryKey,
+    queryFn: async ({ signal }) => {
+      const opts = unrefOptions(options)
+      return client.query(readListingOperation, {
+        ...opts,
+        params: {
+          ...opts.params,
+          seoUrl: relativizeSeoUrl(unref(seoUrl)),
+        },
+        signal,
+      })
+    },
+  })
+}
+
+export function useReadCompactProductListingQuery(
+  seoUrl: MaybeRef<string>,
+  options?: OperationOptions<typeof readListingOperation, 'params'>,
+) {
+  return useQuery(useReadCompactProductListingQueryOptions(seoUrl, options))
+}

package/src/query/products/useReadCustomProductDetailQuery.ts

@@ -0,0 +1,41 @@
+import { queryOptions, useQuery } from '@tanstack/vue-query'
+import type { MaybeRef } from 'vue'
+import { unref } from 'vue'
+import { useShopwareQueryClient } from '../../inject'
+import { productKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+import { relativizeSeoUrl } from '../../util/url'
+import type { OperationKey, OperationOptions } from '../types/query'
+
+// eslint-disable-next-line @stylistic/max-len
+const readCustomProductDetailOperation = 'readCustomProductDetail post /novu/headless/product/{seoUrl}' satisfies OperationKey
+
+export function useReadCustomProductDetailOptions(
+  seoUrl: MaybeRef<string>,
+  body?: OperationOptions<typeof readCustomProductDetailOperation, 'params'>,
+) {
+  const client = useShopwareQueryClient()
+  const queryKey = productKeys.detail(seoUrl, body)
+
+  return queryOptions({
+    queryKey,
+    queryFn: async ({ signal }) => {
+      const opts = unrefOptions(body)
+      return client.query(readCustomProductDetailOperation, {
+        ...opts,
+        params: {
+          ...opts.params,
+          seoUrl: relativizeSeoUrl(unref(seoUrl)),
+        },
+        signal,
+      })
+    },
+  })
+}
+
+export function useReadCustomProductDetailQuery(
+  seoUrl: MaybeRef<string>,
+  body?: OperationOptions<typeof readCustomProductDetailOperation, 'params'>,
+) {
+  return useQuery(useReadCustomProductDetailOptions(seoUrl, body))
+}

package/src/query/shipping/index.ts

@@ -0,0 +1 @@
+export * from './useReadShippingMethodQuery'

package/src/query/shipping/useReadShippingMethodQuery.ts

@@ -0,0 +1,29 @@
+import { queryOptions, useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
+import { useShopwareQueryClient } from '../../inject'
+import { shippingKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+import type { OperationKey, OperationOptions } from '../types/query'
+
+export const readShippingMethodOperation = 'readShippingMethod post /shipping-method' satisfies OperationKey
+
+export function useReadShippingMethodQueryOptions(
+  options?: OperationOptions<typeof readShippingMethodOperation>,
+) {
+  const client = useShopwareQueryClient()
+  const queryKey = shippingKeys.list(computed(() => unrefOptions(options)?.body))
+
+  return queryOptions({
+    queryKey,
+    queryFn: ({ signal }) => client.query(readShippingMethodOperation, {
+      ...unrefOptions(options),
+      signal,
+    }),
+  })
+}
+
+export function useReadShippingMethodQuery(
+  options?: OperationOptions<typeof readShippingMethodOperation>,
+) {
+  return useQuery(useReadShippingMethodQueryOptions(options))
+}

package/src/query/types/index.ts

@@ -0,0 +1,2 @@
+export * from './operations'
+export * from './query'

package/src/query/types/operations.ts

@@ -0,0 +1,6 @@
+import { operations, Schemas as OriginalSchemas } from '#store-types'
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface Operations extends operations {}
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface Schemas extends OriginalSchemas {}

package/src/query/types/query.ts

@@ -0,0 +1,39 @@
+import type { operations } from '#store-types'
+import type { QueryKey, UseQueryOptions } from '@tanstack/vue-query'
+import type {
+  OperationProp,
+  OperationOptions as RawOperationOptions,
+} from '@teamnovu/kit-shopware-api-client'
+import { MaybeRef, UnwrapRef } from 'vue'
+import { Operations } from './operations'
+
+export type PartialProps<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
+
+export type ShallowMaybeRefs<T> = {
+  [K in keyof T]: MaybeRef<T[K]>
+}
+
+export type ShallowUnwrapRefs<T> = {
+  [K in keyof T]: UnwrapRef<T[K]>
+}
+
+export type OperationKey = keyof operations
+export type OperationBody<K extends OperationKey> =
+  OperationProp<Operations, K, 'body'>
+export type OperationResponse<K extends OperationKey> =
+  OperationProp<Operations, K, 'response'>
+
+export type OperationOptions<
+  K extends OperationKey,
+  OmitKeys extends keyof RawOperationOptions<Operations, K> = never,
+> =
+  MaybeRef<ShallowMaybeRefs<PartialProps<RawOperationOptions<Operations, K>, OmitKeys>>>
+
+export type Options<K extends OperationKey, QK extends QueryKey = QueryKey> =
+  UseQueryOptions<
+    OperationResponse<K>,
+    Error,
+    OperationResponse<K>,
+    OperationResponse<K>,
+    QK
+  >

package/src/util/index.ts

@@ -0,0 +1,3 @@
+export * from './unrefOptions'
+export * from './url'
+export * from './useOptimistic'

package/src/util/unrefOptions.ts

@@ -0,0 +1,19 @@
+import { unref, UnwrapRef } from 'vue'
+import { OperationOptions as RawOperationOptions } from '@teamnovu/kit-shopware-api-client'
+import { OperationOptions, PartialProps } from '../query/types/query'
+import { Operations } from '../query/types'
+
+export function unrefOptions<
+  K extends keyof Operations,
+  OmitKeys extends keyof RawOperationOptions<Operations, K> = never,
+>(
+  options: OperationOptions<K, OmitKeys> | undefined,
+) {
+  const opts = unref(options)
+
+  return Object.fromEntries(
+    Object.entries(opts ?? {}).map(
+      ([key, value]) => [key, unref(value) as UnwrapRef<typeof value>],
+    ),
+  ) as PartialProps<RawOperationOptions<Operations, K>, OmitKeys>
+}