@teamnovu/kit-shopware-composables 0.0.2 → 0.0.4

package/src/helpers/checkout/useShippingMethods.ts

@@ -0,0 +1,35 @@
+import { computed } from 'vue'
+import { useReadShippingMethodQuery } from '../../query'
+import { useReadContextQuery } from '../../query/context/useReadContextQuery'
+import { useUpdateContextMutation } from '../../query/context/useUpdateContextMutation'
+
+export function useShippingMethods() {
+  const contextQuery = useReadContextQuery()
+  const contextUpdateMutation = useUpdateContextMutation()
+  const shippingMethodsQuery = useReadShippingMethodQuery({
+    query: {
+      onlyActive: true,
+    },
+  })
+
+  const isSaving = computed(() => contextUpdateMutation.isPending.value)
+
+  const setShippingMethod = async (shippingMethodId: string) => {
+    return contextUpdateMutation.mutateAsync({
+      shippingMethodId,
+    })
+  }
+
+  const activeShippingMethod = computed(() => contextQuery.data?.value?.shippingMethod)
+  const shippingMethods = computed(() => shippingMethodsQuery.data?.value?.elements)
+
+  return {
+    contextUpdateMutation,
+    contextQuery,
+    shippingMethodsQuery,
+    activeShippingMethod,
+    setShippingMethod,
+    isSaving,
+    shippingMethods,
+  }
+}

package/src/helpers/general/index.ts

@@ -0,0 +1,2 @@
+export * from './useSeoUrl'
+export * from './usePagination'

package/src/helpers/index.ts

@@ -0,0 +1,4 @@
+export * from './checkout'
+export * from './general'
+export * from './product'
+export * from './user'

package/src/helpers/product/index.ts

@@ -0,0 +1,2 @@
+export * from './useProductPrice'
+export * from './useProductVariantForOptions'

package/src/{products → helpers/product}/useProductPrice.ts

@@ -1,64 +1,23 @@
 /**
  * Copied from:
- * https://github.com/shopware/frontends/blob/main/packages/composables/src/useProductPrice/useProductPrice.ts#L7
+ * https://github.com/shopware/frontends/blob/main/packages/composables/src/useProductPrice/useProductPrice.ts
  */
 
 import type { Schemas } from '#store-types'
-import type { TierPrice } from '@shopware/helpers'
 import { getProductTierPrices } from '@shopware/helpers'
 import type { ComputedRef, Ref } from 'vue'
 import { computed } from 'vue'
 
