[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/Menu/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState } from 'react'
import { Button, Modal, Spinner } from 'vtex.styleguide'
import { messages, defineMessages, useIntl } from 'react-intl'

import { PayButtonMenu } from './PayButtonMenu'
import { ModalMenu } from './ModalMenu'
import { useStyleSettings } from '../../hooks'
import styles from './styles.css'

const messages = defineMessages({
  saveLabel: {
    id: 'checkoutless.button-save',
  },
  restoreLabel: {
    id: 'checkoutless.button-restore',
  },
  yesLabel: {
    id: 'checkoutless.button-yes',
  },
  cancelLabel: {
    id: 'checkoutless.button-cancel',
  },
  restoreConfirmationMessage: {
    id: 'checkoutless.styleSettings.menu-restore-confirmation-message',
  },
  updateConfirmationMessage: {
    id: 'checkoutless.styleSettings.menu-update-confirmation-message',
  },
  updateSuccessMessage: {
    id: 'checkoutless.styleSettings.success-update-styles',
  },
  restoreSuccessMessage: {
    id: 'checkoutless.styleSettings.success-restore-styles',
  },
})

export const Menu = () => {
  const {
    componentSelected,
    updateStyles,
    restoreStyles,
    setAlert,
    loadingStyles,
  } = useStyleSettings()

  const { formatMessage } = useIntl()
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [isLoadinConfirmBtn, setIsLoadinConfirmBtn] = useState(false)
  const [modalMessage, setModalMessage] = useState({
    title: {
      id: '',
    },
    description: {
      id: '',
    },
  })

  const handleCloseModal = () => setIsModalOpen(false)

  const handleOpenModal = (
    title: { id: string },
    description: { id: string }
  ) => {
    setModalMessage({ title, description })
    setIsModalOpen(true)
  }

  const handleUpdateStyles = async () => {
    setIsLoadinConfirmBtn(true)
    await updateStyles()
    setIsLoadinConfirmBtn(false)
    handleCloseModal()
    setAlert({
      message: messages.updateSuccessMessage,
      type: 'success',
    })
  }

  const handleRestoreStyles = async () => {
    setIsLoadinConfirmBtn(true)
    await restoreStyles()
    setIsLoadinConfirmBtn(false)
    handleCloseModal()
    setAlert({
      message: messages.restoreSuccessMessage,
      type: 'success',
    })
  }

  return (
    <div className={styles.menuContainer}>
      <div className={styles.settingsContainer}>
        {loadingStyles ? (
          <div className={styles.loadingContainer}>
            <Spinner />
          </div>
        ) : componentSelected === 'payButton' ? (
          <PayButtonMenu />
        ) : (
          <ModalMenu />
        )}
      </div>
      <div className={styles.buttonsContainer}>
        <div className="mb3">
          <Button
            variation="primary"
            onClick={() =>
              handleOpenModal(
                messages.saveLabel,
                messages.updateConfirmationMessage
              )
            }
            block
          >
            {formatMessage(messages.saveLabel)}
          </Button>
        </div>
        <div>
          <Button
            variation="secondary"
            onClick={() =>
              handleOpenModal(
                messages.restoreLabel,
                messages.restoreConfirmationMessage
              )
            }
            block
          >
            {formatMessage(messages.restoreLabel)}
          </Button>
          <Modal
            isOpen={isModalOpen}
            title={modalMessage.title.id && formatMessage(modalMessage.title)}
            responsiveFullScreen
            bottomBar={
              <div className="nowrap">
                <span className="mr4">
                  <Button variation="tertiary" onClick={handleCloseModal}>
                    {formatMessage(messages.cancelLabel)}
                  </Button>
                </span>
                <span>
                  <Button
                    variation="primary"
                    onClick={
                      modalMessage.title === messages.restoreLabel
                        ? handleRestoreStyles
                        : handleUpdateStyles
                    }
                    isLoading={isLoadinConfirmBtn}
                  >
                    {formatMessage(messages.yesLabel)}
                  </Button>
                </span>
              </div>
            }
            onClose={handleCloseModal}
          >
            <div className="flex flex-column flex-row-ns">
              {modalMessage.description.id && (
                <p>{formatMessage(modalMessage.description)}</p>
              )}
            </div>
          </Modal>
        </div>
      </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/components/Menu/styles.css from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```css
.menuContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.settingsContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 75vh;
  overflow-y: scroll;
}

.settingsContainer::-webkit-scrollbar {
  width: 2px;
}

.settingsContainer::-webkit-scrollbar-track {
  background: #f1f4f5;
}

.settingsContainer::-webkit-scrollbar-thumb {
  background: #c2c3c4;
  border-radius: 5px;
}

.buttonsContainer {
  height: 25vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0px -1px 0px rgba(227, 228, 230, 0.7);
  padding: 0px 14px 8px 14px;
}

.buttonsContainer div {
  width: 100%;
}

.loadingContainer {
  width: 100%;
  height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
```


[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/Menu/PayButtonMenu.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

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

import {
  ButtonSettings,
  FontSettings,
  NameSettings,
  RadioSettings,
} from './Rows'
import { usePayButtonMenu } from '../../hooks'

const messages = defineMessages({
  radioLabel: { id: 'checkoutless.styleSettings.menu-radio' },
  widthLabel: { id: 'checkoutless.styleSettings.menu-width' },
})

export const PayButtonMenu = () => {
  const {
    borderRadius,
    font,
    valueButton,
    // width,
    getColorStyle,
    handleBorderRadiusAction,
    handleButtonStyleAction,
    handleFontAction,
    handleNameAction,
    // handleWidthAction,
  } = usePayButtonMenu()

  return (
    <>
      <NameSettings value={valueButton} action={handleNameAction} />
      <FontSettings value={font} action={handleFontAction} />
      <RadioSettings
        label={messages.radioLabel}
        value={borderRadius}
        action={handleBorderRadiusAction}
      />
      {/* <RadioSettings
        label={messages.widthLabel}
        maxValue={999}
        value={width}
        action={handleWidthAction}
      /> */}
      <ButtonSettings
        getColorStyle={getColorStyle}
        action={handleButtonStyleAction}
      />
    </>
  )
}

```


[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/Menu/ModalMenu.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

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

import { RadioSettings } from './Rows/RadioSettings'
import { ButtonSettings } from './Rows/ButtonSettings'
import { FontSettings } from './Rows/FontSettings'
import { IconsSettings } from './Rows/IconsSettings'
import { BackgroundSettings } from './Rows/BackgroundSettings'
import { useModalMenu } from '../../hooks'

const messages = defineMessages({
  radioLabel: { id: 'checkoutless.styleSettings.menu-radio' },
})

export const ModalMenu = () => {
  const {
    font,
    iconsColor,
    borderRadius,
    backgroundColor,
    handleFontAction,
    handleIconsColorAction,
    handleBackgroundAction,
    handleBorderRadiusAction,
    getColorStyle,
    handleButtonStyleAction,
  } = useModalMenu()

  return (
    <>
      <FontSettings value={font} action={handleFontAction} />
      <IconsSettings color={iconsColor} action={handleIconsColorAction} />
      <BackgroundSettings
        color={backgroundColor}
        action={handleBackgroundAction}
      />
      <RadioSettings
        label={messages.radioLabel}
        value={borderRadius}
        action={handleBorderRadiusAction}
      />
      <ButtonSettings
        action={handleButtonStyleAction}
        getColorStyle={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/components/Preview/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

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

import { AlertMessage } from './AlertMessage'
import { Header } from './Header'
import { Body } from './Body'
import { useStyleSettings } from '../../hooks'
import styles from './styles.css'

export const Preview = () => {
  const { deviceSelected } = useStyleSettings()

  return (
    <div
      className={`${styles.previewContainer} ${
        deviceSelected === 'mobile' && styles.previewContainerMobile
      }`}
    >
      <PageBlock title={<FormattedMessage id="checkoutless.styleSettings" />}>
        <AlertMessage />
        <Header />
        <Body />
      </PageBlock>
    </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/components/Preview/styles.css from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```css
.previewContainer {
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-property: width;
  width: 100%;
}

.previewContainerMobile {
  display: flex;
  justify-content: center;
  max-width: 350px;
}

```


[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/Preview/AlertMessage.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Alert } from 'vtex.styleguide'
import { useIntl } from 'react-intl'

import { useStyleSettings } from '../../hooks'

export const AlertMessage = () => {
  const { alert, clearAlert } = useStyleSettings()
  const { formatMessage } = useIntl()

  return alert.message.id !== '' ? (
    <div className="mb5">
      <Alert type={alert.type} onClose={clearAlert}>
        {formatMessage(alert.message)}
      </Alert>
    </div>
  ) : null
}

```


[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/Menu/Rows/BackgroundSettings.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages, messages } from 'react-intl'

import { Row } from './Row'
import { ColorPicker } from './ColorPicker'

const messages = defineMessages({
  iconsLabel: { id: 'checkoutless.styleSettings.menu-background' },
  iconsColorLabel: { id: 'checkoutless.styleSettings.menu.background-color' },
})

interface Props {
  color: string
  action: (color: string) => void
}

export const BackgroundSettings = ({ color, action }: Props) => {
  return (
    <Row label={messages.iconsLabel}>
      <div style={{ paddingTop: 8 }}>
        <ColorPicker
          label={messages.iconsColorLabel}
          action={action}
          color={color}
        />
      </div>
    </Row>
  )
}

```


[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/Menu/Rows/NameSettings.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { ChangeEvent } from 'react'
import React from 'react'
import { Input } from 'vtex.styleguide'
import { defineMessages, messages, useIntl } from 'react-intl'

import { Row } from './Row'

const messages = defineMessages({
  nameLabel: { id: 'checkoutless.styleSettings.menu-name' },
  nameInputPlaceholder: {
    id: 'checkoutless.styleSettings.menu.button.input-placeholder',
  },
})

interface Props {
  value: string
  action: (args: string) => void
}

export const NameSettings = ({ value, action }: Props) => {
  const { formatMessage } = useIntl()

  return (
    <Row label={messages.nameLabel}>
      <Input
        placeholder={formatMessage(messages.nameInputPlaceholder)}
        value={value}
        onChange={(e: ChangeEvent<HTMLInputElement>) => action(e.target.value)}
        maxLength={32}
      />
    </Row>
  )
}

```


[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/Menu/Rows/IconsSettings.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages, messages } from 'react-intl'

import { Row } from './Row'
import { ColorPicker } from './ColorPicker'

const messages = defineMessages({
  iconsLabel: { id: 'checkoutless.styleSettings.menu-icons' },
  iconsColorLabel: { id: 'checkoutless.styleSettings.menu.icons-color' },
})

interface Props {
  color: string
  action: (color: string) => void
}

export const IconsSettings = ({ color, action }: Props) => {
  return (
    <Row label={messages.iconsLabel}>
      <div style={{ paddingTop: 8 }}>
        <ColorPicker
          label={messages.iconsColorLabel}
          color={color}
          action={action}
          position="bottom"
        />
      </div>
    </Row>
  )
}

```


[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/Menu/Rows/ButtonSettings.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState } from 'react'
import { Tabs, Tab } from 'vtex.styleguide'
import { defineMessages, messages } from 'react-intl'

import { Row } from './Row'
import { ColorStyles } from './ColorStyles'
import type { TypeColorStyle } from '../../../interfaces'

const messages = defineMessages({
  buttonLabel: { id: 'checkoutless.styleSettings.menu-button' },
})

interface Props {
  action: (type: TypeColorStyle, color: string) => void
  getColorStyle: (type: TypeColorStyle) => string
}

export const ButtonSettings = ({ getColorStyle, action }: Props) => {
  const [currentTab, setCurrentTab] = useState(1)

  return (
    <Row label={messages.buttonLabel}>
      <Tabs fullWidth>
        <Tab
          label="Normal"
          active={currentTab === 1}
          onClick={() => setCurrentTab(1)}
        >
          <ColorStyles
            key="normal"
            getColorStyle={getColorStyle}
            action={action}
            buttonStyle="normal"
          />
        </Tab>
        <Tab
          label="Hover"
          active={currentTab === 2}
          onClick={() => setCurrentTab(2)}
        >
          <ColorStyles
            key="hover"
            getColorStyle={getColorStyle}
            action={action}
            buttonStyle="hover"
          />
        </Tab>
      </Tabs>
    </Row>
  )
}

```


[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/Menu/Rows/index.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
export { ButtonSettings } from './ButtonSettings'
export { FontSettings } from './FontSettings'
export { NameSettings } from './NameSettings'
export { RadioSettings } from './RadioSettings'

```


[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/Menu/Rows/ColorStyles/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages, messages } from 'react-intl'

import type { TypeColorStyle } from '../../../../interfaces'
import { ColorPicker } from '../ColorPicker'
import styles from './styles.css'

const messages = defineMessages({
  textLabel: { id: 'checkoutless.styleSettings.menu.button.color-text' },
  outlineLabel: { id: 'checkoutless.styleSettings.menu.button.color-outline' },
  backgroundLabel: {
    id: 'checkoutless.styleSettings.menu.button.color-background',
  },
})

interface Props {
  action: (type: TypeColorStyle, color: string) => void
  getColorStyle: (type: TypeColorStyle) => string
  buttonStyle: 'normal' | 'hover'
}

export const ColorStyles = ({ buttonStyle, getColorStyle, action }: Props) => {
  const isNormal = buttonStyle === 'normal'
  const textType = isNormal ? 'normal_text' : 'hover_text'
  const backgroundType = isNormal ? 'normal_background' : 'hover_background'
  const outlineType = isNormal ? 'normal_outline' : 'hover_outline'

  return (
    <div>
      <div className={styles.colorPickerContainer}>
        <ColorPicker
          label={messages.textLabel}
          action={(color) => action(textType, color)}
          color={getColorStyle(textType)}
        />
      </div>
      <div className={styles.colorPickerContainer}>
        <ColorPicker
          label={messages.backgroundLabel}
          action={(color) => action(backgroundType, color)}
          color={getColorStyle(backgroundType)}
        />
      </div>
      <div className={styles.colorPickerContainer}>
        <ColorPicker
          label={messages.outlineLabel}
          action={(color) => action(outlineType, color)}
          color={getColorStyle(outlineType)}
        />
      </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/components/Menu/Rows/ColorStyles/styles.css from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```css
.colorPickerContainer {
  padding: 22px 0px 0px 0px;
}

```


[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/Menu/Rows/RadioSettings/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import type { ChangeEvent } from 'react'
import { Input, Slider } from 'vtex.styleguide'

import { Row } from '../Row'
import styles from './styles.css'

interface Props {
  label: { id: string }
  maxValue?: number
  value: number
  action: (args: number) => void
}

export const RadioSettings = ({
  label,
  maxValue = 99,
  value,
  action,
}: Props) => {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value ? parseInt(e.target.value, 10) : 0

    const left = Math.max(value || 0, 0)
    const right = Math.min(value || maxValue, maxValue)

    if (left > right) return
    action(val)
  }

  return (
    <Row label={label}>
      <div className={styles.radioContainer}>
        <div className={styles.sliderContainer}>
          <Slider
            onChange={(text: number[]) => action(text[0])}
            min={0}
            max={maxValue}
            step={1}
            defaultValues={[value]}
            values={[value]}
          />
        </div>

        <div className={styles.sliderInputContainer}>
          <Input id="input_radio" value={value} onChange={handleChange} />
          <label htmlFor="input_radio" className={styles.sliderInputLabel}>
            PX
          </label>
        </div>
      </div>
    </Row>
  )
}

```


[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/Menu/Rows/RadioSettings/styles.css from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```css
.radioContainer {
  display: flex;
}

.sliderContainer {
  width: calc(100% - 34px);
  padding: 0 0.5rem;
  margin: auto;
}

.sliderContainer div div label {
  display: none;
}

.sliderInputContainer {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  width: 50px;
}

.sliderInputContainer label {
  width: 50px;
}

.sliderInputContainer input {
  border-radius: 4px;
  border: 1px solid #e3e4e6;
  font-size: 12px;
  line-height: 20px;
  padding: 1px;
  text-align: end;
  width: 100%;
}

.sliderInputContainer div {
  border: none;
  height: auto;
}

.sliderInputLabel {
  margin: 0;
  padding: 0;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  position: relative;
  width: 28px !important;
}

```


[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/Menu/Rows/Row/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

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

import styles from './styles.css'

interface Props {
  label: { id: string }
  children: JSX.Element
}

export const Row = ({ label, children }: Props) => {
  const { formatMessage } = useIntl()

  return (
    <div className={styles.rowContainer}>
      <h4 className={styles.rowLabel}>{formatMessage(label)}</h4>
      <div className={styles.rowChildrenContainer}>{children}</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/components/Menu/Rows/Row/styles.css from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```css
.rowContainer {
  padding: 17.5px 14px 35px 14px;
  box-shadow: 0px -1px 0px rgba(227, 228, 230, 0.7);
}

.rowLabel {
  margin: 0;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #3F3F40;
}

.rowChildrenContainer {
  background: #ffffff;
  padding: 0;
  margin: 0;
}

```


[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/Menu/Rows/FontSettings/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { ChangeEvent } from 'react'
import React, { useState, useMemo } from 'react'
import { Button, Modal, Input } from 'vtex.styleguide'
import { defineMessages, messages, useIntl } from 'react-intl'

import { Dropdown } from './Dropdown'
import { fonts } from '../../../../constants'
import { Row } from '../Row'
import styles from './styles.css'

const messages = defineMessages({
  fontLabel: { id: 'checkoutless.styleSettings.menu-font' },
  advancedBtnLabel: { id: 'checkoutless.styleSettings.menu-font-advanced-btn' },
  advancedDescription: {
    id: 'checkoutless.styleSettings.menu-font-advanced-description',
  },
  selectBtnLabel: { id: 'checkoutless.button-select' },
})

interface Props {
  value: string
  action: (args: string) => void
}

const fontsExample = '"Gill Sans Extrabol", Helvetica, sans-serif'

export const FontSettings = ({ value, action }: Props) => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [advanceFont, setAdvanceFont] = useState('')

  const { formatMessage } = useIntl()

  const handleOpenModal = () => setIsModalOpen(true)
  const handleCloseModal = () => setIsModalOpen(false)

  const handleSetFont = () => {
    if (!advanceFont) return
    action(advanceFont)
    handleCloseModal()
  }

  const AdvancedButton = useMemo(() => {
    return (
      <div className={styles.advancedButtonContainer}>
        <Button
          onClick={handleOpenModal}
          variation="secondary"
          size="regular"
          block
        >
          {formatMessage(messages.advancedBtnLabel)}
        </Button>
      </div>
    )
  }, [formatMessage])

  const getFonts = (arrayFonts: string[]) =>
    arrayFonts.map((font, i) => ({
      label: font,
      onClick: () => action(font),
      disabled: i === 0,
    }))

  const options = [
    ...getFonts(fonts.sansSerifFamily),
    ...getFonts(fonts.serifFamily),
  ]

  return (
    <Row label={messages.fontLabel}>
      <>
        <div className={styles.actionMenuContainer}>
          <Dropdown options={options} button={AdvancedButton} value={value} />
        </div>
        <Modal
          title={formatMessage(messages.advancedBtnLabel)}
          centered
          isOpen={isModalOpen}
          onClose={handleCloseModal}
        >
          <div className={styles.modalBody}>
            <p> {formatMessage(messages.advancedDescription)}</p>
            <p
              className={`${styles.modalCode} t-code`}
            >{`{ font-family: ${fontsExample} }`}</p>
            <div className={styles.modalFrom}>
              <div className="mv4">
                <Input
                  value={advanceFont}
                  placeholder={`${fontsExample}`}
                  label="Font-Family"
                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
                    setAdvanceFont(e.target.value)
                  }
                />
              </div>

              <div className="mv4">
                <Button
                  variation="primary"
                  size="regular"
                  onClick={handleSetFont}
                >
                  {formatMessage(messages.selectBtnLabel)}
                </Button>
              </div>
            </div>
          </div>
        </Modal>
      </>
    </Row>
  )
}

```


[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/Menu/Rows/FontSettings/styles.css from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```css
.dropdownContainer {
  position: relative;
  max-width: 100%;
  text-overflow: ellipsis;
}

.advancedButtonContainer {
  width: 100%;
}

.dropdownInputContainer {
  background: #ffffff;
}

.dropdownInput {
  background: none;
  border: 2px solid #e3e4e6;
  border-radius: 4px;
  width: 100%;
  font-family: 'Fabriga';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  text-align: start;
  position: relative;
  z-index: 2;
  height: 40px;
  cursor: pointer;
}

.dropdownInput p {
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
  width: 90%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  word-break: break-all;
}

.dropdownInputIconContainer {
  position: absolute;
  z-index: 1;
  top: 35%;
  right: 10%;
}

.modalContainer {
  width: 100%;
  background: #ffffff;
  border: 2px solid #e3e4e6;
  box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: absolute;
  z-index: 4;
  margin-top: 2px;
  min-width: 200px;
}

.dropdownButtonContainer {
  padding: 10px 17.5px;
  border: 1px solid #e3e4e6;
}

.dropdownElementContainer {
  padding: 0;
  overflow-y: auto;
  max-height: 300px;
}

.dropdownElementContainer::-webkit-scrollbar {
  width: 2px;
}

.dropdownElementContainer::-webkit-scrollbar-track {
  background: #f1f4f5;
}

.dropdownElementContainer::-webkit-scrollbar-thumb {
  background: #c2c3c4;
  border-radius: 5px;
}

.dropdownElement {
  font-family: 'Fabriga';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  color: #585959;
  margin: 0;
}

.dropdownButton {
  background: none;
  border: 0;
  line-height: normal;
  font-family: 'Fabriga';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  width: 100%;
  padding: 12px 0 12px 22px;
  text-align: start;
}

.dropdownButton:hover {
  background: #f2f4f5;
}

.dropdownButton:disabled {
  background: none;
}

.dropdownButtonSelected {
  background: #e0e9ff;
}

.modalBody {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modalFrom {
  width: 60%;
}

.modalCode {
  background: #f2f2f1;
  padding: 1rem;
}

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

```


[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/Menu/Rows/FontSettings/Dropdown.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState } from 'react'
import { IconCaretDown } from 'vtex.styleguide'

import styles from './styles.css'

interface Option {
  label: string
  onClick: () => void
  disabled?: boolean
}

interface Props {
  options: Option[]
  button?: JSX.Element
  value: string
}

export const Dropdown = ({ options, button, value }: Props) => {
  const [showOptions, setShowOptions] = useState(false)

  const handleClick = (option: Option) => {
    if (option?.onClick) {
      option.onClick()
    }

    setShowOptions(!showOptions)
  }

  return (
    <div className={styles.dropdownContainer}>
      <div className={styles.dropdownInputContainer}>
        <button
          className={styles.dropdownInput}
          onClick={() => setShowOptions(!showOptions)}
          onBlur={() => setTimeout(() => setShowOptions(false), 200)}
        >
          <p>{value}</p>
        </button>
        <div
          className={`c-action-primary ${styles.dropdownInputIconContainer}`}
        >
          <IconCaretDown />
        </div>
      </div>

      {showOptions && (
        <div className={styles.modalContainer}>
          {button && (
            <div className={styles.dropdownButtonContainer}>{button}</div>
          )}

          <div className={styles.dropdownElementContainer}>
            {options.map((option, i) => (
              <div
                key={`${option.label}_${i}`}
                className={`${styles.dropdownElement} ${
                  value && styles.labelContainer
                }`}
              >
                <button
                  className={`${styles.dropdownButton} ${
                    value === option.label && styles.dropdownButtonSelected
                  } `}
                  disabled={option?.disabled}
                  onClick={() => handleClick(option)}
                >
                  {option.label}
                </button>
              </div>
            ))}
          </div>
        </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/components/Menu/Rows/ColorPicker/index.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, { useState, useEffect } from 'react'
import { useIntl } from 'react-intl'
import { ChromePicker } from 'react-color'

import styles from './styles.css'

interface Props {
  label: { id: string }
  color: string
  action: (color: string) => void
  position?: 'top' | 'bottom'
}

export const ColorPicker = ({
  label,
  color,
  action,
  position = 'top',
}: Props) => {
  const { formatMessage } = useIntl()
  const [currentColor, setCurrentColor] = useState<string>()
  const [showColorPicker, setShowColorPicker] = useState<boolean>(false)

  const handleChange = (e: { hex: string }) => {
    setCurrentColor(e.hex)
  }

  const handleChangeComplete = (e: { hex: string }) => {
    action(e.hex)
  }

  useEffect(() => {
    setCurrentColor(color)
  }, [color])

  return (
    <div className={styles.inputColorContainer}>
      <button
        className={styles.buttonColor}
        style={{ background: currentColor }}
        onClick={() => setShowColorPicker(true)}
      />
      {showColorPicker ? (
        <div
          className={`${styles.chromePickerContainer} ${
            position === 'top' ? styles.positionTop : styles.positionBottom
          } `}
        >
          <div
            className={styles.chromePickerFixed}
            onClick={() => setShowColorPicker(false)}
          />
          <ChromePicker
            color={currentColor}
            onChangeComplete={handleChangeComplete}
            onChange={handleChange}
            disableAlpha
          />
        </div>
      ) : null}
      <p className={styles.inputColorlabel}>{formatMessage(label)}</p>
    </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/components/Menu/Rows/ColorPicker/styles.css from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```css
.inputColorContainer {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  position: relative;
}

.buttonColor {
  width: 53px;
  height: 31px;
  border-radius: 3px;
  outline: none;
  border: none;
  box-shadow: 0px -1px 0px rgb(227 228 230 / 70%);
  position: relative;
  z-index: 2;
}

.chromePickerContainer {
  position: absolute;
  z-index: 3;
}

.positionTop {
  bottom: 37px;
}

.positionBottom {
  top: 35px;
}

.chromePickerFixed {
  position: fixed;
  inset: 0;
}

.inputColorlabel {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding: 0 0 0 18px;
}

```


[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/Preview/Body/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

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

import styles from './styles.css'
import { Pdp } from './Pdp'
import { useStyleSettings } from '../../../hooks'
import { KuikpayModal } from './KuikpayModal'
import '../../../../../../App.global.css'

export const Body = () => {
  const { loadingStyles, componentSelected, deviceSelected } =
    useStyleSettings()

  const showModal = componentSelected === 'modal'

  return (
    <div className={styles.bodyContainer}>
      {loadingStyles ? (
        <Spinner />
      ) : (
        <div
          style={
            showModal && deviceSelected === 'mobile'
              ? { position: 'relative', width: '450px', height: '70vh' }
              : { position: 'relative', width: '100%', height: '70vh' }
          }
        >
          {!showModal && <Pdp />}
          {showModal && <KuikpayModal />}
        </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/components/Preview/Body/KuikpayModal.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { KuikpayModalPreview } from 'kuikpay-sdk'

import { useKuikpayModal } from '../../../hooks'
import styles from './styles.css'

export const KuikpayModal = () => {
  const { isMobile, refModal } = useKuikpayModal()

  return (
    <div
      ref={refModal}
      className={`${styles.modalContainerDesktop} ${
        isMobile && styles.modalContainerMobile
      }`}
    >
      <KuikpayModalPreview />
    </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/components/Preview/Body/styles.css from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```css
.bodyContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vh;
}

.pdpContainerDesktop {
  display: grid;
  grid-template-areas: 'select image info';
  grid-template-columns: 62px 1fr 1fr;
}

.pdpContainerMobile {
  display: grid;
  grid-template-areas:
    'image'
    'info';
  grid-template-columns: 1fr;
}

.selectImageContainer {
  display: flex;
  grid-area: 'select';
  justify-content: center;
  width: 100%;
}

.selectImageContainer img {
  border-radius: 4px;
  border: 2px solid #134cd8;
  box-sizing: border-box;
  height: 58px;
  width: 58px;
}

.currentImgContainerDesktop {
  display: flex;
  grid-area: 'image';
  justify-content: center;
  width: 100%;
}

.currentImgContainerMobile {
  display: flex;
  justify-content: center;
}

.currentImgContainerMobile img {
  object-fit: cover;
  width: 350px;
}

.infoContainer {
  grid-area: 'info';
}

.infoContainer h5 {
  font-size: 16px;
  margin-bottom: 10px;
}

.infoContainer p {
  font-size: 14px;
  margin: 0;
  padding: 0;
}

.specificationContainer {
  margin-bottom: 10px;
}

.payButtonContainer {
  display: flex;
  height: 48px;
  justify-content: center;
  width: 100%;
}

.payButtonContainer a {
  height: 100%;
  width: 100%;
}

.payButtonContainer div {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.payButtonContainer div p span {
  font-size: 16px;
  font-weight: 300;
}

.modalContainerDesktop {
  border-radius: 5px;
  bottom: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.modalContainerMobile {
  width: 100%;
}

.modalPositionContainer {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow-y: scroll !important;
}

.modalCheckoutlessHeight {
  height: 100% !important;
  z-index: 1 !important;
}

.modalBuyButtonPosition {
  width: 100% !important;
  position: relative !important;
}

```


[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/Preview/Body/Pdp.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { KuikpayButtonPreview } from 'kuikpay-sdk'

import styles from './styles.css'
import { usePayButtonPreview } from '../../../hooks'

export const Pdp = () => {
  const { refPayButton, deviceSelected, value } = usePayButtonPreview()
  const isDesktop = deviceSelected === 'desktop'

  return (
    <div
      className={
        isDesktop ? styles.pdpContainerDesktop : styles.pdpContainerMobile
      }
    >
      {isDesktop && (
        <div className={styles.selectImageContainer}>
          <img
            src="https://personalinteractive.nizza.com/laptop-dorada.jpeg"
            alt="laptop-dorada"
          />
        </div>
      )}
      <div
        className={
          isDesktop
            ? styles.currentImgContainerDesktop
            : styles.currentImgContainerMobile
        }
      >
        <img
          src="https://personalinteractive.nizza.com/laptop-dorada.jpeg"
          alt="laptop-dorada"
        />
      </div>
      <div className={styles.infoContainer}>
        <h5>
          Computador Portátil Gaming 15.6 Intel® Core™ i5-9300H 8GB 256GB SSD
          GTX 1050
        </h5>

        <div className={styles.specificationContainer}>
          <p>Procesador</p>
          <p>Intel® Core™ i5-9300H</p>
        </div>

        <div className={styles.specificationContainer}>
          <p>Memoria del Sistema Ram</p>
          <p>8 GB</p>
        </div>

        <div className={styles.specificationContainer}>
          <p>Tamaño de Pantalla</p>
          <p>15.6 Pulgadas</p>
        </div>

        <div className={styles.payButtonContainer} ref={refPayButton}>
          <div>
            <KuikpayButtonPreview text={value} />
          </div>
        </div>
      </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/components/Preview/Header/index.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { ActionMenu, Divider } from 'vtex.styleguide'
import { useIntl, messages, defineMessages } from 'react-intl'

import DesktopIcon from '../../../../../assets/icons/desktop.svg'
import PhoneIcon from '../../../../../assets/icons/mobile.svg'
import styles from './styles.css'
import { useStyleSettings } from '../../../hooks'

const messages = defineMessages({
  modalLabel: { id: 'checkoutless.styleSettings.preview-modal' },
  buttonLabel: { id: 'checkoutless.styleSettings.preview-button' },
  buttonDesignLabel: { id: 'checkoutless.styleSettings.preview-button-design' },
  modalDesignLabel: { id: 'checkoutless.styleSettings.preview-modal-design' },
})

export const Header = () => {
  const { formatMessage } = useIntl()
  const {
    deviceSelected,
    componentSelected,
    setComponentSelected,
    setDeviceSelected,
  } = useStyleSettings()

  const options = [
    {
      label: formatMessage(messages.buttonDesignLabel),
      onClick: () => setComponentSelected('payButton'),
    },
    {
      label: formatMessage(messages.modalDesignLabel),
      onClick: () => setComponentSelected('modal'),
    },
  ]

  return (
    <div className={styles.header}>
      <div className={styles.title}>
        <ActionMenu
          label={formatMessage(
            componentSelected === 'payButton'
              ? messages.buttonLabel
              : messages.modalLabel
          )}
          align="left"
          buttonProps={{
            variation: 'tertiary',
          }}
          options={options}
        />
      </div>

      <div className={styles.devicesContainer}>
        <button
          data-selected={deviceSelected === 'mobile'}
          onClick={() => {
            setDeviceSelected('mobile')
          }}
        >
          <img src={PhoneIcon} alt="mobile" />
        </button>
        <button
          data-selected={deviceSelected === 'desktop'}
          onClick={() => {
            setDeviceSelected('desktop')
          }}
        >
          <img src={DesktopIcon} alt="desktop" />
        </button>
      </div>
      <div className="mv6">
        <Divider orientation="horizontal" />
      </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/components/Preview/Header/styles.css from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```css
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-bottom: 0.5em;
}

.title {
  flex: 5;
  display: flex;
  width: 100%;
}

.devicesContainer {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
}

.devicesContainer button {
  padding: unset;
  background: unset;
  border: unset;
  width: 42px;
  height: 42px;
  border-radius: 4px;
  cursor: pointer;
}

.devicesContainer button:hover {
  background: #eef3f7 0% 0% no-repeat padding-box;
}

.devicesContainer button[data-selected='true'] {
  background: #eef3f7 0% 0% no-repeat padding-box;
}
```


[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/context/StyleSettingsProvider.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React, { useCallback, useState, useEffect } from 'react'
import { useMutation, useQuery } from 'react-apollo'
import { messages, defineMessages } from 'react-intl'

import type {
  IStyleSettingsCtx,
  Device,
  CustomizableComponent,
  IStyleSettingsQuery,
  PayButtonStyles,
  ModalStyles,
  IAlert,
} from '../../interfaces'
import { StyleSettingsContext } from './styleSettingsContext'
import { useStyleSettingsReducer } from '../reducer/styleSettingsReducer'
import UPDATE_STYLES from '../../../../graphql/styles/updateStyles.graphql'
import GET_STYLES from '../../../../graphql/styles/getStyles.graphql'
import { defaultStyleSettingState } from '../../constants'

const messages = defineMessages({
  errorUpdateMessage: { id: 'checkoutless.styleSettings.error-update-styles' },
})

export const StyleSettingsProvider: FC = ({ children }) => {
  const [componentSelected, setComponentSelected] =
    useState<CustomizableComponent>('payButton')

  const [deviceSelected, setDeviceSelected] = useState<Device>('desktop')
  const [alert, setAlert] = useState<IAlert>({
    message: {
      id: '',
    },
    type: 'success',
  })

  const [state, dispatch] = useStyleSettingsReducer()
  const [updateStylesMutations] = useMutation(UPDATE_STYLES)
  const { loading, data } = useQuery(GET_STYLES)

  const saveStyles = async (
    button: PayButtonStyles,
    modal: ModalStyles,
    restore: boolean
  ) => {
    const variables = {
      buttonText: button.value,
      styles: JSON.stringify({
        button,
        modal,
      }),
      restore,
    }

    try {
      await updateStylesMutations({
        variables,
      })
    } catch (_error) {
      setAlert({
        message: messages.errorUpdateMessage,
        type: 'error',
      })
    }
  }

  const setStyles = useCallback(
    (button: PayButtonStyles, modal: ModalStyles) => {
      dispatch({ type: 'SET_PAYBUTTON_STYLES', args: { styles: button } })
      dispatch({ type: 'SET_MODAL_STYLES', args: { styles: modal } })
    },
    [dispatch]
  )

  const updateStyles = () =>
    saveStyles(state.buttonStyles, state.modalStyles, false)

  const restoreStyles = async () => {
    const { buttonStyles, modalStyles } = defaultStyleSettingState

    setStyles(buttonStyles, modalStyles)
    await saveStyles(buttonStyles, modalStyles, true)
  }

  const clearAlert = () =>
    setAlert({
      message: {
        id: '',
      },
      type: 'success',
    })

  useEffect(() => {
    if (loading || !data || !data?.getStyles?.styles) return
    const styles: IStyleSettingsQuery = JSON.parse(data.getStyles.styles)

    setStyles(styles.button, styles.modal)
  }, [data, dispatch, loading, setStyles])

  const context: IStyleSettingsCtx = {
    state,
    componentSelected,
    deviceSelected,
    alert,
    dispatch,
    setComponentSelected,
    setDeviceSelected,
    updateStyles,
    restoreStyles,
    setAlert,
    clearAlert,
    loadingStyles: loading,
  }

  return (
    <StyleSettingsContext.Provider value={context}>
      {children}
    </StyleSettingsContext.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-store-framework/react/admin/component/StyleSettings/hooks/context/index.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
export * from './StyleSettingsProvider'
export * from './styleSettingsContext'

```


[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/context/styleSettingsContext.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { createContext, useContext } from 'react'

import type { IStyleSettingsCtx } from '../../interfaces'
import { defaultStyleSettingState } from '../../constants'

export const styleSettingsCtxDefault: IStyleSettingsCtx = {
  componentSelected: 'payButton',
  deviceSelected: 'desktop',
  alert: {
    message: {
      id: '',
    },
    type: 'success',
  },
  state: defaultStyleSettingState,
  loadingStyles: true,
  setComponentSelected: () => null,
  setDeviceSelected: () => null,
  dispatch: () => null,
  updateStyles: async () => {},
  restoreStyles: async () => {},
  setAlert: () => null,
  clearAlert: () => null,
}

export const StyleSettingsContext = createContext<IStyleSettingsCtx>(
  styleSettingsCtxDefault
)
export const useStyleSettings = () => useContext(StyleSettingsContext)

```


[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/reducer/styleSettingsReducer.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useReducer } from 'react'

import { defaultStyleSettingState } from '../../constants'
import type { Actions, IStyleSettings } from '../../interfaces'
import { modalReducer } from './modalReducer'
import { payButtonReducer } from './payButtonReducer'

const reducer = (state: IStyleSettings, action: Actions): IStyleSettings => {
  return {
    buttonStyles: payButtonReducer(state.buttonStyles, action),
    modalStyles: modalReducer(state.modalStyles, action),
  }
}

function initReducer() {
  return {
    ...defaultStyleSettingState,
  }
}

export const useStyleSettingsReducer = () =>
  useReducer(reducer, {}, initReducer)

```


[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/reducer/payButtonReducer.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { Actions, PayButtonStyles } from '../../interfaces'

export const payButtonReducer = (
  state: PayButtonStyles,
  action: Actions
): PayButtonStyles => {
  switch (action.type) {
    case 'SET_PAYBUTTON_VALUE': {
      const { args } = action

      return {
        ...state,
        value: args.value,
      }
    }

    case 'SET_PAYBUTTON_FONT': {
      const { args } = action

      return {
        ...state,
        font: args.font,
      }
    }

    case 'SET_PAYBUTTON_RADIO': {
      const { args } = action

      return {
        ...state,
        borderRadius: args.borderRadius,
      }
    }

    case 'SET_PAYBUTTON_WIDTH': {
      const { args } = action

      return {
        ...state,
        width: args.width,
      }
    }

    case 'SET_PAYBUTTON_NORMAL_TEXT_COLOR': {
      const { args } = action
      const { normal } = state

      return {
        ...state,
        normal: {
          ...normal,
          textColor: args.color,
        },
      }
    }

    case 'SET_PAYBUTTON_NORMAL_BACKGROUND_COLOR': {
      const { args } = action
      const { normal } = state

      return {
        ...state,
        normal: {
          ...normal,
          backgroundColor: args.color,
        },
      }
    }

    case 'SET_PAYBUTTON_NORMAL_OUTLINE_COLOR': {
      const { args } = action
      const { normal } = state

      return {
        ...state,
        normal: {
          ...normal,
          outlineColor: args.color,
        },
      }
    }

    case 'SET_PAYBUTTON_HOVER_TEXT_COLOR': {
      const { args } = action
      const { hover } = state

      return {
        ...state,
        hover: {
          ...hover,
          textColor: args.color,
        },
      }
    }

    case 'SET_PAYBUTTON_HOVER_BACKGROUND_COLOR': {
      const { args } = action
      const { hover } = state

      return {
        ...state,
        hover: {
          ...hover,
          backgroundColor: args.color,
        },
      }
    }

    case 'SET_PAYBUTTON_HOVER_OUTLINE_COLOR': {
      const { args } = action
      const { hover } = state

      return {
        ...state,
        hover: {
          ...hover,
          outlineColor: args.color,
        },
      }
    }

    case 'SET_PAYBUTTON_STYLES': {
      const { args } = action

      return {
        ...state,
        ...args.styles,
      }
    }

    default:
      return state
  }
}

```


[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/reducer/modalReducer.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { Actions, ModalStyles } from '../../interfaces'

export const modalReducer = (
  state: ModalStyles,
  action: Actions
): ModalStyles => {
  switch (action.type) {
    case 'SET_MODAL_FONT': {
      const { args } = action

      return {
        ...state,
        font: args.font,
      }
    }

    case 'SET_MODAL_ICONS_COLOR': {
      const { args } = action
      const { icons } = state

      return {
        ...state,
        icons: {
          ...icons,
          color: args.iconsColor,
        },
      }
    }

    case 'SET_MODAL_BACKGROUND_COLOR': {
      const { args } = action

      return {
        ...state,
        backgroundColor: args.backgroundColor,
      }
    }

    case 'SET_MODAL_RADIO': {
      const { args } = action
      const { button } = state

      return {
        ...state,
        button: {
          ...button,
          borderRadius: args.borderRadiusBtn,
        },
      }
    }

    case 'SET_MODAL_BTN_NORMAL_TEXT_COLOR': {
      const { args } = action
      const { button } = state
      const { normal } = button

      return {
        ...state,
        button: {
          ...button,
          normal: {
            ...normal,
            textColor: args.color,
          },
        },
      }
    }

    case 'SET_MODAL_BTN_NORMAL_BACKGROUND_COLOR': {
      const { args } = action
      const { button } = state
      const { normal } = button

      return {
        ...state,
        button: {
          ...button,
          normal: {
            ...normal,
            backgroundColor: args.color,
          },
        },
      }
    }

    case 'SET_MODAL_BTN_NORMAL_OUTLINE_COLOR': {
      const { args } = action
      const { button } = state
      const { normal } = button

      return {
        ...state,
        button: {
          ...button,
          normal: {
            ...normal,
            outlineColor: args.color,
          },
        },
      }
    }

    case 'SET_MODAL_BTN_HOVER_TEXT_COLOR': {
      const { args } = action
      const { button } = state
      const { hover } = button

      return {
        ...state,
        button: {
          ...button,
          hover: {
            ...hover,
            textColor: args.color,
          },
        },
      }
    }

    case 'SET_MODAL_BTN_HOVER_BACKGROUND_COLOR': {
      const { args } = action
      const { button } = state
      const { hover } = button

      return {
        ...state,
        button: {
          ...button,
          hover: {
            ...hover,
            backgroundColor: args.color,
          },
        },
      }
    }

    case 'SET_MODAL_BTN_HOVER_OUTLINE_COLOR': {
      const { args } = action
      const { button } = state
      const { hover } = button

      return {
        ...state,
        button: {
          ...button,
          hover: {
            ...hover,
            outlineColor: args.color,
          },
        },
      }
    }

    case 'SET_MODAL_STYLES': {
      const { args } = action

      return {
        ...state,
        ...args.styles,
      }
    }

    default:
      return state
  }
}

```


[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/metrics/getConversionRate.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getConversionRate(
  $visualization: String
  $selectedFrom: String
  $selectedUntil: String
  $previousFrom: String
  $previousUntil: String
  $timezone: String
) {
  conversionRate(
    data: {
      filters: {
        visualization: $visualization
        selectedPeriod: { from: $selectedFrom, until: $selectedUntil }
        previousPeriod: { from: $previousFrom, until: $previousUntil }
      }
      timezone: $timezone
    }
  ) @context(provider: "kuikpay.my-checkout") {
    selectedPeriodCR {
      _id
      cr
    }
    currentDayCR
    currentMonthCR
    currentDayVariationCR
    previousPeriodCR {
      _id
      cr
    }
  }
}

```


[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/metrics/getCheckout.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getCheckout(
  $visualization: String
  $selectedFrom: String
  $selectedUntil: String
  $previousFrom: String
  $previousUntil: String
  $timezone: String
) {
  checkout(
    data: {
      filters: {
        visualization: $visualization
        selectedPeriod: { from: $selectedFrom, until: $selectedUntil }
        previousPeriod: { from: $previousFrom, until: $previousUntil }
      }
      timezone: $timezone
    }
  ) @context(provider: "kuikpay.my-checkout") {
    selectedPeriodCheckout {
      _id
      closedPurchases
    }
    currentDayCheckout
    currentMonthCheckout
    currentDayVariationCheckout
    previousPeriodCheckout {
      _id
      closedPurchases
    }
  }
}

```


[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/metrics/getTicketAverage.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getTicketAverage(
  $visualization: String
  $selectedFrom: String
  $selectedUntil: String
  $previousFrom: String
  $previousUntil: String
  $timezone: String
) {
  ticketAverage(
    data: {
      filters: {
        visualization: $visualization
        selectedPeriod: { from: $selectedFrom, until: $selectedUntil }
        previousPeriod: { from: $previousFrom, until: $previousUntil }
      }
      timezone: $timezone
    }
  ) @context(provider: "kuikpay.my-checkout") {
    selectedPeriodTicket {
      _id
      ticketAverage
    }
    currentDayTicket
    currentMonthTicket
    currentDayVariationTicket
    previousPeriodTicket {
      _id
      ticketAverage
    }
  }
}

```


[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/metrics/getButtonUses.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getButtonUses(
  $visualization: String
  $selectedFrom: String
  $selectedUntil: String
  $previousFrom: String
  $previousUntil: String
  $timezone: String
) {
  button(
    data: {
      filters: {
        visualization: $visualization
        selectedPeriod: { from: $selectedFrom, until: $selectedUntil }
        previousPeriod: { from: $previousFrom, until: $previousUntil }
      }
      timezone: $timezone
    }
  ) @context(provider: "kuikpay.my-checkout") {
    selectedPeriodButton {
      _id
      use
    }
    currentDayButton
    currentMonthButton
    currentDayVariationButton
    previousPeriodButton {
      _id
      use
    }
  }
}

```


[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/styles/getStyles.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

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

```


[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/styles/updateStyles.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation ($buttonText: String, $styles: String, $restore: Boolean)
@context(provider: "kuikpay.my-checkout") {
  updateStyles(styles: $styles, buttonText: $buttonText, restore: $restore) {
    account
  }
}

```


[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 slider-layout/messages/it-IT.json from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.slider-layout.title": "Slider-Layout",
  "admin/editor.slider-layout.infinite": "Infinito",
  "admin/editor.slider-layout.showNavigation": "Mostra frecce di navigazione",
  "admin/editor.slider-layout.showPaginationDots": "Mostra punti di impaginazione",
  "admin/editor.slider-layout.usePagination": "Utilizza impaginazione",
  "admin/editor.slider-layout.sliderFullWidth": "Larghezza massima",
  "admin/editor.slider-layout.sliderFullWidthDescription": "Controlla se le diapositive debbano occupare o meno l'intera larghezza disponibile, facendo in modo che le frecce appaiano su di esse.",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyMobileOnly": "Solo dispositivi mobili",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyDesktopOnly": "Solo desktop",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyAlways": "Sempre",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyNever": "Mai"
}

```


[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 slider-layout/messages/th-TH.json from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.slider-layout.title": "เค้าโครงตัวเลื่อน",
  "admin/editor.slider-layout.infinite": "ไม่จำกัด",
  "admin/editor.slider-layout.showNavigation": "แสดงลูกศรการนำทาง",
  "admin/editor.slider-layout.showPaginationDots": "แสดงจุดประการแบ่งหน้า",
  "admin/editor.slider-layout.usePagination": "ใช้การแบ่งหน้า",
  "admin/editor.slider-layout.sliderFullWidth": "ความกว้างเต็มที่",
  "admin/editor.slider-layout.sliderFullWidthDescription": "ควบคุมว่าควรแสดงสไลด์เต็มความกว้างที่ใช้ได้หรือไม่ โดยแสดงลูกศรที่ด้านบนสุดของสไลด์",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyMobileOnly": "เฉพาะอุปกรณ์เคลื่อนที่",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyDesktopOnly": "เฉพาะเดสก์ท็อป",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyAlways": "ทุกครั้ง",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyNever": "ไม่ต้อง"
}

```


[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 slider-layout/messages/ko-KR.json from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.slider-layout.title": "슬라이더 레이아웃",
  "admin/editor.slider-layout.infinite": "무한",
  "admin/editor.slider-layout.showNavigation": "탐색 화살표 표시",
  "admin/editor.slider-layout.showPaginationDots": "페이지 번호 점 표시",
  "admin/editor.slider-layout.usePagination": "페이지 번호 사용",
  "admin/editor.slider-layout.sliderFullWidth": "전체 넓이",
  "admin/editor.slider-layout.sliderFullWidthDescription": "슬라이드가 사용 가능한 전체 너비를 채워, 화살표가 맨 위에 나타나는지 여부를 제어합니다.",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyMobileOnly": "모바일 전용",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyDesktopOnly": "데스크톱 전용",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyAlways": "항상",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyNever": "안 함"
}

```


[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 slider-layout/messages/ja-JP.json from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.slider-layout.title": "スライダーレイアウト",
  "admin/editor.slider-layout.infinite": "上限なし",
  "admin/editor.slider-layout.showNavigation": "方向矢印を表示する",
  "admin/editor.slider-layout.showPaginationDots": "ページネーションドットを表示する",
  "admin/editor.slider-layout.usePagination": "ページネーションを使う",
  "admin/editor.slider-layout.sliderFullWidth": "全幅",
  "admin/editor.slider-layout.sliderFullWidthDescription": "スライドが最大幅を埋め、最上部に矢印が表示されるようにするかどうかを制御します。"
}

```


[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 slider-layout/messages/bg-BG.json from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.slider-layout.title": "Оформление на слайдера",
  "admin/editor.slider-layout.infinite": "Безкрайно",
  "admin/editor.slider-layout.showNavigation": "Показване на навигационни стрелки",
  "admin/editor.slider-layout.showPaginationDots": "Показване на точки за страниране",
  "admin/editor.slider-layout.usePagination": "Използване на страниране",
  "admin/editor.slider-layout.sliderFullWidth": "Пълна ширина",
  "admin/editor.slider-layout.sliderFullWidthDescription": "Контролира дали слайдовете да изпълват цялата налична ширина, а стрелките да се виждат върху тях.",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyMobileOnly": "Само за мобилни устройства",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyDesktopOnly": "Само за настолен компютър",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyAlways": "Винаги",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyNever": "Никога"
}

```


[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 slider-layout/messages/pt.json from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.slider-layout.title": "Layout do slider",
  "admin/editor.slider-layout.infinite": "Infinito",
  "admin/editor.slider-layout.showNavigation": "Mostrar setas para navegação",
  "admin/editor.slider-layout.showPaginationDots": "Mostrar indicadores de paginação",
  "admin/editor.slider-layout.usePagination": "Usar paginação",
  "admin/editor.slider-layout.sliderFullWidth": "Largura completa",
  "admin/editor.slider-layout.sliderFullWidthDescription": "Controla se os slides devem ou não ocupar toda a largura disponível, fazendo as setas aparecerem sobre eles.",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyMobileOnly": "Somente dispositivos móveis",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyDesktopOnly": "Somente desktop",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyAlways": "Sempre",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyNever": "Nunca",
  "store/slider-layout.sliderTrack.aria-label": "Slide atual é {slide} de {total}"
}

```


[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 slider-layout/messages/en.json from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.slider-layout.title": "Slider Layout",
  "admin/editor.slider-layout.infinite": "Infinite",
  "admin/editor.slider-layout.showNavigation": "Show navigation arrows",
  "admin/editor.slider-layout.showPaginationDots": "Show pagination dots",
  "admin/editor.slider-layout.usePagination": "Use pagination",
  "admin/editor.slider-layout.sliderFullWidth": "Full width",
  "admin/editor.slider-layout.sliderFullWidthDescription": "Controls whether the slides should fill the full available width, making the arrows appear on top of them.",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyMobileOnly": "Mobile Only",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyDesktopOnly": "Desktop Only",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyAlways": "Always",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyNever": "Never",
  "store/slider-layout.sliderTrack.aria-label": "Current slide is {slide} of {total}"
}

```


[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 slider-layout/messages/ro-RO.json from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.slider-layout.title": "Layout slider",
  "admin/editor.slider-layout.infinite": "Infinit",
  "admin/editor.slider-layout.showNavigation": "Arată săgețile de navigare",
  "admin/editor.slider-layout.showPaginationDots": "Arată punctele de paginație",
  "admin/editor.slider-layout.usePagination": "Folosește paginația",
  "admin/editor.slider-layout.sliderFullWidth": "Lățime completă",
  "admin/editor.slider-layout.sliderFullWidthDescription": "Controlează dacă slide-urile trebuie sau nu să ocupe întreaga lățime disponibilă, făcând ca săgețile să apară deasupra lor.",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyMobileOnly": "Doar pentru mobil",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyDesktopOnly": "Doar pentru desktop",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyAlways": "Mereu",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyNever": "Niciodată"
}

```


[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 slider-layout/messages/de-DE.json from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.slider-layout.title": "Slider Layout",
  "admin/editor.slider-layout.infinite": "Unendlich",
  "admin/editor.slider-layout.showNavigation": "Navigationspfeile anzeigen",
  "admin/editor.slider-layout.showPaginationDots": "Seitenumbruch-Punkte anzeigen",
  "admin/editor.slider-layout.usePagination": "Seitennavigation verwenden",
  "admin/editor.slider-layout.sliderFullWidth": "Volle Breite",
  "admin/editor.slider-layout.sliderFullWidthDescription": "Legt fest, ob die Diapositive die volle verfügbare Breite füllen sollen, so dass die Pfeile oben auf ihnen erscheinen.",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyMobileOnly": "Nur mobil",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyDesktopOnly": "Nur Desktop",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyAlways": "Immer",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyNever": "Niemals"
}

```


[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 slider-layout/messages/fr-FR.json from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.slider-layout.title": "Disposition du curseur",
  "admin/editor.slider-layout.infinite": "Infini",
  "admin/editor.slider-layout.showNavigation": "Afficher les flèches de navigation",
  "admin/editor.slider-layout.showPaginationDots": "Afficher les points de pagination",
  "admin/editor.slider-layout.usePagination": "Utiliser la pagination",
  "admin/editor.slider-layout.sliderFullWidth": "Largeur totale",
  "admin/editor.slider-layout.sliderFullWidthDescription": "Vérifie si les diapos doivent ou non remplir toute la largeur disponible, en faisant apparaître les flèches au-dessus d’elles.",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyMobileOnly": "Mobile uniquement",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyDesktopOnly": "Bureau uniquement",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyAlways": "Toujours",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyNever": "Jamais"
}

```


[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 slider-layout/messages/nl-NL.json from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.slider-layout.title": "Schuifregelaar layout",
  "admin/editor.slider-layout.infinite": "Oneindig",
  "admin/editor.slider-layout.showNavigation": "Toon navigatiepijlen",
  "admin/editor.slider-layout.showPaginationDots": "Toon pagineringstippen",
  "admin/editor.slider-layout.usePagination": "Gebruik paginering",
  "admin/editor.slider-layout.sliderFullWidth": "Volledige breedte",
  "admin/editor.slider-layout.sliderFullWidthDescription": "Bepaalt of de dia's de volledige beschikbare breedte moeten vullen, waardoor de pijlen erboven verschijnen.",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyMobileOnly": "Alleen mobiel",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyDesktopOnly": "Alleen desktop",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyAlways": "Altijd",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyNever": "Nooit"
}

```


[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 slider-layout/messages/es.json from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.slider-layout.title": "Layout del slider",
  "admin/editor.slider-layout.infinite": "Infinito",
  "admin/editor.slider-layout.showNavigation": "Mostrar flechas de navegación",
  "admin/editor.slider-layout.showPaginationDots": "Mostrar puntos de paginación",
  "admin/editor.slider-layout.usePagination": "Usar paginación",
  "admin/editor.slider-layout.sliderFullWidth": "Anchura completa",
  "admin/editor.slider-layout.sliderFullWidthDescription": "Controla si las diapositivas deben ocupar la anchura completa y hacer que las flechas desaparezcan encima de ellas.",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyMobileOnly": "Solo móvil",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyDesktopOnly": "Solo escritorio",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyAlways": "Siempre",
  "admin/editor.slider-layout.sliderNavigationAndPaginationPropertyNever": "Nunca"
}

```


[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 slider-layout/docs/README.md from the slider-layout VTEX app.

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/vtex-apps/slider-layout) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Slider Layout

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

Slider Layout is a flexible solution for building block sliders in VTEX Store Framework, such as a carousel component.

![](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-slider-layout-0.png)

> _To use the Slider layout as a substitute for the [Carousel app](https://github.com/vtex-apps/carousel), read the [Building a Carousel through lists and Slider Layout](https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-carousel-using-slider-layout) documentation._

## Google Analytics 4 Integration

Slider Layout enables you to integrate your component with [Google Analytics 4](https://developers.google.com/analytics/devguides/collection/ga4).
The integration happens through the [`GA4 view_promotion`](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#view_promotion) event, which is typically associated with the promotion banners carousel displayed by the Slider Layout.

By integrating with Google Analytics 4, you can set the `Product ID` and `Product Name`, and position of your promotion on [Site Editor](https://help.vtex.com/en/tutorial/site-editor-overview--299Dbeb9mFczUTyNQ9xPe1) to be shown on a Google Analytics dashboard.

To set this up, go to the VTEX Admin, access **Storefront > Site Editor**, and open the image settings of the internal promotion you want to track. These settings are displayed on the right side of the page.

![ga4-in-site-editor](https://vtexhelp.vtexassets.com/assets/docs/src/gtm-site-editor___bc52365aafad63deb5bfed1d74f307c0.png)

> For more information about managing your page content, read [Managing page and template content](https://help.vtex.com/en/tutorial/managing-page-and-template-content--3tMbx6HXy4Fy5r9EhboG37).

After setup, Google Analytics can track your internal promotions and generate reports of their views, clicks, click-through rate, conversions, and revenue.

## Configuration

1. Add the `slider-layout` app to your theme dependencies in the `manifest.json` file:

```json
"dependencies": {
  "vtex.slider-layout": "0.x"
}
```

Now, you can use all blocks exported by the `slider-layout` app. See the complete list below:

| Block name            | Description                                                                                |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `slider-layout`       | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Builds block sliders for your store through its `children` list blocks. |
| `slider-layout-group` | Enables you to keep a group of `slider-layout` blocks synched with each other. For more information about this, see the Advanced configuration section below.                                                        |

2. Add the `slider-layout` block to your template. For example:

```json
  "slider-layout#text-test": {
    "props": {
      "itemsPerPage": {
        "desktop": 1,
        "tablet": 1,
        "phone": 1
      },
      "infinite": true,
      "showNavigationArrows": "desktopOnly",
      "blockClass": "carousel"
    },
    "children": ["rich-text#1", "rich-text#2", "rich-text#3"]
  },

  "rich-text#1": {
    "props": {
      "text": "Test1"
    }
  },
  "rich-text#2": {
    "props": {
      "text": "Test2"
    }
  },
  "rich-text#3": {
    "props": {
      "text": "Test3"
    }
  },
```

| Prop name              | Type                | Description                                                                                | Default value                          |
| ---------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------- |
| `label`                | `string`            | `aria-label` attribute value to be used by the `<Slider/>` component when rendered. The `aria-label` value should explicitly tell users what the inspected HTML element does.                                                                                | `slider`                               |
| `showNavigationArrows` | `enum`              | Indicates when navigation arrows should be rendered. Possible values are: `mobileOnly`, `desktopOnly`, `always`, or `never`.                                                                                | `always`                               |
| `showPaginationDots`   | `enum`              | Indicates when pagination dots should be rendered. Possible values are: `mobileOnly`, `desktopOnly`, `always`, or `never`.                                                                                | `always`                               |
| `infinite`             | `boolean`           | Determines whether the slider should be infinite (`true`) or not (`false`). When this prop is set as `false`, the slider will have an explicit end for users.                                                                                | `false`                                |
| `usePagination`        | `boolean`           | Determines whether the slider should use slide pages (`true`) or not (`false`). When this prop is set as `false`, the slider will use smooth scrolling for slide navigation instead of arrows.                                                                                | `true`                                 |
| `itemsPerPage`         | `object`            | The number of slider items to be shown on each type of device. For more information about this, see the `itemsPerPage` object section below.                                                                                | `{ desktop: 5, tablet: 3, phone: 1 }`  |
| `navigationStep`       | `number` / `enum`   | The number of slider items that should be displayed when users click one of the slider arrows. It is also possible to set this prop value as `page`, meaning that the number of slider items to be displayed when one of the arrows is clicked is equal to the number of slider items set per page (in the `itemsPerPage` prop).                                                                                | `page`                                 |
| `slideTransition`      | `object`            | Controls the transition animation between slides based on [CSS attributes](https://developer.mozilla.org/en-US/docs/Web/CSS/transition). For more information about this, see the `slideTransition` object section below.                                                                                | `{ speed: 400, delay: 0, timing: '' }` |
| `autoplay`             | `object`            | Controls the autoplay feature behavior. For more information about this, see the `autoplay` object section below.                                                                                | `undefined`                            |
| `fullWidth`            | `boolean`           | Determines whether the slides should occupy the full page width, making the arrows appear on top of them (`true`) or not (`false`).                                                                                | `true`                                 |
| `arrowSize`            | `number` / `object` | Slider arrows size (height and width) in pixels. This is a responsive prop, which means you can pass to it an object with different values for each breakpoint (`desktop`, `mobile`, `tablet`, and `phone`).                                                                                | `25`                                   |
| `centerMode`           | `enum` / `object`   | Defines positioning of the slider elements on the screen. Possible values are: `center` (elements are centered, allowing users to see a peek of the previous and next slides), `to-the-left` (aligns elements to the left side, allowing users to see a peek of the next slide, but not the previous one), and `disabled` (disables the feature, rendering elements on the whole screen without showing a peek of the previous and next slides). Note: This is a responsive prop, which means you can pass to it an object with different values for each breakpoint (`desktop`, `mobile`, `tablet`, and `phone`). | `disabled`                             |
| `centerModeSlidesGap`  | `number`            | Number of pixels between slides when `centerMode` is set to `center` or `to-the-left`.                                                                                | `undefined`                            |

- **`itemsPerPage` object**

| Prop name | Type     | Description                                              | Default value |
| --------- | -------- | -------------------------------------------------------- | ------------- |
| `desktop` | `number` | The number of slides to be displayed on desktop devices. | `5`           |
| `tablet`  | `number` | The number of slides to be displayed on tablet devices.  | `3`           |
| `phone`   | `number` | The number of slides to be displayed on phone devices.   | `1`           |

- **`slideTransition` object**

| Prop name | Type     | Description                               | Default value |
| --------- | -------- | ----------------------------------------- | ------------- |
| `speed`   | `number` | Transition speed (in `ms`).               | `400`         |
| `delay`   | `number` | Delay between slide transition (in `ms`). | `0`           |
| `timing`  | `string` | Timing function.                          | `''`          |

- **`autoplay` object**

| Prop name     | Type      | Description                                                                                | Default value |
| ------------- | --------- | -------------------------------------------------------------------------------------------------------------- | ------------- |
| `timeout`     | `number`  | Timeout (in `ms`) between each slide.                                                                          | `undefined`   |
| `stopOnHover` | `boolean` | Determines whether the autoplay should stop when users are hovering over the slider (`true`) or not (`false`). | `undefined`   |

## Advanced configuration

The `slider-layout-group` block synchronizes the slides rendered by each `slider-layout` block declared in it.

Therefore, the `slider-layout-group` does not render any specific component on the store UI. It is really a logical block that only expects to receive a `children` block list containing the desired `slider-layout` blocks that should be rendered. For example:

```json
{
  "slider-layout-group#test": {
    "children": ["slider-layout#1", "slider-layout#2", "slider-layout#3"]
  }
}
```

Below, you can find a practical example using three `slider-layout` blocks inside of a `slider-layout-group`. Each `slider-layout` received three `rich-text` blocks as `children` to serve as individual slides:

![slider-layout-group demo](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-slider-layout-3.gif)

> ⚠ **\*All `slider-layout` blocks declared in the `slider-layout-group` must have the same configuration, meaning the same props and values**. Due to implementation rules, they can only differ in their `children` block list. Keep in mind that declaring `slider-layout` blocks with different configurations will result in unexpected behavior, leading to errors that are **not** supported by the VTEX Store Framework team.\*

## Customization

To apply CSS customizations to this and other blocks, follow the instructions given in the recipe on [Using CSS handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS handles               |
| ------------------------- |
| `paginationDot--isActive` |
| `paginationDot`           |
| `paginationDotsContainer` |
| `slide--firstVisible`     |
| `slide--hidden`           |
| `slide--lastVisible`      |
| `slide--visible`          |
| `slideChildrenContainer`  |
| `slide`                   |
| `sliderArrows`            |
| `sliderLayoutContainer`   |
| `sliderLeftArrow`         |
| `sliderRightArrow`        |
| `sliderTrackContainer`    |
| `sliderTrack`             |

<!-- DOCS-IGNORE:start -->

## Contributors ✨

Thanks goes to these wonderful people:

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!

<!-- DOCS-IGNORE:end -->

```