[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/typings/gql.d.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.gql' {
  import type { DocumentNode } from 'graphql'

  const Schema: DocumentNode

  export default Schema
}

declare module '*.graphql' {
  import type { DocumentNode } from 'graphql'

  const schema: DocumentNode

  export default Schema
}

interface Runtime {
  production: boolean
  account: string
  workspace: string
  culture: {
    language: string
  }
  query: {
    theme: string
  }
  platform: string
}

// eslint-disable-next-line @typescript-eslint/naming-convention
declare const __RUNTIME__: Runtime

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/typings/css.d.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  type Styles = {
    [selector: string]: string
  }

  const styles: Styles

  export default styles
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/styles.css from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```css
.containerMetrics {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid grey;
  height: 70px;
}

.containerMetrics div {
  border-right: 0.1px solid grey;
  cursor: pointer;
}

.containerMetrics div:last-child {
  border-right: none;
}

.containerMetrics small {
  display: flex;
  align-items: center;
  margin: 4px 8px;
  border-bottom: 1px solid black;
  /* font-size: 13px; */
  color: grey;
}

.containerMetrics img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  margin-bottom: 4px;
}

.dateIcon {
  height: 24px;
  margin-top: 0px;
}

.arrowDown {
  position: relative;
  top: 5px;
}

.selectedCard {
  border-bottom: 5px solid #eb5b2b;
}

.selectedCard small {
  color: black;
  font-weight: bold;
}

.containerGraph .tagDescription {
  display: inline-block;
  margin-right: 20px;
  /* font-size: 13px; */
}

:global(.kuikpay-my-checkout-0-x-containerGraph)
  :global(.kuikpay-kuikpay-admin-1-x-tagDescription div) {
  padding: 6px !important;
  margin-right: 4px !important;
}

:global(.kuikpay-my-checkout-0-x-containerGraph)
  :global(.recharts-default-legend) {
  display: none !important;
}

.btnFilters {
  background-color: transparent;
  color: black;
  border: none;
  border-bottom: 1px solid black;
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
  top: -9px;
}

.btnFilters[disabled] {
  color: grey;
  cursor: not-allowed;
}

/* Container filters styles */
.hidden {
  display: none;
}

.containerFilters {
  border: 2px solid #cfcece;
  width: auto;
  position: absolute !important;
  padding: 20px 40px !important;
  background: white;
  box-shadow: 2px 3px 7px #d1d0d0;
  z-index: 1;
  border-radius: 5px;
  margin-top: -5px;
}

:global(.vtex-dropdown__button) {
  width: 255px;
}

:global(.vtex-styleguide-9-x-container) {
  margin-left: 16px;
}

:global(.vtex-dropdown__label) {
  display: contents;
}

.containerFilters label {
  display: flex;
  align-items: baseline;
}

.btnAccept {
  background-color: #eb5b2b;
  color: white;
  border: none;
  width: 160px;
  border-radius: 3px;
  padding: 5px 0;
}

.btnCancel {
  margin-left: 20px;
  background: transparent;
  border: none;
  text-decoration: underline;
}

.containerDatePicker {
  padding: 10px 0 0px 63px;
  display: flex;
}

.firstContainerPicker :global(.vtex-input-prefix__group) {
  border: 2px solid #eb5b2b;
}

.secondContainerPicker :global(.vtex-input-prefix__group) {
  border: 2px solid #284859;
}

.containerDatePicker input {
  margin-right: 15px;
}

.checkCompare {
  display: inline-block;
  margin-right: 4px;
  position: relative;
  top: 2px;
}

/*Styles radio buttons*/

:global(.kuikpay-my-checkout-0-x-containerGraph)
  :global(.vtex-radioGroup__fieldset) {
  display: flex !important;
}

:global(.kuikpay-my-checkout-0-x-containerGraph)
  :global(.vtex-radioGroup__fieldset label) {
  border: none !important;
}

:global(.kuikpay-my-checkout-0-x-containerGraph)
  :global(.vtex-radioGroup__radioContainer) {
  margin-right: 10px;
}

:global(.kuikpay-my-checkout-0-x-containerGraph) :global(.vtex-radio__label) {
  /* font-size: 13px; */
  padding-top: 5px;
}

.tagsAndRadioBtns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*Styles chart*/

:global(.vtex-radio__fakeRadio.b--action-primary) {
  border-color: #368369 !important;
}

:global(.vtex-radio__fakeRadioInner.bg-action-primary) {
  background-color: #368369 !important;
}

input[type='checkbox'] {
  width: 16px !important;
  height: 16px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: 1px solid gray;
  box-shadow: none;
  font-size: 0.8em;
  text-align: center;
  line-height: 1em;
  background: white;
  border-radius: 3px;
}

input[type='checkbox']:checked:after {
  content: '✔';
  color: white;
  width: 8px;
  background: #368369;
  height: 8px;
  padding: 4px;
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.containerLoader {
  position: relative;
  display: flex;
  justify-content: center;
  top: -37px;
}

.containerLoader svg {
  position: absolute;
}

.textCompare {
  padding-left: 8px;
}

.containerTags {
  display: grid;
}

.chart {
  width: 100%;
  height: 500px;
}

.chartContainer {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .containerFilters {
    width: 50%;
  }
  :global(.vtex-dropdown__button) {
    width: 30.1vw;
  }
  .containerDatePicker {
    display: block;
  }
}

@media screen and (max-width: 652px) {
  .containerFilters {
    width: 75%;
  }
}

@media screen and (max-width: 566px) {
  .containerFilters {
    width: 75%;
  }
}

@media screen and (max-width: 480px) {
  :global(.vtex-dropdown__button) {
    width: 42.1vw;
  }
  .btnAccept {
    width: 100px;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/utils/index.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const CONSTANTS = {
  platform: 'vtex-io',
}

export const getOrderForm = async (oderFormId: string) => {
  const response = await fetch(`/api/checkout/pub/orderForm/${oderFormId}`, {
    method: 'GET',
    redirect: 'follow',
  })

  return response.json()
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/interfaces/index.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface ItemToAdd {
  id?: number | string
  quantity?: number
  seller?: string
}

export interface ItemToRemove {
  id?: number | string
  index?: number
  quantity: number
  seller?: string
  uniqueId?: string
}

export interface OfferingInput {
  itemIndex: number
  offeringId: string
}

export interface ResponseValidateItem {
  id: string
  message: string
  imageUrl?: string
  name?: string
}

export interface Config {
  mainSellerId?: string
  salesChannel?: string
  customItems?: CustomItems[]
  customSubTotalItems?: CustomSubTotalItems[]
}

export interface CustomSubTotalItems {
  name: string
  value: number
}

export interface CustomItems {
  sku: string
  customClassName?: string
  name?: string
  sendToFinish?: boolean
  showTotalMount?: boolean
  remove?: boolean
}

export interface Card {
  paymentSystemName: string
  accountId: string
  cardNumber: string
}

export interface MarketingData {
  coupon?: string
}

export interface Message {
  code: string
}

export interface PaymentMethod {
  id?: string
  gateway?: string
  email?: string
  franchise?: string
  number?: string
  ccToken?: string
  paymentMethod: string
  bin?: string
}

export interface PaymentData {
  availablePaymentMethods?: PaymentMethod[] | null
  selectedPaymentMethod?: PaymentMethod | null
  paymentMethod?: PaymentMethod | null
  completed?: boolean
  otherAvailablePaymentMethods?: PaymentMethod[] | null
  bin?: string | null
}

type TotalizerId = 'Items' | 'Shipping' | 'Tax' | 'Discounts'

export interface Totalizer {
  id: TotalizerId
  name: string
  value: number
}

export interface BundleItem {
  id: string
  name: string
  price: number
}

export interface Offering {
  allowGiftMessage: boolean
  id: string
  name: string
  price: number
  type: string
}

export interface Item {
  uniqueId: string
  id: string
  name: string
  quantity: number
  sellingPrice: number
  imageUrl: string
  availability: string
  index: number
  seller: string
  offerings: Offering[]
  bundleItems: BundleItem[]
  isGift: boolean
  price: number
  skuSpecifications: SkuSpecification[]
  productCategories?: any[]
  listPrice: number
  imageUrls?: {
    at1x: string
  }
  unitMultiplier: number
  measurementUnit: string
  priceTags: any
}

interface GeoCoordinates {
  latitude: string
  longitude: string
}

export interface Address {
  addressId: string
  addressType: string
  city: string
  complement?: string
  country: string
  geoCoordinates: GeoCoordinates
  isDisposable?: boolean
  neighborhood: string
  number?: string
  postalCode: string
  receiverName: string
  reference?: string
  state: string
  street: string
  completed?: boolean
  selectedSlaId?: string
}

export interface OrderForm {
  clientProfileData?: {
    email?: string
  }
  shippingData?: {
    selectedAddress?: Address | null
  }
  items: Item[]
  totalizers: Totalizer[]
  value: number
  paymentData?: PaymentData
  messages?: Message[]
  marketingData?: MarketingData
}

export interface CustomData {
  customApps: CustomApp[]
}

interface CustomApp {
  id: string
  major: number
  fields: CustomAppField[]
}

interface CustomAppField {
  key: string
  value: string
}

export interface Seller {
  commertialOffer: CommertialOffer
}

interface CommertialOffer {
  AvailableQuantity: number
}

export interface Profile {
  email?: string
  firstName?: string
  lastName?: string
  document?: string
  phone?: string
  documentType?: string
  isCorporate?: boolean
  corporateName?: string
  tradeName?: string
  corporateDocument?: string
  stateInscription?: string
}

export interface ProductItem {
  itemId: string
  name: string
  images: Image[]
  variations: Array<{
    name: string
    values: string[]
  }>
  sellers: Array<{
    sellerDefault: boolean
    commertialOffer: {
      Price: number
      ListPrice: number
      AvailableQuantity: number
    }
  }>
}

export interface Image {
  imageId?: string
  imageLabel?: string | null
  imageTag?: string
  imageUrl?: string
  imageText?: string
}

export interface CartSimulation {
  items: ItemToAdd
  postalCode: string
  geoCoordinates: GeoCoordinates
  country: string
  shippingData?: ShippingData
  logisticsInfo: LogisticsInfo[]
  totals: Totalizer[]
  paymentData: {
    installmentOptions: InstallmentOption[]
  }
}

export interface ShippingData {
  logisticsInfo: LogisticsInfo[]
}

export interface LogisticsInfo {
  addressId?: string
  itemIndex: number
  selectedSla: string
  selectedDeliveryChannel: string
  slas?: Sla[]
  deliveryWindow?: DeliveryWindow
  deliveryChannel?: string
}

export interface DeliveryWindow {
  startDateUtc: string
  endDateUtc: string
  price?: number
}

export interface Sla {
  itemIndex?: number[]
  id: string
  deliveryChannel: string
  name: string
  shippingEstimate: string
  shippingEstimateDate: string
  availableDeliveryWindows: DeliveryWindow[]
  price: number
  prices: Prices[]
  index?: number
  pickupStoreInfo?: PickupStoreInfo
}

interface PickupStoreInfo {
  additionalInfo?: string
  friendlyName?: string
  address?: Address
}

interface Prices {
  [n: string]: number
}

export interface SkuSpecification {
  field: SkuSpecificationField
  values: SkuSpecificationValues[]
}

export interface SkuSpecificationField {
  name: string
  originalName: string
}

export interface SkuSpecificationValues {
  name: string
  originalName: string
}

export interface InstallmentOption {
  bin?: string
  installments: Installment[] | null
  paymentName: string
  value: number
}

export interface Installment {
  count: number
  value: number
  total: number
}

export interface ResponseManageBag {
  quantity: number | string
  price: number
}

export interface StoreTermsAndConditionsContent {
  id: string
  content: string
}
export interface BlockedShipping {
  categories: ICategory[]
}

export interface ShowPaymentMethod {
  id: string
  show: boolean
}

interface ICategory {
  name: string
  id: string
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/typings/graphql.d.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.graphql' {
  import type { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/LinkItemAction.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import type { FC } from 'react'
import {
  ButtonWithIcon,
  IconSuccess,
  IconFailure,
  IconDelete,
} from 'vtex.styleguide'
import { useMutation } from 'react-apollo'

import UPDATE_LINK from '../graphql/updateLink.graphql'
import DELETE_LINK from '../graphql/deleteLink.graphql'

interface Props {
  rowData: {
    approver: boolean
    status: string
    id: string
  }
  refetch: () => Promise<void>
  setShowAlert: (state: boolean) => void
  setMessageId: (state: string) => void
}

const LinkItemAction: FC<Props> = ({
  rowData,
  refetch,
  setMessageId,
  setShowAlert,
}) => {
  const [updateLink, { loading }] = useMutation(UPDATE_LINK)
  const [deleteLink, { loading: loadingDelete }] = useMutation(DELETE_LINK)

  return (
    <div className="flex justify-between">
      {rowData.status === 'pending' && rowData.approver ? (
        <>
          <div className="mr2">
            <ButtonWithIcon
              isLoading={loading}
              variation="secondary"
              onClick={() =>
                updateLink({
                  variables: {
                    id: rowData.id,
                    status: 'approved',
                  },
                }).then(() => {
                  refetch()
                  setMessageId('approvedMessage')
                  setShowAlert(true)
                })
              }
              icon={<IconSuccess />}
            />
          </div>
          <div className="mr2">
            <ButtonWithIcon
              isLoading={loading}
              variation="secondary"
              onClick={() =>
                updateLink({
                  variables: {
                    id: rowData.id,
                    status: 'rejected',
                  },
                }).then(() => {
                  refetch()
                  setMessageId('rejectedMessage')
                  setShowAlert(true)
                })
              }
              icon={<IconFailure />}
            />
          </div>
        </>
      ) : (
        <div className="mr2">
          <ButtonWithIcon
            isLoading={loadingDelete}
            variation="secondary"
            onClick={() =>
              deleteLink({
                variables: {
                  id: rowData.id,
                },
              }).then(() => {
                refetch()
                setMessageId('deleteMessage')
                setShowAlert(true)
              })
            }
            icon={<IconDelete />}
          />
        </div>
      )}
    </div>
  )
}

export default LinkItemAction

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/utils/utilsStatistics.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable no-restricted-imports */
import { pathOr } from 'ramda'

export const getDateByOption = (range: number, initialDate: string) => {
  const today = new Date(initialDate)

  today.setDate(today.getDate() - range)
  const formatDate = `${today.getUTCFullYear()}${
    today.getMonth() <= 10 ? '-0' : '-'
  }${today.getMonth() + 1}-${today.getUTCDate()}`

  initialDate = formatDate

  return initialDate
}

export const formatCurrentDay = (today: any) => {
  const thisDay = new Date()
  const formatDate = `${thisDay.getUTCFullYear()}${
    thisDay.getMonth() <= 10 ? '-0' : '-'
  }${thisDay.getMonth() + 1}-${thisDay.getUTCDate()}`

  today = formatDate

  return today
}

export const formatCurrentDayPicker = (today: any) => {
  const thisDay = new Date(today)
  const formatDate = `${thisDay.getUTCFullYear()}${
    thisDay.getMonth() <= 10 ? '-0' : '-'
  }${thisDay.getMonth() + 1}-${thisDay.getUTCDate()}`

  today = formatDate

  return today
}

export const days = {
  today: 0,
  yesterday: 1,
  lastWeek: 7,
  lastMonth: 31,
  person: 0,
}

export const getDateIntoOptionValue = (
  value: string,
  stateInitial: any,
  stateFinal: any
) => {
  return {
    initial: getDateByOption(pathOr(0, [value], days), stateInitial),
    final: formatCurrentDayPicker(stateFinal),
  }
}

const selectArray = (
  selected: any,
  previous: any
): { arrayToIterate: any[]; arrayToCompare: any[] } => {
  const arrayToIterate = selected.length > previous.length ? selected : previous

  const arrayToCompare = selected.length < previous.length ? selected : previous

  return {
    arrayToIterate,
    arrayToCompare,
  }
}

export const generateDataForChart = (
  selected: any,
  previous: any,
  name: string
) => {
  const selectedItems = selectArray(selected, previous)
  const { arrayToCompare, arrayToIterate } = Object.assign(selectedItems, {})

  const data = arrayToIterate.map((item) => {
    const prvArray =
      selectedItems[
        selected.length > previous.length ? 'arrayToIterate' : 'arrayToCompare'
      ]

    const useArray =
      selectedItems[
        selected.length > previous.length ? 'arrayToCompare' : 'arrayToIterate'
      ]

    return {
      name: item?._id,
      isEqual: arrayToCompare.some((compare: any) => item._id === compare._id),
      previous: pathOr(
        0,
        [name],
        prvArray.find((prv) => prv._id === item._id)
      ),
      use: pathOr(
        0,
        [name],
        useArray.find((use) => use._id === item._id)
      ),
    }
  })

  return data
}

export const showDataInGraphic = (
  arrSelected: any,
  arrPrevious: any,
  name: string
): any[] => {
  if (arrPrevious?.length === 0) {
    return arrSelected?.map((item: any) => ({
      name: item._id,
      use: item[name],
    }))
  }

  const allData = [...arrSelected, ...arrPrevious]
  const data = allData?.map((item: any) => ({
    name: item._id,
    use: item[name],
    previous: null,
  }))

  if (data.length === 1) {
    return data
  }

  return generateDataForChart(arrSelected, arrPrevious, name)
}

export const formatDate = (date: string) => {
  const info = date.split('-')
  const newDate = `${pathOr('', [1], info)}-${pathOr('', [0], info)}-${pathOr(
    '',
    [2],
    info
  )}`

  return new Date(newDate)
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/__tests__/index.test.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
describe('Orders List Scenarios', () => {
  it('should work', () => {
    expect(1).toBe(1)
  })
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/graphql/getCategories.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
query {
  getCategories @context(provider: "kuikpay.my-checkout") {
    id
    url
    name
    hasChildren
    children {
      id
      url
      name
      hasChildren
      children {
        id
        url
        name
        hasChildren
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/graphql/token.gql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
query token @context(provider: "kuikpay.my-checkout") {
  token
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/graphql/updateLink.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation UpdateLink($id: String, $status: String) {
  updateLink(id: $id, status: $status)
    @context(provider: "kuikpay.my-checkout") {
    id
    account
    approver
    status
    date
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/graphql/handleVisualization.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation ($visualization: [VisualizationInput]) {
  handleVisualization(visualization: $visualization)
    @context(provider: "kuikpay.my-checkout") {
    visualization {
      type
      key
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/graphql/deleteLink.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation DeleteLink($id: String) {
  deleteLink(id: $id) @context(provider: "kuikpay.my-checkout") {
    removed
    id
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/graphql/createLink.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation CreateLink($accountApprover: String) {
  createLink(accountApprover: $accountApprover)
    @context(provider: "kuikpay.my-checkout") {
    account
    status
    date
    approver
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/graphql/saveToken.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation saveToken(
  $key: String
  $token: String
  $paymentMethodId: String
  $cvcRequired: Boolean
  $buttonMessage: String
  $visualization: [VisualizationInput]
) {
  saveToken(
    key: $key
    token: $token
    paymentMethodId: $paymentMethodId
    cvcRequired: $cvcRequired
    buttonMessage: $buttonMessage
    visualization: $visualization
  ) @context(provider: "kuikpay.my-checkout")
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/graphql/getListPayments.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
query {
  getPaymentsMethods @context(provider: "kuikpay.my-checkout") {
    id
    isActive
    paymentMethodName
    accountName
    type
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/graphql/getLinksByAccount.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
{
  getLinksByAccount @context(provider: "kuikpay.my-checkout") {
    account
    status
    date
    approver
    id
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/graphql/createPaymentMethod.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation (
  $id: ID!
  $type: String
  $isActive: Boolean
  $paymentMethodName: String
  $accountName: String
) {
  createPaymentMethod(
    id: $id
    type: $type
    isActive: $isActive
    paymentMethodName: $paymentMethodName
    accountName: $accountName
  ) @context(provider: "kuikpay.my-checkout") {
    id
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/graphql/getAccount.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
{
  getAccount @context(provider: "kuikpay.my-checkout") {
    account
    paymentMethodId
    cvcRequired
    isConfigured
    buttonMessage
    isConfigured
    visualization {
      type
      key
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/graphql/getPayments.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
query {
  paymentsRules {
    rules {
      id
      name
      salesChannels {
        id
      }
      paymentSystem {
        name
        id
      }
      enabled
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/statistics/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-fallthrough */
/* eslint-disable no-restricted-syntax */
/* eslint-disable no-restricted-imports */
import React, {
  createContext,
  useMemo,
  useState,
  useContext,
  useEffect,
} from 'react'
import { useLazyQuery } from 'react-apollo'
import { pathOr } from 'ramda'

import getButtonUses from '../../graphql/metrics/getButtonUses.graphql'
import getCheckout from '../../graphql/metrics/getCheckout.graphql'
import getConversionRate from '../../graphql/metrics/getConversionRate.graphql'
import getTicketAverage from '../../graphql/metrics/getTicketAverage.graphql'
import StatisticsView from './Statistics'
import { showDataInGraphic, formatDate } from '../../utils/utilsStatistics'
import { defaultFilters } from './default'
import type { IFilter } from './interfaces'

export enum Statistic {
  buttonUse = 1,
  checkout = 2,
  conversionRate = 3,
  ticketAverage = 4,
}

export interface StatisticsContext {
  statisticSelected: Statistic
  setStadisticsSelected: (state: Statistic) => void
  filters: IFilter
  setFilters: (state: IFilter) => void
  onSubmitFilters: (
    forceVisualization?: string,
    forceSelectectFrom?: string,
    forceSelectedUntil?: string,
    forcePreviousFrom?: string,
    forcePreviousUntil?: string
  ) => void
  graphicInfo: any[]
  setChecked: (state: boolean) => void
  checked: boolean
  firstPicker: any
  setFirstPicker: (state: any) => void | null
  secondPicker: any
  setSecondPicker: (state: any) => void | null
  thirdPicker: any
  setThirdPicker: (state: any) => void | null
  fourPicker: any
  setFourPicker: (state: any) => void | null
  firstSelectOption: string
  setFirstSelectOption: (state: string) => void
  secondSelectOption: string
  setSecondSelectOption: (state: string) => void
  loading: boolean
}

const statisticsContext = createContext<StatisticsContext>({} as any)
const { Provider } = statisticsContext

export const useStatisticsContext = () => useContext(statisticsContext)

const Statistics = () => {
  const [checked, setChecked] = useState<boolean>(false)
  const [statisticSelected, setStadisticsSelected] = useState<Statistic>(
    Statistic.buttonUse
  )

  const [loading, setLoading] = useState<boolean>(false)
  const [filters, setFilters] = useState<IFilter>(defaultFilters)
  const [graphicInfo, setGraphicInfo] = useState<any[]>([])
  const [firstPicker, setFirstPicker] = useState<any>('')
  const [secondPicker, setSecondPicker] = useState<any>('')
  const [thirdPicker, setThirdPicker] = useState<any>('')
  const [fourPicker, setFourPicker] = useState<any>('')
  const [firstSelectOption, setFirstSelectOption] = useState<string>('')
  const [secondSelectOption, setSecondSelectOption] = useState<string>('')

  const [lazyButtonUses, { data: buttonUses }] = useLazyQuery(getButtonUses, {
    fetchPolicy: 'network-only',
  })

  const [lazyCheckout, { data: checkoutUse }] = useLazyQuery(getCheckout, {
    fetchPolicy: 'network-only',
  })

  const [lazyConversion, { data: conversionUse }] = useLazyQuery(
    getConversionRate,
    { fetchPolicy: 'network-only' }
  )

  const [lazyTicket, { data: ticketUse }] = useLazyQuery(getTicketAverage, {
    fetchPolicy: 'network-only',
  })

  useEffect(() => {
    setLoading(true)
    if (buttonUses) {
      const previousPeriod = pathOr(
        [],
        ['button', 'previousPeriodButton'],
        buttonUses
      )

      const selectedPeriod = pathOr(
        [],
        ['button', 'selectedPeriodButton'],
        buttonUses
      )

      setGraphicInfo(
        showDataInGraphic(previousPeriod, selectedPeriod, 'use').sort(
          (a: any, b: any) => {
            const fist: any = formatDate(a?.name)
            const last: any = formatDate(b?.name)

            return fist - last
          }
        )
      )
      setLoading(false)
    }
  }, [buttonUses])

  useEffect(() => {
    setLoading(true)
    if (checkoutUse) {
      const previousPeriod = pathOr(
        [],
        ['checkout', 'previousPeriodCheckout'],
        checkoutUse
      )

      const selectedPeriod = pathOr(
        [],
        ['checkout', 'selectedPeriodCheckout'],
        checkoutUse
      )

      setGraphicInfo(
        showDataInGraphic(
          previousPeriod,
          selectedPeriod,
          'closedPurchases'
        ).sort((a: any, b: any) => {
          const fist: any = formatDate(a?.name)
          const last: any = formatDate(b?.name)

          return fist - last
        })
      )
    }

    setLoading(false)
  }, [checkoutUse])

  useEffect(() => {
    setLoading(true)
    if (conversionUse) {
      const previousPeriod = pathOr(
        [],
        ['conversionRate', 'previousPeriodCR'],
        conversionUse
      )

      const selectedPeriod = pathOr(
        [],
        ['conversionRate', 'selectedPeriodCR'],
        conversionUse
      )

      setGraphicInfo(
        showDataInGraphic(previousPeriod, selectedPeriod, 'cr').sort(
          (a: any, b: any) => {
            const fist: any = formatDate(a?.name)
            const last: any = formatDate(b?.name)

            return fist - last
          }
        )
      )
    }

    setLoading(false)
  }, [conversionUse])

  useEffect(() => {
    setLoading(true)
    if (ticketUse) {
      const previousPeriod = pathOr(
        [],
        ['ticketAverage', 'previousPeriodTicket'],
        ticketUse
      )

      const selectedPeriod = pathOr(
        [],
        ['ticketAverage', 'selectedPeriodTicket'],
        ticketUse
      )

      setGraphicInfo(
        showDataInGraphic(previousPeriod, selectedPeriod, 'ticketAverage').sort(
          (a: any, b: any) => {
            const fist: any = formatDate(a?.name)
            const last: any = formatDate(b?.name)

            return fist - last
          }
        )
      )
    }

    setLoading(false)
  }, [ticketUse])

  const onSubmitFilters = (
    forceVisualization?: string,
    forceSelectectFrom?: string,
    forceSelectedUntil?: string,
    forcePreviousFrom?: string,
    forcePreviousUntil?: string
  ) => {
    const { timeZone: timezone = 'America/Bogota' } =
      Intl.DateTimeFormat().resolvedOptions()

    switch (statisticSelected) {
      case Statistic.buttonUse:
        lazyButtonUses({
          variables: {
            ...filters,
            visualization: forceVisualization || filters.visualization,
            selectedFrom: forceSelectectFrom || filters.selectedFrom,
            selectedUntil: forceSelectedUntil || filters.selectedUntil,
            previousFrom: forcePreviousFrom || filters.previousFrom,
            previousUntil: forcePreviousUntil || filters.previousUntil,
            timezone,
          },
        })
        break

      case Statistic.checkout:
        lazyCheckout({
          variables: {
            ...filters,
            visualization: forceVisualization || filters.visualization,
            selectedFrom: forceSelectectFrom || filters.selectedFrom,
            selectedUntil: forceSelectedUntil || filters.selectedUntil,
            previousFrom: forcePreviousFrom || filters.previousFrom,
            previousUntil: forcePreviousUntil || filters.previousUntil,
            timezone,
          },
        })
        break

      case Statistic.conversionRate:
        lazyConversion({
          variables: {
            ...filters,
            visualization: forceVisualization || filters.visualization,
            selectedFrom: forceSelectectFrom || filters.selectedFrom,
            selectedUntil: forceSelectedUntil || filters.selectedUntil,
            previousFrom: forcePreviousFrom || filters.previousFrom,
            previousUntil: forcePreviousUntil || filters.previousUntil,
            timezone,
          },
        })
        break

      case Statistic.ticketAverage:
        lazyTicket({
          variables: {
            ...filters,
            visualization: forceVisualization || filters.visualization,
            selectedFrom: forceSelectectFrom || filters.selectedFrom,
            selectedUntil: forceSelectedUntil || filters.selectedUntil,
            previousFrom: forcePreviousFrom || filters.previousFrom,
            previousUntil: forcePreviousUntil || filters.previousUntil,
            timezone,
          },
        })

      default:
        break
    }
  }

  useEffect(() => {
    setLoading(true)
    onSubmitFilters()
  }, [statisticSelected])

  const context = useMemo<StatisticsContext>(
    () => ({
      statisticSelected,
      setStadisticsSelected,
      filters,
      setFilters,
      onSubmitFilters,
      graphicInfo,
      setChecked,
      checked,
      firstPicker,
      setFirstPicker,
      secondPicker,
      setSecondPicker,
      thirdPicker,
      setThirdPicker,
      fourPicker,
      setFourPicker,
      firstSelectOption,
      setFirstSelectOption,
      secondSelectOption,
      setSecondSelectOption,
      loading,
    }),
    [
      statisticSelected,
      filters,
      graphicInfo,
      checked,
      firstPicker,
      secondPicker,
      thirdPicker,
      firstSelectOption,
      secondSelectOption,
      loading,
    ]
  )

  return (
    <Provider value={context}>
      <StatisticsView />
    </Provider>
  )
}

export default Statistics

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/statistics/GraphicStatistics.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import {
  ResponsiveContainer,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  LineChart,
} from 'recharts'
import { Tag, RadioGroup, Spinner } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

import { useStatisticsContext } from './index'
import { formatCurrentDayPicker } from '../../utils/utilsStatistics'
import styles from '../../styles.css'

const GraphicStatistics = () => {
  const {
    graphicInfo,
    filters,
    setFilters,
    onSubmitFilters,
    checked,
    firstPicker,
    secondPicker,
    thirdPicker,
    fourPicker,
    firstSelectOption,
    secondSelectOption,
    loading,
  } = useStatisticsContext()

  const getFirstPicker = formatCurrentDayPicker(firstPicker)
  const getSecondPicker = formatCurrentDayPicker(secondPicker)
  const getThirdPicker = formatCurrentDayPicker(thirdPicker)
  const getFourPicker = formatCurrentDayPicker(fourPicker)

  return (
    <div>
      <div className={styles.containerGraph}>
        <div className={styles.tagsAndRadioBtns}>
          <div className={styles.containerTags}>
            <span className={`${styles.tagDescription} mt2`}>
              <Tag bgColor="#EB5B2B" color="#fff" />
              {firstSelectOption === 'person' && onSubmitFilters
                ? `${getFirstPicker} | ${getSecondPicker}`
                : `${filters.selectedFrom}`}
            </span>
            {typeof filters.selectedFrom === typeof filters.previousFrom &&
              onSubmitFilters &&
              checked && (
                <span className={`${styles.tagDescription} mt1`}>
                  <Tag bgColor="#284859" color="#fff" />
                  {secondSelectOption === 'person'
                    ? `${getThirdPicker} | ${getFourPicker}`
                    : `${filters.previousFrom}`}
                </span>
              )}
          </div>
          <RadioGroup
            name="period"
            options={[
              {
                value: 'd',
                label: <FormattedMessage id="checkoutless.statistics.day" />,
              },
              {
                value: 'm',
                label: <FormattedMessage id="checkoutless.statistics.month" />,
              },
              {
                value: 'y',
                label: <FormattedMessage id="checkoutless.statistics.year" />,
              },
            ]}
            value={filters?.visualization}
            onChange={(e: any) => {
              setFilters({
                ...filters,
                visualization: e.target.value,
              })
              onSubmitFilters(e.target.value)
            }}
          />
        </div>
        {loading && (
          <div className={styles.containerLoader}>
            <Spinner />
          </div>
        )}
        <div className={styles.chart}>
          <div className={styles.chartContainer}>
            <ResponsiveContainer width="100%" height="100%">
              <LineChart
                width={1000}
                height={500}
                data={graphicInfo}
                margin={{
                  top: 20,
                  right: 30,
                  left: 20,
                  bottom: 5,
                }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line
                  type="monotone"
                  dataKey="use"
                  stroke="#EB5B2B"
                  activeDot={{ r: 8 }}
                />
                <Line type="monotone" dataKey="previous" stroke="#284859" />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>
    </div>
  )
}

export default GraphicStatistics

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/statistics/OptionsMessage.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedMessage } from 'react-intl'

export const OptionsMessage = () => {
  return (
    <div className="dn">
      <FormattedMessage id="checkoutless.statistics.filter.select" />
      <FormattedMessage id="checkoutless.statistics.filter.today" />
      <FormattedMessage id="checkoutless.statistics.filter.yesterday" />
      <FormattedMessage id="checkoutless.statistics.filter.lastWeek" />
      <FormattedMessage id="checkoutless.statistics.filter.lastMonth" />
      <FormattedMessage id="checkoutless.statistics.filter.person" />
    </div>
  )
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/statistics/Statistics.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Layout, PageHeader, PageBlock } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

import StatisticType from './SelectStatistic'
import Filters from './FiltersDates'
import GraphicStatistics from './GraphicStatistics'

const Statistics = () => {
  return (
    <Layout
      fullWidth
      pageHeader={
        <PageHeader
          title={<FormattedMessage id="checkoutless.statistics.title" />}
        />
      }
    >
      <PageBlock variation="full">
        <h5>
          + <FormattedMessage id="checkoutless.statistics.subtitle" />
        </h5>
        <Filters />
        <StatisticType />
        <GraphicStatistics />
      </PageBlock>
    </Layout>
  )
}

export default Statistics

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/statistics/FiltersDates.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-restricted-imports */
import React, { useEffect, useMemo, useState } from 'react'
import { Dropdown, DatePicker } from 'vtex.styleguide'
import { FormattedMessage, useIntl } from 'react-intl'
import { pathOr } from 'ramda'

import styles from '../../styles.css'
import dateIcon from '../../assets/icons/outline-today.svg'
import arrowDown from '../../assets/icons/arrow_down.svg'
import {
  getDateIntoOptionValue,
  formatCurrentDayPicker,
} from '../../utils/utilsStatistics'
import { OptionsMessage } from './OptionsMessage'
import { useStatisticsContext } from './index'

const Filters = () => {
  const intl = useIntl()
  const selectOptions = [
    {
      label: intl.formatMessage({
        id: 'checkoutless.statistics.filter.select',
      }),
      value: '',
    },
    {
      label: intl.formatMessage({ id: 'checkoutless.statistics.filter.today' }),
      value: 'today',
    },
    {
      label: intl.formatMessage({
        id: 'checkoutless.statistics.filter.yesterday',
      }),
      value: 'yesterday',
    },
    {
      label: intl.formatMessage({
        id: 'checkoutless.statistics.filter.lastWeek',
      }),
      value: 'lastWeek',
    },
    {
      label: intl.formatMessage({
        id: 'checkoutless.statistics.filter.lastMonth',
      }),
      value: 'lastMonth',
    },
    {
      label: intl.formatMessage({
        id: 'checkoutless.statistics.filter.person',
      }),
      value: 'person',
    },
  ]

  const {
    filters,
    setFilters,
    onSubmitFilters,
    setChecked: setCompare,
    checked: compare,
    setFirstPicker,
    setSecondPicker,
    setThirdPicker,
    setFourPicker,
    setFirstSelectOption,
    setSecondSelectOption,
  } = useStatisticsContext()

  const [open, setOpen] = useState(false)

  const [optionFirstValue, setOptionFirstValue] = useState('')
  const [initialFirstPicker, setInitialFirstPicker] = useState(new Date())
  const [finalFirstPicker, setFinalFirstPicker] = useState(new Date())

  const [optionSecondValue, setOptionSecondValue] = useState('')
  const [initialSecondPicker, setInitialSecondPicker] = useState(new Date())
  const [finalSecondPicker, setFinalSecondPicker] = useState(new Date())

  const currentDate = useMemo(() => new Date().toLocaleDateString(), [])

  const [onPreviousFrom, setOnPreviousFrom] = useState<any>()
  const [onPreviousUntil, setOnPreviousUntil] = useState<any>()

  const [onSelectedFrom, setOnSelectedFrom] = useState<any>()
  const [onSelectedUntil, setOnSelectedUntil] = useState<any>()

  const onHandleState = () => {
    setOpen(!open)
    setOnPreviousFrom(formatCurrentDayPicker(new Date()))
  }

  useEffect(() => {
    const parse = getDateIntoOptionValue(
      optionSecondValue,
      initialSecondPicker,
      finalSecondPicker
    )

    setOnPreviousFrom(pathOr(new Date(), ['initial'], parse))
    setOnPreviousUntil(pathOr(new Date(), ['final'], parse))
    setFilters({
      ...filters,
      previousFrom: pathOr(new Date(), ['initial'], parse),
      previousUntil: pathOr(new Date(), ['final'], parse),
    })
  }, [optionSecondValue, initialSecondPicker, finalSecondPicker])

  useEffect(() => {
    const parse = getDateIntoOptionValue(
      optionFirstValue,
      initialFirstPicker,
      finalFirstPicker
    )

    setOnSelectedFrom(pathOr(new Date(), ['initial'], parse))
    setOnSelectedUntil(pathOr(new Date(), ['final'], parse))
    setFilters({
      ...filters,
      selectedFrom: pathOr(new Date(), ['initial'], parse),
      selectedUntil: pathOr(new Date(), ['final'], parse),
    })
  }, [optionFirstValue, initialFirstPicker, finalFirstPicker])

  useEffect(() => {
    setFirstPicker(initialFirstPicker)
  }, [initialFirstPicker])

  useEffect(() => {
    setSecondPicker(finalFirstPicker)
  }, [finalFirstPicker])

  useEffect(() => {
    setThirdPicker(initialSecondPicker)
  }, [initialSecondPicker])

  useEffect(() => {
    setFourPicker(finalSecondPicker)
  }, [finalSecondPicker])

  useEffect(() => {
    setFirstSelectOption(optionFirstValue)
  }, [optionFirstValue])

  useEffect(() => {
    setSecondSelectOption(optionSecondValue)
  }, [optionSecondValue])

  return (
    <>
      <div className="flex">
        <img src={dateIcon} alt="date-icon" className={styles.dateIcon} />
        <button onClick={onHandleState} className={styles.btnFilters}>
          {currentDate}
          <img src={arrowDown} alt="arrow-down" className={styles.arrowDown} />
        </button>
      </div>
      <div className={open ? `${styles.containerFilters}` : `${styles.hidden}`}>
        <div>
          <OptionsMessage />
          <div className="mb5">
            <Dropdown
              label={<FormattedMessage id="checkoutless.statistics.period" />}
              size="small"
              options={selectOptions}
              value={optionFirstValue}
              onChange={(e: any) => setOptionFirstValue(e.target.value)}
            />
            {optionFirstValue === 'person' && (
              <div
                className={`${styles.containerDatePicker} ${styles.firstContainerPicker}`}
              >
                <DatePicker
                  size="small"
                  name="initialFirstPicker"
                  value={initialFirstPicker}
                  onChange={(date: any) => setInitialFirstPicker(date)}
                  locale="en-US"
                />
                <div className="mr3 ml3">_</div>
                <DatePicker
                  size="small"
                  name="finalFirstPicker"
                  value={finalFirstPicker}
                  onChange={(date: any) => setFinalFirstPicker(date)}
                  locale="en-US"
                />
              </div>
            )}
          </div>
          <div className="mb5">
            <input
              type="checkbox"
              onChange={() => setCompare(!compare)}
              checked={compare}
              className={styles.checkCompare}
            />
            <span className={`${styles.tagDescription} ${styles.textCompare}`}>
              <FormattedMessage id="checkoutless.statistics.compare" />
            </span>
          </div>
          <div className="mb5">
            <Dropdown
              label={<FormattedMessage id="checkoutless.statistics.period" />}
              size="small"
              disabled={!compare}
              options={selectOptions}
              value={optionSecondValue}
              onChange={(e: any) => setOptionSecondValue(e.target.value)}
            />
            {optionSecondValue === 'person' && (
              <div
                className={`${styles.containerDatePicker} ${styles.secondContainerPicker}`}
              >
                <DatePicker
                  size="small"
                  name="initialSecondPicker"
                  value={initialSecondPicker}
                  onChange={(date: any) => setInitialSecondPicker(date)}
                  locale="en-US"
                />
                <div className="mr3 ml3">_</div>
                <DatePicker
                  size="small"
                  name="finalSecondPicker"
                  value={finalSecondPicker}
                  onChange={(date: any) => setFinalSecondPicker(date)}
                  locale="en-US"
                />
              </div>
            )}
          </div>
        </div>
        <button
          className={styles.btnAccept}
          onClick={() => {
            onSubmitFilters(
              filters.visualization,
              onSelectedFrom,
              onSelectedUntil,
              onPreviousFrom,
              onPreviousUntil
            )
            onHandleState()
          }}
        >
          <FormattedMessage id="checkoutless.statistics.accept" />
        </button>
        <button onClick={onHandleState} className={styles.btnCancel}>
          <FormattedMessage id="checkoutless.statistics.cancel" />
        </button>
      </div>
    </>
  )
}

export default Filters

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/statistics/SelectStatistic.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React from 'react'
import { FormattedMessage } from 'react-intl'

import { useStatisticsContext, Statistic } from './index'
import buttonUseIcon from '../../assets/icons/button_use.svg'
import buttonUseIconActive from '../../assets/icons/use_button_active.svg'
import shoppingIcon from '../../assets/icons/shopping.svg'
import shoppingIconActive from '../../assets/icons/shopping_active.svg'
import conversionIcon from '../../assets/icons/conversion_rate.svg'
import conversionIconActive from '../../assets/icons/conversion_rate_active.svg'
import ticketIcon from '../../assets/icons/ticket_average.svg'
import ticketActiveIcon from '../../assets/icons/ticket_average_active.svg'
import styles from '../../styles.css'

const StatisticItem = ({
  isActive,
  onClick,
  type,
  label,
  Icon,
  IconActive,
}: {
  isActive: boolean
  onClick: (type: Statistic) => void
  type: Statistic
  label: any
  Icon: any
  IconActive: any
}) => {
  return (
    <div
      className={`${isActive && styles.selectedCard}`}
      onClick={() => onClick(type)}
    >
      <small>
        <img src={isActive ? IconActive : Icon} alt="button-use" />
        {label}
      </small>
    </div>
  )
}

const StatisticType = () => {
  const { statisticSelected, setStadisticsSelected } =
    useStatisticsContext() as any

  return (
    <div className={styles.containerMetrics}>
      <StatisticItem
        isActive={statisticSelected === Statistic.buttonUse}
        label={
          <FormattedMessage id="checkoutless.statistics.admin.useButton" />
        }
        type={Statistic.buttonUse}
        onClick={setStadisticsSelected}
        Icon={buttonUseIcon}
        IconActive={buttonUseIconActive}
      />
      <StatisticItem
        isActive={statisticSelected === Statistic.checkout}
        label={<FormattedMessage id="checkoutless.statistics.checkout" />}
        type={Statistic.checkout}
        onClick={setStadisticsSelected}
        Icon={shoppingIcon}
        IconActive={shoppingIconActive}
      />
      <StatisticItem
        isActive={statisticSelected === Statistic.conversionRate}
        label={<FormattedMessage id="checkoutless.statistics.conversion" />}
        type={Statistic.conversionRate}
        onClick={setStadisticsSelected}
        Icon={conversionIcon}
        IconActive={conversionIconActive}
      />
      <StatisticItem
        isActive={statisticSelected === Statistic.ticketAverage}
        label={<FormattedMessage id="checkoutless.statistics.ticket" />}
        type={Statistic.ticketAverage}
        onClick={setStadisticsSelected}
        Icon={ticketIcon}
        IconActive={ticketActiveIcon}
      />
    </div>
  )
}

export default StatisticType

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/StyleSettings/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { StyleSettingsProvider } from './hooks'
import { Preview, Menu } from './components'
import styles from './styles.css'

const StyleSettings = () => {
  return (
    <StyleSettingsProvider>
      <div className={styles.StyleSettingsContainer}>
        <div className={styles.StyleSettingsContent}>
          <div className={styles.StyleSettingsPreview}>
            <Preview />
          </div>

          <div className={styles.StyleSettingsMenu}>
            <Menu />
          </div>
        </div>
      </div>
    </StyleSettingsProvider>
  )
}

export default StyleSettings

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/StyleSettings/styles.css from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```css
.StyleSettingsContainer {
  background-color: #f2f4f5;
  padding: 26px;
  margin-right: 300px;
  min-height: 100vh;
}