-export type UseProductPriceReturn = {
-  /**
-   * Whole calculated price object
-   */
-  price: ComputedRef<Schemas['CalculatedPrice'] | undefined>
-  /**
-   * Calculated price value for one selling unit
-   */
-  totalPrice: ComputedRef<number | undefined>
-  /**
-   * Current unit price value
-   */
-  unitPrice: ComputedRef<number | undefined>
-  /**
-   * Can be used if isListPrice is set to true
-   */
-  referencePrice: ComputedRef<
-    Schemas['CalculatedPrice']['referencePrice'] | undefined
-  >
-  /**
-   * determines if `price` contains the minimum tier price
-   */
-  displayFrom: ComputedRef<boolean>
-  /**
-   * cheapest price value for a variant if exists
-   */
-  displayFromVariants: ComputedRef<number | false | undefined>
-  /**
-   * array of TierPrice object
-   */
-  tierPrices: ComputedRef<TierPrice[]>
-  /**
-   * determines whether a discount price is set
-   */
-  isListPrice: ComputedRef<boolean>
-  /**
-   * price for products with regulation price
-   */
-  regulationPrice: ComputedRef<number | undefined>
-}
-
 /**
- * The purpose of the `useProductPrice` function is to abstract the logic to expose most useful helpers for price displaying.
+ * The purpose of the `useProductPrice` function is to abstract the logic
+ * to expose most useful helpers for price displaying.
  *
  * @public
  * @category Product
  */
 export function useProductPrice(
   product: Ref<Schemas['Product'] | undefined>,
-): UseProductPriceReturn {
+) {
   const _cheapest: ComputedRef<
     Schemas['Product']['calculatedCheapestPrice'] | undefined
   > = computed(() => product.value?.calculatedCheapestPrice)

package/src/{products → helpers/product}/useProductVariantForOptions.ts

@@ -4,7 +4,10 @@ import { computed, unref } from 'vue'
 
 type DetailProduct<S extends Schemas> = S['CustomProductDetailResponse']['product']
 
-export function getProductVariantForOptions<S extends Schemas>(product: DetailProduct<S>, optionIds: string[]) {
+export function getProductVariantForOptions<S extends Schemas>(
+  product: DetailProduct<S>,
+  optionIds: string[],
+) {
   const variants = product.extensions?.variants
 
   if (optionIds.length === 0) {
@@ -16,6 +19,9 @@ export function getProductVariantForOptions<S extends Schemas>(product: DetailPr
   return variants?.find(v => v.optionIds?.every(optId => optionIds.includes(optId)))
 }
 
-export function useProductVariantForOptions<S extends Schemas>(product: MaybeRef<DetailProduct<S>>, optionIds: MaybeRef<string[]>) {
+export function useProductVariantForOptions<S extends Schemas>(
+  product: MaybeRef<DetailProduct<S>>,
+  optionIds: MaybeRef<string[]>,
+) {
   return computed(() => getProductVariantForOptions(unref(product), unref(optionIds)))
 }

package/src/helpers/user/index.ts

@@ -0,0 +1,2 @@
+export * from './useIsLoggedIn'
+export * from './useUser'

package/src/helpers/user/useIsLoggedIn.ts

@@ -0,0 +1,10 @@
+import { computed } from 'vue'
+import { useReadContextQuery } from '../../query/context/useReadContextQuery'
+
+export function useIsLoggedIn() {
+  const { data: context } = useReadContextQuery()
+
+  return computed(() => !!context.value?.customer?.id
+    && !!context.value?.customer?.active
+    && !context.value?.customer?.guest)
+}

package/src/helpers/user/useUser.ts

@@ -0,0 +1,53 @@
+import { computed } from 'vue'
+import {
+  useReadCustomerQuery,
+} from '../../query/customer'
+import { Schemas } from '../../query/types'
+
+export function useUser(criteria?: Schemas['Criteria']) {
+  // Create customer query
+  const customerQuery = useReadCustomerQuery(criteria ? { body: criteria } : undefined)
+
+  const user = computed(() => customerQuery.data?.value)
+
+  const isLoggedIn = computed(
+    () => !!user.value?.id && !!user.value.active && !user.value.guest,
+  )
+
+  const isCustomerSession = computed(
+    () => !!user.value?.id && !user.value.guest,
+  )
+
+  const isGuestSession = computed(() => !!user.value?.guest)
+
+  const defaultBillingAddressId = computed(
+    () => user.value?.defaultBillingAddressId || null,
+  )
+
+  const defaultShippingAddressId = computed(
+    () => user.value?.defaultShippingAddressId || null,
+  )
+
+  const userDefaultBillingAddress = computed(
+    () => user.value?.defaultBillingAddress || null,
+  )
+
+  const userDefaultShippingAddress = computed(
+    () => user.value?.defaultShippingAddress || null,
+  )
+
+  return {
+    // Computed properties
+    user,
+    isLoggedIn,
+    isCustomerSession,
+    isGuestSession,
+    defaultBillingAddressId,
+    defaultShippingAddressId,
+    userDefaultBillingAddress,
+    userDefaultShippingAddress,
+
+    // Expose queries and mutations directly
+    customerQuery,
+  }
+}

package/src/index.ts

@@ -1,24 +1,7 @@
-import type { Schemas as BaseSchemas, operations } from '#store-types'
-import { useContextOptions } from './context/useContextOptions'
-import { useContextUpdate } from './context/useContextUpdate'
-import { useCategoryQueryOptions } from './products/useCategoryQueryOptions'
-import { useProductListingQueryOptions } from './products/useProductListingQueryOptions'
-import { useProductQueryOptions } from './products/useProductQueryOptions'
-import { useProductVariantForOptions } from './products/useProductVariantForOptions'
+import './query/types'
 
-export * from './general/useSeoUrl'
 export * from './inject'
 export * from './keys'
-export * from './products/useProductPrice'
-export * from './products/useProductVariantForOptions'
-export * from './usePagination'
-export * from './util/url'
-
-export default class ShopwareComposables<Operations extends operations, Schemas extends BaseSchemas> {
-  useProductListingQueryOptions = useProductListingQueryOptions<Operations>
-  useCategoryQueryOptions = useCategoryQueryOptions<Operations>
-  useContextOptions = useContextOptions<Operations>
-  useContextUpdate = useContextUpdate<Operations>
-  useProductQueryOptions = useProductQueryOptions<Operations>
-  useProductVariantForOptions = useProductVariantForOptions<Schemas>
-}
+export * from './helpers'
+export * from './query'
+export * from './util'

package/src/inject.ts

@@ -1,16 +1,16 @@
-import type { operations } from '#store-types'
 import type { ShopwareClient } from '@teamnovu/kit-shopware-api-client'
 import type { InjectionKey } from 'vue'
 import { inject } from 'vue'
+import { Operations } from './query/types/operations'
 
 export const shopwareClientKey = Symbol('shopwareClient') as InjectionKey<ShopwareClient<never>>
 
-export function useShopwareQueryClient<Operations>() {
+export function useShopwareQueryClient() {
   const client = inject(shopwareClientKey)
 
   if (!client) {
     throw new Error('Shopware client not provided!')
   }
 
-  return client as ShopwareClient<operations & Operations>
+  return client as ShopwareClient<Operations>
 }

package/src/keys.ts

@@ -40,3 +40,64 @@ export const productKeys = {
       },
     ] as const,
 }
+
+export const cartKeys = {
+  get: () => ['cart'] as const,
+}
+
+export const customerKeys = {
+  get: () => ['customer'] as const,
+}
+
+export const addressKeys = {
+  all: () => ['address'] as const,
+  lists: () => [...addressKeys.all(), 'list'] as const,
+  list: (body: MaybeRef<unknown>) =>
+    [
+      ...addressKeys.all(),
+      'list',
+      {
+        body,
+      },
+    ] as const,
+}
+
+export const shippingKeys = {
+  all: () => ['shippingMethod'] as const,
+  lists: () => [...shippingKeys.all(), 'list'] as const,
+  list: (body: MaybeRef<unknown>) =>
+    [
+      ...shippingKeys.all(),
+      'list',
+      {
+        body,
+      },
+    ] as const,
+}
+
+export const paymentKeys = {
+  all: () => ['paymentMethod'] as const,
+  lists: () => [...paymentKeys.all(), 'list'] as const,
+  list: (body: MaybeRef<unknown>) =>
+    [
+      ...paymentKeys.all(),
+      'list',
+      {
+        body,
+      },
+    ] as const,
+}
+
+export const orderKeys = {
+  all: () => ['order'] as const,
+  lists: () => [...orderKeys.all(), 'list'] as const,
+  details: () => [...orderKeys.all(), 'detail'] as const,
+  detail: (body: MaybeRef<unknown>) =>
+    [
+      ...orderKeys.all(),
+      'detail',
+      {
+        body,
+      },
+    ] as const,
+}

package/src/query/address/index.ts

@@ -0,0 +1,3 @@
+export * from './useListAddressQuery'
+export * from './useCreateCustomerAddressMutation'
+export * from './useDeleteCustomerAddressMutation'

package/src/query/address/useCreateCustomerAddressMutation.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 { addressKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+
+const createCustomerAddressOperation = 'createCustomerAddress post /account/address' satisfies OperationKey
+
+export function useCreateCustomerAddressMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof createCustomerAddressOperation>,
+    unknown,
+    OperationOptions<typeof createCustomerAddressOperation>
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (options: OperationOptions<typeof createCustomerAddressOperation>) => {
+      return client.query(createCustomerAddressOperation, unrefOptions(options))
+    },
+    onSuccess: (data, variables, context) => {
+      // Invalidate address list queries to refetch data
+      queryClient.invalidateQueries({ queryKey: addressKeys.lists() })
+
+      unref(unref(mutationOptions)?.onSuccess)?.(data, variables, context)
+    },
+  })
+}

package/src/query/address/useDeleteCustomerAddressMutation.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 { addressKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+
+const deleteCustomerAddressOperation = 'deleteCustomerAddress delete /account/address/{addressId}' satisfies OperationKey
+
+export function useDeleteCustomerAddressMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof deleteCustomerAddressOperation>,
+    unknown,
+    OperationOptions<typeof deleteCustomerAddressOperation>
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (options: OperationOptions<typeof deleteCustomerAddressOperation>) => {
+      return client.query(deleteCustomerAddressOperation, unrefOptions(options))
+    },
+    onSuccess: (data, variables, context) => {
+      // Invalidate address list queries to refetch data
+      queryClient.invalidateQueries({ queryKey: addressKeys.lists() })
+
+      unref(unref(mutationOptions)?.onSuccess)?.(data, variables, context)
+    },
+  })
+}

