Some eslint fixes

.github/workflows/main.yml

@@ -29,7 +29,7 @@ jobs:
             turbo-${{ github.job }}-${{ github.ref_name }}-
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm --version && pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm run build

apps/checkout/.eslintrc.js

@@ -1,9 +1,7 @@
 module.exports = {
-  parser: "@typescript-eslint/parser",
+  root: true,
+  extends: ["checkout"],
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: ["./tsconfig.json"],
   },
-  plugins: ["react-hooks"],
-  extends: ["checkout"],
 };

apps/checkout/package.json

@@ -17,17 +17,18 @@
     "@types/node": "^16.11.22",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "eslint": "8.19.0",
+    "eslint": "^8.22.0",
     "eslint-config-checkout": "workspace:*",
-    "eslint-plugin-react": "7.30.1",
-    "eslint-plugin-react-hooks": "4.6.0",
     "react-scripts": "5.0.1",
     "tsconfig": "workspace:*",
     "typescript": "4.7.4"
   },
   "scripts": {
     "dev": "react-scripts start",
-    "build": "react-scripts build"
+    "build": "react-scripts build",
+    "lint": "eslint .",
+    "lint:staged": "eslint --fix .",
+    "check-types": "tsc --noEmit"
   },
   "browserslist": {
     "production": [

apps/checkout/src/App.tsx

@@ -3,7 +3,10 @@ import "@saleor/checkout-storefront/dist/esm/index.css";
 import invariant from "ts-invariant";
 
 const apiUrl = process.env["REACT_APP_SALEOR_API_URL"];
-const checkoutApiUrl = process.env["REACT_APP_CHECKOUT_APP_URL"] + `/api`;
+const checkoutApiUrl =
+  typeof process.env["REACT_APP_CHECKOUT_APP_URL"] === "string"
+    ? process.env["REACT_APP_CHECKOUT_APP_URL"] + `/api`
+    : "";
 const checkoutAppUrl = process.env["REACT_APP_CHECKOUT_APP_URL"];
 
 export function App() {

apps/checkout/src/index.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
 import { App } from "./App";
 
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const root = ReactDOM.createRoot(document.getElementById("root")!);
 root.render(
   <StrictMode>

apps/saleor-app-checkout/.eslintrc.js

@@ -1,15 +1,6 @@
 module.exports = {
-  extends: ["checkout", "next"],
+  extends: ["checkout"],
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: ["./tsconfig.json"],
-  },
-  settings: {
-    next: {
-      rootDir: ["."],
-    },
-  },
-  rules: {
-    "require-await": ["error"],
   },
 };

apps/saleor-app-checkout/__tests__/pages/api/pay.test.ts

@@ -198,7 +198,7 @@ describe("/api/pay", () => {
     expect(mockedCreateOrder).toHaveBeenCalledTimes(1);
 
     expect(mockedCreateAdyenPayment).toHaveBeenCalledWith({
-      appUrl: "http://undefined",
+      appUrl: "http://",
       method: "creditCard",
       order: {
         privateMetafield: '{"provider":"adyen","session":"session-id-2","method":"creditCard"}',

apps/saleor-app-checkout/backend/auth.ts

@@ -78,7 +78,7 @@ export const isAuthenticated = async (req: NextApiRequest) => {
 
   const jwtVerifier = JwtVerifier.getInstance(tokenData["iss"]);
 
-  return await jwtVerifier.verify(token);
+  return jwtVerifier.verify(token);
 };
 
 export const hasPermissionsInToken = (

apps/saleor-app-checkout/backend/client.ts

@@ -11,11 +11,11 @@ export const getClient = (params: ClientParams = {}) => {
   const { apiUrl = envVars.apiUrl, appToken = getAuthToken() } = params;
 
   return createClient({
-    url: apiUrl!,
+    url: apiUrl,
     requestPolicy: "network-only", // On SSR, Vercel uses client cache in consecutive requests, so we need network-only to always return fresh data from Saleor
     fetchOptions: {
       headers: {
-        Authorization: `Bearer ${appToken!}`,
+        Authorization: `Bearer ${appToken}`,
       },
     },
   });

apps/saleor-app-checkout/backend/configuration/mapPrivateMetafieldsToSettings.ts

@@ -36,7 +36,7 @@ const readSettingsValues = (
       return {
         ...subSettings,
         [subSettingKey]: subSetting.encrypted
-          ? decryptSetting(subSetting as SettingValue, obfuscateEncryptedData)
+          ? decryptSetting(subSetting, obfuscateEncryptedData)
           : subSetting.value,
       };
     },
@@ -87,7 +87,9 @@ export const mapPrivateMetafieldsToSettings = (
         return settings;
       }
 
-      const metadataItemSettings = JSON.parse(metafield || "");
+      const metadataItemSettings = JSON.parse(
+        metafield || ""
+      ) as UnknownPrivateSettingsValues<"encrypted">;
 
       return {
         ...settings,

apps/saleor-app-checkout/backend/payments/createOrder.ts

@@ -58,7 +58,7 @@ export const createOrder = async (
 
   if (!data?.orderCreateFromCheckout?.order) {
     return {
-      errors: data?.orderCreateFromCheckout?.errors.map((e) => e.code!) || [
+      errors: data?.orderCreateFromCheckout?.errors.map((e) => e.code) || [
         "COULD_NOT_CREATE_ORDER_FROM_CHECKOUT",
       ],
     };

apps/saleor-app-checkout/backend/payments/getOrderTransactions.ts

@@ -6,7 +6,8 @@ import {
 } from "@/saleor-app-checkout/graphql";
 
 export const getOrderTransactions = async (args: OrderTransactionsQueryVariables) => {
-  const { data, error } = await getClient()
+  // @todo handle errors
+  const { data, error: _error } = await getClient()
     .query<OrderTransactionsQuery, OrderTransactionsQueryVariables>(OrderTransactionsDocument, args)
     .toPromise();
 

apps/saleor-app-checkout/backend/payments/providers/adyen/middlewares.ts

@@ -60,6 +60,10 @@ export const isAdyenNotification: Middleware = (handler) => (request) => {
 export const isAdyenWebhookAuthenticated: Middleware = (handler) => (request) => {
   const { username, password } = request.context as AdyenRequestContext;
 
+  if (typeof request.headers.authorization !== "string") {
+    return Response.Unauthorized();
+  }
+
   if (!verifyBasicAuth(username, password, request.headers.authorization)) {
     return Response.Unauthorized();
   }

apps/saleor-app-checkout/backend/payments/providers/adyen/webhookHandler.ts

@@ -112,7 +112,7 @@ export const getNewTransactionData = (
     transactionEvent,
     transaction: {
       status: eventCode.toString(),
-      type: `${ADYEN_PAYMENT_PREFIX}-${paymentMethod}`,
+      type: `${ADYEN_PAYMENT_PREFIX}-${paymentMethod || "(unknown-payment-method)"}`,
       reference: pspReference,
       availableActions: mapAvailableActions(operations),
       ...getTransactionAmountFromAdyen(notification, null),

apps/saleor-app-checkout/backend/payments/providers/mollie/createPayment.ts

@@ -16,7 +16,7 @@ export const createMolliePayment = async ({ order, redirectUrl, appUrl }: Create
   const mollieClient = await getMollieClient();
 
   const mollieData = await mollieClient.orders.create({
-    orderNumber: order.number!,
+    orderNumber: order.number,
     webhookUrl: `${appUrl}/api/webhooks/mollie`,
     locale: "en_US",
     redirectUrl: formatRedirectUrl(redirectUrl, order.id),

apps/saleor-app-checkout/backend/payments/providers/mollie/verifySession.ts

@@ -1,4 +1,4 @@
-import { Order, OrderStatus as MollieOrderStatus } from "@mollie/api-client";
+import { OrderStatus as MollieOrderStatus } from "@mollie/api-client";
 import { getPrivateSettings } from "@/saleor-app-checkout/backend/configuration/settings";
 import { envVars } from "@/saleor-app-checkout/constants";
 

apps/saleor-app-checkout/backend/payments/providers/mollie/webhookHandler.ts

@@ -15,7 +15,7 @@ export const verifyPayment = async (
   const { status, amountCaptured, amountRefunded, metadata, method, amount } =
     await mollieClient.orders.get(id);
 
-  const type = `${MOLLIE_PAYMENT_PREFIX}-${method}`;
+  const type = `${MOLLIE_PAYMENT_PREFIX}-${method || "(unknown-payment-method)"}`;
   const reference = id;
   const eventName = getMollieEventName(status);
 

apps/saleor-app-checkout/backend/payments/providers/stripe/createPayment.ts

@@ -8,7 +8,7 @@ import { getStripeClient } from "./stripeClient";
 export const createStripePayment = async ({
   order,
   redirectUrl,
-  appUrl,
+  appUrl: _appUrl,
   method,
 }: CreatePaymentData): Promise<CreatePaymentResult> => {
   const stripeClient = await getStripeClient();
@@ -107,9 +107,13 @@ const saleorPaymentMethodIdToStripePaymentMethodId = (
 };
 
 const createStripeCustomerFromOrder = (stripeClient: Stripe, order: OrderFragment) => {
+  const name = [order.billingAddress?.firstName.trim(), order.billingAddress?.lastName.trim()]
+    .filter(Boolean)
+    .join(" ");
+
   return stripeClient.customers.create({
     email: order.userEmail ?? undefined,
-    name: order.billingAddress?.firstName + " " + order.billingAddress?.lastName,
+    name,
     address: order.billingAddress
       ? {
           city: order.billingAddress.city,

apps/saleor-app-checkout/backend/payments/providers/stripe/webhookHandler.ts

@@ -69,7 +69,7 @@ export const checkoutSessionToTransactionCreateMutationVariables = async (
       transaction: {
         status: checkoutSession.status || "unknown",
         reference: checkoutSession.id,
-        type: `${STRIPE_PAYMENT_PREFIX}-${method}`,
+        type: `${STRIPE_PAYMENT_PREFIX}-${method || "(unknown-payment-method)"}`,
         availableActions: [],
       },
       transactionEvent: {
@@ -102,7 +102,7 @@ export const checkoutSessionToTransactionCreateMutationVariables = async (
       transaction: {
         status: checkoutSession.status || "unknown",
         reference: checkoutSession.id,
-        type: `${STRIPE_PAYMENT_PREFIX}-${method}`,
+        type: `${STRIPE_PAYMENT_PREFIX}-${method || "(unknown-payment-method)"}`,
         amountAuthorized: {
           amount: getAmount("authorized"),
           currency: charge.currency.toUpperCase(),

apps/saleor-app-checkout/backend/payments/updateTransaction.ts

@@ -6,7 +6,8 @@ import {
 } from "@/saleor-app-checkout/graphql";
 
 export const updateTransaction = async (args: TransactionUpdateMutationVariables) => {
-  const { data, error } = await getClient()
+  // @todo handle errors
+  const { data, error: _error } = await getClient()
     .mutation<TransactionUpdateMutation, TransactionUpdateMutationVariables>(
       TransactionUpdateDocument,
       args

apps/saleor-app-checkout/backend/utils.ts

@@ -1,5 +1,6 @@
 import { PermissionEnum } from "@/saleor-app-checkout/graphql";
-import { NextApiHandler, NextApiRequest } from "next";
+import { NextApiHandler } from "next";
+import invariant from "ts-invariant";
 import { debugEnvVars, envVars, envVarsNames } from "../constants";
 import { isAuthenticated, isAuthorized } from "./auth";
 
@@ -18,7 +19,7 @@ export const allowCors =
       return;
     }
 
-    return await fn(req, res);
+    return fn(req, res);
   };
 
 export const requireAuthorization =
@@ -44,7 +45,7 @@ export const requireAuthorization =
       });
     }
 
-    return await fn(req, res);
+    return fn(req, res);
   };
 
 export const getBaseUrl = (req: { headers: Record<string, string | string[] | undefined> }) => {
@@ -53,7 +54,10 @@ export const getBaseUrl = (req: { headers: Record<string, string | string[] | un
     return debugEnvVars.appUrl;
   }
 
-  const { host, "x-forwarded-proto": protocol = "http" } = req.headers;
+  const { host = "", "x-forwarded-proto": protocol = "http" } = req.headers;
+
+  invariant(typeof host === "string", "host is not a string");
+  invariant(typeof protocol === "string", "protocol is not a string");
 
   return `${protocol}://${host}`;
 };

apps/saleor-app-checkout/codegen.yml

@@ -14,6 +14,8 @@ generates:
       scalars:
         JSONString: string
         UUID: string
+        Metadata: Record<string, string>
+        DateTime: string
       dedupeOperationSuffix: true # Prevent suffix duplication in generated names
       enumsAsTypes: true # note: this doesn't work with @saleor/app-sdk webhook inference
   ./graphql.schema.json:

apps/saleor-app-checkout/frontend/components/elements/AppContainer/AppContainer.tsx

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from "react";
+import React, { ReactNode } from "react";
 import { useStyles } from "./styles";
 
-const AppContainer: React.FC<PropsWithChildren<{}>> = (props) => {
+const AppContainer: React.FC<{ children: ReactNode }> = (props) => {
   const classes = useStyles();
 
   return <div className={classes.root} {...props} />;

apps/saleor-app-checkout/frontend/components/elements/AppProvider/AppProvider.tsx

@@ -1,6 +1,6 @@
 import { app, AppBridge } from "@/saleor-app-checkout/frontend/misc/app";
 import { useRouter } from "next/router";
-import { createContext, PropsWithChildren, useEffect, useState } from "react";
+import { createContext, ReactNode, useEffect, useState } from "react";
 import { handleRedirectEvent, handleRouteChange } from "./handlers";
 
 interface IAppContext {
@@ -13,7 +13,7 @@ export const AppContext = createContext<IAppContext>({
   isAuthorized: false,
 });
 
-const AppProvider: React.FC<PropsWithChildren<{}>> = (props) => {
+const AppProvider: React.FC<{ children: ReactNode }> = (props) => {
   const router = useRouter();
   const [isAuthorized, setIsAuthorized] = useState(!!app?.getState()?.token);
 

apps/saleor-app-checkout/frontend/components/elements/ErrorAlert/ErrorAlert.tsx

@@ -14,7 +14,7 @@ interface ErrorAlertProps<T> {
   getErrorMessage: (error: UnknownError<T>, intl: IntlShape) => string | null | undefined;
 }
 
-const ErrorAlert = <T extends any>({ errors, getErrorMessage }: ErrorAlertProps<T>) => {
+const ErrorAlert = <T,>({ errors, getErrorMessage }: ErrorAlertProps<T>) => {
   const intl = useIntl();
   const classes = useStyles();
 

apps/saleor-app-checkout/frontend/components/elements/PrivateSettingsProvider/PrivateSettingsProvider.tsx

@@ -1,7 +1,7 @@
 import { defaultPrivateSettings } from "@/saleor-app-checkout/config/defaults";
 import createSafeContext from "@/saleor-app-checkout/frontend/misc/createSafeContext";
 import { PrivateSettingsValues } from "@/saleor-app-checkout/types/api";
-import { Dispatch, PropsWithChildren, SetStateAction, useState } from "react";
+import { Dispatch, ReactNode, SetStateAction, useState } from "react";
 
 interface PrivateSettingsProviderContext {
   privateSettings: PrivateSettingsValues<"unencrypted">;
@@ -11,7 +11,7 @@ interface PrivateSettingsProviderContext {
 export const [usePrivateSettingsContext, Provider] =
   createSafeContext<PrivateSettingsProviderContext>();
 
-const PrivateSettingsProvider: React.FC<PropsWithChildren<{}>> = (props) => {
+const PrivateSettingsProvider: React.FC<{ children: ReactNode }> = (props) => {
   const [privateSettings, setPrivateSettings] = useState(defaultPrivateSettings);
 
   return (

apps/saleor-app-checkout/frontend/components/templates/CustomizationDetails/CustomizationDetails.tsx

@@ -72,7 +72,7 @@ const CustomizationDetails: React.FC<CustomizationDetailsProps> = ({
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
     const inputFiles = event.target.files;
-    if (!!inputFiles?.length) {
+    if (inputFiles?.length) {
       setFiles({
         ...files,
         [optionId]: {

apps/saleor-app-checkout/frontend/handlers.ts

@@ -61,7 +61,7 @@ export const uploadSettingsFiles = async ({
     return data;
   }
 
-  return await reduce(
+  return reduce(
     dataFiles,
     async (settings, subSettings, idx) => {
       const uploadedSettings = await settings;

apps/saleor-app-checkout/frontend/hooks/useFetch/useFetch.ts

@@ -27,7 +27,7 @@ export const useFetch = <
       if (result?.error) {
         throw result.error;
       }
-      setResult(result);
+      setResult(result as TData);
       return result;
     } catch (e) {
       setError(e as TError);

apps/saleor-app-checkout/frontend/misc/auth.ts

@@ -1,5 +1,9 @@
 import { app } from "./app";
 
-export const getAuthHeaders = () => ({
-  Authorization: `Bearer ${app?.getState()?.token}`,
-});
+export const getAuthHeaders = () => {
+  const token = app?.getState()?.token;
+
+  return {
+    Authorization: token ? `Bearer ${token}` : "",
+  };
+};

apps/saleor-app-checkout/frontend/misc/mapPublicMetafieldsToSettings.ts

@@ -48,7 +48,7 @@ export const mapPublicMetafieldsToSettings = (
       }
 
       try {
-        const metadataItemSettings = JSON.parse(metafield || "");
+        const metadataItemSettings = JSON.parse(metafield || "") as UnknownPublicSettingsValues;
 
         return {
           ...settings,