refactor: remove some instances of implicit any (#1066)

packages/api-client/src/types/setup.ts

@@ -96,6 +96,8 @@ export interface Config<T = any> extends ClientConfig {
   magentoApiEndpoint: string;
   overrides: MagentoApiMethods;
   recaptcha: RecaptchaConfig;
+  imageProvider: string;
+  magentoBaseUrl: string;
 }
 
 export interface ClientInstance extends ApolloClient<any> {

packages/theme/components/CartSidebar.vue

@@ -273,10 +273,9 @@ import useCart from '~/modules/checkout/composables/useCart';
 import { useUser } from '~/modules/customer/composables/useUser';
 import stockStatusEnum from '~/enums/stockStatusEnum';
 import SvgImage from '~/components/General/SvgImage.vue';
+import type { ConfigurableCartItem, BundleCartItem, CartItemInterface } from '~/modules/GraphQL/types';
 import CouponCode from './CouponCode.vue';
 
-import type { ConfigurableCartItem } from '~/modules/GraphQL/types';
-
 export default defineComponent({
   name: 'CartSidebar',
   components: {
@@ -324,8 +323,8 @@ export default defineComponent({
       })));
     const totals = computed(() => cartGetters.getTotals(cart.value));
     const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
-    const getAttributes = (product) => product.configurable_options || [];
-    const getBundles = (product) => product.bundle_options?.map((b) => b.values).flat() || [];
+    const getAttributes = (product: ConfigurableCartItem) => product.configurable_options || [];
+    const getBundles = (product: BundleCartItem) => product.bundle_options?.map((b) => b.values).flat() || [];
     const visible = ref(false);
     const tempProduct = ref();
 
@@ -342,7 +341,7 @@ export default defineComponent({
       await router.push(`${app.localePath(redirectUrl)}`);
     };
 
-    const sendToRemove = ({ product }) => {
+    const sendToRemove = ({ product }: { product: CartItemInterface }) => {
       if (notifications.value.length > 0) {
         notifications.value[0].dismiss();
       }
@@ -351,7 +350,7 @@ export default defineComponent({
       tempProduct.value = product;
     };
 
-    const actionRemoveItem = async (product) => {
+    const actionRemoveItem = async (product: CartItemInterface) => {
       await removeItem({ product });
       visible.value = false;
 
@@ -370,7 +369,7 @@ export default defineComponent({
       (params) => updateItemQty(params),
       1000,
     );
-    const isInStock = (product) => cartGetters.getStockStatus(product) === stockStatusEnum.inStock;
+    const isInStock = (product: CartItemInterface) => cartGetters.getStockStatus(product) === stockStatusEnum.inStock;
 
     return {
       sendToRemove,

packages/theme/components/Header/SearchBar/SearchBar.vue

@@ -117,7 +117,7 @@ export default defineComponent({
       }
     };
 
-    const closeSearch = (event) => {
+    const closeSearch = (event: MouseEvent) => {
       if (document) {
         const searchResultsEl = document.querySelectorAll('.search');
         const closeTriggerElement = event.target as HTMLElement;

packages/theme/components/Header/SearchBar/SearchResults.vue

@@ -162,6 +162,7 @@ import {
 import useWishlist from '~/modules/wishlist/composables/useWishlist';
 import { useUser } from '~/modules/customer/composables/useUser';
 import SvgImage from '~/components/General/SvgImage.vue';
+import type { Product } from '~/modules/wishlist/composables/useWishlist/useWishlist';
 
 export default defineComponent({
   name: 'SearchResults',
@@ -191,7 +192,7 @@ export default defineComponent({
     const isSearchOpen = ref(props.visible);
     const products = computed(() => props.result?.products);
 
-    const addItemToWishlist = async (product) => {
+    const addItemToWishlist = async (product: Product) => {
       await (isInWishlist({ product })
         ? removeItem({ product })
         : addItem({ product }));

packages/theme/components/LoginModal.vue

@@ -394,12 +394,12 @@ export default defineComponent({
       }
     });
 
-    const setIsLoginValue = (value) => {
+    const setIsLoginValue = (value: boolean) => {
       resetErrorValues();
       isLogin.value = value;
     };
 
-    const setIsForgottenValue = (value) => {
+    const setIsForgottenValue = (value: boolean) => {
       resetErrorValues();
       isForgotten.value = value;
       isLogin.value = !value;
@@ -412,7 +412,7 @@ export default defineComponent({
       toggleLoginModal();
     };
 
-    const handleForm = (fn) => async () => {
+    const handleForm = (fn: typeof register) => async () => {
       resetErrorValues();
 
       if (isRecaptchaEnabled.value) {

packages/theme/composables/context.ts

@@ -10,4 +10,7 @@ declare module '@nuxt/types' {
   interface NuxtAppOptions {
     $vsf: VsfContext
   }
+  interface Context {
+    $vsf: VsfContext
+  }
 }

packages/theme/composables/types.ts

@@ -1,4 +1,4 @@
-import type { DeepReadonly, Ref } from '@nuxtjs/composition-api';
+import type { DeepReadonly, Ref, useContext } from '@nuxtjs/composition-api';
 import type {
   AvailableStoresQuery,
   CountriesListQuery,
@@ -233,3 +233,5 @@ export interface AgnosticReviewMetadata {
     id: string;
   }[];
 }
+
+export type UseContextReturn = ReturnType<typeof useContext>;

packages/theme/composables/useImage/index.ts

@@ -8,8 +8,7 @@ import { UseImageInterface } from './useImage';
  * See the {@link UseImageInterface} for a list of methods and values available in this composable.
  * */
 export function useImage(): UseImageInterface {
-  // @ts-ignore
-  const { $vsf } = useContext();
+  const context = useContext();
   /**
    * Extract image path from Magento URL.
    *
@@ -18,7 +17,7 @@ export function useImage(): UseImageInterface {
    * @return {string}
    */
   const getMagentoImage = (fullImageUrl: string) => {
-    const { imageProvider, magentoBaseUrl } = $vsf.$magento.config;
+    const { imageProvider, magentoBaseUrl } = context.$vsf.$magento.config;
 
     if (imageProvider !== 'ipx') {
       const url = fullImageUrl.split(`${magentoBaseUrl}`);

packages/theme/composables/useNewsletter/commands/updateSubscriptionCommand.ts

@@ -1,11 +1,9 @@
-import type { useContext } from '@nuxtjs/composition-api';
+import { UseContextReturn } from '~/composables/types';
 import type { SubscriptionStatusesEnum } from '~/modules/GraphQL/types';
 import type { UseNewsletterUpdateSubscriptionParams } from '../useNewsletter';
 
-type Context = ReturnType<typeof useContext>;
-
 export const updateSubscriptionCommand = {
-  execute: async (context: Context, params: UseNewsletterUpdateSubscriptionParams): Promise<SubscriptionStatusesEnum | null> => {
+  execute: async (context: UseContextReturn, params: UseNewsletterUpdateSubscriptionParams): Promise<SubscriptionStatusesEnum | null> => {
     const { data } = await context.app.$vsf.$magento.api.subscribeEmailToNewsletter({
       email: params.email,
     });

packages/theme/helpers/integrationPlugin/context.ts

@@ -1,29 +1,35 @@
 /* eslint-disable no-param-reassign */
+
+import { Context as NuxtContext } from '@nuxt/types';
+import { Inject } from '@nuxt/types/app';
+
+type Argument = { tag: string, nuxtCtx: NuxtContext, inject: Inject };
+
 /**
  * It extends given integartion, defined by `tag` in the context.
  */
-export const createExtendIntegrationInCtx = ({ tag, nuxtCtx, inject }) => (integrationProperties: Record<string, unknown>) => {
+export const createExtendIntegrationInCtx = ({ tag, nuxtCtx, inject } : Argument) => (integrationProperties: Record<string, unknown>) => {
   const integrationKey = `$${tag}`;
 
-  if (!nuxtCtx.$vsf || !nuxtCtx.$vsf[integrationKey]) {
+  if (!nuxtCtx.$vsf || !(nuxtCtx.$vsf as Record<string, any>)[integrationKey]) {
     inject('vsf', { [integrationKey]: {} });
   }
 
   Object.keys(integrationProperties)
     .filter((k) => !['api', 'client', 'config'].includes(k))
     .forEach((key) => {
-      nuxtCtx.$vsf[integrationKey][key] = integrationProperties[key];
+      (nuxtCtx.$vsf as Record<string, any>)[integrationKey][key] = integrationProperties[key];
     });
 };
 
 /**
  * It creates a function that adds an integration to the context under the given name, defined by `tag`.
  */
-export const createAddIntegrationToCtx = ({ tag, nuxtCtx, inject }) => (integrationProperties: Record<string, unknown>) => {
+export const createAddIntegrationToCtx = ({ tag, nuxtCtx, inject } : Argument) => (integrationProperties: Record<string, unknown>) => {
   const integrationKey = `$${tag}`;
 
-  if (nuxtCtx.$vsf && !nuxtCtx.$vsf[integrationKey]) {
-    nuxtCtx.$vsf[integrationKey] = integrationProperties;
+  if (nuxtCtx.$vsf && !(nuxtCtx.$vsf as Record<string, any>)[integrationKey]) {
+    (nuxtCtx.$vsf as Record<string, any>)[integrationKey] = integrationProperties;
     return;
   }
 

packages/theme/helpers/integrationPlugin/index.ts

@@ -51,7 +51,7 @@ export const integrationPlugin = (pluginFn: NuxtPluginWithIntegration) => (nuxtC
     injectInContext({ api, client, config });
   };
 
-  const extend = (tag, integrationProperties: Record<string, unknown>) => {
+  const extend = (tag: string, integrationProperties: Record<string, unknown>) => {
     createExtendIntegrationInCtx({ tag, nuxtCtx, inject })(integrationProperties);
   };
 

packages/theme/modules/catalog/category/composables/useFacet/input/createProductAttributeFilterInput.ts

@@ -5,7 +5,7 @@ import type { FacetSearchParams } from '../useFacet';
 export const rangeFilters = ['price'];
 
 export function createProductAttributeFilterInput(params: ComposableFunctionArgs<FacetSearchParams>): ProductAttributeFilterInput {
-  const attributeFilter = {};
+  const attributeFilter : Record<string, { from: number, to: number } | { eq: unknown } | { in: unknown }> = {};
   const inputFilters = params?.filters ?? {};
 
   const categoryFilter = {

packages/theme/modules/catalog/product/components/ProductAddReviewForm.vue

@@ -205,7 +205,7 @@ export default defineComponent({
       };
     });
 
-    const submitForm = (reset) => async () => {
+    const submitForm = (reset: () => void) => async () => {
       if (
         !(
           formSubmitValue.value.ratings[0].value_id

packages/theme/modules/catalog/product/components/ProductsCarousel.vue

@@ -134,7 +134,7 @@ export default defineComponent({
       isInWishlist: isInWishlist({ product }),
     })));
 
-    const addItemToWishlist = async (product) => {
+    const addItemToWishlist = async (product: Product) => {
       await (isInWishlist({ product })
         ? removeItem({ product })
         : addItem({ product }));

packages/theme/modules/catalog/product/composables/useProduct/commands/getProductDetailsCommand.ts

@@ -1,10 +1,8 @@
-import type { useContext } from '@nuxtjs/composition-api';
+import { UseContextReturn } from '~/composables/types';
 import type { GetProductSearchParams } from '~/modules/catalog/product/types';
 
-type Context = ReturnType<typeof useContext>;
-
 export const getProductDetailsCommand = {
-  execute: async (context: Context, searchParams: GetProductSearchParams, customQuery = { productDetail: 'productDetail' }) => {
+  execute: async (context: UseContextReturn, searchParams: GetProductSearchParams, customQuery = { productDetail: 'productDetail' }) => {
     const { data } = await context.app.$vsf.$magento.api.productDetail(searchParams, customQuery);
 
     return data?.products ?? null;

packages/theme/modules/catalog/product/composables/useProduct/commands/getProductListCommand.ts

@@ -1,10 +1,8 @@
-import type { useContext } from '@nuxtjs/composition-api';
+import { UseContextReturn } from '~/composables/types';
 import type { GetProductSearchParams } from '~/modules/catalog/product/types';
 
-type Context = ReturnType<typeof useContext>;
-
 export const getProductListCommand = {
-  execute: async (context: Context, searchParams: GetProductSearchParams, customQuery = { products: 'products' }) => {
+  execute: async (context: UseContextReturn, searchParams: GetProductSearchParams, customQuery = { products: 'products' }) => {
     const { data } = await context.app.$vsf.$magento.api.products(searchParams, customQuery);
 
     return data?.products ?? null;

packages/theme/modules/checkout/composables/useMakeOrder/commands/placeOrderCommand.ts

@@ -1,10 +1,8 @@
-import type { useContext } from '@nuxtjs/composition-api';
+import { UseContextReturn } from '~/composables/types';
 import type { PlaceOrderOutput } from '~/modules/GraphQL/types';
 
-type Context = ReturnType<typeof useContext>;
-
 export const placeOrderCommand = {
-  execute: async (context: Context, cartId: string): Promise<PlaceOrderOutput | null> => {
+  execute: async (context: UseContextReturn, cartId: string): Promise<PlaceOrderOutput | null> => {
     const { data } = await context.app.$vsf.$magento.api.placeOrder({ cart_id: cartId });
 
     return data?.placeOrder ?? null;

packages/theme/modules/checkout/composables/usePaymentProvider/commands/getAvailablePaymentMethodsCommand.ts

@@ -1,10 +1,8 @@
-import type { useContext } from '@nuxtjs/composition-api';
+import { UseContextReturn } from '~/composables/types';
 import type { AvailablePaymentMethod } from '~/modules/GraphQL/types';
 
-type Context = ReturnType<typeof useContext>;
-
 export const getAvailablePaymentMethodsCommand = {
-  execute: async (context: Context, cartId: string): Promise<AvailablePaymentMethod[]> => {
+  execute: async (context: UseContextReturn, cartId: string): Promise<AvailablePaymentMethod[]> => {
     const { data } = await context.app.$vsf.$magento.api.getAvailablePaymentMethods({ cartId });
 
     return data?.cart?.available_payment_methods ?? [];

packages/theme/modules/checkout/composables/usePaymentProvider/commands/setPaymentMethodOnCartCommand.ts

@@ -1,11 +1,9 @@
-import type { useContext } from '@nuxtjs/composition-api';
+import { UseContextReturn } from '~/composables/types';
 import type { AvailablePaymentMethod } from '~/modules/GraphQL/types';
 import type { PaymentMethodParams } from '../usePaymentProvider';
 
-type Context = ReturnType<typeof useContext>;
-
 export const setPaymentMethodOnCartCommand = {
-  execute: async (context: Context, params: PaymentMethodParams): Promise<AvailablePaymentMethod[]> => {
+  execute: async (context: UseContextReturn, params: PaymentMethodParams): Promise<AvailablePaymentMethod[]> => {
     const { data } = await context.app.$vsf.$magento.api.setPaymentMethodOnCart(params);
 
     return data?.setPaymentMethodOnCart?.cart.available_payment_methods ?? [];

packages/theme/modules/checkout/composables/useShippingProvider/commands/setShippingMethodsOnCartCommand.ts

@@ -1,10 +1,8 @@
-import type { useContext } from '@nuxtjs/composition-api';
+import { UseContextReturn } from '~/composables/types';
 import type { SetShippingMethodsOnCartInput, Cart } from '~/modules/GraphQL/types';
 
-type Context = ReturnType<typeof useContext>;
-
 export const setShippingMethodsOnCartCommand = {
-  execute: async (context: Context, shippingMethodParams: SetShippingMethodsOnCartInput): Promise<Cart | null> => {
+  execute: async (context: UseContextReturn, shippingMethodParams: SetShippingMethodsOnCartInput): Promise<Cart | null> => {
     const { data } = await context.app.$vsf.$magento.api.setShippingMethodsOnCart(shippingMethodParams);
 
     // TODO: Find out why 'Cart' doesn't match the type of the response data.

packages/theme/modules/checkout/index.ts

@@ -1,11 +1,12 @@
-import { Module } from '@nuxt/types';
 import path from 'node:path';
 import url from 'node:url';
+import type { Module } from '@nuxt/types';
+import type { NuxtRouteConfig } from '@nuxt/types/config/router';
 
 const nuxtModule : Module = function checkoutModule() {
   const moduleDir = path.dirname(url.fileURLToPath(import.meta.url));
 
-  this.extendRoutes((routes) => {
+  this.extendRoutes((routes: NuxtRouteConfig[]) => {
     routes.unshift(
       {
         name: 'checkout',

packages/theme/modules/checkout/pages/Checkout/Billing.vue

@@ -303,7 +303,7 @@ import {
 import { mergeItem } from '~/helpers/asyncLocalStorage';
 import { isPreviousStepValid } from '~/helpers/checkout/steps';
 
-import type { ShippingCartAddress, Customer } from '~/modules/GraphQL/types';
+import type { ShippingCartAddress, Customer, Country } from '~/modules/GraphQL/types';
 
 const NOT_SELECTED_ADDRESS = '';
 
@@ -355,8 +355,8 @@ export default defineComponent({
       search: searchCountry,
     } = useCountrySearch();
 
-    const countries = ref([]);
-    const country = ref(null);
+    const countries = ref<Country[]>([]);
+    const country = ref<Country | null>(null);
     const { isAuthenticated } = useUser();
     let oldBilling = null;
     const sameAsShipping = ref(false);
@@ -381,13 +381,10 @@ export default defineComponent({
       return addresses.value.length > 0;
     });
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     const countriesList = computed(() => addressGetter.countriesList(countries.value));
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     const regionInformation = computed(() => addressGetter.regionList(country.value));
 
-    const handleAddressSubmit = (reset) => async () => {
+    const handleAddressSubmit = (reset: () => void) => async () => {
       const addressId = currentAddressId.value;
       const billingDetailsData = {
         billingDetails: {
@@ -450,7 +447,7 @@ export default defineComponent({
       isBillingDetailsStepCompleted.value = false;
     };
 
-    const changeBillingDetails = (field, value) => {
+    const changeBillingDetails = (field: string, value: unknown) => {
       billingDetails.value = {
         ...billingDetails.value,
         [field]: value,
@@ -469,7 +466,7 @@ export default defineComponent({
       }
     };
 
-    const changeCountry = async (id) => {
+    const changeCountry = async (id: string) => {
       changeBillingDetails('country_code', id);
       country.value = await searchCountry({ id });
     };