package/src/query/address/useListAddressQuery.ts

@@ -0,0 +1,29 @@
+import { queryOptions, useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
+import { useShopwareQueryClient } from '../../inject'
+import { addressKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+import type { OperationKey, OperationOptions } from '../types/query'
+
+const listAddressOperation = 'listAddress post /account/list-address' satisfies OperationKey
+
+export function useListAddressQueryOptions(
+  options?: OperationOptions<typeof listAddressOperation>,
+) {
+  const client = useShopwareQueryClient()
+  const queryKey = addressKeys.list(computed(() => unrefOptions(options)?.body))
+
+  return queryOptions({
+    queryKey,
+    queryFn: ({ signal }) => client.query(listAddressOperation, {
+      ...unrefOptions(options),
+      signal,
+    }),
+  })
+}
+
+export function useListAddressQuery(
+  options?: OperationOptions<typeof listAddressOperation>,
+) {
+  return useQuery(useListAddressQueryOptions(options))
+}

package/src/query/cart/index.ts

@@ -0,0 +1,4 @@
+export * from './useAddLineItemMutation'
+export * from './useReadCartQuery'
+export * from './useRemoveLineItemMutation'
+export * from './useUpdateLineItemMutation'

package/src/query/cart/useAddLineItemMutation.ts

@@ -0,0 +1,45 @@
+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 { cartKeys } from '../../keys'
+
+const addCartItemOperation = 'addLineItem post /checkout/cart/line-item' satisfies OperationKey
+
+type LineItem = OperationBody<typeof addCartItemOperation>['items'][number]
+
+type LineItemPayload =
+  Partial<Omit<LineItem, 'id' | 'quantity' | 'type'>> &
+  Required<Pick<LineItem, 'id' | 'quantity' | 'type'>>
+
+type Body = Omit<
+  OperationBody<typeof addCartItemOperation>,
+  'items'
+> & {
+  items: LineItemPayload[]
+}
+
+export function useAddLineItemMutation(
+  mutationOptions: UseMutationOptions<
+    OperationResponse<typeof addCartItemOperation>,
+    unknown,
+    Body
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (body: Body) => {
+      return client.query(addCartItemOperation, {
+        body: body as OperationBody<typeof addCartItemOperation>,
+      })
+    },
+    onSuccess: (newCart, variables, context) => {
+      queryClient.setQueryData(cartKeys.get(), newCart)
+      // queryClient.invalidateQueries({ queryKey: cartKeys.get() })
+      unref(unref(mutationOptions).onSuccess)?.(newCart, variables, context)
+    },
+  })
+}

