[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-sdk/src/i18n/locales.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const LOCALES = {
  SPANISH: 'es',
  ENGLISH: 'en',
  PORTUGUESE: 'pt',
}

```


[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-sdk/src/i18n/useFormatMessage.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useIntl } from 'react-intl'

const useFormatMessage = (id: string, value = {}) => {
  return useIntl().formatMessage({ id }, { ...value })
}

export default useFormatMessage

```


[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-sdk/src/i18n/index.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
export { default as I18nProvider } from './provider'
export { LOCALES } from './locales'

```


[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-sdk/src/i18n/provider.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'
import { IntlProvider } from 'react-intl'

import { LOCALES } from './locales'
import messages from './messages'

interface Props {
  children: any
  locale: string
}

const Provider = ({ children, locale = LOCALES.SPANISH }: Props) => {
  return (
    <IntlProvider
      locale={locale}
      textComponent={Fragment}
      messages={messages[locale]}
    >
      {children}
    </IntlProvider>
  )
}

export default Provider

```


[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-sdk/src/services/ApolloClientConfig.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'
import { setContext } from '@apollo/client/link/context'

import type { Runtime } from '../interfaces'
import { Platform } from '../interfaces'

const searchEndpoint = (platform: string, workspace: string) => {
  switch (platform) {
    case Platform.vtexIo: {
      return `/_v/private/graphql/v1?workspace=${workspace}`
    }

    case Platform.vtexCms: {
      return `/api/io/_v/private/graphql/v1?workspace=${workspace}`
    }

    default: {
      return `/_v/private/graphql/v1?workspace=${workspace}`
    }
  }
}

const buildClient = (sandbox: boolean, runtime: Runtime) => {
  const httpLink = createHttpLink({
    uri: sandbox
      ? `https://${runtime.workspace}--${runtime.account}.myvtex.com/_v/private/graphql/v1?workspace=${runtime.workspace}`
      : searchEndpoint(runtime.platform, runtime.workspace),
    credentials: 'include',
  })

  const authLink = setContext(async (_, { headers }) => {
    return {
      headers: {
        ...headers,
      },
    }
  })

  return new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  })
}

export default buildClient

```


[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-sdk/src/services/getIpAdrress.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const getIpAddress = async () => {
  const requestOptions = {
    method: 'GET',
  }

  const response = await fetch(
    'https://api.ipify.org?format=json',
    requestOptions
  )

  const { ip: ipAddress } = await response.json()

  return ipAddress
}

```


[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-sdk/src/services/GoogleApis.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const geocoding = async (
  address: string,
  city: string,
  state: string,
  country: string
) => {
  try {
    const requestOptions = {
      method: 'GET',
    }

    return await fetch(
      `https://maps.googleapis.com/maps/api/geocode/json?address=${address},${city},${state},${country}&key=`,
      requestOptions
    )
  } catch (e) {
    return e
  }
}

export const reverseGeocoding = async (lat: string, lng: string) => {
  try {
    const requestOptions = {
      method: 'GET',
    }

    return await fetch(
      `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&location_type=ROOFTOP&result_type=street_address&key=`,
      requestOptions
    )
  } catch (e) {
    return e
  }
}

```


[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-sdk/src/interfaces/orderForm.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { Item } from '.'

export interface OrderFormMC {
  canEdit: boolean
  isLoggedIn: boolean
  profile: ProfileMC
  shipping: ShippingMC
  payments: PaymentsMC
  items: ItemMC[]
  status: 'idle' | 'incomplete' | 'complete'
  acceptHabeasData: boolean
}

export interface ProfileMC {
  id?: string
  name: string
  lastname: string
  phoneCode: string
  phone: string
  habeasData?: boolean
  email: string
  documentType: string
  document: string
}

export interface ShippingMC {
  address: AddressMC
  selectedAddresses: AddressMC[]
  availableAddresses: AddressMC[]
  logisticInfo?: LogisticInfo[]
}

export interface AddressMC {
  id: string
  country: string
  state: string
  city: string
  neighborhood: string
  street: string
  number: string
  postalCode: string
  reference: string
  receiverName: string
  complement: string
  geoCoordinates: {
    longitude: string
    latitude: string
  }
  addressDeliveryType?: 'delivery' | 'pickup'
  selectedSlaId?: string
}

export interface LogisticInfo {
  itemIndex: number
  addressId?: string
  selectedSla: string // For Simulation is selectedSlaId, For Order is selectedSla
  selectedDeliveryChannel: string
  selectedShippingEstimate: string
  deliveryWindow?: {
    // For Simulation is selectedDeliveryWindow, For Order is deliveryWindow
    startDateUtc: string
    endDateUtc: string
  }
  storeName?: string
}

export interface PaymentsMC {
  payment?: Payment[]
  availableCards: Card[]
  selectedCard?: Card
}

export type Payment = {
  paymentMethod?: string
  paymentId?: string
  installments?: number
  additionalData?: Array<{ key: string; value: string }>
} & Card

export type Card = {
  cardId?: string
  bin?: string
  holderDocument?: string
  holderName?: string
  expirationDate?: string
  franchise?: string
  number?: string
  gateway?: string
  origin?: string
}

export type ItemMC = Item

export interface OrderFormSimulation {
  items: ItemMC[]
  email: string
  selectedAddresses: AddressMC[]
  payments: Payment[]
  logisticsInfo: LogisticInfo[]
}

export interface PackageSummaryMC {
  deliveryChannel: string
  deliveryId: string
  storeName: string
  packageCount?: number
  selectedShippingEstimate?: 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-sdk/src/interfaces/StepsAndSections.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
export type Section =
  | 'clientProfileData'
  | 'shippingData'
  | 'paymentData'
  | 'logisticsInfo'
  | 'registerFormProfile'
  | 'registerFormShipping'
  | 'summary'
  | 'return'

export type PaymentDataSection = 'list' | 'details'

export type ScreenToGoToCheckout =
  | 'removeUnavailableProducts'
  | 'multiplesPackages'

```


[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-sdk/src/interfaces/index.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { GroupPaymentMethods } from './simulation'

/* eslint-disable @typescript-eslint/no-explicit-any */
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 Item {
  priceTags: any
  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
  productCategories?: any[]
  productCategoryIds?: string
  skuSpecifications: any[]
  listPrice: number
  unitMultiplier: number
  measurementUnit: string
  showTotalMount?: boolean
  hiddenUnits?: boolean
  hiddenRemove?: boolean
  description?: string
  additionalInfo?: Record<string, unknown>
  refId?: string
  priceDefinition?: {
    calculatedSellingPrice?: number
    total?: number
    sellingPrices?: [
      {
        value?: number
        quantity?: number
      }
    ]
  }
  tax?: 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 OfferingInput {
  itemIndex: number
  offeringId: string
}

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

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

export type TotalizerId = 'Items' | 'Shipping' | 'Tax' | 'Discounts'
export interface Totalizer {
  id: TotalizerId
  name: string
  value: number
}
export interface OrderForm {
  clientProfileData?: {
    email?: string
  }
  shippingData?: {
    selectedAddress?: Address | null
    addressAlternative?: Address | null
  }
  items: Item[]
  totalizers: Totalizer[]
  value: number
  paymentData?: PaymentData
  messages?: Message[]
  marketingData?: MarketingData
  ratesAndBenefitsData?: RatesAndBenefitsData
  logisticsInfo?: LogisticsInfo[]
}

export interface RatesAndBenefitsData {
  rateAndBenefitsIdentifiers: RateAndBenefitsIdentifier[]
}

export interface RateAndBenefitsIdentifier {
  name: string
  id: string
}

export interface MarketingData {
  coupon?: string
}

export interface Message {
  code: string
}

export interface ClientProfileData {
  id?: string
  firstName?: string
  lastName?: string
  documentType?: string
  document?: string
  email: string
  phone?: string
  completed?: boolean
  loadData?: boolean
  prefix?: string
  habeasData?: boolean
}

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

export interface ShippingData {
  logisticsInfo: LogisticsInfo[]
}

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

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

export interface ScheduleDelivery {
  day: string
  timeRange: string
}

export interface SlaSummary {
  delivery: Sla[]
  'pickup-in-point': Sla[]
  itemsIndex?: number[]
  packages?: ChangeLogistics[]
  dontUpdateLogistics?: boolean
  updateWhenChangeItems?: boolean
}

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 PaymentMethod {
  paymentId?: string
  cardId?: string
  id?: string
  gateway?: string
  email?: string
  franchise?: string
  number?: string
  ccToken?: string
  paymentMethod: string
  card?: string
  bin?: string
  cvv?: string
  origin?: string
  paymentSystem?: string
}

interface GeoCoordinates {
  latitude: string
  longitude: string
}

export interface PaymentForm {
  disabled: boolean
  error: boolean
  franchiseImg?: string
  handlePayment: any
  loading: boolean
  paymentMethod: string
  payments: GroupPaymentMethods
  selectedCard: any
  setError: any
  handledPaymentDisabled?: () => void
  setFranchiseImg?: (franchise?: string) => void
}

export interface PaymentsMethod {
  accountName: string
  id: string
  isActive: boolean
  paymentMethodName: string
}

export interface Visualization {
  key: string
  secundaryKey: string
  type: string
}

export interface Settings {
  isLoaded: boolean
  buttonMessage?: string
  buttonText?: string
  cvcRequired?: boolean
  cvcValid?: boolean
  habeasDataInformation: HabeasDataInformation
  hasGoogleAnalytics?: boolean
  additionalData?: Record<string, string>
  isConfigured?: boolean
  isLiteVersion?: boolean
  orion?: boolean
  paymentMethod?: PaymentsMethod[]
  paymentSystem?: string
  styles?: string
  visualization?: Visualization[]
}

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

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

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

export interface Steps {
  profile: boolean
  shipping: boolean
  payment: boolean
}

export interface SelectValue {
  value: Option
  onChange: (option: Option) => void
  isValid: boolean
  setIsValid: React.Dispatch<boolean>
  reset: () => void
  setValue: React.Dispatch<React.SetStateAction<Option>>
}

export interface InputValue {
  value: string
  isValid: boolean
  setIsValid: React.Dispatch<boolean>
  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void
  reset: () => void
  setValue: React.Dispatch<React.SetStateAction<string>>
}

interface Option {
  label: string
  value: string
}

export interface ChangeLogistics {
  shippingPackage: number
  selectedSla: string
  deliveryWindow: DeliveryWindow
  scheduleDelivery: ScheduleDelivery
  selectedDeliveryChannel: string
}
export interface ResponseValidateItem {
  id: string
  message: string
  imageUrl?: string
  name?: string
}
export interface BundleIteminput {
  id: string
  parentItemId: 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 ProductItem {
  itemId: string
  name: string
  images: Image[]
  variations: Array<{
    name: string
    values: string[]
  }>
  sellers: Array<{
    sellerDefault: boolean
    commertialOffer: {
      Price: number
      ListPrice: number
      AvailableQuantity: number
      SellingPrice?: number
    }
  }>
  nameComplete?: string
}

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

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

export interface SkuSpecificationField {
  name: string
  originalName: string
}

export interface SkuSpecificationValues {
  name: string
  originalName: string
}

export type Variations = Record<
  string,
  {
    originalName: string
    values: Array<{
      name: string
      originalName: string
    }>
  }
>

export type VariationsV2 = {
  name: string
  values: string[]
}

export interface Product {
  categories?: string[]
  items: ProductItem[]
  skuSpecifications: SkuSpecification[]
  priceRange?: {
    listPrice?: {
      highPrice?: number
      lowPrice?: number
    }
  }
  brand?: string
  brandId?: number
  description?: string
  link?: string
  linkText?: string
  productId?: string
  productName?: string
  productReference?: string
}

export interface SelectorProductItem extends Omit<ProductItem, 'variations'> {
  variations: string[]
  variationValues: Record<string, string>
}

export interface CallbackItem {
  name: string
  value: string
  skuId: string | null
  isMainAndImpossible: boolean
  possibleItems: SelectorProductItem[]
}

export type ImageMap = Record<string, Record<string, Image | undefined>>

export type ShowValueForVariation = 'none' | 'image' | 'all'

export type ShowVariationsLabels =
  | boolean
  | 'none'
  | 'variation'
  | 'itemValue'
  | 'variationAndItemValue'

export type DisplayMode = 'select' | 'default' | 'slider'

export type SelectedVariations = Record<string, string | null>

export type InitialSelectionType = 'complete' | 'image' | 'empty'

export interface DisplayOption {
  label: string
  originalName: string
  onSelectItem: () => void
  image: Image | undefined
  available: boolean
  impossible: boolean
  disabled: boolean
}

export interface DisplayVariation {
  name: string
  originalName: string
  options: DisplayOption[]
}

export interface AvailableVariationParams {
  variations: Variations
  selectedVariations: SelectedVariations
  imagesMap: ImageMap
  onSelectItemMemo: (callbackItem: CallbackItem) => () => void
  skuItems: SelectorProductItem[]
  hideImpossibleCombinations: boolean
  disableUnavailableSelectOptions: boolean
}

export type SelectedVariationsNotNull = Record<string, string>

export interface DataPCIChange {
  event: {
    field: string
    type: string
  }
  fields: {
    cardNumber: { length: number; valid: boolean; paymentMethod?: string }
    cvv: { length: number; valid: boolean; required?: boolean }
  }
  hasErrors: boolean
}

export interface DataPCIPSuccess {
  card: {
    bin: string
    expiry_month: string
    expiry_year: string
    message: string
    number: string
    origin?: string
    status?: string
    token: string
    transaction_reference?: string
    type: string
  }
}

export interface DataPCIPGetCardInfo {
  card: {
    card_auth: string
    cvc: string
    expiry_month: number
    expiry_year: number
    holder_name: string
    nip: string
    number: string
    type: string
  }
}

export interface DataPCISuccess {
  transactionId: string
  cardInfo: {
    brand: string
    type: string
    usage: string
    country: string
    issuer: string
  }
}

export interface DataPCIGetCardInfo {
  cardInfo?: {
    brand: string
    type: string
    usage: string
    country: string
    issuer: string
  }
  maskedCard?: string
  paymentMethod?: string
  result?: string
  error?: string
}

export interface Runtime {
  account: string
  workspace: string
  platform: string
}

// eslint-disable-next-line no-restricted-syntax
export enum Platform {
  vtexIo = 'vtex-io',
  vtexCms = 'vtex-cms',
}

export interface IsClickToAddToCart {
  isClick: boolean
  data: any | null
}

// eslint-disable-next-line no-restricted-syntax
export enum Events {
  add = 'addToCart',
  remove = 'removeFromCart',
  click = 'click',
  checkout = 'checkout',
  authentication = 'authentication',
}

export interface PackageSummary {
  deliveryType: string
  deliveryTypeName: string
  selectedSla: string
  deliveryDate: string
  step: string
  price: string
  storeInfo: string
}

export interface ICredit {
  approved: number
  credit: boolean
  installments: number
}

export interface ISimulationCredit {
  quotaQuantity: number
  quotaValue: number
}

// eslint-disable-next-line no-restricted-syntax
export enum DiscountIdentifier {
  GIFT = 'DISCOUNT@GIFT',
  SHIPPING = 'DISCOUNT@SHIPPING',
  SHIPPINGMARKETPLACE = 'DISCOUNT@SHIPPINGMARKETPLACE',
  MARKETPLACE = 'DISCOUNT@MARKETPLACE',
  MANUALPRICE = 'DISCOUNT@MANUALPRICE',
  SELLERPRICE = 'DISCOUNT@SELLERPRICE',
  GIFTCARD = 'DISCOUNT@GIFTCARD',
  TAX_SHIPPING = 'TAX@SHIPPING',
}

export interface BlockedShipping {
  categories: ICategory[]
}

interface ICategory {
  name: string
  id: string
}
export interface StoreTermsAndConditionsContent {
  id: string
  content: string
}

export interface ShowPaymentMethod {
  id: string
  show: boolean
}

export interface InitialProps {
  blockedShipping?: BlockedShipping
  config?: Partial<Config>
  customData?: any
  hideDiscount?: boolean
  isPreview?: boolean
  language?: string
  orderForm: OrderForm | null
  runtime: Runtime
  sandbox?: boolean
  showPaymentMethods?: ShowPaymentMethod[]
  skuSelectorProps?: {
    visibleVariations?: string[]
    useImageInColor?: boolean
  }
  storeTermsAndConditionsContent?: StoreTermsAndConditionsContent[]
  theme: string
  addItemOffering?: (offeringInput: OfferingInput) => void
  addToCart: (item: ItemToAdd) => void
  cartSimulation: (simulationItems: CartSimulation) => Promise<Response>
  clearData: (items: ItemToRemove[]) => void
  clearOrderFormProfile: () => void
  handleGetDocumentsClient?: (email: string) => void
  handleSelectedItem?: (item: ProductItem) => void
  insertCoupon?: (text: string) => void
  removeItemOffering?: (offeringInput: OfferingInput) => void
  updateItems: (items: ItemToRemove[]) => void
  updateOrderFormProfile: (profile: ClientProfileData) => void
  updateSelectedAddress: (address: Address) => void
  validateItems?: () => ResponseValidateItem[] | []
}
export interface Step {
  profile: boolean
  shipping: boolean
  payment: boolean
  logistic: boolean
}

export type HabeasDataInformation = {
  url: string
  version: number
}

export interface CounterSecond {
  second: number
  intervalSetSecond: ReturnType<typeof setInterval>
}

```


[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-sdk/src/interfaces/simulation.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface SimulationData {
  items: ItemRequest[]
  postalCode?: string
  geoCoordinates?: string[]
  country: string
  paymentData: {
    payments: PaymentRequest[]
  }
  clientProfileData: ClientProfileDataSimulation
  shippingData: {
    logisticsInfo: LogisticInfoRequest[]
    selectedAddresses?: AddressRequest[]
  }
}

interface AddressRequest {
  addressId: string
  country: string
  postalCode?: string
  geoCoordinates?: [string, string]
  addressType: 'residential' | 'search'
}

interface LogisticInfoRequest {
  itemIndex: number
  selectedSlaId: string // For Simulation is selectedSlaId, For Order is selectedSla
  selectedDeliveryChannel: string
  selectedDeliveryWindow?: {
    // For Simulation is selectedDeliveryWindow, For Order is deliveryWindow
    startDateUtc: string
    endDateUtc: string
  }
}

interface ItemRequest {
  id: string
  quantity: number
  seller: string
}

interface PaymentRequest {
  bin: string
  paymentSystem: string
  installments: number
}

export interface ClientProfileDataSimulation {
  email?: string
}

export interface Simulation {
  items: ItemSimulation[]
  paymentData: PaymentDataSimulation
  logisticsInfo: LogisticInfoSimulation[]
  totals: TotalsSimulation
  promotions: Promotion[]
}

export interface Promotion {
  id: string
  name: string
}

export interface ItemSimulation {
  id: string
  requestIndex: number
  quantity: number
  seller: string
  measurementUnit: string
  unitMultiplier: number
  sellingPrice: number
  listPrice: number
  price: number
  availability: string
}

interface PaymentDataSimulation {
  paymentMethods: PaymentMethodSimulation[]
}

export interface PaymentMethodSimulation {
  id: string
  name: string
  description: string
  groupName: string
  isCustom: boolean
  value: number
  installmentsOptions: InstallmentOptionsSimulation[]
}

export interface GroupPaymentMethods {
  isCreditCard: boolean
  groupName: string
  paymentMethods: PaymentMethodSimulation[]
}

export interface InstallmentOptionsSimulation {
  count: number
  value: number
}

export interface LogisticInfoSimulation {
  itemIndex: number
  addressInternalId: string
  selectedSla: string
  selectedDeliveryChannel: string
  slas: SlaSimulation[]
}

export interface SlaSimulation {
  id: string
  name: string
  deliveryChannel: string
  shippingEstimate: string
  price: number
  availableDeliveryWindow: DeliveryWindowSimulation[]
  deliveryWindow: DeliveryWindowSimulation
  pickupStoreInfo?: PickupStoreInfoSimulation
}

export interface PickupStoreInfoSimulation {
  additionalInfo?: string
  friendlyName?: string
  address?: {
    street: string
    state: string
    city: string
  }
}

export interface DeliveryWindowSimulation {
  endDateUtc: string
  lisPrice?: number
  price?: number
  startDateUtc: string
}

export interface TotalsSimulation {
  items?: number
  shipping?: number
  tax?: number
  discount?: number
}

export type SimulationStatus =
  | 'idle'
  | 'preloading'
  | 'loading'
  | 'succeeded'
  | 'failed'

```


[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-sdk/src/contexts/global-context/store.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { configureStore } from '@reduxjs/toolkit'

import modalReducer from './reducers/modalSlice'
import uiSettingsReducer from './reducers/uiSettingsSlice'
import checkoutFormReducer from './reducers/checkoutFormSlice'
import cartReducer from './reducers/cartSlice'
import secondAfterEmailReducer from './reducers/secondAfterEmail'
import orderFormDataReducer from './reducers/orderFormDataSlice'
import simulationReducer from './reducers/simulationSlice'

const store = configureStore({
  reducer: {
    modal: modalReducer,
    uiSettings: uiSettingsReducer,
    checkoutForm: checkoutFormReducer,
    cart: cartReducer,
    orderForm: orderFormDataReducer,
    simulation: simulationReducer,
    secondAfterEmailReducer,
  },
})

export type AppDispatch = typeof store.dispatch

export default store

```


[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-sdk/src/contexts/global-context/reducers/secondAfterEmail.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { createSlice } from '@reduxjs/toolkit'

export interface CounterSecond {
  second: number
  intervalSetSecond: ReturnType<typeof setInterval>
}

const initialState: CounterSecond = {
  second: 60,
  intervalSetSecond: null,
}

const counter = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    setSecond: (state) => {
      state.second -= 1
    },
    setSecondDirect: (state, action) => {
      state.second = action.payload
    },
    restart: (state) => {
      state.second = 60
    },
    intervalSetSecond: (state, action) => {
      state.intervalSetSecond = action.payload
    },
  },
})

export const { setSecond, restart, setSecondDirect, intervalSetSecond } =
  counter.actions

export default counter.reducer

export const selectSecond = (state: any): number =>
  state.secondAfterEmailReducer.second
export const selectIntervalSetSecond = (state: any): number =>
  state.secondAfterEmailReducer.intervalSetSecond

```


[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-sdk/src/contexts/global-context/reducers/cartSlice.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { createSlice } from '@reduxjs/toolkit'

import type { ItemToAdd, Product, ProductItem } from '../../../interfaces'

const slice = createSlice({
  name: 'cart',
  initialState: {
    itemToAdd: null,
    product: null,
    selectedItem: null,
    email: null,
    variationSelected: null,
  },
  reducers: {
    newItemSelection: (state, action) => {
      state.itemToAdd = action.payload.itemToAdd
      state.product = action.payload.product
      state.selectedItem = action.payload.selectedItem
      state.variationSelected = null
    },
    updateSelectedItem: (state, action) => {
      state.itemToAdd = action.payload.itemToAdd
      state.product = action.payload.product
      state.selectedItem = action.payload.selectedItem
    },
    updateEmail: (state, action) => {
      state.email = action.payload
    },
    setVariationSelected: (state, action) => {
      state.variationSelected = action.payload
      state.selectedItem = action.payload
    },
    updateItemToAdd: (state, action) => {
      state.itemToAdd = action.payload
    },
  },
})

export const {
  updateSelectedItem,
  setVariationSelected,
  newItemSelection,
  updateItemToAdd,
} = slice.actions

export default slice.reducer

export const selectItemData = (
  state: any
): { product: Product; itemToAdd: ItemToAdd; selectedItem: ProductItem } => ({
  itemToAdd: state.cart.itemToAdd,
  product: state.cart.product,
  selectedItem: state.cart.selectedItem,
})

export const selectEmail = (state: any): string => state.cart.email
export const selectVariationSelected = (state: any) =>
  state.cart.variationSelected

```


[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-sdk/src/contexts/global-context/reducers/simulationSlice.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'

import type { OrderFormSimulation } from '../../../interfaces/orderForm'
import type {
  DeliveryWindowSimulation,
  GroupPaymentMethods,
  InstallmentOptionsSimulation,
  ItemSimulation,
  LogisticInfoSimulation,
  PaymentMethodSimulation,
  Simulation,
  SimulationData,
  SimulationStatus,
  SlaSimulation,
} from '../../../interfaces/simulation'

export const orderFormSimulation = createAsyncThunk(
  'simulation/api',
  async ({
    orderForm,
    cartSimulation,
  }: {
    orderForm: OrderFormSimulation
    cartSimulation: (simulationData: SimulationData) => any
  }): Promise<Simulation> => {
    if (!orderForm.selectedAddresses.length || !orderForm.items.length) {
      return null
    }

    return (
      cartSimulation({
        items: orderForm.items.map((item) => {
          if (!item.bundleItems?.length) {
            return {
              id: item.id,
              quantity: item.quantity,
              seller: item.seller,
            }
          }

          return {
            id: item.id,
            quantity: item.quantity,
            seller: item.seller,
            bundleItems: item.bundleItems?.map((bundleItems) => {
              return {
                id: bundleItems.id,
              }
            }),
          }
        }),
        country: 'COL', // Esto deberia venir del setup de la tienda
        clientProfileData: {
          email: orderForm.email,
        },
        paymentData: {
          payments:
            orderForm.payments.length && orderForm.payments[0].paymentId
              ? orderForm.payments.map((payment) => ({
                  bin: payment.bin,
                  installments: payment.installments,
                  paymentSystem: payment.paymentId,
                }))
              : [],
        },
        shippingData: {
          logisticsInfo: orderForm.logisticsInfo.map((logisticInfo) => ({
            ...(logisticInfo.deliveryWindow
              ? {
                  selectedDeliveryWindow: {
                    startDateUtc: logisticInfo.deliveryWindow.startDateUtc,
                    endDateUtc: logisticInfo.deliveryWindow.endDateUtc,
                  },
                }
              : {}),
            addressId: logisticInfo.addressId,
            itemIndex: logisticInfo.itemIndex,
            selectedSlaId: logisticInfo.selectedSla,
            selectedDeliveryChannel: logisticInfo.selectedDeliveryChannel,
          })),
          selectedAddresses: orderForm.selectedAddresses.map((item) => ({
            ...(item.postalCode ? { postalCode: item.postalCode } : {}),
            ...(item.geoCoordinates
              ? {
                  geoCoordinates: [
                    item.geoCoordinates.longitude,
                    item.geoCoordinates.latitude,
                  ],
                }
              : {}),
            country: item.country,
            addressId: item.id,
            addressType:
              item.addressDeliveryType === 'delivery'
                ? 'residential'
                : 'search',
          })),
        },
      })
        // TODO: Este mapeo de datos se deberia hacer en el proyecto implementador (CMS, VTEX IO, etc...),
        // para asegurarnos de mantener un standard de datos dentro del SDK y no nos toque hacer if X plataforma mapear Y datos.
        .then((response: any) => response?.json())
        .then((response: any): Simulation => {
          const totals: {
            items?: number
            shipping?: number
            tax?: number
            discount?: number
          } = {}

          // TODO: Deberia haber una forma más simple de hacer estas asignaciones
          const itemTotal = response.totals.find(
            (total: { id: string }) => total.id === 'Items'
          )

          const shippingTotal = response.totals.find(
            (total: { id: string }) => total.id === 'Shipping'
          )

          const taxTotal = response.totals.find(
            (total: { id: string }) => total.id === 'Tax'
          )

          const discountTotal = response.totals.find(
            (total: { id: string }) => total.id === 'Discounts'
          )

          if (itemTotal) {
            totals.items = itemTotal.value / 100
          }

          if (shippingTotal) {
            totals.shipping = shippingTotal.value / 100
          }

          if (taxTotal) {
            totals.tax = taxTotal.value / 100
          }

          if (discountTotal) {
            totals.discount = discountTotal.value / 100
          }

          return {
            items: response.items.map(
              (item: any): ItemSimulation => ({
                id: item.id,
                requestIndex: item.requestIndex,
                quantity: item.quantity,
                seller: item.seller,
                measurementUnit: item.measurementUnit,
                unitMultiplier: item.unitMultiplier,
                sellingPrice: item.sellingPrice / 100,
                listPrice: item.listPrice / 100,
                price: item.price / 100,
                availability: item.availability,
              })
            ),
            paymentData: {
              paymentMethods: response.paymentData.paymentSystems?.map(
                (paymentSystem: any): PaymentMethodSimulation => ({
                  id: paymentSystem.stringId,
                  name: paymentSystem.name,
                  description: paymentSystem.description,
                  groupName: paymentSystem.groupName,
                  isCustom: paymentSystem.isCustom,
                  value:
                    (response.paymentData.installmentOptions.find(
                      (installmentOption: any) =>
                        installmentOption.paymentSystem ===
                        paymentSystem.stringId
                    )?.value || 0) / 100,
                  installmentsOptions: response.paymentData.installmentOptions
                    .find(
                      (installmentOption: any) =>
                        installmentOption.paymentSystem ===
                        paymentSystem.stringId
                    )
                    .installments?.map(
                      (
                        installmentOption: any
                      ): InstallmentOptionsSimulation => ({
                        count: installmentOption.count,
                        value: installmentOption.value / 100,
                      })
                    ),
                })
              ),
            },
            logisticsInfo: response.logisticsInfo.map(
              (logisticInfo: any): LogisticInfoSimulation => ({
                itemIndex: logisticInfo.itemIndex,
                addressInternalId: logisticInfo.addressId,
                selectedDeliveryChannel: logisticInfo.selectedDeliveryChannel,
                selectedSla: logisticInfo.selectedSla,
                slas: logisticInfo.slas.map(
                  (sla: any): SlaSimulation => ({
                    id: sla.id,
                    name: sla.name,
                    deliveryChannel: sla.deliveryChannel,
                    shippingEstimate: sla.shippingEstimate,
                    price: sla.price,
                    deliveryWindow: sla.deliveryWindow && {
                      startDateUtc: sla.deliveryWindow.startDateUtc,
                      endDateUtc: sla.deliveryWindow.endDateUtc,
                      lisPrice: sla.deliveryWindow.listPrice,
                      price: sla.deliveryWindow.price,
                    },
                    pickupStoreInfo:
                      (sla.pickupStoreInfo.isPickupStore && {
                        additionalInfo: sla.pickupStoreInfo.additionalInfo,
                        friendlyName: sla.pickupStoreInfo.friendlyName,
                        address: {
                          street: sla.pickupStoreInfo.address.street,
                          state: sla.pickupStoreInfo.address.state,
                          city: sla.pickupStoreInfo.address.city,
                        },
                      }) ||
                      null,
                    availableDeliveryWindow: sla.availableDeliveryWindows.map(
                      (deliveryWindow: any): DeliveryWindowSimulation => ({
                        startDateUtc: deliveryWindow.startDateUtc,
                        endDateUtc: deliveryWindow.endDateUtc,
                        lisPrice: deliveryWindow.listPrice,
                        price: deliveryWindow.price,
                      })
                    ),
                  })
                ),
              })
            ),
            totals,
            promotions:
              response.ratesAndBenefitsData?.rateAndBenefitsIdentifiers?.map(
                (promotion: { id: string; name: string }) => ({
                  id: promotion.id,
                  name: promotion.name,
                })
              ),
          }
        })
    )
  }
)

const slice = createSlice({
  name: 'simulation',
  initialState: {
    status: 'idle',
    items: [],
    paymentData: {
      paymentMethods: [],
    },
    logisticsInfo: [],
    totals: {},
    promotions: [],
  },
  reducers: {
    resetSimulation: (state) => {
      state.status = 'idle'
      state.items = []
      state.paymentData = {
        paymentMethods: [],
      }
      state.logisticsInfo = []
      state.totals = {}
    },
  },
  extraReducers(builder) {
    builder
      .addCase(orderFormSimulation.pending, (state, _) => {
        if (state.status === 'idle') {
          state.status = 'preloading'
        } else {
          state.status = 'loading'
        }
      })
      .addCase(
        orderFormSimulation.fulfilled,
        (state, action: { payload: Simulation }) => {
          if (!action.payload) {
            state.status = 'idle'

            return
          }

          if (state.status === 'loading') {
            state.status = 'succeeded'
          }

          state.items = action.payload.items
          state.logisticsInfo = action.payload.logisticsInfo
          state.paymentData.paymentMethods =
            action.payload.paymentData.paymentMethods
          state.promotions = action.payload.promotions
          state.totals = {
            items: action.payload.totals.items,
            shipping: action.payload.totals.shipping,
            tax: action.payload.totals.tax,
            discount: action.payload.totals.discount,
          }
        }
      )
      .addCase(orderFormSimulation.rejected, (state, _) => {
        state.status = 'failed'
      })
  },
})

export default slice.reducer

export const { resetSimulation } = slice.actions

export const selectSimulationLogistics = (state: { simulation: Simulation }) =>
  state.simulation.logisticsInfo

export const selectSimulationStatus = (state: {
  simulation: { status: SimulationStatus }
}) => state.simulation.status

export const selectAvailablePaymentMethods = (state: {
  simulation: Simulation
}) => state.simulation.paymentData.paymentMethods
export const selectGroupAvailablePaymentMethods = (state: {
  simulation: Simulation
  uiSettings: any
}) =>
  Object.values(
    state.simulation.paymentData.paymentMethods
      .filter((pm) =>
        state.uiSettings.settings.paymentMethod?.some(
          (settingsPM: any) =>
            settingsPM.paymentMethodName === pm.id && settingsPM.isActive
        )
      )
      .reduce((res: Record<string, GroupPaymentMethods>, current) => {
        if (res[current.groupName]) {
          res[current.groupName].paymentMethods.push({
            ...current,
          })

          return {
            ...res,
          }
        }

        return {
          ...res,
          [current.groupName]: {
            paymentMethods: [
              {
                ...current,
              },
            ],
            groupName: current.groupName,
            isCreditCard:
              // TODO: Esta logica deberia venir del proyecto implementador
              current.groupName.startsWith('creditCardPaymentGroup') ||
              current.groupName.startsWith('customPrivate'),
          },
        }
      }, {})
  ).sort((pm) => (pm.isCreditCard ? -1 : 1))

export const selectTotals = (state: { simulation: Simulation }) =>
  state.simulation.totals
export const selectTotalValue = (state: { simulation: Simulation }) =>
  (state.simulation.totals.items || 0) +
  (state.simulation.totals.shipping || 0) +
  (state.simulation.totals.tax || 0) +
  (state.simulation.totals.discount || 0)

export const selectPromotions = (state: { simulation: Simulation }) =>
  state.simulation.promotions

export const selectItems = (state: { simulation: Simulation }) =>
  state.simulation.items

```


[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-sdk/src/contexts/global-context/reducers/initializeDispatch.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const initializeApplication =
  (args: { uiSettingsArgs: any; formArgs: any; modalArgs: any }) =>
  (dispatch: any) => {
    args
    dispatch()
  }

```


[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-sdk/src/contexts/global-context/reducers/checkoutFormSlice.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { createSlice } from '@reduxjs/toolkit'

import type {
  Section,
  PaymentDataSection,
} from '../../../interfaces/StepsAndSections'
import type { BlockedShipping } from '../../../interfaces'

const slice = createSlice({
  name: 'checkoutForm',
  initialState: {
    step: 1,
    section: null,
    userRegistrationSections: 1,
    loadingOrder: false,
    errorOrder: null,
    formAction: 'none',
    blockedShipping: {
      categories: [],
    },
    loadingAction: false,
    prevSection: null,
    paymentSection: 'list',
  },
  reducers: {
    setNextStep: (state) => {
      state.step += 1
    },
    setPrevStep: (state) => {
      state.step -= 1
    },
    setNextSection: (state, action: { type: string; payload: Section }) => {
      state.step += 1
      state.prevSection = state.section
      state.section = action.payload
    },
    setPrevSection: (state) => {
      if (state.section !== state.prevSection) {
        state.section = state.prevSection
      }
    },
    setSameSection: (state, action) => {
      state.section = action.payload
    },
    setStep: (state, action) => {
      state.step = action.payload
    },
    setLoadingOrder: (state, action) => {
      state.loadingOrder = action.payload
    },
    setErrorOrder: (state, action) => {
      state.errorOrder = action.payload
    },
    resetFlow: (state) => {
      state.step = 1
      state.section = ''
    },
    setNextUserRegistrationSections: (state) => {
      state.userRegistrationSections += 1
    },
    setPreviousUserRegistrationSections: (state) => {
      state.userRegistrationSections -= 1
    },
    setUserRegistrationSections: (state, action) => {
      state.userRegistrationSections = action.payload
    },
    setBlockedShipping: (state, action) => {
      state.blockedShipping = action.payload
    },
    setFormAction: (state, action: { payload: 'none' | 'add' | 'edit' }) => {
      state.formAction = action.payload
    },
    setLoadingAction: (state, action) => {
      state.loadingAction = action.payload
    },
    setPaymentDataSection: (state, action: { payload: PaymentDataSection }) => {
      state.paymentSection = action.payload
    },
  },
})

export const {
  resetFlow,
  setBlockedShipping,
  setErrorOrder,
  setLoadingAction,
  setLoadingOrder,
  setNextSection,
  setNextStep,
  setNextUserRegistrationSections,
  setPreviousUserRegistrationSections,
  setPrevSection,
  setPrevStep,
  setSameSection,
  setStep,
  setUserRegistrationSections,
  setFormAction,
  setPaymentDataSection,
} = slice.actions

export default slice.reducer

export const selectStep = (state: any): number => state.checkoutForm.step
export const selectSection = (state: any): Section => state.checkoutForm.section
export const selectLoadingOrder = (state: any): boolean =>
  state.checkoutForm.loadingOrder
export const selectErrorOrder = (state: any): string =>
  state.checkoutForm.errorOrder
export const selectUserRegistrationSections = (state: any) =>
  state.checkoutForm.userRegistrationSections
export const selectBlockedShipping = (state: any): BlockedShipping =>
  state.checkoutForm.blockedShipping
export const selectFormAction = (state: any): 'none' | 'add' | 'edit' =>
  state.checkoutForm.formAction
export const selectLoadingAction = (state: any) =>
  state.checkoutForm.loadingAction
export const selectPrevSection = (state: any) => state.prevSection
export const selectPaymentDataSection = (state: any): PaymentDataSection =>
  state.checkoutForm.paymentSection

```


[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-sdk/src/contexts/global-context/reducers/uiSettingsSlice.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { createSlice } from '@reduxjs/toolkit'

import type { Settings } from '../../../interfaces'

const slice = createSlice({
  name: 'uiSetting',
  initialState: {
    showLogo: true,
    isFullscreen: false,
    isSummaryOpen: false,
    isMobile: false,
    settings: {
      buttonText: null,
      isLoaded: false,
      cvcRequired: true,
      cvcValid: false,
      habeasDataInformation: {
        url: '',
        version: 0,
      },
      hasGoogleAnalytics: false,
      isConfigured: false,
      isLiteVersion: true,
      styles: '',
    },
    theme: '',
    showingBuyButton: false,
  },
  reducers: {
    setShowLogo: (state, action) => {
      state.showLogo = action.payload
    },
    setIsFullscreen: (state, action) => {
      state.isFullscreen = action.payload
    },
    setIsSummaryOpen: (state, action) => {
      state.isSummaryOpen = action.payload
    },
    setIsMobile: (state, action) => {
      state.isMobile = action.payload
    },
    setSettings: (state, action) => {
      state.settings = {
        ...state.settings,
        ...action.payload,
        isLoaded: true,
      }
    },
    setVersion: (state, action) => {
      state.settings.isLiteVersion = action.payload
    },
    setTheme: (state, action) => {
      state.theme = action.payload
    },
    setShowingBuyButton: (state, action) => {
      state.showingBuyButton = action.payload
    },
  },
})

export const {
  setShowLogo,
  setIsFullscreen,
  setIsSummaryOpen,
  setIsMobile,
  setSettings,
  setVersion,
  setTheme,
  setShowingBuyButton,
} = slice.actions

export default slice.reducer

export const selectShowLogo = (state: any): boolean => state.uiSettings.showLogo
export const selectTheme = (state: any): string => state.uiSettings.theme
export const selectIsFullscreen = (state: any): boolean =>
  state.uiSettings.isFullscreen
export const selectIsSummaryOpen = (state: any): boolean =>
  state.uiSettings.isSummaryOpen
export const selectIsMobile = (state: any): boolean => state.uiSettings.isMobile
export const selectSettings = (state: any): Settings =>
  state.uiSettings.settings
export const selectShowingBuyButton = (state: any): boolean =>
  state.uiSettings.showingBuyButton

```


[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-sdk/src/contexts/global-context/reducers/modalSlice.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { createSlice } from '@reduxjs/toolkit'

const slice = createSlice({
  name: 'modal',
  initialState: {
    isOpen: false,
    isMinimized: false,
  },
  reducers: {
    openModal: (state) => {
      state.isOpen = true
    },
    closeModal: (state) => {
      state.isOpen = false
      state.isMinimized = false
    },
    minimizeModal: (state) => {
      state.isOpen = false
      state.isMinimized = true
    },
    maximizeModal: (state) => {
      state.isOpen = true
      state.isMinimized = false
    },
  },
})

export const { openModal, closeModal, minimizeModal, maximizeModal } =
  slice.actions

export default slice.reducer

export const selectIsModalOpen = (state: any): boolean => state.modal.isOpen

```


[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-sdk/src/contexts/global-context/reducers/orderFormDataSlice.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { createSlice } from '@reduxjs/toolkit'

import type {
  AddressMC,
  ItemMC,
  LogisticInfo,
  OrderFormMC,
  PackageSummaryMC,
  Payment,
  PaymentsMC,
  ProfileMC,
  ShippingMC,
} from '../../../interfaces/orderForm'
import type { Simulation } from '../../../interfaces/simulation'

const DEFAULT_STATE: OrderFormMC = {
  items: [],
  payments: {
    payment: [],
    availableCards: [],
    selectedCard: null,
  },
  profile: {
    email: null,
    name: null,
    lastname: null,
    phoneCode: null,
    phone: null,
    document: null,
    documentType: null,
    habeasData: false,
  },
  shipping: {
    address: null,
    selectedAddresses: [],
    availableAddresses: [],
    logisticInfo: [],
  },
  canEdit: true,
  isLoggedIn: false,
  status: 'idle',
  acceptHabeasData: false,
}

const slice = createSlice({
  name: 'orderForm',
  initialState: DEFAULT_STATE,
  reducers: {
    setEmail: (state, action: { payload: string }) => {
      state.profile.email = action.payload
    },
    setItems: (state, action) => {
      state.items = action.payload
    },
    setProfile: (state, action: { payload: ProfileMC }) => {
      state.profile = {
        ...state.profile,
        ...action.payload,
      }
    },
    setAddressStore: (state, action: { payload: AddressMC }) => {
      if (state.shipping.selectedAddresses.length) return

      if (action.payload.id === null) {
        const id = Math.floor(Math.random() * 10)

        action.payload.id = id.toString()
      }
      // if (state.shipping.selectedAddresses.length) {
      //   // Busca el indice de la dirección, si hay.
      //   const addressIndex = state.shipping.selectedAddresses.findIndex(
      //     (address: AddressMC) =>
      //       address.addressDeliveryType === action.payload.addressDeliveryType
      //   )

      //   if (addressIndex === -1) {
      //     state.shipping.selectedAddresses.push(action.payload)
      //   } else {
      //     state.shipping.selectedAddresses[addressIndex] = {
      //       ...action.payload,
      //       id: state.shipping.selectedAddresses[addressIndex].id
      //         ? state.shipping.selectedAddresses[addressIndex].id
      //         : action.payload.id,
      //     }
      //   }

      //   return
      // }

      state.shipping.selectedAddresses.push(action.payload)
    },
    setAddressDelivery: (state, action: { payload: AddressMC }) => {
      state.shipping.address = {
        ...action.payload,
        addressDeliveryType: 'delivery',
      }

      if (state.shipping.selectedAddresses.length) {
        // Busca el indice de la dirección de domicilio, si hay.
        const deliveryIndex = state.shipping.selectedAddresses.findIndex(
          (address: AddressMC) =>
            address.addressDeliveryType === action.payload.addressDeliveryType
        )

        if (deliveryIndex === -1) {
          state.shipping.selectedAddresses.push(action.payload)
        } else {
          state.shipping.selectedAddresses[deliveryIndex] = {
            ...state.shipping.selectedAddresses[deliveryIndex],
            ...action.payload,
          }
        }

        state.shipping.logisticInfo = state.shipping.logisticInfo.map(
          (logistic) => ({
            ...logistic,
            addressId:
              state.shipping.selectedAddresses.length > 1 && !logistic.addressId
                ? action.payload.id
                : logistic.addressId,
          })
        )

        if (state.shipping.availableAddresses.length) {
          const addressIndex = state.shipping.availableAddresses.findIndex(
            (address: AddressMC) => address.id === action.payload.id
          )

          // Actualiza direccion existente
          if (addressIndex === -1) {
            state.shipping.availableAddresses.push(action.payload)

            return
          }

          state.shipping.availableAddresses[addressIndex] = action.payload
        } else {
          state.shipping.availableAddresses.push(action.payload)
        }

        return
      }

      // Usuario sin direcciones
      state.shipping.selectedAddresses.push(action.payload)
      state.shipping.availableAddresses.push(action.payload)
    },
    setUpdateAddresses: (
      state,
      action: {
        payload: {
          selectedAddress?: AddressMC
          availableAddresses?: AddressMC[]
        }
      }
    ) => {
      if (action.payload.availableAddresses) {
        state.shipping.availableAddresses = action.payload.availableAddresses
      }

      if (action.payload.selectedAddress) {
        state.shipping.address = action.payload.selectedAddress
        if (state.shipping.selectedAddresses.length) {
          // Busca el indice de la dirección de domicilio, si hay.

          const deliveryIndex = state.shipping.selectedAddresses.findIndex(
            (address: AddressMC) =>
              address.addressDeliveryType ===
              action.payload.selectedAddress.addressDeliveryType
          )

          if (deliveryIndex === -1) {
            // No tiene direcciones seleccionadas
            state.shipping.selectedAddresses.push(
              action.payload.selectedAddress
            )
          } else {
            state.shipping.selectedAddresses[deliveryIndex] =
              action.payload.selectedAddress
          }

          state.shipping.logisticInfo = []
        } else {
          state.shipping.selectedAddresses.push(action.payload.selectedAddress)
        }
      }
    },
    setLogisticsInfo: (state, action: { payload: LogisticInfo[] }) => {
      state.shipping.logisticInfo = action.payload
    },
    setRestorePayment: (state, action: { payload: { paymentId: string } }) => {
      // Si el usuario ya existente regresa en el flujo cuando va a pagar con un nuevo medio de pago,
      // vuelve a seleccionar la ultima tarjeta seleccionada
      if (state.payments.selectedCard) {
        state.payments.payment = [
          {
            ...state.payments.selectedCard,
            paymentMethod: 'tc',
            installments: 1,
            paymentId: action.payload.paymentId,
          },
        ]
      } else {
        state.payments.payment = []
      }
    },
    setCardInfo: (state, action: { payload: Payment }) => {
      state.payments.payment[0] = {
        ...(state.payments.payment[0] || {}),
        ...action.payload,
      }
    },
    setPaymetId: (state, action: { payload: string }) => {
      state.payments.payment[0] = {
        paymentId: action.payload,
        installments: 1,
      }
    },
    setCardBin: (state, action: { payload: string }) => {
      state.payments.payment[0] = {
        ...(state.payments.payment[0] || {}),
        bin: action.payload,
      }
    },
    setInstallments: (state, action: { payload: number }) => {
      state.payments.payment[0] = {
        ...(state.payments.payment[0] || {}),
        installments: action.payload,
      }
    },
    setUserInfo: (
      state,
      action: {
        payload: {
          profile: ProfileMC
          shipping?: ShippingMC
          payments?: PaymentsMC
        }
      }
    ) => {
      state.profile = {
        ...state.profile,
        ...action.payload.profile,
      }

      state.shipping = {
        ...state.shipping,
        ...action.payload.shipping,
        selectedAddresses: action.payload.shipping.selectedAddresses.length
          ? action.payload.shipping.selectedAddresses
          : state.shipping.selectedAddresses,
      }

      if (action.payload.payments.selectedCard) {
        state.payments = {
          ...state.payments,
          ...action.payload.payments,
        }
      }

      state.status = 'complete'

      // TODO: Queda pendiente llenar la información de shipping y payment
    },
    setIsLoggedIn: (state, action: { payload: boolean }) => {
      state.isLoggedIn = action.payload
      state.canEdit = action.payload || state.canEdit
    },
    setNewOrderform: (
      state,
      action: { payload: { noDeleteEmail: boolean } }
    ) => {
      state.payments = {
        payment: [],
        availableCards: [],
        selectedCard: null,
      }

      state.profile = {
        email: action.payload?.noDeleteEmail ? state.profile.email : null,
        name: null,
        lastname: null,
        phoneCode: null,
        phone: null,
        document: null,
        documentType: null,
        habeasData: false,
      }

      state.shipping = {
        address: null,
        selectedAddresses: [],
        availableAddresses: [],
        logisticInfo: [],
      }
      state.canEdit = true
      state.isLoggedIn = false
      state.status = 'idle'
    },
    setOrderformStatus: (
      state,
      action: { payload: 'idle' | 'incomplete' | 'complete' }
    ) => {
      state.status = action.payload
    },
    setHabeasData: (state, action: { payload: boolean }) => {
      state.profile = {
        ...state.profile,
        habeasData: action.payload,
      }
    },
    setPayments: (state, action: { payload: PaymentsMC }) => {
      state.payments = {
        ...state.payments,
        ...action.payload,
      }
    },
    setAcceptHabeasData: (state, action: { payload: boolean }) => {
      state.acceptHabeasData = action.payload
    },

    setPaymentsOrderForm: (state, action: { payload: PaymentsMC }) => {
      state.payments = {
        ...state.payments,
        ...action.payload,
      }
    },
  },
})

export const {
  setAcceptHabeasData,
  setAddressDelivery,
  setAddressStore,
  setCardBin,
  setCardInfo,
  setEmail,
  setHabeasData,
  setInstallments,
  setIsLoggedIn,
  setItems,
  setLogisticsInfo,
  setNewOrderform,
  setOrderformStatus,
  setPayments,
  setPaymentsOrderForm,
  setPaymetId,
  setProfile,
  setRestorePayment,
  setUpdateAddresses,
  setUserInfo,
} = slice.actions

export default slice.reducer

export const selectProfile = (state: any): ProfileMC => state.orderForm.profile
// check if all fields in profile are different from null or empty
export const selectIsProfileComplete = (state: any): boolean =>
  Object.values(state.orderForm.profile).every(
    (value) => !!value || (typeof value === 'boolean' && value !== undefined)
  )
export const selectAddressStore = (state: {
  orderForm: OrderFormMC
}): AddressMC =>
  state.orderForm?.shipping?.selectedAddresses?.find(
    (selectedAddress) =>
      selectedAddress?.id !== state.orderForm?.shipping?.address?.id ||
      selectedAddress?.selectedSlaId
  )
export const selectShipping = (state: { orderForm: OrderFormMC }): ShippingMC =>
  state.orderForm.shipping
export const selectHasAddress = (state: { orderForm: OrderFormMC }): boolean =>
  !!state.orderForm.shipping.address ||
  !!state.orderForm.shipping.selectedAddresses.length
export const selectLogisticsInfo = (state: { orderForm: OrderFormMC }) =>
  state.orderForm.shipping.logisticInfo

export const selectDeliveryAddress = (state: { orderForm: OrderFormMC }) =>
  state.orderForm.shipping.selectedAddresses.find(
    (address) => address.addressDeliveryType === 'delivery'
  )
export const selectPickUpPointAddress = (state: { orderForm: OrderFormMC }) =>
  state.orderForm.shipping.selectedAddresses.find(
    (address) => address.addressDeliveryType === 'pickup'
  )
export const selectPackages = (state: {
  orderForm: OrderFormMC
}): PackageSummaryMC[] => {
  const packagesHashMap: Record<string, PackageSummaryMC> =
    state.orderForm.shipping.logisticInfo.reduce((res, current) => {
      return {
        ...res,
        [current.selectedSla]: {
          deliveryChannel: current.selectedDeliveryChannel,
          deliveryId: current.selectedSla,
          storeName: current.storeName,
          selectedShippingEstimate: current.selectedShippingEstimate,
        },
      }
    }, {})

  return Object.values(packagesHashMap).map((el, index) => ({
    ...el,
    packageCount: index + 1,
  }))
}

export const selectEmptyCart = (state: { orderForm: OrderFormMC }) =>
  !state.orderForm.items.length
export const selectItems = (state: {
  orderForm: OrderFormMC
  simulation: Simulation
}): ItemMC[] => {
  return state.orderForm?.items?.map((item) => {
    const simulationItem = state.simulation?.items?.find(
      (itemUpdated) => itemUpdated.id === item.id
    )

    return {
      ...item,
      availability: simulationItem?.availability || 'available',
      price: simulationItem?.price || item.price,
      sellingPrice: simulationItem?.sellingPrice || item.sellingPrice,
    }
  })
}

export const selectMainPayment = (state: { orderForm: OrderFormMC }) =>
  state.orderForm.payments.payment.length
    ? state.orderForm.payments.payment[0]
    : null

export const selectOrderFormStatus = (state: { orderForm: OrderFormMC }) =>
  state.orderForm.status
export const selectIsNew = (state: { orderForm: OrderFormMC }) =>
  state.orderForm.status === 'incomplete'
export const selectOrderForm = (state: any): OrderFormMC => state.orderForm

export const selectAcceptHabeasData = (state: any) => state.acceptHabeasData

export const selectPayment = (state: any) => state.orderForm.payments

```


[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-sdk/src/components/ButtonMessage/ButtonMessageContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, useMemo } from 'react'

import ButtonMessage from './ButtonMessage'
import useButtonMessage from './useButtonMessage'

interface Props {
  isVisible: boolean
}

const ButtonMessageContainer = (props: Props) => {
  const { isVisible } = props

  const { buttonMessage, isConfigured, message, styles } = useButtonMessage()
  const propsButton = { message, styles }

  return useMemo(() => {
    if (!isVisible || !isConfigured) return <Fragment />
    if (!message) return <Fragment />

    return <ButtonMessage {...propsButton} />
  }, [buttonMessage, isConfigured, isVisible, message])
}

export default ButtonMessageContainer

```


[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-sdk/src/components/ButtonMessage/useButtonMessage.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useEffect, useMemo, useState } from 'react'
import { useSelector } from 'react-redux'
import { pathOr } from 'ramda'

import { selectSettings } from '../../contexts/global-context/reducers/uiSettingsSlice'
import { useValidateStyles } from '../../hooks/useValidateStyles'

const useButtonMessage = () => {
  const settings = useSelector(selectSettings)
  const [message, setMessage] = useState<string>()

  const styles = useValidateStyles()

  const buttonMessage = useMemo(
    () => pathOr('', ['buttonMessage'], settings),
    [settings]
  )

  const isConfigured = useMemo(
    () => pathOr(false, ['isConfigured'], settings),
    [settings]
  )

  useEffect(() => {
    if (buttonMessage) {
      setMessage(
        buttonMessage.replaceAll(/\*[aA-zZÀ-ú | ]+\*/g, (e) => {
          const element = e.replace(/\*/g, '')

          return `<span>${element}</span>`
        })
      )
    }
  }, [buttonMessage])

  return {
    buttonMessage,
    isConfigured,
    message,
    styles,
  }
}

export default useButtonMessage

```


[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-sdk/src/components/ButtonMessage/ButtonMessage.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { Info } from '../Icons'
import { ToolTip } from '../shared'

interface Props {
  message: string
  styles?: any
}

const ButtonMessage = (props: Props) => {
  const { message, styles } = props

  return (
    <div className={styles.CheckoutlessInfo}>
      <ToolTip
        tooltip={
          <div className={styles.CheckoutlessInfoMessage}>
            <div dangerouslySetInnerHTML={{ __html: message }}></div>
          </div>
        }
      >
        <Info />
      </ToolTip>
    </div>
  )
}

export default ButtonMessage

```


[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-sdk/src/components/RegisterForm/RegisterForm.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { Dispatch, SetStateAction } from 'react'
import React, { useEffect, Fragment } from 'react'
import { useDispatch, useSelector } from 'react-redux'

import { Loader } from '../shared'
import {
  selectUserRegistrationSections,
  setPaymentDataSection,
} from '../../contexts/global-context/reducers/checkoutFormSlice'
import LoadingProcessOrdeContainer from '../UserInfo/LoadingProcessOrder/LoadingProcessOrderContainer'
import PaymentForm from './PaymentForm'
import ProfileForm from './Profile/ProfileFormContainer'
import ShippingFormContainer from './Shipping/ShippingFormContainer'
import Summary from '../Summary'
import type { Item, Step } from '../../interfaces'
import UnavailableProductsContainer from '../UnavailableProducts/UnavailableProductsContainer'
import globalStyles from '../../myCheckout-styles.module.css'
import styles from './registerForm.css'
import type { ProfileMC } from '../../interfaces/orderForm'
import type {
  LogisticInfoSimulation,
  SimulationStatus,
} from '../../interfaces/simulation'
import PackagesContainer from '../LogisticsInfo/Packages/PackagesContainer'

interface Props {
  gateway: string
  isPickupPoint: boolean
  items: Item[]
  loadingOrder: boolean
  loadPaymentForm: boolean
  showEditButtonAddress: boolean
  steps: Step
  validateTriggerPayment: boolean
  handleGetDocumentsClient: (email: string) => void
  setSteps: Dispatch<SetStateAction<Step>>
  profile: ProfileMC
  logisticsInfo: LogisticInfoSimulation[]
  simulationStatus?: SimulationStatus
}

const RegisterForm = (props: Props) => {
  const {
    gateway,
    isPickupPoint,
    items,
    loadingOrder,
    loadPaymentForm,
    steps,
    handleGetDocumentsClient,
    // new Context
    profile,
    logisticsInfo,
    simulationStatus,
  } = props

  const userRegistrationSections = useSelector(selectUserRegistrationSections)
  const dispatchGlobal = useDispatch()

  useEffect(() => {
    if (!steps.payment) return
    const isPaymentList =
      (isPickupPoint && userRegistrationSections === 3) ||
      (!isPickupPoint && userRegistrationSections === 4)

    const isPaymentDetails =
      (isPickupPoint && userRegistrationSections === 4) ||
      (!isPickupPoint && userRegistrationSections === 5)

    dispatchGlobal(
      setPaymentDataSection(
        (isPaymentList && 'list') || (isPaymentDetails && 'details') || 'list'
      )
    )
  }, [userRegistrationSections, isPickupPoint, steps])

  return (
    <Fragment>
      {loadingOrder && <LoadingProcessOrdeContainer />}

      {profile.email ? (
        !loadingOrder && items.length ? (
          <div className={styles.resgisterFormContainer}>
            {steps.profile && !steps.shipping && <ProfileForm />}
            {steps.shipping && !steps.payment && (
              <ShippingFormContainer steps={steps} />
            )}
            {steps.logistic &&
              !steps.payment &&
              (simulationStatus !== 'loading' &&
              logisticsInfo &&
              logisticsInfo?.length > 0 ? (
                <PackagesContainer />
              ) : (
                <Loader text="store/checkoutless.loading.almostThere" />
              ))}
            {steps.payment && (
              <Fragment>
                {loadPaymentForm ? (
                  <Fragment>
                    <PaymentForm
                      gateway={gateway}
                      handleGetDocumentsClient={handleGetDocumentsClient}
                    />
                  </Fragment>
                ) : (
                  <Loader />
                )}
              </Fragment>
            )}
            <Summary
              isVisible={
                !(steps.logistic && !steps.payment && logisticsInfo?.length > 0)
              }
              className={globalStyles.inDesktop}
            />
          </div>
        ) : loadingOrder && items.length ? null : (
          <UnavailableProductsContainer />
        )
      ) : (
        <Loader />
      )}
    </Fragment>
  )
}

export default RegisterForm

```


[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-sdk/src/components/RegisterForm/registerForm.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.resgisterFormContainer {
  display: flex;
  flex-direction: column;
  align-content: center;
}

@media screen and (min-width: 992px) {
  .resgisterFormContainer .summary {
    margin-bottom: 22%;
  }
}

```


[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-sdk/src/components/RegisterForm/generic-styles.module.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.container {
  width: 100%;
}

.containerDocument {
  display: flex;
  justify-content: space-between;
}

.containerDocumentType {
  width: 39%;
}

.containerDocumentNumber {
  width: 59%;
}

.containerTrigger {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.containerInfo {
  display: flex;
  align-items: center;
}

.containerText.containerText {
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.containerData {
  padding: 0px 32px;
  margin-bottom: 16px;
}

.radioHide {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 17px;
  width: 17px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  box-sizing: border-box;
}

.paymentLabelContainer {
  display: block;
  position: relative;
  padding-left: 25px;
  margin: 8px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.paymentLabelContainer label {
  cursor: pointer;
}

/* When the radio button is checked, add a blue background */
.checkmarkChecked {
  background-color: #fff;
  border: 1px solid #1b998b;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkNoChecked::after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.checkmarkChecked::after {
  display: block;
}

/* Style the indicator (dot/circle) */
.checkmarkContainer {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #1b998b;
}

.paymentLabel {
  font-size: 16px;
}

.paymentMethodContainer {
  padding: 14px 0;
}

.paymentMethodPromissory {
  margin: 0px 15px;
  width: 90%;
  padding: 35px;
  box-shadow: 0px 3px 6px #00000029;
  margin-bottom: 15px;
}

.formGroup {
  display: flex;
  justify-content: space-between;
}

.inputGroup {
  width: 48%;
}

.labelError {
  color: #cb4242;
}

.containerLocation {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.cityContainer {
  margin-top: 15px;
}

.cityContainer div {
  z-index: 101;
}

.marginTop {
  margin-top: 12px;
}

.habeasDataLink.habeasDataLink {
  text-decoration: underline;
}

.radioButtonContainer {
  display: flex;
  justify-content: space-around;
}

.cardsImgContainer {
  margin-left: 35px;
  margin-bottom: 10px;
}

.cardsImgContainer img {
  margin-right: 10px;
  height: 25px;
}

.textUnderline {
  text-decoration: underline;
}

.locationContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.locationContainer p {
  font-weight: 600;
  font-size: 26px;
  text-align: center;
  margin-bottom: 8px;
}

.containerDuesExpiry {
  display: flex;
}

.containerDuesExpiry .dues {
  margin-right: 9px;
  background-color: white;
}

.containerDuesExpiry .expiryDate {
  width: 99% !important;
}

.secureField__input {
  display: inline-block;
  width: 100%;
  line-height: 1.3;
  cursor: text;
  height: 46px;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 0 17.3px;
  border: 1px solid #919191;
  color: white;
  background-color: #fff;
}

.secureFieldInvalid {
  border: 1px solid #bc4c47;
}

.secureFieldValid {
  border: 1px solid #1b998b;
}

.secureField__inputContainer {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.secureField__actions {
  position: absolute;
  top: 0;
  left: 0;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 100%;
  padding-right: 16px;
  padding-left: 16px;
  pointer-events: none;
  -ms-flex-pack: end;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  align-items: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
}

.secureField__action {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 40px;
  height: 100%;
  padding: 12px 0 10px;
  pointer-events: auto;
  cursor: pointer;
  transition: color 200ms ease;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-transition: color 200ms ease;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row nowrap;
  justify-content: center;
  flex-flow: row nowrap;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
}

.secureField__action.secureField__actionCardIcon {
  width: 40px;
  height: 100%;
  padding: 0;
  pointer-events: none;
}

.secureField__actionCardWrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.secureField__cardIcon {
  position: absolute;
  top: 43%;
  right: 0;
  display: block;
  max-width: 100%;
  transform: translate3d(0, -50%, 0);
  -webkit-transform: translate3d(0, -50%, 0);
}

.labelError.labelError {
  color: #cb4242;
  margin-top: -7px;
  margin-bottom: 10px;
  font-size: 14px;
}

.paymentCardContainer {
  margin-bottom: 10px;
}

.paymentPromissoryContainer {
  margin-bottom: 10px;
}

.paymentLabelContainer .paymentCustomCreditLabel {
  font-size: 14px !important;
  color: #284859;
  line-height: 24px;
  margin: 12px 0px;
  border-radius: 8px;
  box-shadow: 0px 3px 6px #0000000f;
  padding: 5px 28px;
  margin-bottom: 15px;
  cursor: initial;
}

.paymentLabelContainer .paymentCustomCreditLabel b {
  color: #1b998b;
}

.paymentCustomCreditLabelInfo {
}

.paymentCustomerCreditContainer {
}

.arrowUp,
.cursorPointer {
  cursor: pointer;
}

.display {
  display: none;
}

.marginLeft.marginLeft {
  margin-left: 5px;
}

.marginBottom {
  margin-bottom: 12px;
}

.loadingContainer {
  position: relative;
  height: 150px;
  display: flex;
  justify-content: center;
}

@media (min-width: 992px) {
  .buyButtonContainer {
    position: fixed;
    padding: 14px;
    margin-top: 14px;
    box-shadow: inset 0px 3px 6px #0000000f;
    width: 30%;
    right: 0;
    bottom: 0;
    background: #ffffff 0% 0% no-repeat padding-box;
    z-index: 100;
  }
}

@media (min-width: 992px) {
  .container {
    margin-bottom: 35%;
  }
}

.summary {
  margin-bottom: 22%;
}

@media screen and (max-width: 792px) {
  .paymentMethodLiteContainer {
    padding-bottom: 70px;
  }
}

```


[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-sdk/src/components/RegisterForm/kuikpay-styles.module.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.container {
  width: 100%;
}

.containerDocument {
  display: flex;
  justify-content: space-between;
}

.containerDocumentType {
  width: 39%;
}

.containerDocumentNumber {
  width: 59%;
}

.containerData {
  padding: 0px 32px;
  margin-bottom: 8px;
}

.radioHide {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 17px;
  width: 17px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  box-sizing: border-box;
}

.paymentLabelContainer {
  display: block;
  position: relative;
  padding-left: 25px;
  margin: 8px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.paymentLabelContainer label {
  cursor: pointer;
}

/* When the radio button is checked, add a blue background */
.checkmarkChecked {
  background-color: #fff;
  border: 1px solid #1b998b;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkNoChecked::after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.checkmarkChecked::after {
  display: block;
}

/* Style the indicator (dot/circle) */
.checkmarkContainer {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #1b998b;
}

.paymentLabel {
  font-size: 16px;
}

.paymentMethodContainer {
  padding: 8px 0;
}

.paymentMethodContainer input,
.paymentMethodContainer select {
  /* quitar cuando se solucione font-family de PCI */
  font-weight: 500;
}

.paymentMethodPromissory {
  margin: 0px 15px;
  width: 90%;
  padding: 35px;
  box-shadow: 0px 3px 6px #00000029;
  margin-bottom: 15px;
}

.formGroup {
  display: flex;
  justify-content: space-between;
}

.inputGroup {
  width: 48%;
}

.labelError {
  color: #cb4242;
}

.containerLocation {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.cityContainer {
  margin-top: 15px;
}

.cityContainer div {
  z-index: 101;
}

.marginTop {
  margin-top: 12px;
}

.habeasDataLink.habeasDataLink {
  text-decoration: underline;
}

.radioButtonContainer {
  display: flex;
  justify-content: space-around;
}

.cardsImgContainer {
  margin-left: 35px;
  margin-bottom: 10px;
}

.cardsImgContainer img {
  margin-right: 10px;
  height: 25px;
}

.logisticsContainer {
  border-top: 1px solid #e0e2e7;
  padding-top: 12px;
}

.textUnderline {
  text-decoration: underline;
}

.locationContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.locationContainer p {
  font-weight: 600;
  font-size: 26px;
  text-align: center;
  margin-bottom: 8px;
}

.containerDuesExpiry {
  display: flex;
  align-items: flex-end;
}

.containerDuesExpiry .dues {
  margin-right: 9px;
}

.containerDuesExpiry .dues select {
  background-color: #ffffff;
}

.containerDuesExpiry .expiryDate {
  width: 99% !important;
}

.containerFifty {
  width: 50%;
}

.secureField__input {
  display: inline-block;
  width: 100%;
  line-height: 1.3;
  cursor: text;
  height: 46px;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 0 17.3px;
  border: 1px solid #919191;
  color: white;
  background-color: #fff;
}

.secureFieldLite {
  height: 23px;
  padding: 0;
  border: none;
  border-bottom: 1px solid #707685;
  border-radius: 0;
}

.secureFieldInvalid {
  border: 1px solid #bc4c47;
}

.secureFieldInvalidLite {
  border-bottom: 1px solid #bc4c47;
}

.secureFieldValid {
  border: 1px solid #a1c10c;
}

.secureFieldValidLite {
  border-bottom: 1px solid #a1c10c;
}

.secureField__inputContainer {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.secureField__actions {
  position: absolute;
  top: 0;
  left: 0;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 100%;
  padding-right: 16px;
  padding-left: 16px;
  pointer-events: none;
  -ms-flex-pack: end;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  align-items: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
}

.secureField__action {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 40px;
  height: 100%;
  padding: 12px 0 10px;
  pointer-events: auto;
  cursor: pointer;
  transition: color 200ms ease;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-transition: color 200ms ease;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row nowrap;
  justify-content: center;
  flex-flow: row nowrap;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
}

.secureField__action.secureField__actionCardIcon {
  width: 40px;
  height: 100%;
  padding: 0;
  pointer-events: none;
}

.secureField__actionCardWrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.secureField__cardIcon {
  position: absolute;
  top: 43%;
  right: 0;
  display: block;
  max-width: 100%;
  transform: translate3d(0, -50%, 0);
  -webkit-transform: translate3d(0, -50%, 0);
}

.labelError.labelError {
  color: #cb4242;
  margin-top: -7px;
  margin-bottom: 10px;
  font-size: 14px;
}

.paymentCardContainer {
  margin-bottom: 10px;
  border-bottom: 1px solid #e0e2e7;
  padding-bottom: 10px;
}

.paymentPromissoryContainer {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.paymentLabelContainer .paymentCustomCreditLabel {
  font-size: 14px !important;
  color: #284859;
  line-height: 24px;
  margin: 12px 0px;
  border-radius: 8px;
  box-shadow: 0px 3px 6px #0000000f;
  padding: 5px 28px;
  margin-bottom: 15px;
  cursor: initial;
}

.paymentLabelContainer .paymentCustomCreditLabel b {
  color: #1b998b;
}

.paymentCustomCreditLabelInfo {
  font-weight: bold;
  color: #1b998b;
}

.paymentCustomerCreditContainer .checkmark {
  top: 1.5px;
}

.cursorPointer {
  cursor: pointer;
}

.display {
  display: none;
}

.marginLeft.marginLeft {
  margin-left: 5px;
}

.marginBottom {
  margin-bottom: 12px;
}

.loadingContainer {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 992px) {
  .buyButtonContainer {
    position: fixed;
    padding: 14px;
    margin-top: 14px;
    box-shadow: inset 0px 3px 6px #0000000f;
    width: 30%;
    right: 0;
    bottom: 0;
    background: #ffffff 0% 0% no-repeat padding-box;
    z-index: 100;
  }
}

@media (min-width: 992px) {
  .container {
    margin-bottom: 35%;
  }
}

.summary {
  margin-bottom: 22%;
}

@media screen and (max-width: 792px) {
  .paymentMethodLiteContainer {
    padding-bottom: 70px;
  }
}

```