@teamnovu/kit-shopware-composables 0.0.1

package/docker/boot_end.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+export COMPOSER_HOME=/var/www
+
+bin/console database:migrate --all
+bin/console cache:clear
+composer require teamnovu/shopware-headless-plugin
+bin/console plugin:refresh
+bin/console plugin:install --activate NovuShopwareHeadlessPlugin
+bin/console cache:clear
+
+echo "Custom Setup Done :)"

package/docker/docker-compose.yaml

@@ -0,0 +1,22 @@
+name: shopware-for-kit
+
+services:
+  shopware-for-kit:
+    image: dockware/dev:6.7.0.0-rc2
+    container_name: shopware-for-kit
+    ports:
+      - "8500:80"
+    volumes:
+      - "db:/var/lib/mysql"
+      - "./boot_end.sh:/var/www/boot_end.sh"
+      - "./custom:/var/www/html/custom"
+    networks:
+      - web
+
+volumes:
+  db:
+    driver: local
+
+networks:
+  web:
+    external: false

package/docker/types.sh

@@ -0,0 +1,14 @@
+
+cd docker && docker compose up &
+
+# This currently works but it goes on with the script before all plugins are installed.
+# thus the first time this runs we may have to run the script twice.
+until curl --output /dev/null --silent --head --fail http://localhost:8500; do
+    sleep 3
+done
+
+
+pnpm dlx @shopware/api-gen loadSchema --apiType=store
+pnpm dlx @shopware/api-gen generate --apiType=store
+
+cd docker && docker compose down

package/eslint.config.mjs

@@ -0,0 +1,84 @@
+import js from '@eslint/js'
+import pluginStylistic from '@stylistic/eslint-plugin'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  js.configs.recommended,
+  tseslint.configs.recommended,
+  pluginStylistic.configs['recommended'],
+  {
+    rules: {
+      // stylistic
+      // ********************
+      '@stylistic/newline-per-chained-call': [
+        'error',
+        { ignoreChainWithDepth: 2 },
+      ],
+      '@stylistic/nonblock-statement-body-position': 'error',
+      '@stylistic/one-var-declaration-per-line': 'error',
+      '@stylistic/operator-linebreak': [
+        'error',
+        'before',
+        { overrides: { '=': 'none' } },
+      ],
+      '@stylistic/function-paren-newline': ['error', 'multiline-arguments'],
+      '@stylistic/dot-location': ['error', 'property'],
+      '@stylistic/no-mixed-operators': ['error', { allowSamePrecedence: true }],
+      '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: true }],
+      '@stylistic/array-bracket-newline': ['error', { multiline: true }],
+      '@stylistic/array-element-newline': [
+        'error',
+        {
+          multiline: true,
+          consistent: true,
+        },
+      ],
+      '@stylistic/max-len': [
+        'warn',
+        {
+          code: 150,
+          tabWidth: 2,
+        },
+      ],
+      '@stylistic/object-curly-newline': [
+        'error',
+        {
+          multiline: true,
+          consistent: true,
+        },
+      ],
+      '@stylistic/object-property-newline': [
+        'error',
+        { allowAllPropertiesOnSameLine: false },
+      ],
+
+      // common
+      // ********************
+      'no-console': ['error', { allow: ['warn', 'error'] }],
+      'prefer-destructuring': [
+        'error',
+        {
+          array: false,
+          object: true,
+        },
+      ],
+      'no-unused-vars': 'off',
+      'eqeqeq': ['error', 'smart'],
+      'no-undef': 'off', // done by typescript
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+)

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@teamnovu/kit-shopware-composables",
+  "version": "0.0.1",
+  "description": "A collection of composables for the Shopware API",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "peerDependencies": {
+    "@tanstack/vue-query": "^5.0.0",
+    "@teamnovu/kit-shopware-api-client": "workspace:*",
+    "vue": "^3.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "watch": "NODE_ENV=development vite build --watch",
+    "gen-types": "bash ./docker/types.sh",
+    "lint": "eslint --fix --ignore-pattern 'dist/**' ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:teamnovu/kit.git"
+  },
+  "keywords": [],
+  "author": "Elias Bernhaut",
+  "homepage": "https://kit.novu.ch/packages/shopware-composables/",
+  "dependencies": {
+    "vite": "^6.2.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.0",
+    "@shopware/api-gen": "^1.3.0",
+    "@shopware/helpers": "^1.4.0",
+    "@stylistic/eslint-plugin": "^4.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.30.1",
+    "@typescript-eslint/parser": "^8.30.1",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.25.0",
+    "eslint-import-resolver-typescript": "^4.3.3",
+    "eslint-plugin-import": "^2.31.0",
+    "typescript-eslint": "^8.30.1",
+    "vitest": "^3.1.2"
+  }
+}