package/src/query/cart/useReadCartQuery.ts

@@ -0,0 +1,28 @@
+import { queryOptions, useQuery } from '@tanstack/vue-query'
+import { useShopwareQueryClient } from '../../inject'
+import { cartKeys } from '../../keys'
+import { unrefOptions } from '../../util'
+import type { OperationKey, OperationOptions } from '../types/query'
+
+const readCartOperation = 'readCart get /checkout/cart' satisfies OperationKey
+
+export function useReadCartQueryOptions(
+  options?: OperationOptions<typeof readCartOperation>,
+) {
+  const client = useShopwareQueryClient()
+  const queryKey = cartKeys.get()
+
+  return queryOptions({
+    queryKey,
+    queryFn: async ({ signal }) => {
+      return client.query(readCartOperation, {
+        ...unrefOptions(options),
+        signal,
+      })
+    },
+  })
+}
+
+export function useReadCartQuery() {
+  return useQuery(useReadCartQueryOptions())
+}

package/src/query/cart/useRemoveLineItemMutation.ts

@@ -0,0 +1,32 @@
+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 { cartKeys } from '../../keys'
+
+const removeCartItemOperation = 'removeLineItem post /checkout/cart/line-item/delete' satisfies OperationKey
+
+export function useRemoveLineItemMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof removeCartItemOperation>,
+    unknown,
+    OperationBody<typeof removeCartItemOperation>
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (body: OperationBody<typeof removeCartItemOperation>) => {
+      return client.query(removeCartItemOperation, {
+        body: body as OperationBody<typeof removeCartItemOperation>,
+      })
+    },
+    onSuccess: (newCart, variables, context) => {
+      queryClient.setQueryData(cartKeys.get(), newCart)
+      // queryClient.invalidateQueries({ queryKey: cartKeys.get() })
+      unref(unref(mutationOptions)?.onSuccess)?.(newCart, variables, context)
+    },
+  })
+}