.StyleSettingsContent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
}

.StyleSettingsPreview {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.StyleSettingsMenu {
  background: #fff;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/StyleSettings/utils.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { AddButonStyleArgs } from './interfaces'

export const setStyles = (
  element: Element,
  styles: Array<{ name: string; value: string }>
) => {
  let stylesToString = ''

  const lastStyles = element
    .getAttribute('style')
    ?.split(';')
    .map((elementStyle) => {
      const [name, value] = elementStyle?.split(':')

      return {
        name,
        value,
      }
    })

  styles.forEach(({ name, value }) => (stylesToString += `${name}:${value};`))

  lastStyles?.forEach(({ name, value }) => {
    const exist = !!styles?.find((style) => style.name === name)?.name

    if (!exist && name) {
      stylesToString += `${name}:${value};`
    }
  })

  element.setAttribute('style', stylesToString)
}

export const setStylesButton = (
  element: Element,
  styles: AddButonStyleArgs
) => {
  const {
    backgroundColor,
    borderRadius,
    outlineColor,
    textColor,
    font,
    width,
  } = styles

  const stylesArgs = [
    { name: 'background-color', value: backgroundColor },
    { name: 'border-radius', value: `${borderRadius}px` },
    { name: 'border', value: `solid 1px ${outlineColor}` },
    { name: 'color', value: textColor },
    { name: 'width', value: `${width}%` },
  ]

  if (font) stylesArgs.push({ name: 'font-family', value: font })
  if (borderRadius) {
    stylesArgs.push({
      name: 'border-radius',
      value: `${borderRadius}px`,
    })
  }

  setStyles(element, stylesArgs)
}

export const addButtonEvent = (
  event: string,
  element: Element,
  styles: AddButonStyleArgs
) => element.addEventListener(event, () => setStylesButton(element, styles))

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/StyleSettings/constants.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { IStyleSettings } from './interfaces'

const defaultButtonText = ''
const defaultFont = '"Calibri", sans-serif'
const defaultRadio = 8

export const fonts = {
  sansSerifFamily: [
    'SANS SERIF',
    'Helvetica',
    'Arial',
    'Verdana',
    'Tahoma',
    'Open Sans',
  ],
  serifFamily: [
    'SERIF',
    'Times New Roman',
    'Georgia',
    'Garamond',
    'Lora',
    'PT Serif',
  ],
}

export const defaultStyleSettingState: IStyleSettings = {
  modalStyles: {
    font: defaultFont,
    button: {
      borderRadius: defaultRadio,
      normal: {
        textColor: '#FFFFFF',
        backgroundColor: '#EB5B2B',
        outlineColor: '#EB5B2B',
      },
      hover: {
        textColor: '#FFFFFF',
        backgroundColor: '#F47146',
        outlineColor: '#EB5B2B',
      },
    },
    icons: {
      color: '#222326',
    },
    backgroundColor: '#FFFFFF',
  },
  buttonStyles: {
    font: 'Helvetica',
    value: defaultButtonText,
    borderRadius: defaultRadio,
    normal: {
      textColor: '#FF572D',
      backgroundColor: '#FFFFFF',
      outlineColor: '#1B998B',
    },
    hover: {
      textColor: '#FF572D',
      backgroundColor: '#FFFFFF',
      outlineColor: '#1B998B',
    },
    width: 100,
  },
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/StyleSettings/interfaces.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { Dispatch } from 'react'

export type Device = 'mobile' | 'desktop'

export type CustomizableComponent = 'modal' | 'payButton'

export type TypeColorStyle =
  | 'normal_text'
  | 'normal_background'
  | 'normal_outline'
  | 'hover_text'
  | 'hover_background'
  | 'hover_outline'
export interface ColorStyles {
  textColor: string
  backgroundColor: string
  outlineColor: string
}

interface ModalButton {
  borderRadius: number
  normal: ColorStyles
  hover: ColorStyles
}

interface ModalIcon {
  color: string
}
export interface ModalStyles {
  font: string
  icons: ModalIcon
  backgroundColor: string
  button: ModalButton
}

export interface PayButtonStyles {
  borderRadius: number
  font: string
  hover: ColorStyles
  normal: ColorStyles
  value: string
  width: number
}

export interface IStyleSettings {
  modalStyles: ModalStyles
  buttonStyles: PayButtonStyles
}

export interface IStyleSettingsCtx {
  alert: IAlert
  componentSelected: CustomizableComponent
  deviceSelected: Device
  loadingStyles: boolean
  state: IStyleSettings
  clearAlert: () => void
  dispatch: Dispatch<Actions>
  restoreStyles: () => Promise<void>
  setAlert: React.Dispatch<React.SetStateAction<IAlert>>
  setComponentSelected: Dispatch<React.SetStateAction<CustomizableComponent>>
  setDeviceSelected: Dispatch<React.SetStateAction<Device>>
  updateStyles: () => Promise<void>
}

export interface IStyleSettingsQuery {
  modal: ModalStyles
  button: PayButtonStyles
}

export interface IAlert {
  message: {
    id: string
  }
  type: 'warning' | 'error' | 'success'
}

export interface AddButonStyleArgs {
  backgroundColor: string
  borderRadius?: number
  font?: string
  outlineColor: string
  textColor: string
  width?: number
}

type Action<K, V = void> = V extends void ? { type: K } : { type: K } & V

export type Actions =
  | Action<'SET_PAYBUTTON_VALUE', { args: { value: string } }>
  | Action<'SET_PAYBUTTON_FONT', { args: { font: string } }>
  | Action<'SET_PAYBUTTON_RADIO', { args: { borderRadius: number } }>
  | Action<'SET_PAYBUTTON_NORMAL_TEXT_COLOR', { args: { color: string } }>
  | Action<'SET_PAYBUTTON_NORMAL_BACKGROUND_COLOR', { args: { color: string } }>
  | Action<'SET_PAYBUTTON_NORMAL_OUTLINE_COLOR', { args: { color: string } }>
  | Action<'SET_PAYBUTTON_HOVER_TEXT_COLOR', { args: { color: string } }>
  | Action<'SET_PAYBUTTON_HOVER_BACKGROUND_COLOR', { args: { color: string } }>
  | Action<'SET_PAYBUTTON_HOVER_OUTLINE_COLOR', { args: { color: string } }>
  | Action<'SET_PAYBUTTON_STYLES', { args: { styles: PayButtonStyles } }>
  | Action<'SET_PAYBUTTON_WIDTH', { args: { width: number } }>
  | Action<'SET_MODAL_FONT', { args: { font: string } }>
  | Action<'SET_MODAL_ICONS_COLOR', { args: { iconsColor: string } }>
  | Action<'SET_MODAL_BACKGROUND_COLOR', { args: { backgroundColor: string } }>
  | Action<'SET_MODAL_RADIO', { args: { borderRadiusBtn: number } }>
  | Action<'SET_MODAL_BTN_NORMAL_TEXT_COLOR', { args: { color: string } }>
  | Action<'SET_MODAL_BTN_NORMAL_BACKGROUND_COLOR', { args: { color: string } }>
  | Action<'SET_MODAL_BTN_NORMAL_OUTLINE_COLOR', { args: { color: string } }>
  | Action<'SET_MODAL_BTN_HOVER_TEXT_COLOR', { args: { color: string } }>
  | Action<'SET_MODAL_BTN_HOVER_BACKGROUND_COLOR', { args: { color: string } }>
  | Action<'SET_MODAL_BTN_HOVER_OUTLINE_COLOR', { args: { color: string } }>
  | Action<'SET_MODAL_STYLES', { args: { styles: ModalStyles } }>

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/PaymentList/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-restricted-imports */
import React, { useEffect, useState, createContext } from 'react'
import {
  Layout,
  PageBlock,
  PageHeader,
  Table,
  Alert,
  Toggle,
} from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'
import { useQuery, useMutation } from 'react-apollo'
import { pathOr, uniqBy } from 'ramda'
import { useRuntime } from 'vtex.render-runtime'

import GET_PAYMENTS from '../../graphql/getPayments.graphql'
import CREATE_PAYMENTS from '../../graphql/createPaymentMethod.graphql'
import GET_LIST_PAYMENTS from '../../graphql/getListPayments.graphql'
import type { IPaymentRules, IPayment, PaymentListContext } from './interfaces'
import { kuikpayPayments } from './constants'

const paymentListContext = createContext<PaymentListContext | null>(null)

export const defaultSchema = {
  properties: {
    payment: {
      title: <FormattedMessage id="checkoutless.paymentsList.table.name" />,
    },
    isActive: {
      title: <FormattedMessage id="checkoutless.paymentsList.table.status" />,
      cellRenderer: ({
        rowData,
      }: {
        cellData: string
        rowData: { isActive: boolean }
      }) => {
        return (
          <paymentListContext.Consumer>
            {(value) => (
              <Toggle
                checked={rowData?.isActive}
                onChange={() => {
                  value?.onChangeState(rowData)
                }}
              />
            )}
          </paymentListContext.Consumer>
        )
      },
    },
    type: {
      title: <FormattedMessage id="checkoutless.paymentsList.table.origin" />,
    },
  },
}

const PaymentList = () => {
  const [createPayment] = useMutation(CREATE_PAYMENTS)
  const { data, loading, called } = useQuery(GET_PAYMENTS)
  const { data: listData } = useQuery(GET_LIST_PAYMENTS)
  const { account } = useRuntime()
  const [payments, setPayments] = useState<IPayment[]>([])
  const [showWarningAlert, setShowWarningAlert] = useState<boolean>(false)
  const [disabledChange, setDisabledChange] = useState<boolean>(false)

  useEffect(() => {
    if (data && listData) {
      const paymentsList = pathOr<any[]>([], ['getPaymentsMethods'], listData)
      const paymentsRules = uniqBy(
        (e) => pathOr('', ['paymentSystem', 'id'], e),
        [
          ...kuikpayPayments,
          ...pathOr<IPaymentRules[]>(
            [],
            ['paymentsRules', 'rules'],
            data
          ).filter(
            (ruler) => ruler.enabled && ruler?.paymentSystem?.name !== 'Kuikpay'
          ),
        ]
      ).map((ruler) => {
        const payment = paymentsList.find(
          (p) =>
            p?.paymentMethodName === pathOr('', ['paymentSystem', 'id'], ruler)
        )

        return {
          id: pathOr('', ['id'], payment),
          paymentMethodName: pathOr('', ['paymentSystem', 'id'], ruler),
          payment: pathOr('', ['paymentSystem', 'name'], ruler),
          isActive: pathOr(true, ['isActive'], payment),
          type: pathOr((ruler as any)?.type || 'store', ['type'], payment),
          accountName: account,
        }
      })

      setPayments(paymentsRules)
    }
  }, [data, account, listData])

  useEffect(() => {
    if (payments.length && called) {
      const elements = payments.filter((payment) => payment.isActive)

      setDisabledChange(elements.length === 1)
    }
  }, [payments, called])

  useEffect(() => {
    if (payments && payments.length) {
      const paymentWithoutId = payments.filter((p) => !p?.id)

      if (!paymentWithoutId.length) return
      const newPayments = Object.assign(payments, [])

      newPayments.map(async (payment) => {
        if (!payment.id) {
          const p = await createPayment({
            variables: {
              ...payment,
            },
          })

          payment.id = pathOr('', ['data', 'createPaymentMethod', 'id'], p)
        }

        return payment
      })
      setPayments(newPayments)
    }
  }, [payments])

  const onChangeState = (element: IPayment) => {
    const index = payments.findIndex((payment) => payment.id === element.id)
    const lPayments: any = Object.assign([], payments)

    if (index !== -1) {
      lPayments[index].isActive = !element.isActive
      const peyment = lPayments[index]

      delete peyment?.peyment
      createPayment({
        variables: {
          ...peyment,
        },
      })
      setPayments(lPayments)
    }
  }

  const onShowAlert = () => setShowWarningAlert(true)

  return (
    <paymentListContext.Provider
      value={{ onChangeState, disabledChange, onShowAlert }}
    >
      <Layout
        pageHeader={
          <PageHeader
            title={<FormattedMessage id="checkoutless.paymentsList.title" />}
          />
        }
      >
        <PageBlock variation="full">
          {showWarningAlert && (
            <div className="mb5">
              <Alert autoClose={5000} type="warning">
                <FormattedMessage id="checkoutless.paymentsList.table.warning" />
              </Alert>
            </div>
          )}
          <Alert autoClose={5000} type="success">
            <FormattedMessage id="checkoutless.paymentsList.auto-save" />
          </Alert>
          <Table
            fullWidth
            schema={defaultSchema}
            items={payments}
            loading={loading}
          />
        </PageBlock>
      </Layout>
    </paymentListContext.Provider>
  )
}

export default PaymentList

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/PaymentList/constants.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const kuikpayPayments = [
  {
    name: 'Orion',
    paymentSystem: {
      name: 'Orion',
      id: 'Orion',
    },
    type: 'own',
    enabled: true,
  },
]

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/PaymentList/interfaces.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface IPaymentSystem {
  name: string
}

export interface ISalesChannels {
  id: string
}

export interface IPaymentRules {
  enabled: boolean
  id: string
  name: string
  paymentSystem: IPaymentSystem
  salesChannels: ISalesChannels[]
}

export interface IPayment {
  id: string
  paymentMethodName: string
  isActive: boolean
  type: string
  accountName: string
}

export interface PaymentListContext {
  onChangeState: (index: any) => void
  disabledChange: boolean
  onShowAlert: () => void
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/categories/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { AutocompleteInput, Table, Tag } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

import { useHandleCategories } from './useHandleCategories'

// eslint-disable-next-line react/prop-types
const Categories = ({ visualization, onChange }: any) => {
  const { hidde, input, options, onHandle } = useHandleCategories(
    visualization,
    onChange
  )

  return (
    <div>
      <h3>
        <FormattedMessage id="checkoutless.categories.title" />
      </h3>
      <p className="lh-copy c-muted-1">
        <FormattedMessage id="checkoutless.categories.description" />
      </p>
      <div>
        <AutocompleteInput input={input} options={options} />
      </div>
      <div>
        <Table
          fullWidth
          schema={{
            properties: {
              id: {
                title: (
                  <FormattedMessage id="checkoutless.categories.table.id" />
                ),
              },
              name: {
                title: (
                  <FormattedMessage id="checkoutless.categories.table.name" />
                ),
              },
              type: {
                title: (
                  <FormattedMessage id="checkoutless.categories.table.type" />
                ),
                cellRenderer: ({
                  rowData,
                }: {
                  cellData: string
                  rowData: { type: string }
                }) => <Tag bgColor="#00bbd4">{rowData?.type}</Tag>,
              },
            },
          }}
          items={hidde}
          lineActions={[
            {
              // eslint-disable-next-line react/display-name
              label: () => (
                <FormattedMessage id="checkoutless.categories.table.active" />
              ),
              onClick: ({ rowData }: any) => onHandle(rowData),
            },
          ]}
        />
      </div>
    </div>
  )
}

export default Categories

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/categories/useHandleCategories.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable react-hooks/exhaustive-deps */
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useQuery } from 'react-apollo'
// eslint-disable-next-line no-restricted-imports
import { pathOr, take } from 'ramda'

import GET_CATEGORIES from '../../graphql/getCategories.graphql'
import { onRemoveReference } from './utils'

export const useHandleCategories = (
  visualization: any[],
  onChange: (element: any[]) => void
) => {
  const { data } = useQuery(GET_CATEGORIES)
  const [categories, setCategories] = useState<any[]>([])
  const [hidde, setHiddeElement] = useState<any[]>([])
  const [term, setTerm] = useState('')
  const [loading, setLoading] = useState(false)

  const timeoutRef = useRef<any>(null)

  const value = useMemo(
    () =>
      take(
        10,
        categories
          .filter(
            (category) =>
              category.label.toLowerCase().includes(term.toLowerCase()) ||
              category.id.toLowerCase().includes(term.toLowerCase())
          )
          .reverse()
      ),
    [categories, term]
  )

  const onHandle = useCallback(
    (element: any) => {
      const index = hidde.findIndex((h: any) => h?.id === element?.id)
      const localHidde = onRemoveReference(hidde)

      if (index === -1) {
        localHidde.push(element)
      } else {
        localHidde.splice(index, 1)
      }

      setHiddeElement(localHidde)
    },
    [hidde]
  )

  const options = {
    onSelect: (args: any) => {
      onHandle(args)
      setTerm('')
    },
    loading,
    value,
  }

  const input = {
    // eslint-disable-next-line @typescript-eslint/no-shadow
    onChange: (term: any) => {
      if (term) {
        setLoading(true)
        if (timeoutRef.current) {
          clearTimeout(timeoutRef.current)
        }

        timeoutRef.current = setTimeout(() => {
          setLoading(false)
          setTerm(term)
          timeoutRef.current = null
        }, 1000)
      } else {
        setTerm(term)
      }
    },
    onClear: () => setTerm(''),
    placeholder: 'Search category... (e.g.: Technology)',
    value: term,
  }

  useEffect(() => {
    onChange(
      hidde.map((h) => ({
        key: h?.value,
        type: 'category',
      }))
    )
  }, [hidde])

  useEffect(() => {
    if (data) {
      const element: any[] = []
      const forceHidden: any[] = []
      // eslint-disable-next-line @typescript-eslint/no-shadow
      const categories = pathOr<any[]>([], ['getCategories'], data)
      const onRecursive = (item: any, tree?: string) => {
        if (item.children && item.children.length) {
          item.children.map((child: any) => {
            return onRecursive(child, `${tree}/${child.name}`)
          })
        }

        element.push({
          ...item,
          label: item?.name,
          value: `${tree}/`,
          type: 'Category',
        })
      }

      categories.map((category) => {
        return onRecursive(category, `/${category?.name}`)
      })
      // eslint-disable-next-line array-callback-return
      visualization.map((v) => {
        const e = element.find((f) => f?.value === v?.key)

        if (e) forceHidden.push(e)
      })
      setHiddeElement(forceHidden)
      setCategories(element)
    }
  }, [data, visualization])

  return useMemo(
    () => ({
      options,
      input,
      hidde,
      onHandle,
    }),
    [options, input, hidde, onHandle]
  )
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/categories/utils.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const onRemoveReference = (element: any) =>
  JSON.parse(JSON.stringify(element))

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/statistics/default/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { IFilter } from '../interfaces'
import { formatCurrentDay } from '../../../utils/utilsStatistics'

export const defaultFilters: IFilter = {
  visualization: 'd',
  selectedFrom: formatCurrentDay(new Date()),
  selectedUntil: formatCurrentDay(new Date()),
  previousUntil: new Date(),
  previousFrom: new Date(),
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/statistics/interfaces/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
export interface IFilter {
  visualization: 'd' | 'm' | 'y'
  selectedFrom: string | Date
  selectedUntil: string | Date
  previousFrom: null | Date
  previousUntil: null | Date
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/StyleSettings/components/index.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
export * from './Menu'
export * from './Preview'
export * from './ActionMenuLabel'

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/StyleSettings/components/ActionMenuLabel.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { IconCheck } from 'vtex.styleguide'

interface Props {
  text: string
  selected: boolean
}

export const ActionMenuLabel = ({ text, selected }: Props) => {
  return (
    <div style={{ display: 'flex' }}>
      <div style={{ width: 20 }}>{selected && <IconCheck />}</div>
      <div> {text}</div>
    </div>
  )
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/StyleSettings/hooks/usePayButtonPreview.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useEffect, useRef } from 'react'

import { useStyleSettings } from './context'
import { addButtonEvent, setStylesButton } from '../utils'

const CLASS = '_kuikpay-myCheckoutButton__myCheckoutButtonContent'

export const usePayButtonPreview = () => {
  const refPayButton = useRef(null)
  const {
    deviceSelected,
    state: { buttonStyles },
  } = useStyleSettings()

  useEffect(() => {
    if (refPayButton === null) return
    const { normal, borderRadius, font, width } = buttonStyles
    const payButton = document.getElementsByClassName(CLASS)

    setStylesButton(payButton[0], { ...normal, borderRadius, font, width })
    addButtonEvent('mouseout', payButton[0], {
      ...normal,
      borderRadius,
      font,
      width,
    })
  }, [refPayButton, buttonStyles])

  useEffect(() => {
    if (refPayButton === null) return
    const { hover, borderRadius, font, width } = buttonStyles
    const payButton = document.getElementsByClassName(CLASS)

    addButtonEvent('mouseover', payButton[0], {
      ...hover,
      borderRadius,
      font,
      width,
    })
  }, [refPayButton, buttonStyles.hover, buttonStyles])

  return { refPayButton, deviceSelected, value: buttonStyles.value }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/StyleSettings/hooks/useKuikpayModal.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useRef, useState } from 'react'

import { useStyleSettings } from './context'
import { setStyles, setStylesButton, addButtonEvent } from '../utils'
import styles from '../components/Preview/Body/styles.css'

const CLASS_MODAL_CONTAINER = '_kuikpay-modal__modalContainer'
const CLASS_CHECKOUTLESS = '_kuikpay-myCheckout-styles-module__Checkoutless'
const CLASS_BUY_BUTTON = '_kuikpay-myCheckout-styles-module__buyButtonContainer'
const CLASS_ICONS = '_kuikpay-myCheckout-styles-module__iconAlternative'
const NEW_CLASS_ICONS = '_kuikpay-myCheckout-styles-module__iconAlternative'
const CLASS_BUTTONS = '_kuikpay-button__buttonContainer'
const CLASS_BUY_BUTTONS = '_kuikpay-button__buttonContainer'
const CLASS_MODAL_INPUTS = '_kuikpay-input__input'
const CLASS_STROKE_ICON =
  '_kuikpay-myCheckout-styles-module__strokeCheckiconAlternative'

const CLASS_SUMMARY_CONTAINER = '_kuikpay-summary-modules__summaryContainer'

export const useKuikpayModal = () => {
  const refModal = useRef(null)
  const [iconsClass, setIconsClass] = useState('')
  const {
    deviceSelected,
    state: { modalStyles },
  } = useStyleSettings()

  const isMobile = deviceSelected === 'mobile'

  useEffect(() => {
    if (refModal === null) return
    const checkoutless = document.getElementsByClassName(CLASS_CHECKOUTLESS)
    const buyButton = document.getElementsByClassName(CLASS_BUY_BUTTON)
    const iconsContainer = document.getElementsByClassName(CLASS_ICONS)
    const modalContainer = document.getElementsByClassName(
      CLASS_MODAL_CONTAINER
    )

    modalContainer[0].classList.add(styles.modalPositionContainer)
    checkoutless[0].classList.add(styles.modalCheckoutlessHeight)
    buyButton[0].classList.add(styles.modalBuyButtonPosition)

    const iconsContainerArray = Array.from(iconsContainer)

    iconsContainerArray.forEach((element) =>
      element.classList.replace(CLASS_ICONS, NEW_CLASS_ICONS)
    )

    setIconsClass(NEW_CLASS_ICONS)
  }, [refModal])

  useEffect(() => {
    if (refModal === null) return
    const { backgroundColor } = modalStyles
    const modalContainer = document.getElementsByClassName(
      CLASS_MODAL_CONTAINER
    )

    const modalInputs = document.getElementsByClassName(CLASS_MODAL_INPUTS)
    const summaryContainer = document.getElementsByClassName(
      CLASS_SUMMARY_CONTAINER
    )

    const buyButton = document.getElementsByClassName(CLASS_BUY_BUTTON)

    const modalContainerArray = Array.from(modalContainer)
    const modalInputsArray = Array.from(modalInputs)
    const summaryContainerArray = Array.from(summaryContainer)
    const buyButtonArray = Array.from(buyButton)
    const modalElementArray = [
      ...modalContainerArray,
      ...modalInputsArray,
      ...summaryContainerArray,
      ...buyButtonArray,
    ]

    modalElementArray.forEach((element) =>
      setStyles(element, [{ name: 'background-color', value: backgroundColor }])
    )
  }, [refModal, modalStyles.backgroundColor])

  useEffect(() => {
    if (refModal === null || !iconsClass) return
    const { icons } = modalStyles
    const iconsContainer = document.getElementsByClassName(iconsClass)
    const strokeIconContainer =
      document.getElementsByClassName(CLASS_STROKE_ICON)

    const iconsContainerArray = Array.from(iconsContainer)
    const strokeIconsContainerArray = Array.from(strokeIconContainer)

    strokeIconsContainerArray.forEach((element) =>
      setStyles(element, [{ name: 'stroke', value: icons.color }])
    )

    iconsContainerArray.forEach((element) =>
      setStyles(element, [{ name: 'fill', value: icons.color }])
    )
  }, [refModal, modalStyles.icons.color, iconsClass])

  useEffect(() => {
    if (refModal === null) return
    const { font } = modalStyles

    const fontDiv = document.querySelectorAll(`.${CLASS_CHECKOUTLESS} div`)
    const fontP = document.querySelectorAll(`.${CLASS_CHECKOUTLESS} p`)
    const fontA = document.querySelectorAll(`.${CLASS_CHECKOUTLESS} select`)
    const fontInput = document.querySelectorAll(`.${CLASS_CHECKOUTLESS} input`)
    const fontSelect = document.querySelectorAll(
      `.${CLASS_CHECKOUTLESS} select`
    )

    const fontDivArray = Array.from(fontDiv)
    const fontPArray = Array.from(fontP)
    const fontAArray = Array.from(fontA)
    const fontInputArray = Array.from(fontInput)
    const fontSelectArray = Array.from(fontSelect)
    const fontArray = [
      ...fontDivArray,
      ...fontPArray,
      ...fontAArray,
      ...fontInputArray,
      ...fontSelectArray,
    ]

    if (fontArray.length) {
      fontArray.forEach((element) =>
        setStyles(element, [{ name: 'font-family', value: font }])
      )
    }
  }, [refModal, modalStyles.font])

  useEffect(() => {
    if (refModal === null) return
    const {
      button: { normal, borderRadius },
    } = modalStyles

    const buttons = document.getElementsByClassName(CLASS_BUTTONS)
    const buyButton = document.getElementsByClassName(CLASS_BUY_BUTTONS)

    const buttonsArray = Array.from(buttons)
    const buyButtonArray = Array.from(buyButton)
    const buttonsConcat = [...buttonsArray, ...buyButtonArray]

    buttonsConcat.forEach((element) => {
      setStylesButton(element, { ...normal, borderRadius })
      addButtonEvent('mouseout', element, { ...normal, borderRadius })
    })
  }, [refModal, modalStyles.button.normal, modalStyles.button.borderRadius])

  useEffect(() => {
    if (refModal === null) return
    const {
      button: { hover, borderRadius },
    } = modalStyles

    const buttons = document.getElementsByClassName(CLASS_BUTTONS)
    const buyButton = document.getElementsByClassName(CLASS_BUY_BUTTONS)

    const buttonsArray = Array.from(buttons)
    const buyButtonArray = Array.from(buyButton)
    const buttonsConcat = [...buttonsArray, ...buyButtonArray]

    buttonsConcat.forEach((element) => {
      addButtonEvent('mouseover', element, { ...hover, borderRadius })
    })
  }, [refModal, modalStyles.button.hover, modalStyles.button.borderRadius])

  return { refModal, isMobile }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/StyleSettings/hooks/usePayButtonMenu.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { TypeColorStyle } from '../interfaces'
import { useStyleSettings } from './context'

export const usePayButtonMenu = () => {
  const {
    state: {
      buttonStyles: {
        borderRadius,
        font,
        hover: hoverStyles,
        normal: normalStyles,
        value: valueButton,
        width,
      },
    },
    dispatch,
  } = useStyleSettings()

  const handleNameAction = (value: string) =>
    dispatch({ type: 'SET_PAYBUTTON_VALUE', args: { value } })

  const handleFontAction = (fontValue: string) =>
    dispatch({ type: 'SET_PAYBUTTON_FONT', args: { font: fontValue } })

  const handleBorderRadiusAction = (radio: number) =>
    dispatch({ type: 'SET_PAYBUTTON_RADIO', args: { borderRadius: radio } })

  const handleWidthAction = (value: number) =>
    dispatch({ type: 'SET_PAYBUTTON_WIDTH', args: { width: value } })

  const handleButtonStyleAction = (type: TypeColorStyle, color: string) => {
    switch (type) {
      case 'normal_text':
        dispatch({
          type: 'SET_PAYBUTTON_NORMAL_TEXT_COLOR',
          args: { color },
        })
        break

      case 'normal_background':
        dispatch({
          type: 'SET_PAYBUTTON_NORMAL_BACKGROUND_COLOR',
          args: { color },
        })
        break

      case 'normal_outline':
        dispatch({
          type: 'SET_PAYBUTTON_NORMAL_OUTLINE_COLOR',
          args: { color },
        })
        break

      case 'hover_text':
        dispatch({
          type: 'SET_PAYBUTTON_HOVER_TEXT_COLOR',
          args: { color },
        })
        break

      case 'hover_background':
        dispatch({
          type: 'SET_PAYBUTTON_HOVER_BACKGROUND_COLOR',
          args: { color },
        })
        break

      case 'hover_outline':
        dispatch({
          type: 'SET_PAYBUTTON_HOVER_OUTLINE_COLOR',
          args: { color },
        })
        break

      default:
        break
    }
  }

  const getColorStyle = (type: TypeColorStyle) => {
    let color = ''

    switch (type) {
      case 'normal_text':
        color = normalStyles.textColor
        break

      case 'normal_background':
        color = normalStyles.backgroundColor
        break

      case 'normal_outline':
        color = normalStyles.outlineColor
        break

      case 'hover_text':
        color = hoverStyles.textColor
        break

      case 'hover_background':
        color = hoverStyles.backgroundColor
        break

      case 'hover_outline':
        color = hoverStyles.outlineColor
        break

      default:
        break
    }

    return color
  }

  return {
    borderRadius,
    font,
    valueButton,
    width,
    getColorStyle,
    handleBorderRadiusAction,
    handleButtonStyleAction,
    handleFontAction,
    handleNameAction,
    handleWidthAction,
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/StyleSettings/hooks/useModalMenu.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { TypeColorStyle } from '../interfaces'
import { useStyleSettings } from './context'

export const useModalMenu = () => {
  const {
    state: {
      modalStyles: {
        font,
        icons: { color: iconsColor },
        backgroundColor,
        button: { borderRadius, hover: hoverStyles, normal: noramlStyles },
      },
    },
    dispatch,
  } = useStyleSettings()

  const handleFontAction = (fontValue: string) =>
    dispatch({ type: 'SET_MODAL_FONT', args: { font: fontValue } })

  const handleIconsColorAction = (color: string) =>
    dispatch({ type: 'SET_MODAL_ICONS_COLOR', args: { iconsColor: color } })

  const handleBorderRadiusAction = (radio: number) =>
    dispatch({ type: 'SET_MODAL_RADIO', args: { borderRadiusBtn: radio } })

  const handleBackgroundAction = (color: string) =>
    dispatch({
      type: 'SET_MODAL_BACKGROUND_COLOR',
      args: { backgroundColor: color },
    })

  const handleButtonStyleAction = (type: TypeColorStyle, color: string) => {
    switch (type) {
      case 'normal_text':
        dispatch({
          type: 'SET_MODAL_BTN_NORMAL_TEXT_COLOR',
          args: { color },
        })
        break

      case 'normal_background':
        dispatch({
          type: 'SET_MODAL_BTN_NORMAL_BACKGROUND_COLOR',
          args: { color },
        })
        break

      case 'normal_outline':
        dispatch({
          type: 'SET_MODAL_BTN_NORMAL_OUTLINE_COLOR',
          args: { color },
        })
        break

      case 'hover_text':
        dispatch({
          type: 'SET_MODAL_BTN_HOVER_TEXT_COLOR',
          args: { color },
        })
        break

      case 'hover_background':
        dispatch({
          type: 'SET_MODAL_BTN_HOVER_BACKGROUND_COLOR',
          args: { color },
        })
        break

      case 'hover_outline':
        dispatch({
          type: 'SET_MODAL_BTN_HOVER_OUTLINE_COLOR',
          args: { color },
        })
        break

      default:
        break
    }
  }

  const getColorStyle = (type: TypeColorStyle) => {
    let color = ''

    switch (type) {
      case 'normal_text':
        color = noramlStyles.textColor
        break

      case 'normal_background':
        color = noramlStyles.backgroundColor
        break

      case 'normal_outline':
        color = noramlStyles.outlineColor
        break

      case 'hover_text':
        color = hoverStyles.textColor
        break

      case 'hover_background':
        color = hoverStyles.backgroundColor
        break

      case 'hover_outline':
        color = hoverStyles.outlineColor
        break

      default:
        break
    }

    return color
  }

  return {
    font,
    iconsColor,
    backgroundColor,
    borderRadius,
    handleFontAction,
    handleIconsColorAction,
    handleBackgroundAction,
    handleBorderRadiusAction,
    handleButtonStyleAction,
    getColorStyle,
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-store-framework/react/admin/component/StyleSettings/hooks/index.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
export * from './context'
export * from './reducer'
export * from './useModalMenu'
export * from './usePayButtonMenu'
export * from './usePayButtonPreview'
export * from './useKuikpayModal'

```