package/src/context/useContextOptions.ts

@@ -0,0 +1,16 @@
+import type { operations } from '#store-types'
+import { queryOptions } 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 useContextOptions<Operations extends operations>() {
+  const client = useShopwareQueryClient<Operations>()
+
+  return queryOptions({
+    queryKey: contextKeys.all(),
+    queryFn: () => client.query(readContextOperation),
+  })
+}

package/src/context/useContextUpdate.ts

@@ -0,0 +1,16 @@
+import type { operations } from '#store-types'
+import { useMutation } from '@tanstack/vue-query'
+import { useShopwareQueryClient } from '../inject'
+import type { OperationKey } from '../types/query'
+
+const updateContextOperation = 'updateContext patch /context' satisfies OperationKey
+
+export function useContextUpdate<Operations extends operations>() {
+  const client = useShopwareQueryClient<Operations>()
+
+  return useMutation({
+    mutationFn: async () => {
+      return client.query(updateContextOperation)
+    },
+  })
+}

package/src/general/useSeoUrl.ts

@@ -0,0 +1,18 @@
+import type { GenericRecord } from '#store-types'
+import type { MaybeRef } from 'vue'
+import { computed, unref } from 'vue'
+
+interface SeoUrlEntity {
+  extensions?: {
+    novuSeoUrls?: GenericRecord
+  }
+}
+
+export const getSeoUrl = <T extends SeoUrlEntity>(entity: T, languageId: string) => {
+  const urls = entity.extensions?.novuSeoUrls as Record<string, string>
+  return urls?.[languageId] ?? ''
+}
+
+export const useSeoUrl = <T extends SeoUrlEntity>(entity: MaybeRef<T>, languageId: MaybeRef<string>) => {
+  return computed(() => getSeoUrl(unref(entity), unref(languageId)))
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+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'
+
+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>
+}

package/src/inject.ts

@@ -0,0 +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'
+
+export const shopwareClientKey = Symbol('shopwareClient') as InjectionKey<ShopwareClient<never>>
+
+export function useShopwareQueryClient<Operations>() {
+  const client = inject(shopwareClientKey)
+
+  if (!client) {
+    throw new Error('Shopware client not provided!')
+  }
+
+  return client as ShopwareClient<operations & Operations>
+}

package/src/keys.ts

@@ -0,0 +1,42 @@
+import type { MaybeRef } from 'vue'
+
+export const contextKeys = {
+  all: () => ['context'] as const,
+}
+
+export const categoryKeys = {
+  all: () => ['category'] as const,
+  lists: () => [...categoryKeys.all(), 'list'] as const,
+  list: (body: MaybeRef<unknown>) =>
+    [
+      ...categoryKeys.all(),
+      'list',
+      {
+        body,
+      },
+    ] as const,
+}
+
+export const productKeys = {
+  all: () => ['product'] as const,
+  lists: () => [...productKeys.all(), 'list'] as const,
+  list: (url: MaybeRef<string>, body: MaybeRef<unknown>) =>
+    [
+      ...productKeys.all(),
+      'list',
+      {
+        url,
+        body,
+      },
+    ] as const,
+  details: () => [...productKeys.all(), 'detail'] as const,
+  detail: (url: MaybeRef<string>, body: MaybeRef<unknown>) =>
+    [
+      ...productKeys.all(),
+      'detail',
+      {
+        url,
+        body,
+      },
+    ] as const,
+}

package/src/products/useCategoryQueryOptions.ts

@@ -0,0 +1,25 @@
+import type { operations } from '#store-types'
+import { queryOptions } from '@tanstack/vue-query'
+import type { MaybeRef } from 'vue'
+import { unref } from 'vue'
+import { useShopwareQueryClient } from '../inject'
+import { categoryKeys } from '../keys'
+import type { OperationBody, OperationKey } from '../types/query'
+
+const readCategoryListOperation = 'readCategoryList post /category' satisfies OperationKey
+
+export function useCategoryQueryOptions<Operations extends operations>(
+  body?: MaybeRef<OperationBody<Operations, typeof readCategoryListOperation>>,
+) {
+  const client = useShopwareQueryClient<Operations>()
+  const queryKey = categoryKeys.list(body)
+
+  return queryOptions({
+    queryKey,
+    queryFn: async () => {
+      return client.query(readCategoryListOperation, {
+        body: unref(body),
+      })
+    },
+  })
+}

