Hotfix/Linter and prettier

.eslintrc

@@ -2,8 +2,6 @@
   "extends": "vtex",
   "root": true,
   "env": {
-    "node": true,
-    "es6": true,
-    "jest": true
+    "node": true
   }
 }

.vscode/settings.json

@@ -19,6 +19,6 @@
     }
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
-}
+}

apps/vtex-my-subscriptions-3/react/.eslintrc

@@ -1,8 +1,12 @@
 {
   "extends": "vtex-react/io",
+  "root": true,
   "env": {
-    "browser": true,
-    "es6": true,
-    "jest": true
+    "browser": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
-}
+}

apps/vtex-my-subscriptions-3/react/ExtensionLinks.tsx

@@ -1,5 +1,6 @@
-import { FunctionComponent, ReactElement } from 'react'
-import { WrappedComponentProps, injectIntl, defineMessages } from 'react-intl'
+import type { FunctionComponent, ReactElement } from 'react'
+import type { WrappedComponentProps } from 'react-intl'
+import { injectIntl, defineMessages } from 'react-intl'
 
 const messages = defineMessages({
   title: {

apps/vtex-my-subscriptions-3/react/__mocks__/vtex.render-runtime.tsx

@@ -1,3 +1,3 @@
-export function withRuntimeContext(children: any) {
+export function withRuntimeContext(children: React.ReactNode) {
   return children
 }

apps/vtex-my-subscriptions-3/react/__mocks__/vtex.splunk-monitoring.tsx

@@ -6,6 +6,7 @@ export const main = {
   }),
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const withQueryWrapper = (_: any, args: any) => {
   return graphql(args.document, args.operationOptions)
 }

apps/vtex-my-subscriptions-3/react/__mocks__/vtex.styleguide.tsx

@@ -1,35 +1,34 @@
-/* eslint-disable @typescript-eslint/ban-ts-ignore */
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as Alert } from '@vtex/styleguide/lib/Alert'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as ModalDialog } from '@vtex/styleguide/lib/ModalDialog'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as Button } from '@vtex/styleguide/lib/Button'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as Input } from '@vtex/styleguide/lib/Input'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as IconEdit } from '@vtex/styleguide/lib/icon/Edit'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as IconDelete } from '@vtex/styleguide/lib/icon/Delete'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as NumericStepper } from '@vtex/styleguide/lib/NumericStepper'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as Tag } from '@vtex/styleguide/lib/Tag'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as Dropdown } from '@vtex/styleguide/lib/Dropdown'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as ActionMenu } from '@vtex/styleguide/lib/ActionMenu'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as CheckboxGroup } from '@vtex/styleguide/lib/CheckboxGroup'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as ButtonWithIcon } from '@vtex/styleguide/lib/ButtonWithIcon'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as IconPlus } from '@vtex/styleguide/lib/icon/Plus'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as Modal } from '@vtex/styleguide/lib/Modal'
-// @ts-ignore
+// @ts-expect-error: Missing type declarations for this module
 export { default as InputSearch } from '@vtex/styleguide/lib/InputSearch'
