From 99b780ce3be6524a10376f57765430cf052d0068 Mon Sep 17 00:00:00 2001 From: Bartosz Herba Date: Wed, 1 Jun 2022 10:25:41 +0200 Subject: [PATCH 1/2] refactor: double check types in composables --- packages/theme/composables/types.ts | 200 +----------------- .../commands/updateSubscriptionCommand.ts | 4 +- .../commands/loadCustomerReviewsCommand.ts | 7 +- .../theme/composables/useUiHelpers/index.ts | 2 +- .../composables/useUiHelpers/useUiHelpers.ts | 2 +- .../theme/composables/useUrlResolver/index.ts | 2 +- packages/theme/getters/_utils.ts | 5 +- packages/theme/getters/reviewGetters.ts | 20 +- packages/theme/getters/types.d.ts | 39 +++- .../breadcrumbs/CategoryBreadcrumbs.vue | 3 +- .../components/navbar/CategoryNavbar.vue | 4 +- .../catalog/category/getters/facetGetters.ts | 4 +- .../theme/modules/catalog/category/types.d.ts | 7 - .../theme/modules/catalog/pages/category.vue | 4 +- .../commands/getProductDetailsCommand.ts | 2 +- .../commands/getProductListCommand.ts | 2 +- .../catalog/product/getters/productGetters.ts | 39 ++-- .../theme/modules/catalog/product/types.ts | 6 + packages/theme/modules/catalog/types.d.ts | 17 ++ .../commands/placeOrderCommand.ts | 2 +- .../getAvailablePaymentMethodsCommand.ts | 2 +- .../commands/setPaymentMethodOnCartCommand.ts | 2 +- .../setShippingMethodsOnCartCommand.ts | 2 +- .../modules/checkout/getters/cartGetters.ts | 41 ++-- .../modules/checkout/getters/orderGetters.ts | 4 +- .../commands/attachToCartCommand.ts | 2 +- .../composables/useGuestUser/useGuestUser.ts | 4 +- .../commands/createCustomerAddressCommand.ts | 2 +- .../commands/deleteCustomerAddressCommand.ts | 2 +- .../commands/updateCustomerAddressCommand.ts | 2 +- .../wishlist/components/WishlistSidebar.vue | 5 +- .../wishlist/getters/wishlistGetters.ts | 20 +- .../test-utils/mocks/categoryNavbarMock.ts | 4 +- packages/theme/types/core.ts | 4 + 34 files changed, 156 insertions(+), 311 deletions(-) create mode 100644 packages/theme/modules/catalog/types.d.ts diff --git a/packages/theme/composables/types.ts b/packages/theme/composables/types.ts index 3396f0dde..071b91634 100644 --- a/packages/theme/composables/types.ts +++ b/packages/theme/composables/types.ts @@ -1,222 +1,28 @@ -import type { DeepReadonly, Ref, useContext } from '@nuxtjs/composition-api'; import type { AvailableStoresQuery, CountriesListQuery, - ProductReviewRatingsMetadataQuery, } from '~/modules/GraphQL/types'; -export interface Context { - [x: string]: IntegrationContext | any; -} - -export interface IntegrationContext { - client: CLIENT; - config: CONFIG; - api: API; - [x: string]: any; -} - -export type ContextedPlatformApi = { - [P in keyof T]: T[P] extends (context: Context, ...arg: infer X) => Promise - ? (...arg: X) => Promise - : never -}; - -export type PlatformApi = { - [functionName: string]: (context: Context, ...args: any[]) => Promise -}; - -export interface Composable { - api?: ContextedPlatformApi -} - -export type ComputedProperty = DeepReadonly>; - -export interface ProductsSearchParams { - perPage?: number; - page?: number; - sort?: any; - term?: any; - filters?: any; - [x: string]: any; -} - -export declare type CustomerProductReviewParams = { - pageSize: number; - currentPage: number; -}; +import type { CustomQuery } from '~/types/core'; export declare type AvailableStores = AvailableStoresQuery['availableStores']; -export declare type CustomQuery = Record; -export declare type Filter = Record; export declare type Countries = CountriesListQuery['countries'][0]; -export declare type ReviewMetadata = ProductReviewRatingsMetadataQuery['productReviewRatingsMetadata']['items'][0]; export declare type ComposableFunctionArgs = T & { customQuery?: CustomQuery; }; -export interface AgnosticPrice { - regular: number | null; - special?: number | null; - maximum?: number | null; - final?: number | null; -} - -export interface AgnosticMediaGalleryItem { - small: string; - normal: string; - big: string; -} - -export interface AgnosticAttribute { - name?: string; - value: string | Record; - label: string; -} - -export interface AgnosticBreadcrumb { - text: string; - link: string; -} - -export interface AgnosticTotals { +export interface Totals { total: number; subtotal: number; special?: number; [x: string]: unknown; } -export interface AgnosticCoupon { - id: string; - name: string; - code: string; - value: number; -} - -export interface AgnosticDiscount { - id: string; - name: string; - description: string; - value: number; - code?: string; -} - -export interface AgnosticCategoryTree { - label: string; - slug?: string; - items: AgnosticCategoryTree[]; - isCurrent: boolean; - count?: number; - [x: string]: unknown; -} - -export interface AgnosticFilter { - id: string; - label: string; - values: { - id: string; - isSlected?: boolean; - count?: number; - label: string; - value: string; - }[] -} - -export interface AgnosticProductReview { - id: string; - author: string; - date: Date; - message: string | null; - rating: number | null; -} - -export interface AgnosticLocale { - code: string; - label: string; - [x: string]: unknown; -} - -export interface AgnosticCountry { - code: string; - label: string; - [x: string]: unknown; -} - -export interface AgnosticCurrency { - code: string; - label: string; - prefixSign: boolean; - sign: string; - [x: string]: unknown; -} - -export interface AgnosticSortByOption { - label: string; - value: string; - [x: string]: unknown; -} - -export interface AgnosticRateCount { - rate: number; - count: number; -} - -export interface FacetInterface { - type: string; - id: string; - value: any; - attrName?: string; - count?: number; - selected?: boolean; - metadata?: any; -} - -export interface GroupedFacetInterface { - id: string; - label: string; - count?: number; - options: FacetInterface[]; -} - -export interface AgnosticPagination { +export interface Pagination { currentPage?: number; totalPages?: number; totalItems?: number; itemsPerPage?: number; pageOptions?: number[]; } - -export interface AgnosticAddress { - addressLine1: string; - addressLine2: string; - [x: string]: unknown; -} - -export interface AgnosticGeoLocation { - type: string; - coordinates?: unknown; - [x: string]: unknown; -} - -export interface AgnosticStore { - name: string; - id: string; - description?: string; - locales?: AgnosticLocale[]; - currencies?: AgnosticCurrency[] - address?: AgnosticAddress; - geoLocation?: AgnosticGeoLocation; - [x: string]: unknown; -} - -export interface AgnosticReviewMetadata { - id: string; - name: string; - values: { - label: string | number; - id: string; - }[]; -} - -export type UseContextReturn = ReturnType; diff --git a/packages/theme/composables/useNewsletter/commands/updateSubscriptionCommand.ts b/packages/theme/composables/useNewsletter/commands/updateSubscriptionCommand.ts index 0efe3b76c..c76bbef56 100644 --- a/packages/theme/composables/useNewsletter/commands/updateSubscriptionCommand.ts +++ b/packages/theme/composables/useNewsletter/commands/updateSubscriptionCommand.ts @@ -1,6 +1,6 @@ -import { UseContextReturn } from '~/composables/types'; +import { UseContextReturn } from '~/types/core'; import type { SubscriptionStatusesEnum } from '~/modules/GraphQL/types'; -import type { UseNewsletterUpdateSubscriptionParams } from '../useNewsletter'; +import type { UseNewsletterUpdateSubscriptionParams } from '~/composables'; export const updateSubscriptionCommand = { execute: async (context: UseContextReturn, params: UseNewsletterUpdateSubscriptionParams): Promise => { diff --git a/packages/theme/composables/useReview/commands/loadCustomerReviewsCommand.ts b/packages/theme/composables/useReview/commands/loadCustomerReviewsCommand.ts index c37044fdc..8daec1c93 100644 --- a/packages/theme/composables/useReview/commands/loadCustomerReviewsCommand.ts +++ b/packages/theme/composables/useReview/commands/loadCustomerReviewsCommand.ts @@ -1,7 +1,12 @@ -import { ComposableFunctionArgs, CustomerProductReviewParams } from '~/composables/types'; +import { ComposableFunctionArgs } from '~/composables/types'; import { VsfContext } from '~/composables/context'; import { Logger } from '~/helpers/logger'; +export declare type CustomerProductReviewParams = { + pageSize: number; + currentPage: number; +}; + export const loadCustomerReviewsCommand = { execute: async (context: VsfContext, params?: ComposableFunctionArgs) => { Logger.debug('[Magento] load customer review based on:', { params }); diff --git a/packages/theme/composables/useUiHelpers/index.ts b/packages/theme/composables/useUiHelpers/index.ts index 63fd3aa65..a5ced391d 100644 --- a/packages/theme/composables/useUiHelpers/index.ts +++ b/packages/theme/composables/useUiHelpers/index.ts @@ -1,8 +1,8 @@ import { useRoute, useRouter } from '@nuxtjs/composition-api'; -import type { FacetInterface } from '~/composables/types'; import type { CategoryTree } from '~/modules/GraphQL/types'; import type { UseUiHelpersInterface } from '~/composables'; import type { Params, QueryParams, FilterParams } from './Params'; +import type { FacetInterface } from '~/modules/catalog/category/types'; const nonFilters = new Set(['page', 'sort', 'term', 'itemsPerPage']); diff --git a/packages/theme/composables/useUiHelpers/useUiHelpers.ts b/packages/theme/composables/useUiHelpers/useUiHelpers.ts index b8a3beae4..5d2e2b78f 100644 --- a/packages/theme/composables/useUiHelpers/useUiHelpers.ts +++ b/packages/theme/composables/useUiHelpers/useUiHelpers.ts @@ -1,6 +1,6 @@ -import type { FacetInterface } from '~/composables/types'; import type { CategoryTree } from '~/modules/GraphQL/types'; import type { FilterParams, Params } from './Params'; +import type { FacetInterface } from '~/modules/catalog/category/types'; /** * Data and methods returned from the {@link useUiHelpers} composable. diff --git a/packages/theme/composables/useUrlResolver/index.ts b/packages/theme/composables/useUrlResolver/index.ts index 624cbca04..a17039876 100644 --- a/packages/theme/composables/useUrlResolver/index.ts +++ b/packages/theme/composables/useUrlResolver/index.ts @@ -6,7 +6,7 @@ import { } from '@nuxtjs/composition-api'; import { Logger } from '~/helpers/logger'; import type { EntityUrl } from '~/modules/GraphQL/types'; -import type { UseUrlResolverErrors, UseUrlResolverInterface } from './UseUrlResolver'; +import type { UseUrlResolverErrors, UseUrlResolverInterface } from '~/composables'; /** * Allows searching the resolver for current diff --git a/packages/theme/getters/_utils.ts b/packages/theme/getters/_utils.ts index e65e0c804..96df3594a 100644 --- a/packages/theme/getters/_utils.ts +++ b/packages/theme/getters/_utils.ts @@ -1,9 +1,8 @@ -import type { Product } from '~/modules/catalog/product/types'; -import { AgnosticAttribute } from '~/composables/types'; +import type { Product, ProductAttribute } from '~/modules/catalog/product/types'; export const getAttributeValue = (attribute) => attribute.values; -export const formatAttributeList = (attributes): AgnosticAttribute[] => attributes.map((attr) => { +export const formatAttributeList = (attributes): ProductAttribute[] => attributes.map((attr) => { const attrValue = getAttributeValue(attr); return { name: attr.attribute_code, diff --git a/packages/theme/getters/reviewGetters.ts b/packages/theme/getters/reviewGetters.ts index 0f9ced3d8..d71214614 100644 --- a/packages/theme/getters/reviewGetters.ts +++ b/packages/theme/getters/reviewGetters.ts @@ -1,5 +1,3 @@ -/* istanbul ignore file */ -import { AgnosticReviewMetadata, AgnosticRateCount } from '~/composables/types'; import { ProductInterface, ProductReview, @@ -7,6 +5,20 @@ import { ProductReviews, } from '~/modules/GraphQL/types'; +export interface RateCount { + rate: number; + count: number; +} + +export interface ReviewMetadata { + id: string; + name: string; + values: { + label: string | number; + id: string; + }[]; +} + export const getItems = (review): ProductReview[] => review?.reviews?.items || []; export const getReviewId = (item: ProductReview): string => `${item.nickname}_${item.created_at}_${item.average_rating}`; @@ -26,11 +38,11 @@ export const getTotalReviews = (review: ProductInterface): number => review?.rev export const getAverageRating = (review: ProductInterface): number => ((review?.reviews?.items?.reduce((acc, curr) => Number.parseInt(`${acc}`, 10) + getReviewRating(curr), 0)) ?? 0) / (review?.review_count || 1) || 0; -export const getRatesCount = (_review: ProductReviews): AgnosticRateCount[] => []; +export const getRatesCount = (_review: ProductReviews): RateCount[] => []; export const getReviewsPage = (review: ProductInterface): number => review?.reviews.page_info?.page_size || 0; -export const getReviewMetadata = (reviewData: ProductReviewRatingMetadata[]): AgnosticReviewMetadata[] => reviewData?.map((m) => ({ +export const getReviewMetadata = (reviewData: ProductReviewRatingMetadata[]): ReviewMetadata[] => reviewData?.map((m) => ({ ...m, values: m.values.map((v) => ({ label: (Number.parseInt(v.value, 10) || v.value), diff --git a/packages/theme/getters/types.d.ts b/packages/theme/getters/types.d.ts index 7337c2601..4acdd5184 100644 --- a/packages/theme/getters/types.d.ts +++ b/packages/theme/getters/types.d.ts @@ -1,8 +1,25 @@ -import { - AgnosticAttribute, AgnosticPrice, AgnosticTotals, - AgnosticCoupon, AgnosticDiscount, +import type { + Totals, } from '~/composables/types'; +import type { ProductAttribute } from '~/modules/catalog/product/types'; +import type { Price } from '~/modules/catalog/types'; + +export interface Coupon { + id: string; + name: string; + code: string; + value: number; +} + +export interface CartDiscount { + id: string; + name: string; + description: string; + value: number; + code?: string; +} + export interface UserBillingGetters { getAddresses: (billing: USER_BILLING, criteria?: Record) => USER_BILLING_ITEM[]; getDefault: (billing: USER_BILLING) => USER_BILLING_ITEM; @@ -62,10 +79,10 @@ export interface WishlistGetters { getItems: (wishlist: WISHLIST) => WISHLIST_ITEM[]; getItemName: (wishlistItem: WISHLIST_ITEM) => string; getItemImage: (wishlistItem: WISHLIST_ITEM) => string; - getItemPrice: (wishlistItem: WISHLIST_ITEM) => AgnosticPrice; - getItemAttributes: (wishlistItem: WISHLIST_ITEM, filters?: Array) => Record; + getItemPrice: (wishlistItem: WISHLIST_ITEM) => Price; + getItemAttributes: (wishlistItem: WISHLIST_ITEM, filters?: Array) => Record; getItemSku: (wishlistItem: WISHLIST_ITEM) => string; - getTotals: (wishlist: WISHLIST) => AgnosticTotals; + getTotals: (wishlist: WISHLIST) => Totals; getTotalItems: (wishlist: WISHLIST) => number; [getterName: string]: (element: any, options?: any) => unknown; } @@ -74,15 +91,15 @@ export interface CartGetters { getItems: (cart: CART) => CART_ITEM[]; getItemName: (cartItem: CART_ITEM) => string; getItemImage: (cartItem: CART_ITEM) => string; - getItemPrice: (cartItem: CART_ITEM) => AgnosticPrice; + getItemPrice: (cartItem: CART_ITEM) => Price; getItemQty: (cartItem: CART_ITEM) => number; - getItemAttributes: (cartItem: CART_ITEM, filters?: Array) => Record; + getItemAttributes: (cartItem: CART_ITEM, filters?: Array) => Record; getItemSku: (cartItem: CART_ITEM) => string; - getTotals: (cart: CART) => AgnosticTotals; + getTotals: (cart: CART) => Totals; getShippingPrice: (cart: CART) => number; getTotalItems: (cart: CART) => number; // @deprecated - use getDiscounts instead - getCoupons: (cart: CART) => AgnosticCoupon[]; - getDiscounts: (cart: CART) => AgnosticDiscount[]; + getCoupons: (cart: CART) => Coupon[]; + getDiscounts: (cart: CART) => CartDiscount[]; [getterName: string]: (element: any, options?: any) => unknown; } diff --git a/packages/theme/modules/catalog/category/components/breadcrumbs/CategoryBreadcrumbs.vue b/packages/theme/modules/catalog/category/components/breadcrumbs/CategoryBreadcrumbs.vue index d1390b7cf..f483508e1 100644 --- a/packages/theme/modules/catalog/category/components/breadcrumbs/CategoryBreadcrumbs.vue +++ b/packages/theme/modules/catalog/category/components/breadcrumbs/CategoryBreadcrumbs.vue @@ -13,8 +13,7 @@ import { import { SfBreadcrumbs } from '@storefront-ui/vue'; import { useUiHelpers } from '~/composables'; import { useTraverseCategory } from '~/modules/catalog/category/helpers/useTraverseCategory'; - -type Breadcrumb = { text: string, link: string }; +import { Breadcrumb } from '~/modules/catalog/types'; export default defineComponent({ components: { SfBreadcrumbs }, diff --git a/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue b/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue index 44344936c..780ed41eb 100644 --- a/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue +++ b/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue @@ -84,7 +84,7 @@ import { } from '@storefront-ui/vue'; import SvgImage from '~/components/General/SvgImage.vue'; import { useUiHelpers, useUiState } from '~/composables'; -import { AgnosticPagination } from '~/composables/types'; +import { Pagination } from '~/composables/types'; import SkeletonLoader from '~/components/SkeletonLoader/index.vue'; import { SortingModel } from '~/modules/catalog/category/composables/useFacet/sortingOptions'; @@ -101,7 +101,7 @@ export default defineComponent({ required: true, }, pagination: { - type: Object as PropType, + type: Object as PropType, required: true, }, isLoading: { diff --git a/packages/theme/modules/catalog/category/getters/facetGetters.ts b/packages/theme/modules/catalog/category/getters/facetGetters.ts index 09fc26a42..305f16c8e 100644 --- a/packages/theme/modules/catalog/category/getters/facetGetters.ts +++ b/packages/theme/modules/catalog/category/getters/facetGetters.ts @@ -1,13 +1,13 @@ import { perPageOptions } from '~/modules/catalog/category/composables/useFacet/perPageOptions'; import type { ProductInterface } from '~/modules/GraphQL/types'; -import type { AgnosticPagination } from '~/composables/types'; +import type { Pagination } from '~/composables/types'; import type { SortingModel } from '~/modules/catalog/category/composables/useFacet/sortingOptions'; import type { UseFacetSearchResult } from '~/modules/catalog/category/composables/useFacet/useFacet'; export interface FacetsGetters { getSortOptions: (searchData: UseFacetSearchResult) => SortingModel; getProducts: (searchData: UseFacetSearchResult) => ProductInterface[]; - getPagination: (searchData: UseFacetSearchResult) => AgnosticPagination; + getPagination: (searchData: UseFacetSearchResult) => Pagination; } const facetGetters: FacetsGetters = { diff --git a/packages/theme/modules/catalog/category/types.d.ts b/packages/theme/modules/catalog/category/types.d.ts index 8db10db1c..bcb43be89 100644 --- a/packages/theme/modules/catalog/category/types.d.ts +++ b/packages/theme/modules/catalog/category/types.d.ts @@ -140,13 +140,6 @@ export interface FacetInterface { metadata?: any; } -export interface GroupedFacetInterface { - id: string; - label: string; - count?: number; - options: FacetInterface[]; -} - /** category tree implementation */ export interface CategoryTree extends CategoryInterface, RoutableInterface { available_sort_by?: Maybe>>; diff --git a/packages/theme/modules/catalog/pages/category.vue b/packages/theme/modules/catalog/pages/category.vue index 1b831076f..f564b4d5f 100644 --- a/packages/theme/modules/catalog/pages/category.vue +++ b/packages/theme/modules/catalog/pages/category.vue @@ -130,7 +130,7 @@ import CategoryBreadcrumbs from '~/modules/catalog/category/components/breadcrum import type { EntityUrl, ProductInterface } from '~/modules/GraphQL/types'; import type { SortingModel } from '~/modules/catalog/category/composables/useFacet/sortingOptions'; -import type { AgnosticPagination } from '~/composables/types'; +import type { Pagination } from '~/composables/types'; import type { Product } from '~/modules/catalog/product/types'; export default defineComponent({ @@ -158,7 +158,7 @@ export default defineComponent({ const isShowProducts = ref(false); const products = ssrRef([]); const sortBy = ref({ selected: '', options: [] }); - const pagination = ref({}); + const pagination = ref({}); const productContainerElement = ref(null); diff --git a/packages/theme/modules/catalog/product/composables/useProduct/commands/getProductDetailsCommand.ts b/packages/theme/modules/catalog/product/composables/useProduct/commands/getProductDetailsCommand.ts index 3b844a6d2..e8f5db63e 100644 --- a/packages/theme/modules/catalog/product/composables/useProduct/commands/getProductDetailsCommand.ts +++ b/packages/theme/modules/catalog/product/composables/useProduct/commands/getProductDetailsCommand.ts @@ -1,4 +1,4 @@ -import { UseContextReturn } from '~/composables/types'; +import { UseContextReturn } from '~/types/core'; import type { GetProductSearchParams } from '~/modules/catalog/product/types'; export const getProductDetailsCommand = { diff --git a/packages/theme/modules/catalog/product/composables/useProduct/commands/getProductListCommand.ts b/packages/theme/modules/catalog/product/composables/useProduct/commands/getProductListCommand.ts index f4757a8c4..5cb3496c0 100644 --- a/packages/theme/modules/catalog/product/composables/useProduct/commands/getProductListCommand.ts +++ b/packages/theme/modules/catalog/product/composables/useProduct/commands/getProductListCommand.ts @@ -1,4 +1,4 @@ -import { UseContextReturn } from '~/composables/types'; +import { UseContextReturn } from '~/types/core'; import type { GetProductSearchParams } from '~/modules/catalog/product/types'; export const getProductListCommand = { diff --git a/packages/theme/modules/catalog/product/getters/productGetters.ts b/packages/theme/modules/catalog/product/getters/productGetters.ts index 9f025704a..f3fb243d9 100644 --- a/packages/theme/modules/catalog/product/getters/productGetters.ts +++ b/packages/theme/modules/catalog/product/getters/productGetters.ts @@ -1,10 +1,7 @@ -import type { - AgnosticAttribute, - AgnosticBreadcrumb, - AgnosticMediaGalleryItem, - AgnosticPrice, -} from '~/composables/types'; -import type { Product } from '~/modules/catalog/product/types'; +import type { Price, MediaGalleryItem } from '~/modules/catalog/types'; +import type { Product, ProductAttribute } from '~/modules/catalog/product/types'; +import { Breadcrumb } from '~/modules/catalog/types'; + import type { BundleProduct, CategoryInterface, @@ -19,16 +16,16 @@ import { getTotalReviews, getAverageRating } from '~/getters/reviewGetters'; export interface ProductGetters { getName: (product: ProductInterface) => string; getSlug(product: ProductInterface, category?: CategoryInterface): string; - getPrice: (product: ProductInterface) => AgnosticPrice; - getGallery: (product: ProductInterface) => AgnosticMediaGalleryItem[]; + getPrice: (product: ProductInterface) => Price; + getGallery: (product: ProductInterface) => MediaGalleryItem[]; getCoverImage: (product: ProductInterface) => string; - getAttributes: (products: ProductInterface[] | ProductInterface, filters?: Array) => Record; + getAttributes: (products: ProductInterface[] | ProductInterface, filters?: Array) => Record; getDescription: (product: ProductInterface) => string; getCategoryIds: (product: ProductInterface) => string[]; getId: (product: ProductInterface) => string; getTotalReviews: (product: ProductInterface) => number; getAverageRating: (product: ProductInterface) => number; - getBreadcrumbs?: (product: ProductInterface, category?: CategoryInterface) => AgnosticBreadcrumb[]; + getBreadcrumbs?: (product: ProductInterface, category?: CategoryInterface) => Breadcrumb[]; getCategory(product: Product, currentUrlPath: string): CategoryTree | null; getProductRelatedProduct(product: ProductInterface): Product[]; getProductSku(product: ProductInterface): string; @@ -69,7 +66,7 @@ export const getSlug = (product: ProductInterface, category?: CategoryTree | Cat return url; }; -export const getPrice = (product: ProductInterface): AgnosticPrice => { +export const getPrice = (product: ProductInterface): Price => { let regular = 0; let special = null; let maximum = null; @@ -92,7 +89,7 @@ export const getPrice = (product: ProductInterface): AgnosticPrice => { }; }; -export const getGallery = (product: Product): AgnosticMediaGalleryItem[] => { +export const getGallery = (product: Product): MediaGalleryItem[] => { const images = []; if (!product?.media_gallery && !product?.configurable_product_options_selection?.media_gallery) { @@ -134,7 +131,7 @@ export const getProductThumbnailImage = (product: Product): string => { export const getAttributes = ( products: Product, _filterByAttributeName?: string[], -): Record => { +): Record => { if (!products || !products?.configurable_options) { return {}; } @@ -145,14 +142,14 @@ export const getAttributes = ( // eslint-disable-next-line no-restricted-syntax for (const option of configurableOptions) { attributes[option.attribute_code] = { - name: option.attribute_code, + code: option.attribute_code, label: option.label, value: option.values.map((value) => { const obj = {}; obj[value.value_index] = value.label; return obj; }), - } as AgnosticAttribute; + } as ProductAttribute; } return attributes; }; @@ -215,7 +212,7 @@ export const getProductSku = (product: Product): string => product.sku; // eslint-disable-next-line no-underscore-dangle export const getTypeId = (product: Product): string => product.__typename; -const getCategoryBreadcrumbs = (category: CategoryInterface): AgnosticBreadcrumb[] => { +const getCategoryBreadcrumbs = (category: CategoryInterface): Breadcrumb[] => { let breadcrumbs = []; if (!category) { @@ -226,18 +223,18 @@ const getCategoryBreadcrumbs = (category: CategoryInterface): AgnosticBreadcrumb breadcrumbs = category.breadcrumbs.map((breadcrumb) => ({ text: breadcrumb.category_name, link: `/c/${breadcrumb.category_url_path}${category.url_suffix || ''}`, - } as AgnosticBreadcrumb)); + } as Breadcrumb)); } breadcrumbs.push({ text: category.name, link: `/c/${category.url_path}${category.url_suffix || ''}`, - } as AgnosticBreadcrumb); + } as Breadcrumb); return breadcrumbs; }; -export const getBreadcrumbs = (product: ProductInterface, category?: CategoryInterface): AgnosticBreadcrumb[] => { +export const getBreadcrumbs = (product: ProductInterface, category?: CategoryInterface): Breadcrumb[] => { let breadcrumbs = []; if (!product) { @@ -245,7 +242,7 @@ export const getBreadcrumbs = (product: ProductInterface, category?: CategoryInt } if (category) { - breadcrumbs = getCategoryBreadcrumbs(category) as AgnosticBreadcrumb[]; + breadcrumbs = getCategoryBreadcrumbs(category) as Breadcrumb[]; } breadcrumbs.push({ diff --git a/packages/theme/modules/catalog/product/types.ts b/packages/theme/modules/catalog/product/types.ts index cb1082002..1765d5e52 100644 --- a/packages/theme/modules/catalog/product/types.ts +++ b/packages/theme/modules/catalog/product/types.ts @@ -7,6 +7,12 @@ import { VirtualProduct, } from '~/modules/GraphQL/types'; +export interface ProductAttribute { + name?: string; + value: string | Record; + label: string; +} + /** * There is no __typename in GraphQL definitions but type_id is marked as a deprecated */ diff --git a/packages/theme/modules/catalog/types.d.ts b/packages/theme/modules/catalog/types.d.ts new file mode 100644 index 000000000..0182206d1 --- /dev/null +++ b/packages/theme/modules/catalog/types.d.ts @@ -0,0 +1,17 @@ +export interface Breadcrumb { + text: string; + link: string; +} + +export interface Price { + regular: number | null; + special?: number | null; + maximum?: number | null; + final?: number | null; +} + +export interface MediaGalleryItem { + small: string; + normal: string; + big: string; +} diff --git a/packages/theme/modules/checkout/composables/useMakeOrder/commands/placeOrderCommand.ts b/packages/theme/modules/checkout/composables/useMakeOrder/commands/placeOrderCommand.ts index 5221a978b..23e9c9d0c 100644 --- a/packages/theme/modules/checkout/composables/useMakeOrder/commands/placeOrderCommand.ts +++ b/packages/theme/modules/checkout/composables/useMakeOrder/commands/placeOrderCommand.ts @@ -1,4 +1,4 @@ -import { UseContextReturn } from '~/composables/types'; +import { UseContextReturn } from '~/types/core'; import type { PlaceOrderOutput } from '~/modules/GraphQL/types'; export const placeOrderCommand = { diff --git a/packages/theme/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts b/packages/theme/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts index 07b318825..db6714b37 100644 --- a/packages/theme/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts +++ b/packages/theme/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts @@ -1,4 +1,4 @@ -import { UseContextReturn } from '~/composables/types'; +import { UseContextReturn } from '~/types/core'; import type { AvailablePaymentMethod } from '~/modules/GraphQL/types'; export const getAvailablePaymentMethodsCommand = { diff --git a/packages/theme/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts b/packages/theme/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts index a827366b0..09fa90323 100644 --- a/packages/theme/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts +++ b/packages/theme/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts @@ -1,4 +1,4 @@ -import { UseContextReturn } from '~/composables/types'; +import { UseContextReturn } from '~/types/core'; import type { AvailablePaymentMethod } from '~/modules/GraphQL/types'; import type { PaymentMethodParams } from '../usePaymentProvider'; diff --git a/packages/theme/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts b/packages/theme/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts index 949a53dc7..c4c652707 100644 --- a/packages/theme/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts +++ b/packages/theme/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts @@ -1,4 +1,4 @@ -import { UseContextReturn } from '~/composables/types'; +import { UseContextReturn } from '~/types/core'; import type { SetShippingMethodsOnCartInput, Cart } from '~/modules/GraphQL/types'; export const setShippingMethodsOnCartCommand = { diff --git a/packages/theme/modules/checkout/getters/cartGetters.ts b/packages/theme/modules/checkout/getters/cartGetters.ts index b638b114b..c4b63e695 100644 --- a/packages/theme/modules/checkout/getters/cartGetters.ts +++ b/packages/theme/modules/checkout/getters/cartGetters.ts @@ -1,13 +1,9 @@ -import { - AgnosticPrice, - AgnosticTotals, - AgnosticAttribute, - AgnosticCoupon, - AgnosticDiscount, +import type { + Totals, } from '~/composables/types'; - +import type { Price } from '~/modules/catalog/types'; +import type { ProductAttribute, Product } from '~/modules/catalog/product/types'; import { PaymentMethodInterface } from '~/modules/checkout/types'; - import { CartItemInterface, Cart, @@ -16,10 +12,7 @@ import { SelectedShippingMethod, ConfigurableCartItem, } from '~/modules/GraphQL/types'; -import type { Product } from '~/modules/catalog/product/types'; - -import { CartGetters as CartGettersBase } from '~/getters/types'; - +import { CartGetters as CartGettersBase, CartDiscount, Coupon } from '~/getters/types'; import { getName, getSlug as getSlugGetter, getProductThumbnailImage } from '~/modules/catalog/product/getters/productGetters'; export const getItems = (cart: Cart): CartItemInterface[] => { @@ -35,7 +28,7 @@ export const getSlug = (product: CartItemInterface): string => getSlugGetter(pro export const getItemImage = (product: CartItemInterface): string => getProductThumbnailImage(product.product as Product); -export const getItemPrice = (product: CartItemInterface): AgnosticPrice => { +export const getItemPrice = (product: CartItemInterface): Price => { if (!product || !product.prices) { return { regular: 0, @@ -68,7 +61,7 @@ export const getItemQty = (product: CartItemInterface): number => product.quanti export const getItemAttributes = ( { product }: CartItemInterface & { product: Product }, _filterByAttributeName?: Array, -): Record => { +): Record => { const attributes = {}; if (!product || !product.configurable_options) { @@ -87,7 +80,7 @@ export const getItemAttributes = ( obj[value.value_index] = value.label; return obj; }), - } as AgnosticAttribute; + } as ProductAttribute; } return attributes; }; @@ -96,15 +89,15 @@ export const getItemSku = (product: CartItemInterface): string => product?.produ const calculateDiscounts = (discounts: Discount[]): number => discounts.reduce((a, b) => Number.parseFloat(`${a}`) + Number.parseFloat(`${b.amount.value}`), 0); -export const getTotals = (cart: Cart): AgnosticTotals => { - if (!cart || !cart.prices) return {} as AgnosticTotals; +export const getTotals = (cart: Cart): Totals => { + if (!cart || !cart.prices) return {} as Totals; const subtotal = cart.prices.subtotal_including_tax.value; return { total: cart.prices.grand_total.value, subtotal: cart.prices.subtotal_including_tax.value, special: (cart.prices.discounts) ? subtotal - calculateDiscounts(cart.prices.discounts) : subtotal, - } as AgnosticTotals; + } as Totals; }; export const getShippingPrice = (cart: Cart): number => { @@ -138,22 +131,22 @@ export const getTotalItems = (cart: Cart): number => { export const getConfiguredVariant = (product: ConfigurableCartItem): ProductInterface | null => product?.configured_variant || null; -export const getCoupons = (cart: Cart): AgnosticCoupon[] => (Array.isArray(cart?.applied_coupons) ? cart.applied_coupons.map((c) => ({ +export const getCoupons = (cart: Cart): Coupon[] => (Array.isArray(cart?.applied_coupons) ? cart.applied_coupons.map((c) => ({ id: c.code, name: c.code, value: 0, code: c.code, -} as AgnosticCoupon)) : []); +} as Coupon)) : []); -export const getDiscounts = (cart: Cart): AgnosticDiscount[] => (Array.isArray(cart?.prices?.discounts) ? cart.prices.discounts.map((d) => ({ +export const getDiscounts = (cart: Cart): CartDiscount[] => (Array.isArray(cart?.prices?.discounts) ? cart.prices.discounts.map((d) => ({ id: d.label, name: d.label, description: '', value: d.amount.value, code: d.label, -} as AgnosticDiscount)) : []); +} as CartDiscount)) : []); -export const getAppliedCoupon = (cart: Cart): AgnosticCoupon | null => (Array.isArray(cart?.applied_coupons) && cart?.applied_coupons.length > 0 ? { +export const getAppliedCoupon = (cart: Cart): Coupon | null => (Array.isArray(cart?.applied_coupons) && cart?.applied_coupons.length > 0 ? { id: cart.applied_coupons[0].code, name: cart.applied_coupons[0].code, value: 0, @@ -171,7 +164,7 @@ export const getAvailablePaymentMethods = (cart: Cart): PaymentMethodInterface[] export const getStockStatus = (product: CartItemInterface): string => product.product.stock_status; export interface CartGetters extends CartGettersBase { - getAppliedCoupon(cart: Cart): AgnosticCoupon | null; + getAppliedCoupon(cart: Cart): Coupon | null; getAvailablePaymentMethods(cart: Cart): PaymentMethodInterface[]; getSelectedShippingMethod(cart: Cart): SelectedShippingMethod | null; productHasSpecialPrice(product: CartItemInterface): boolean; diff --git a/packages/theme/modules/checkout/getters/orderGetters.ts b/packages/theme/modules/checkout/getters/orderGetters.ts index e965e582f..45b5bf3b5 100644 --- a/packages/theme/modules/checkout/getters/orderGetters.ts +++ b/packages/theme/modules/checkout/getters/orderGetters.ts @@ -1,4 +1,4 @@ -import type { AgnosticPagination } from '~/composables/types'; +import type { Pagination } from '~/composables/types'; import type { CustomerOrders, CustomerOrder, OrderItemInterface } from '~/modules/GraphQL/types'; export const getDate = (order: CustomerOrder): string => new Date(order?.order_date?.replace(/ /g, 'T')).toLocaleDateString(); @@ -7,7 +7,7 @@ export const getPrice = (order: CustomerOrder): number => order?.total?.base_gra export const getItemPrice = (item: OrderItemInterface): number => item?.product_sale_price?.value ?? 0; -const getPagination = (orders: CustomerOrders): AgnosticPagination => ({ +const getPagination = (orders: CustomerOrders): Pagination => ({ currentPage: orders?.page_info?.current_page || 1, totalPages: orders?.page_info?.total_pages || 1, totalItems: orders?.total_count || 0, diff --git a/packages/theme/modules/customer/composables/useGuestUser/commands/attachToCartCommand.ts b/packages/theme/modules/customer/composables/useGuestUser/commands/attachToCartCommand.ts index fd4489f54..bcd7ad705 100644 --- a/packages/theme/modules/customer/composables/useGuestUser/commands/attachToCartCommand.ts +++ b/packages/theme/modules/customer/composables/useGuestUser/commands/attachToCartCommand.ts @@ -1,4 +1,4 @@ -import { UseContextReturn } from '~/composables/types'; +import { UseContextReturn } from '~/types/core'; import { Logger } from '~/helpers/logger'; import { SetGuestEmailOnCartInput } from '~/modules/GraphQL/types'; diff --git a/packages/theme/modules/customer/composables/useGuestUser/useGuestUser.ts b/packages/theme/modules/customer/composables/useGuestUser/useGuestUser.ts index 9d2b5ba25..df73ec692 100644 --- a/packages/theme/modules/customer/composables/useGuestUser/useGuestUser.ts +++ b/packages/theme/modules/customer/composables/useGuestUser/useGuestUser.ts @@ -1,5 +1,5 @@ import { ComputedRef, DeepReadonly, Ref } from '@nuxtjs/composition-api'; -import { PlatformApi, Composable, ComposableFunctionArgs } from '~/composables/types'; +import { ComposableFunctionArgs } from '~/composables/types'; import { Cart } from '~/modules/GraphQL/types'; /** Errors returned by the {@link useGuestUser} composable */ @@ -17,7 +17,7 @@ export interface AttachToCartParams { /** * Data and methods returned from the {@link useGuestUser} composable */ -export interface UseGuestUserInterface extends Composable { +export interface UseGuestUserInterface { /** Attaches guest cart to user */ attachToCart(params: ComposableFunctionArgs): Promise; /** Indicates the loading state for `attachToCart` */ diff --git a/packages/theme/modules/customer/composables/useUserAddress/commands/createCustomerAddressCommand.ts b/packages/theme/modules/customer/composables/useUserAddress/commands/createCustomerAddressCommand.ts index 6775ac279..dd74df2af 100644 --- a/packages/theme/modules/customer/composables/useUserAddress/commands/createCustomerAddressCommand.ts +++ b/packages/theme/modules/customer/composables/useUserAddress/commands/createCustomerAddressCommand.ts @@ -1,4 +1,4 @@ -import { UseContextReturn } from '~/composables/types'; +import { UseContextReturn } from '~/types/core'; import { CustomerAddressInput } from '~/modules/GraphQL/types'; export const createCustomerAddressCommand = { diff --git a/packages/theme/modules/customer/composables/useUserAddress/commands/deleteCustomerAddressCommand.ts b/packages/theme/modules/customer/composables/useUserAddress/commands/deleteCustomerAddressCommand.ts index 2417fee1d..b9d3b6ec4 100644 --- a/packages/theme/modules/customer/composables/useUserAddress/commands/deleteCustomerAddressCommand.ts +++ b/packages/theme/modules/customer/composables/useUserAddress/commands/deleteCustomerAddressCommand.ts @@ -1,4 +1,4 @@ -import { UseContextReturn } from '~/composables/types'; +import { UseContextReturn } from '~/types/core'; import { CustomerAddress } from '~/modules/GraphQL/types'; export const deleteCustomerAddressCommand = { diff --git a/packages/theme/modules/customer/composables/useUserAddress/commands/updateCustomerAddressCommand.ts b/packages/theme/modules/customer/composables/useUserAddress/commands/updateCustomerAddressCommand.ts index 4bf6fe42e..c0b900755 100644 --- a/packages/theme/modules/customer/composables/useUserAddress/commands/updateCustomerAddressCommand.ts +++ b/packages/theme/modules/customer/composables/useUserAddress/commands/updateCustomerAddressCommand.ts @@ -1,4 +1,4 @@ -import { UseContextReturn } from '~/composables/types'; +import { UseContextReturn } from '~/types/core'; import { CustomerAddressInput } from '~/modules/GraphQL/types'; export const updateCustomerAddressCommand = { diff --git a/packages/theme/modules/wishlist/components/WishlistSidebar.vue b/packages/theme/modules/wishlist/components/WishlistSidebar.vue index 6e355e707..dc355ed73 100644 --- a/packages/theme/modules/wishlist/components/WishlistSidebar.vue +++ b/packages/theme/modules/wishlist/components/WishlistSidebar.vue @@ -146,8 +146,9 @@ import { } from '@nuxtjs/composition-api'; import productGetters from '~/modules/catalog/product/getters/productGetters'; import { - useUiState, useImage, AgnosticPrice, + useUiState, useImage, } from '~/composables'; +import type { Price } from '~/modules/catalog/types'; import { useWishlist } from '~/modules/wishlist/composables/useWishlist'; import { useUser } from '~/modules/customer/composables/useUser'; import { useWishlistStore } from '~/modules/wishlist/store/wishlistStore'; @@ -185,7 +186,7 @@ export default defineComponent({ () => wishlistStore.wishlist?.items_v2?.items ?? [], ); - const getItemPrice = (product: WishlistItemInterface): AgnosticPrice => { + const getItemPrice = (product: WishlistItemInterface): Price => { let regular = 0; let special = null; diff --git a/packages/theme/modules/wishlist/getters/wishlistGetters.ts b/packages/theme/modules/wishlist/getters/wishlistGetters.ts index 9be674a0f..a9b9eb0f8 100644 --- a/packages/theme/modules/wishlist/getters/wishlistGetters.ts +++ b/packages/theme/modules/wishlist/getters/wishlistGetters.ts @@ -1,11 +1,7 @@ -/* istanbul ignore file */ -import { - AgnosticPrice, - AgnosticTotals, AgnosticPagination, -} from '~/composables/types'; - -import { WishlistGetters as BaseWishlistGetters } from '~/getters/types'; -import { +import type { Totals, Pagination } from '~/composables/types'; +import type { Price } from '~/modules/catalog/types'; +import type { WishlistGetters as BaseWishlistGetters } from '~/getters/types'; +import type { Wishlist, ProductInterface, WishlistItemInterface, } from '~/modules/GraphQL/types'; @@ -15,7 +11,7 @@ export const getItemName = (product: WishlistItemInterface): string => product?. export const getItemImage = (product: WishlistItemInterface): string => product?.product?.thumbnail.url || ''; -export const getItemPrice = (product: WishlistItemInterface): AgnosticPrice => { +export const getItemPrice = (product: WishlistItemInterface): Price => { let regular = 0; let special = null; @@ -40,7 +36,7 @@ export const getItemAttributes = (_product: WishlistItemInterface, _filterByAttr export const getItemSku = (product: WishlistItemInterface): string => product?.product?.sku || ''; -export const getTotals = (wishlist: Wishlist[] | Wishlist): AgnosticTotals => { +export const getTotals = (wishlist: Wishlist[] | Wishlist): Totals => { if (Array.isArray(wishlist)) { return wishlist[0]?.items_v2?.items.reduce((acc, curr) => ({ total: acc.total + getItemPrice(curr).special, @@ -59,7 +55,7 @@ export const getTotalItems = (wishlist: Wishlist | Wishlist[]): number => (Array ? wishlist[0]?.items_count : (wishlist?.items_count || 0)); -const getPagination = (wishlistData: Wishlist): AgnosticPagination => ({ +const getPagination = (wishlistData: Wishlist): Pagination => ({ currentPage: wishlistData?.items_v2?.page_info?.current_page || 1, totalPages: wishlistData?.items_v2?.page_info?.total_pages || 1, totalItems: wishlistData?.items_count || 0, @@ -103,7 +99,7 @@ export interface WishlistGetters extends BaseWishlistGetters; + export type CustomQuery = Record; export type ApiClientMethods = { From 5ae06978dc9f289747f75e6b7bd51ab9719f6509 Mon Sep 17 00:00:00 2001 From: Bartosz Herba Date: Thu, 2 Jun 2022 08:21:04 +0200 Subject: [PATCH 2/2] Update packages/theme/composables/useReview/commands/loadCustomerReviewsCommand.ts Co-authored-by: Artur Tagisow <5359825+sethidden@users.noreply.github.com> --- .../useReview/commands/loadCustomerReviewsCommand.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/composables/useReview/commands/loadCustomerReviewsCommand.ts b/packages/theme/composables/useReview/commands/loadCustomerReviewsCommand.ts index 8daec1c93..24e553cba 100644 --- a/packages/theme/composables/useReview/commands/loadCustomerReviewsCommand.ts +++ b/packages/theme/composables/useReview/commands/loadCustomerReviewsCommand.ts @@ -2,7 +2,7 @@ import { ComposableFunctionArgs } from '~/composables/types'; import { VsfContext } from '~/composables/context'; import { Logger } from '~/helpers/logger'; -export declare type CustomerProductReviewParams = { +export type CustomerProductReviewParams = { pageSize: number; currentPage: number; };