package/src/products/useProductListingQueryOptions.test.ts

@@ -0,0 +1,24 @@
+import { useQuery, VueQueryPlugin } from '@tanstack/vue-query'
+import { ShopwareClient } from '@teamnovu/kit-shopware-api-client'
+import { createApp } from 'vue'
+import { shopwareClientKey } from '../inject'
+import { useProductListingQueryOptions } from './useProductListingQueryOptions'
+
+test('useProducts receives products', async () => {
+  const app = createApp({ template: '' })
+
+  app.provide(shopwareClientKey, new ShopwareClient({
+    apiKey: import.meta.env.VITE_SHOPWARE_ACCESS_KEY,
+    baseURL: import.meta.env.VITE_SHOPWARE_URL,
+  }))
+
+  app.use(VueQueryPlugin)
+
+  await app.runWithContext(async () => {
+    const { data, suspense } = useQuery(useProductListingQueryOptions('/Food/Bakery-products/'))
+
+    await suspense()
+
+    expect(data).toBeTruthy()
+  })
+})

package/src/products/useProductListingQueryOptions.ts

@@ -0,0 +1,28 @@
+import type { operations } from '#store-types'
+import { queryOptions } from '@tanstack/vue-query'
+import type { MaybeRef } from 'vue'
+import { unref } from 'vue'
+import { useShopwareQueryClient } from '../inject'
+import { productKeys } from '../keys'
+import type { OperationBody, OperationKey } from '../types/query'
+import { relativizeSeoUrl } from '../util/url'
+
+const readListingOperation = 'readCompactProductListing post /novu/headless/product-listing/{seoUrl}' satisfies OperationKey
+
+export function useProductListingQueryOptions<Operations extends operations>(
+  seoUrl: MaybeRef<string>,
+  body?: MaybeRef<OperationBody<Operations, typeof readListingOperation>>,
+) {
+  const client = useShopwareQueryClient<Operations>()
+  const queryKey = productKeys.list(seoUrl, body)
+
+  return queryOptions({
+    queryKey,
+    queryFn: async () => {
+      return client.query(readListingOperation, {
+        params: { seoUrl: relativizeSeoUrl(unref(seoUrl)) },
+        body: unref(body),
+      })
+    },
+  })
+}

package/src/products/useProductPrice.ts

@@ -0,0 +1,136 @@
+/**
+ * Copied from:
+ * https://github.com/shopware/frontends/blob/main/packages/composables/src/useProductPrice/useProductPrice.ts#L7
+ */
+
+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.
+ *
+ * @public
+ * @category Product
+ */
+export function useProductPrice(
+  product: Ref<Schemas['Product'] | undefined>,
+): UseProductPriceReturn {
+  const _cheapest: ComputedRef<
+    Schemas['Product']['calculatedCheapestPrice'] | undefined
+  > = computed(() => product.value?.calculatedCheapestPrice)
+
+  /**
+   * calculatedPrices are used for product with tier prices
+   */
+  const _real: ComputedRef<Schemas['CalculatedPrice'] | undefined> = computed(
+    () =>
+      (product.value?.calculatedPrices?.length ?? 0) > 0
+        ? product.value?.calculatedPrices?.[0]
+        : product.value?.calculatedPrice,
+  )
+  const referencePrice: ComputedRef<
+    Schemas['CalculatedPrice']['referencePrice'] | undefined
+  > = computed(() => _real?.value?.referencePrice)
+
+  const displayFrom: ComputedRef<boolean> = computed(() => {
+    return (product.value?.calculatedPrices?.length ?? 0) > 1
+  })
+
+  const displayFromVariants: ComputedRef<number | false | undefined> = computed(
+    () => {
+      return (
+        !!product.value?.parentId
+        && product.value?.calculatedCheapestPrice?.hasRange
+        && _real?.value?.unitPrice !== _cheapest?.value?.unitPrice
+        && _cheapest?.value?.unitPrice
+      )
+    },
+  )
+
+  const _price: ComputedRef<Schemas['CalculatedPrice'] | undefined> = computed(
+    () => {
+      if (displayFrom.value && getProductTierPrices(product.value).length > 1) {
+        return product.value?.calculatedPrices?.reduce((previous, current) => {
+          return current.unitPrice < previous.unitPrice ? current : previous
+        })
+      }
+      return _real.value
+    },
+  )
+
+  const unitPrice: ComputedRef<number | undefined> = computed(
+    () => _price.value?.unitPrice,
+  )
+  const totalPrice: ComputedRef<number | undefined> = computed(
+    () => _price.value?.totalPrice,
+  )
+  const price: ComputedRef<Schemas['CalculatedPrice'] | undefined> = computed(
+    () => _price.value,
+  )
+
+  const isListPrice: ComputedRef<boolean> = computed(() => {
+    return !!_price.value?.listPrice?.percentage
+  })
+
+  const regulationPrice: ComputedRef<number | undefined> = computed(
+    () => product.value?.calculatedPrice?.regulationPrice?.price,
+  )
+
+  const tierPrices = computed(() => getProductTierPrices(product.value))
+
+  return {
+    price,
+    totalPrice,
+    unitPrice,
+    displayFromVariants,
+    displayFrom,
+    tierPrices,
+    referencePrice,
+    isListPrice,
+    regulationPrice,
+  }
+}