-// @ts-ignore
+
 export { default as ButtonPlain } from '@vtex/styleguide/lib/ButtonPlain'
 
 export function withToast(children: unknown) {

apps/vtex-my-subscriptions-3/react/__mocks__/vtex.totalizer-translator.tsx

@@ -1,4 +1,5 @@
-import React, { FunctionComponent } from 'react'
+import type { FunctionComponent } from 'react'
+import React from 'react'
 
 export const TranslateTotalizer: FunctionComponent<{ id: string }> = ({
   id,

apps/vtex-my-subscriptions-3/react/components/AddItemModal/EmptyState.tsx

@@ -1,4 +1,5 @@
-import React, { FunctionComponent } from 'react'
+import type { FunctionComponent } from 'react'
+import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { EmptyState as Empty } from 'vtex.styleguide'
 

apps/vtex-my-subscriptions-3/react/components/AddItemModal/IconBox.tsx

@@ -1,4 +1,5 @@
-import React, { FunctionComponent } from 'react'
+import type { FunctionComponent } from 'react'
+import React from 'react'
 
 const IconBox: FunctionComponent = () => (
   <svg

apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx

@@ -1,5 +1,7 @@
-import React, { FunctionComponent } from 'react'
-import { injectIntl, defineMessages, WrappedComponentProps } from 'react-intl'
+import type { FunctionComponent } from 'react'
+import React from 'react'
+import type { WrappedComponentProps } from 'react-intl'
+import { injectIntl, defineMessages } from 'react-intl'
 import { compose } from 'recompose'
 import {
   Modal,
@@ -10,18 +12,18 @@ import {
   IconCaretLeft,
   IconCaretRight,
 } from 'vtex.styleguide'
-
 import { useCssHandles } from 'vtex.css-handles'
 
 import { withQueryWrapper, getRuntimeInfo } from '../../tracking'
-import SEARCH_QUERY, {
+import type {
   Args as SearchArgs,
   Result as SearchResult,
   SearchProduct,
 } from './search.gql'
+import SEARCH_QUERY from './search.gql'
 import Item from './SearchItem'
 import EmptyState from './EmptyState'
-import { AddItemArgs } from '.'
+import type { AddItemArgs } from '.'
 
 const messages = defineMessages({
   title: {
@@ -72,6 +74,7 @@ const AddItemModal: FunctionComponent<Props> = ({
   targetPlan,
 }) => {
   let state: State
+
   if (loading) {
     state = 'loading'
   } else if (products && products?.length > 0) {
@@ -114,9 +117,12 @@ const AddItemModal: FunctionComponent<Props> = ({
       >
         {state === 'results' ? (
           <>
-            {products?.map((product) =>
-              product?.items.map((sku) => (
-                <div key={sku.skuId} className={`${handles.productItemWrapper} mb8`}>
+            {products?.map(product =>
+              product?.items.map(sku => (
+                <div
+                  key={sku.skuId}
+                  className={`${handles.productItemWrapper} mb8`}
+                >
                   <Item
                     id={sku.skuId}
                     name={sku.name}
@@ -134,8 +140,12 @@ const AddItemModal: FunctionComponent<Props> = ({
                 </div>
               ))
             )}
-            <div className={`${handles.paginationWrapper} bg-base w-100 pa6 absolute bottom-0 right-0`}>
-              <div className={`${handles.paginationContent} flex flex-row justify-end`}>
+            <div
+              className={`${handles.paginationWrapper} bg-base w-100 pa6 absolute bottom-0 right-0`}
+            >
+              <div
+                className={`${handles.paginationContent} flex flex-row justify-end`}
+              >
                 <div className={`${handles.paginationPrev} mr1`}>
                   <ButtonWithIcon
                     icon={<IconCaretLeft size={11} />}

apps/vtex-my-subscriptions-3/react/components/AddItemModal/SearchItem.tsx

@@ -1,17 +1,15 @@
-import React, { FunctionComponent, useState } from 'react'
+import type { FunctionComponent } from 'react'
+import React, { useState } from 'react'
 import { FormattedNumber, FormattedMessage } from 'react-intl'
+import { useCssHandles } from 'vtex.css-handles'
 
 import Thumbnail from '../SkuThumbnail'
-import { AddItemArgs } from '.'
+import type { AddItemArgs } from '.'
 import Button from './SubscribeButton'
 import { subscribed, subscribable } from './SubscribeButton/utils'
 import QuantitySelector from '../QuantitySelector'
 
-import { useCssHandles } from 'vtex.css-handles'
-
-const CSS_HANDLES = [
-  'productItemPrice',
-]
+const CSS_HANDLES = ['productItemPrice']
 
 const SearchItem: FunctionComponent<Props> = ({
   imageUrl,

apps/vtex-my-subscriptions-3/react/components/AddItemModal/SubscribeButton/index.tsx

@@ -1,14 +1,13 @@
-import React, { FunctionComponent } from 'react'
-import { injectIntl, WrappedComponentProps, defineMessages } from 'react-intl'
+import type { FunctionComponent } from 'react'
+import React from 'react'
+import type { WrappedComponentProps } from 'react-intl'
+import { injectIntl, defineMessages } from 'react-intl'
 import { Button, ButtonPlain } from 'vtex.styleguide'
+import { useCssHandles } from 'vtex.css-handles'
 
 import { subscribable, subscribed } from './utils'
 
-import { useCssHandles } from 'vtex.css-handles'
-
-const CSS_HANDLES = [
-  'productItemMessage',
-]
+const CSS_HANDLES = ['productItemMessage']
 
 const messages = defineMessages({
   frequencyNotAvailable: {

apps/vtex-my-subscriptions-3/react/components/AddItemModal/SubscribeButton/utils.ts

@@ -3,7 +3,7 @@ import memoize from 'memoize-one'
 const buildSet = memoize((values: string[]) => {
   const set = new Set<string>()
 
-  values.forEach((id) => set.add(id))
+  values.forEach(id => set.add(id))
 
   return set
 })

apps/vtex-my-subscriptions-3/react/components/AddItemModal/index.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
-import { injectIntl, defineMessages, WrappedComponentProps } from 'react-intl'
+import type { WrappedComponentProps } from 'react-intl'
+import { injectIntl, defineMessages } from 'react-intl'
 import { ButtonWithIcon, IconPlus } from 'vtex.styleguide'
 
 import Modal from './Modal'
@@ -57,13 +58,8 @@ class AddItemContainer extends Component<Props> {
 
   public render() {
     const { intl, currency, targetPlan, subscribedSkus } = this.props
-    const {
-      isModalOpen,
-      searchInput,
-      searchTerm,
-      page,
-      displayError,
-    } = this.state
+    const { isModalOpen, searchInput, searchTerm, page, displayError } =
+      this.state
 
     return (
       <>

apps/vtex-my-subscriptions-3/react/components/AddItemModal/search.d.ts

@@ -1,5 +1,5 @@
 declare module '*/search.gql' {
-  import { DocumentNode } from 'graphql'
+  import type { DocumentNode } from 'graphql'
 
   interface SearchItem {
     name: string

apps/vtex-my-subscriptions-3/react/components/ConfirmationModal.tsx

@@ -7,8 +7,8 @@ function makeCancelable(promise: Promise<unknown>) {
 
   const wrappedPromise = new Promise((resolve, reject) => {
     promise.then(
-      (val) => (hasCanceled ? reject({ isCanceled: true }) : resolve(val)),
-      (error) => (hasCanceled ? reject({ isCanceled: true }) : reject(error))
+      val => (hasCanceled ? reject({ isCanceled: true }) : resolve(val)),
+      error => (hasCanceled ? reject({ isCanceled: true }) : reject(error))
     )
   })
 
@@ -45,17 +45,11 @@ class ConfirmationModalContainer extends Component<Props> {
     | undefined
     | { promise: Promise<unknown>; cancel: () => void }
 
-  public componentWillUnmount = () =>
-    this.innerPromise && this.innerPromise.cancel()
+  public componentWillUnmount = () => this.innerPromise?.cancel()
 
   private handleSubmit = () => {
-    const {
-      showToast,
-      successMessage,
-      onSubmit,
-      onCloseModal,
-      onError,
-    } = this.props
+    const { showToast, successMessage, onSubmit, onCloseModal, onError } =
+      this.props
 
     const promise = onSubmit()
 
@@ -70,7 +64,7 @@ class ConfirmationModalContainer extends Component<Props> {
               message: successMessage,
             })
         })
-        .catch((error) => {
+        .catch(error => {
           this.setState({ shouldDisplayError: true })
           onError?.(error)
         })
@@ -81,7 +75,7 @@ class ConfirmationModalContainer extends Component<Props> {
   }
 
   private handleLoading = (value: boolean) => {
-    this.props.onLoading && this.props.onLoading(value)
+    this.props.onLoading?.(value)
 
     this.setState({ isLoading: value })
   }
@@ -135,13 +129,14 @@ interface Props {
   onSubmit: () => Promise<unknown> | undefined
   onCloseModal: () => void
   onLoading?: (loading: boolean) => void
-  onError?: (error: any) => void
+  onError?: (error: unknown) => void
   confirmationLabel: string
   cancelationLabel: string
   errorMessage: string
   successMessage?: string
   isModalOpen: boolean
-  showToast: (args: object) => void
+  showToast: (args: Record<string, unknown>) => void
+  children: React.ReactNode
 }
 
 export default withToast(ConfirmationModalContainer)

apps/vtex-my-subscriptions-3/react/components/CreationPage/FrequencySection/Skeleton.tsx

@@ -1,4 +1,5 @@
-import React, { FunctionComponent } from 'react'
+import type { FunctionComponent } from 'react'
+import React from 'react'
 import { SkeletonPiece } from 'vtex.my-account-commons'
 
 const FrequencySectionSkeleton: FunctionComponent = () => (