package/src/query/cart/useUpdateLineItemMutation.ts

@@ -0,0 +1,45 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import { useShopwareQueryClient } from '../../inject'
+import { cartKeys } from '../../keys'
+import type { OperationBody, OperationKey, OperationResponse } from '../types/query'
+
+const updateCartItemOperation = 'updateLineItem patch /checkout/cart/line-item' satisfies OperationKey
+
+type LineItem = OperationBody<typeof updateCartItemOperation>['items'][number]
+
+type LineItemPayload =
+  Partial<Omit<LineItem, 'id' | 'quantity' | 'type'>> &
+  Required<Pick<LineItem, 'id' | 'quantity' | 'type'>>
+
+type Body = Omit<
+  OperationBody<typeof updateCartItemOperation>,
+  'items'
+> & {
+  items: LineItemPayload[]
+}
+
+export function useUpdateLineItemMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof updateCartItemOperation>,
+    unknown,
+    Body
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (body: Body) => {
+      return client.query(updateCartItemOperation, {
+        body: body as OperationBody<typeof updateCartItemOperation>,
+      })
+    },
+    onSuccess: (newCart, variables, context) => {
+      queryClient.setQueryData(cartKeys.get(), newCart)
+      // queryClient.invalidateQueries({ queryKey: cartKeys.get() })
+      unref(unref(mutationOptions)?.onSuccess)?.(newCart, variables, context)
+    },
+  })
+}

package/src/query/checkout/index.ts

@@ -0,0 +1,2 @@
+export * from './useCheckout'
+export * from './useCreateOrderMutation'

package/src/query/checkout/useCheckout.ts

@@ -0,0 +1,2 @@
+export const useCheckout = () => {
+}

package/src/query/checkout/useCreateOrderMutation.ts

@@ -0,0 +1,35 @@
+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 { cartKeys, orderKeys } from '../../keys'
+import { unrefOptions } from '../../util/unrefOptions'
+
+const createOrderOperation = 'createOrder post /checkout/order' satisfies OperationKey
+
+export function useCreateOrderMutation(
+  mutationOptions?: UseMutationOptions<
+    OperationResponse<typeof createOrderOperation>,
+    unknown,
+    OperationOptions<typeof createOrderOperation>
+  >,
+) {
+  const client = useShopwareQueryClient()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    ...mutationOptions,
+    mutationFn: async (options?: OperationOptions<typeof createOrderOperation>) => {
+      return client.query(createOrderOperation, unrefOptions(options))
+    },
+    onSuccess: (data, variables, context) => {
+      // Clear cart after successful order creation
+      queryClient.invalidateQueries({ queryKey: cartKeys.get() })
+
+      // Invalidate order list to refetch data
+      queryClient.invalidateQueries({ queryKey: orderKeys.lists() })
+
+      unref(unref(mutationOptions)?.onSuccess)?.(data, variables, context)
+    },
+  })
+}

package/src/query/context/index.ts

@@ -0,0 +1,2 @@
+export * from './useReadContextQuery'
+export * from './useUpdateContextMutation'

package/src/query/context/useReadContextQuery.ts

@@ -0,0 +1,19 @@
+import { queryOptions, useQuery } from '@tanstack/vue-query'
+import { useShopwareQueryClient } from '../../inject'
+import { contextKeys } from '../../keys'
+import type { OperationKey } from '../types/query'
+
+const readContextOperation = 'readContext get /context' satisfies OperationKey
+
+export function useReadContext() {
+  const client = useShopwareQueryClient()
+
+  return queryOptions({
+    queryKey: contextKeys.all(),
+    queryFn: ({ signal }) => client.query(readContextOperation, { signal }),
+  })
+}
+
+export function useReadContextQuery() {
+  return useQuery(useReadContext())
+}