package/src/products/useProductQueryOptions.ts

@@ -0,0 +1,28 @@
+import type { operations } from '#store-types'
+import { queryOptions } from '@tanstack/vue-query'
+import type { MaybeRef } from 'vue'
+import { unref } from 'vue'
+import { useShopwareQueryClient } from '../inject'
+import { productKeys } from '../keys'
+import type { OperationBody, OperationKey } from '../types/query'
+import { relativizeSeoUrl } from '../util/url'
+
+const readCustomProductDetailOperation = 'readCustomProductDetail post /novu/headless/product/{seoUrl}' satisfies OperationKey
+
+export function useProductQueryOptions<Operations extends operations>(
+  seoUrl: MaybeRef<string>,
+  body?: MaybeRef<OperationBody<Operations, typeof readCustomProductDetailOperation>>,
+) {
+  const client = useShopwareQueryClient<Operations>()
+  const queryKey = productKeys.detail(seoUrl, body)
+
+  return queryOptions({
+    queryKey,
+    queryFn: async () => {
+      return client.query(readCustomProductDetailOperation, {
+        params: { seoUrl: relativizeSeoUrl(unref(seoUrl)) },
+        body: unref(body),
+      })
+    },
+  })
+}

package/src/products/useProductVariantForOptions.ts

@@ -0,0 +1,21 @@
+import type { Schemas } from '#store-types'
+import type { MaybeRef } from 'vue'
+import { computed, unref } from 'vue'
+
+type DetailProduct<S extends Schemas> = S['CustomProductDetailResponse']['product']
+
+export function getProductVariantForOptions<S extends Schemas>(product: DetailProduct<S>, optionIds: string[]) {
+  const variants = product.extensions?.variants
+
+  if (optionIds.length === 0) {
+    // if no options are selected, return the first variant without options and
+    // if there is none, return the first variant
+    return variants?.find(v => v.optionIds?.length === 0) ?? variants?.[0]
+  }
+
+  return variants?.find(v => v.optionIds?.every(optId => optionIds.includes(optId)))
+}
+
+export function useProductVariantForOptions<S extends Schemas>(product: MaybeRef<DetailProduct<S>>, optionIds: MaybeRef<string[]>) {
+  return computed(() => getProductVariantForOptions(unref(product), unref(optionIds)))
+}

package/src/types/query.ts

@@ -0,0 +1,18 @@
+import type { operations } from '#store-types'
+import type { QueryKey, UseQueryOptions } from '@tanstack/vue-query'
+import type { OperationProp } from '@teamnovu/kit-shopware-api-client'
+
+export type OperationKey = keyof operations
+export type OperationBody<Operations extends operations, K extends OperationKey> =
+  OperationProp<Operations, K, 'body'>
+export type OperationResponse<Operations extends operations, K extends OperationKey> =
+  OperationProp<Operations, K, 'response'>
+
+export type Options<Operations extends operations, K extends OperationKey, QK extends QueryKey = QueryKey> =
+  UseQueryOptions<
+    OperationResponse<Operations, K>,
+    Error,
+    OperationResponse<Operations, K>,
+    OperationResponse<Operations, K>,
+    QK
+  >