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

[User] Show me the implementation of mycheckout-sdk/src/Mocks/userDataPreview.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
export const userDataPreview = () => {
  const data: any = {
    isNew: false,
    loggedIn: false,
    clientProfileData: {
      id: '625ef14697f2b80f8e80e898',
      firstName: '***********',
      lastName: '****************',
      documentType: 'CC',
      document: '1110*****3',
      email: 'juan.galvis@vtex.com.br',
      phone: '3137*****3',
      completed: true,
      loadData: true,
      prefix: '+57',
      habeasData: true,
    },
    shippingData: {
      availableAddresses: [],
      selectedAddress: {
        addressId: '625ef15e422a50559e8efda5',
        addressType: 'residential',
        city: 'Bog*********** ',
        complement: '101',
        country: 'COL',
        geoCoordinates: { latitude: '', longitude: '' },
        neighborhood: 'Par********n',
        postalCode: '11001',
        receiverName: 'Jua*******s',
        state: '   ***********.',
        street: 'Tra*******************6',
        completed: true,
      },
      address: {},
      completed: true,
      addressAlternative: null,
    },
    items: [
      {
        uniqueId: '6D0BDD7B3A454940A449922D157A6FC0',
        id: '8',
        productId: '4',
        productRefId: '04-Suiza-Negro-flores',
        refId: '8',
        ean: null,
        name: 'Blusa Suiza Negro flores Talla S - Color Negro flores',
        skuName: 'Talla S - Color Negro flores',
        modalType: null,
        parentItemIndex: null,
        parentAssemblyBinding: null,
        assemblies: [],
        priceValidUntil: '2023-05-16T00:00:32Z',
        tax: 0,
        price: 58000,
        listPrice: 58000,
        manualPrice: null,
        manualPriceAppliedBy: null,
        sellingPrice: 58000,
        rewardValue: 0,
        isGift: false,
        additionalInfo: {
          dimension: null,
          brandName: 'Amalia',
          brandId: '2000000',
          offeringInfo: null,
          offeringType: null,
          offeringTypeId: null,
        },
        preSaleDate: null,
        productCategoryIds: '/1/2/',
        productCategories: { '1': 'Moda', '2': 'Blusas' },
        quantity: 1,
        seller: '1',
        sellerChain: ['1'],
        imageUrl:
          'http://amalia.vteximg.com.br/arquivos/ids/158065-300-360/04-suiza-flores_negra-1.jpg?v=637460854554700000',
        detailUrl: '/blusa-suiza-negro-flores/p',
        components: [],
        bundleItems: [],
        attachments: [],
        attachmentOfferings: [],
        offerings: [],
        priceTags: [],
        availability: 'available',
        measurementUnit: 'un',
        unitMultiplier: 1,
        manufacturerCode: null,
        priceDefinition: {
          calculatedSellingPrice: 5800000,
          total: 5800000,
          sellingPrices: [{ value: 5800000, quantity: 1 }],
        },
      },
      {
        uniqueId: '2AA04EFE998142C186A570532C87B84F',
        id: '4',
        productId: '2',
        productRefId: '02-Suecia-Rayas-colores',
        refId: '4',
        ean: null,
        name: 'Chaleco Suecia Rayas colores Talla XS/S - Color Rayas colores',
        skuName: 'Talla XS/S - Color Rayas colores',
        modalType: null,
        parentItemIndex: null,
        parentAssemblyBinding: null,
        assemblies: [],
        priceValidUntil: '2023-05-16T00:00:32Z',
        tax: 0,
        price: 69000,
        listPrice: 89000,
        manualPrice: null,
        manualPriceAppliedBy: null,
        sellingPrice: 34500,
        rewardValue: 0,
        isGift: false,
        additionalInfo: {
          dimension: null,
          brandName: 'Amalia',
          brandId: '2000000',
          offeringInfo: null,
          offeringType: null,
          offeringTypeId: null,
        },
        preSaleDate: null,
        productCategoryIds: '/1/5/',
        productCategories: { '1': 'Moda', '5': 'Chalecos' },
        quantity: 1,
        seller: '1',
        sellerChain: ['1'],
        imageUrl:
          'http://amalia.vteximg.com.br/arquivos/ids/158061-300-360/02-Suecia-Rayas-colores-1.jpg?v=637460854523970000',
        detailUrl: '/chaleco-suecia-rayas-colores/p',
        components: [],
        bundleItems: [],
        attachments: [],
        attachmentOfferings: [],
        offerings: [],
        priceTags: [],
        availability: 'available',
        measurementUnit: 'kg',
        unitMultiplier: 0.5,
        manufacturerCode: null,
        priceDefinition: {
          calculatedSellingPrice: 3450000,
          total: 3450000,
          sellingPrices: [{ value: 3450000, quantity: 1 }],
        },
      },
    ],
    value: 97500,
    totalizers: [
      { id: 'Items', name: 'Total de los items', value: 9250000 },
      { id: 'Shipping', name: 'Costo total del envío', value: 500000 },
    ],
    paymentData: {
      availablePaymentMethods: [],
      selectedPaymentMethod: null,
      paymentMethod: null,
      completed: false,
      bin: null,
      installmentOptions: [
        {
          paymentSystem: '1',
          bin: null,
          paymentName: null,
          paymentGroupName: null,
          value: 9750000,
          installments: [
            {
              count: 1,
              hasInterestRate: false,
              interestRate: 0,
              value: 9750000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 1,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 9750000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 2,
              hasInterestRate: false,
              interestRate: 0,
              value: 4875000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 2,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 4875000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 3,
              hasInterestRate: false,
              interestRate: 0,
              value: 3250000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 3,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 3250000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 4,
              hasInterestRate: false,
              interestRate: 0,
              value: 2437500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 4,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 2437500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 5,
              hasInterestRate: false,
              interestRate: 0,
              value: 1950000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 5,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1950000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 6,
              hasInterestRate: false,
              interestRate: 0,
              value: 1625000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 6,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1625000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 7,
              hasInterestRate: false,
              interestRate: 0,
              value: 1392900,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 7,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1392900,
                  total: 9750000,
                },
              ],
            },
            {
              count: 8,
              hasInterestRate: false,
              interestRate: 0,
              value: 1218800,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 8,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1218800,
                  total: 9750000,
                },
              ],
            },
            {
              count: 9,
              hasInterestRate: false,
              interestRate: 0,
              value: 1083400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 9,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1083400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 10,
              hasInterestRate: false,
              interestRate: 0,
              value: 975000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 10,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 975000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 11,
              hasInterestRate: false,
              interestRate: 0,
              value: 886400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 11,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 886400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 12,
              hasInterestRate: false,
              interestRate: 0,
              value: 812500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 12,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 812500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 13,
              hasInterestRate: false,
              interestRate: 0,
              value: 750000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 13,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 750000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 14,
              hasInterestRate: false,
              interestRate: 0,
              value: 696500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 14,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 696500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 15,
              hasInterestRate: false,
              interestRate: 0,
              value: 650000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 15,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 650000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 16,
              hasInterestRate: false,
              interestRate: 0,
              value: 609400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 16,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 609400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 17,
              hasInterestRate: false,
              interestRate: 0,
              value: 573600,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 17,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 573600,
                  total: 9750000,
                },
              ],
            },
            {
              count: 18,
              hasInterestRate: false,
              interestRate: 0,
              value: 541700,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 18,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 541700,
                  total: 9750000,
                },
              ],
            },
            {
              count: 19,
              hasInterestRate: false,
              interestRate: 0,
              value: 513200,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 19,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 513200,
                  total: 9750000,
                },
              ],
            },
            {
              count: 20,
              hasInterestRate: false,
              interestRate: 0,
              value: 487500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 20,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 487500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 21,
              hasInterestRate: false,
              interestRate: 0,
              value: 464300,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 21,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 464300,
                  total: 9750000,
                },
              ],
            },
            {
              count: 22,
              hasInterestRate: false,
              interestRate: 0,
              value: 443200,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 22,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 443200,
                  total: 9750000,
                },
              ],
            },
            {
              count: 23,
              hasInterestRate: false,
              interestRate: 0,
              value: 424000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 23,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 424000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 24,
              hasInterestRate: false,
              interestRate: 0,
              value: 406300,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 24,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 406300,
                  total: 9750000,
                },
              ],
            },
          ],
        },
        {
          paymentSystem: '2',
          bin: null,
          paymentName: null,
          paymentGroupName: null,
          value: 9750000,
          installments: [
            {
              count: 1,
              hasInterestRate: false,
              interestRate: 0,
              value: 9750000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 1,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 9750000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 2,
              hasInterestRate: false,
              interestRate: 0,
              value: 4875000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 2,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 4875000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 3,
              hasInterestRate: false,
              interestRate: 0,
              value: 3250000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 3,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 3250000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 4,
              hasInterestRate: false,
              interestRate: 0,
              value: 2437500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 4,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 2437500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 5,
              hasInterestRate: false,
              interestRate: 0,
              value: 1950000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 5,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1950000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 6,
              hasInterestRate: false,
              interestRate: 0,
              value: 1625000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 6,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1625000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 7,
              hasInterestRate: false,
              interestRate: 0,
              value: 1392900,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 7,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1392900,
                  total: 9750000,
                },
              ],
            },
            {
              count: 8,
              hasInterestRate: false,
              interestRate: 0,
              value: 1218800,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 8,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1218800,
                  total: 9750000,
                },
              ],
            },
            {
              count: 9,
              hasInterestRate: false,
              interestRate: 0,
              value: 1083400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 9,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1083400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 10,
              hasInterestRate: false,
              interestRate: 0,
              value: 975000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 10,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 975000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 11,
              hasInterestRate: false,
              interestRate: 0,
              value: 886400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 11,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 886400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 12,
              hasInterestRate: false,
              interestRate: 0,
              value: 812500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 12,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 812500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 13,
              hasInterestRate: false,
              interestRate: 0,
              value: 750000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 13,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 750000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 14,
              hasInterestRate: false,
              interestRate: 0,
              value: 696500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 14,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 696500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 15,
              hasInterestRate: false,
              interestRate: 0,
              value: 650000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 15,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 650000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 16,
              hasInterestRate: false,
              interestRate: 0,
              value: 609400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 16,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 609400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 17,
              hasInterestRate: false,
              interestRate: 0,
              value: 573600,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 17,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 573600,
                  total: 9750000,
                },
              ],
            },
            {
              count: 18,
              hasInterestRate: false,
              interestRate: 0,
              value: 541700,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 18,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 541700,
                  total: 9750000,
                },
              ],
            },
            {
              count: 19,
              hasInterestRate: false,
              interestRate: 0,
              value: 513200,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 19,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 513200,
                  total: 9750000,
                },
              ],
            },
            {
              count: 20,
              hasInterestRate: false,
              interestRate: 0,
              value: 487500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 20,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 487500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 21,
              hasInterestRate: false,
              interestRate: 0,
              value: 464300,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 21,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 464300,
                  total: 9750000,
                },
              ],
            },
            {
              count: 22,
              hasInterestRate: false,
              interestRate: 0,
              value: 443200,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 22,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 443200,
                  total: 9750000,
                },
              ],
            },
            {
              count: 23,
              hasInterestRate: false,
              interestRate: 0,
              value: 424000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 23,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 424000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 24,
              hasInterestRate: false,
              interestRate: 0,
              value: 406300,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 24,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 406300,
                  total: 9750000,
                },
              ],
            },
          ],
        },
        {
          paymentSystem: '3',
          bin: null,
          paymentName: null,
          paymentGroupName: null,
          value: 9750000,
          installments: [
            {
              count: 1,
              hasInterestRate: false,
              interestRate: 0,
              value: 9750000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 1,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 9750000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 2,
              hasInterestRate: false,
              interestRate: 0,
              value: 4875000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 2,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 4875000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 3,
              hasInterestRate: false,
              interestRate: 0,
              value: 3250000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 3,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 3250000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 4,
              hasInterestRate: false,
              interestRate: 0,
              value: 2437500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 4,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 2437500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 5,
              hasInterestRate: false,
              interestRate: 0,
              value: 1950000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 5,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1950000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 6,
              hasInterestRate: false,
              interestRate: 0,
              value: 1625000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 6,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1625000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 7,
              hasInterestRate: false,
              interestRate: 0,
              value: 1392900,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 7,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1392900,
                  total: 9750000,
                },
              ],
            },
            {
              count: 8,
              hasInterestRate: false,
              interestRate: 0,
              value: 1218800,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 8,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1218800,
                  total: 9750000,
                },
              ],
            },
            {
              count: 9,
              hasInterestRate: false,
              interestRate: 0,
              value: 1083400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 9,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1083400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 10,
              hasInterestRate: false,
              interestRate: 0,
              value: 975000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 10,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 975000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 11,
              hasInterestRate: false,
              interestRate: 0,
              value: 886400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 11,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 886400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 12,
              hasInterestRate: false,
              interestRate: 0,
              value: 812500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 12,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 812500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 13,
              hasInterestRate: false,
              interestRate: 0,
              value: 750000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 13,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 750000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 14,
              hasInterestRate: false,
              interestRate: 0,
              value: 696500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 14,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 696500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 15,
              hasInterestRate: false,
              interestRate: 0,
              value: 650000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 15,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 650000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 16,
              hasInterestRate: false,
              interestRate: 0,
              value: 609400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 16,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 609400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 17,
              hasInterestRate: false,
              interestRate: 0,
              value: 573600,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 17,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 573600,
                  total: 9750000,
                },
              ],
            },
            {
              count: 18,
              hasInterestRate: false,
              interestRate: 0,
              value: 541700,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 18,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 541700,
                  total: 9750000,
                },
              ],
            },
            {
              count: 19,
              hasInterestRate: false,
              interestRate: 0,
              value: 513200,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 19,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 513200,
                  total: 9750000,
                },
              ],
            },
            {
              count: 20,
              hasInterestRate: false,
              interestRate: 0,
              value: 487500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 20,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 487500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 21,
              hasInterestRate: false,
              interestRate: 0,
              value: 464300,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 21,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 464300,
                  total: 9750000,
                },
              ],
            },
            {
              count: 22,
              hasInterestRate: false,
              interestRate: 0,
              value: 443200,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 22,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 443200,
                  total: 9750000,
                },
              ],
            },
            {
              count: 23,
              hasInterestRate: false,
              interestRate: 0,
              value: 424000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 23,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 424000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 24,
              hasInterestRate: false,
              interestRate: 0,
              value: 406300,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 24,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 406300,
                  total: 9750000,
                },
              ],
            },
          ],
        },
        {
          paymentSystem: '4',
          bin: null,
          paymentName: null,
          paymentGroupName: null,
          value: 9750000,
          installments: [
            {
              count: 1,
              hasInterestRate: false,
              interestRate: 0,
              value: 9750000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 1,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 9750000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 2,
              hasInterestRate: false,
              interestRate: 0,
              value: 4875000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 2,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 4875000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 3,
              hasInterestRate: false,
              interestRate: 0,
              value: 3250000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 3,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 3250000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 4,
              hasInterestRate: false,
              interestRate: 0,
              value: 2437500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 4,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 2437500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 5,
              hasInterestRate: false,
              interestRate: 0,
              value: 1950000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 5,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1950000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 6,
              hasInterestRate: false,
              interestRate: 0,
              value: 1625000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 6,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1625000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 7,
              hasInterestRate: false,
              interestRate: 0,
              value: 1392900,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 7,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1392900,
                  total: 9750000,
                },
              ],
            },
            {
              count: 8,
              hasInterestRate: false,
              interestRate: 0,
              value: 1218800,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 8,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1218800,
                  total: 9750000,
                },
              ],
            },
            {
              count: 9,
              hasInterestRate: false,
              interestRate: 0,
              value: 1083400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 9,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1083400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 10,
              hasInterestRate: false,
              interestRate: 0,
              value: 975000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 10,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 975000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 11,
              hasInterestRate: false,
              interestRate: 0,
              value: 886400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 11,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 886400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 12,
              hasInterestRate: false,
              interestRate: 0,
              value: 812500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 12,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 812500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 13,
              hasInterestRate: false,
              interestRate: 0,
              value: 750000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 13,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 750000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 14,
              hasInterestRate: false,
              interestRate: 0,
              value: 696500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 14,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 696500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 15,
              hasInterestRate: false,
              interestRate: 0,
              value: 650000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 15,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 650000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 16,
              hasInterestRate: false,
              interestRate: 0,
              value: 609400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 16,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 609400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 17,
              hasInterestRate: false,
              interestRate: 0,
              value: 573600,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 17,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 573600,
                  total: 9750000,
                },
              ],
            },
            {
              count: 18,
              hasInterestRate: false,
              interestRate: 0,
              value: 541700,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 18,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 541700,
                  total: 9750000,
                },
              ],
            },
            {
              count: 19,
              hasInterestRate: false,
              interestRate: 0,
              value: 513200,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 19,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 513200,
                  total: 9750000,
                },
              ],
            },
            {
              count: 20,
              hasInterestRate: false,
              interestRate: 0,
              value: 487500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 20,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 487500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 21,
              hasInterestRate: false,
              interestRate: 0,
              value: 464300,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 21,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 464300,
                  total: 9750000,
                },
              ],
            },
            {
              count: 22,
              hasInterestRate: false,
              interestRate: 0,
              value: 443200,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 22,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 443200,
                  total: 9750000,
                },
              ],
            },
            {
              count: 23,
              hasInterestRate: false,
              interestRate: 0,
              value: 424000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 23,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 424000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 24,
              hasInterestRate: false,
              interestRate: 0,
              value: 406300,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 24,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 406300,
                  total: 9750000,
                },
              ],
            },
          ],
        },
        {
          paymentSystem: '201',
          bin: null,
          paymentName: null,
          paymentGroupName: null,
          value: 9750000,
          installments: [
            {
              count: 1,
              hasInterestRate: false,
              interestRate: 0,
              value: 9750000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 1,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 9750000,
                  total: 9750000,
                },
              ],
            },
          ],
        },
        {
          paymentSystem: '206',
          bin: null,
          paymentName: null,
          paymentGroupName: null,
          value: 9750000,
          installments: [
            {
              count: 1,
              hasInterestRate: false,
              interestRate: 0,
              value: 9750000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 1,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 9750000,
                  total: 9750000,
                },
              ],
            },
          ],
        },
        {
          paymentSystem: '2',
          bin: '411111',
          paymentName: null,
          paymentGroupName: null,
          value: 9750000,
          installments: [
            {
              count: 1,
              hasInterestRate: false,
              interestRate: 0,
              value: 9750000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 1,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 9750000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 2,
              hasInterestRate: false,
              interestRate: 0,
              value: 4875000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 2,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 4875000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 3,
              hasInterestRate: false,
              interestRate: 0,
              value: 3250000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 3,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 3250000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 4,
              hasInterestRate: false,
              interestRate: 0,
              value: 2437500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 4,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 2437500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 5,
              hasInterestRate: false,
              interestRate: 0,
              value: 1950000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 5,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1950000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 6,
              hasInterestRate: false,
              interestRate: 0,
              value: 1625000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 6,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1625000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 7,
              hasInterestRate: false,
              interestRate: 0,
              value: 1392900,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 7,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1392900,
                  total: 9750000,
                },
              ],
            },
            {
              count: 8,
              hasInterestRate: false,
              interestRate: 0,
              value: 1218800,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 8,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1218800,
                  total: 9750000,
                },
              ],
            },
            {
              count: 9,
              hasInterestRate: false,
              interestRate: 0,
              value: 1083400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 9,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 1083400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 10,
              hasInterestRate: false,
              interestRate: 0,
              value: 975000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 10,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 975000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 11,
              hasInterestRate: false,
              interestRate: 0,
              value: 886400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 11,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 886400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 12,
              hasInterestRate: false,
              interestRate: 0,
              value: 812500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 12,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 812500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 13,
              hasInterestRate: false,
              interestRate: 0,
              value: 750000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 13,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 750000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 14,
              hasInterestRate: false,
              interestRate: 0,
              value: 696500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 14,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 696500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 15,
              hasInterestRate: false,
              interestRate: 0,
              value: 650000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 15,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 650000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 16,
              hasInterestRate: false,
              interestRate: 0,
              value: 609400,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 16,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 609400,
                  total: 9750000,
                },
              ],
            },
            {
              count: 17,
              hasInterestRate: false,
              interestRate: 0,
              value: 573600,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 17,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 573600,
                  total: 9750000,
                },
              ],
            },
            {
              count: 18,
              hasInterestRate: false,
              interestRate: 0,
              value: 541700,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 18,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 541700,
                  total: 9750000,
                },
              ],
            },
            {
              count: 19,
              hasInterestRate: false,
              interestRate: 0,
              value: 513200,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 19,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 513200,
                  total: 9750000,
                },
              ],
            },
            {
              count: 20,
              hasInterestRate: false,
              interestRate: 0,
              value: 487500,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 20,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 487500,
                  total: 9750000,
                },
              ],
            },
            {
              count: 21,
              hasInterestRate: false,
              interestRate: 0,
              value: 464300,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 21,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 464300,
                  total: 9750000,
                },
              ],
            },
            {
              count: 22,
              hasInterestRate: false,
              interestRate: 0,
              value: 443200,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 22,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 443200,
                  total: 9750000,
                },
              ],
            },
            {
              count: 23,
              hasInterestRate: false,
              interestRate: 0,
              value: 424000,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 23,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 424000,
                  total: 9750000,
                },
              ],
            },
            {
              count: 24,
              hasInterestRate: false,
              interestRate: 0,
              value: 406300,
              total: 9750000,
              sellerMerchantInstallments: [
                {
                  id: 'AMALIA',
                  count: 24,
                  hasInterestRate: false,
                  interestRate: 0,
                  value: 406300,
                  total: 9750000,
                },
              ],
            },
          ],
        },
      ],
      loadingPayment: true,
      otherAvailablePaymentMethods: [
        {
          franchise: 'Visa',
          id: '7339A0C8664F49148335AB60915016AC',
          number: '1111',
          paymentMethod: 'tc',
          bin: '411111',
          origin: 'store',
        },
      ],
    },
    logisticsInfo: [],
    slas: { delivery: [], 'pickup-in-point': [], packages: [] },
    isEdit: false,
    isNewInfo: false,
    userLocation: false,
    isChangeEmail: false,
    changeLogistics: [],
    theme: '',
    habeasData: true,
    messages: [],
    marketingData: { coupon: null },
    customData: null,
    subtotalExcludePrice: { bagPrice: 0, costServicePrice: 0 },
    totalOfferings: 0,
    liteHeader: false,
    isProfileDetail: false,
  }

  return data
}

```


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

[User] Show me the implementation of mycheckout-sdk/src/Mocks/accountPrieview.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
export const accountPrieview = () => {
  const data = {
    accounts: {
      __typename: 'kuikpay_mycheckout_0_0_5_Accounts',
      cvcRequired: true,
      paymentSystem: null || '',
      buttonMessage:
        'Compra *Fácil y Rápido* con American Express, Visa, Dinners y Mastercard tes',
      PaymentMethod: [
        {
          __typename: 'kuikpay_mycheckout_0_0_5_PaymentsMethods',
          id: '61e98730b8b6ddc2a6bbc1db',
          type: 'store',
          isActive: true,
          paymentMethodName: '3',
          accountName: 'amalia',
        },
        {
          __typename: 'kuikpay_mycheckout_0_0_5_PaymentsMethods',
          id: '61e98730b8b6ddc2a6bbc1d5',
          type: 'store',
          isActive: true,
          paymentMethodName: '201',
          accountName: 'amalia',
        },
        {
          __typename: 'kuikpay_mycheckout_0_0_5_PaymentsMethods',
          id: '61e98730b8b6ddc2a6bbc1d3',
          type: 'store',
          isActive: true,
          paymentMethodName: '2',
          accountName: 'amalia',
        },
        {
          __typename: 'kuikpay_mycheckout_0_0_5_PaymentsMethods',
          id: '61e98730b8b6ddc2a6bbc1cf',
          type: 'store',
          isActive: true,
          paymentMethodName: '4',
          accountName: 'amalia',
        },
        {
          __typename: 'kuikpay_mycheckout_0_0_5_PaymentsMethods',
          id: '61e98730b8b6ddc2a6bbc1cc',
          type: 'own',
          isActive: true,
          paymentMethodName: 'Orion',
          accountName: 'amalia',
        },
        {
          __typename: 'kuikpay_mycheckout_0_0_5_PaymentsMethods',
          id: '61e98730b8b6ddc2a6bbc1d8',
          type: 'store',
          isActive: true,
          paymentMethodName: '1',
          accountName: 'amalia',
        },
        {
          __typename: 'kuikpay_mycheckout_0_0_5_PaymentsMethods',
          id: 'd30d888b-b69b-4be7-ba97-6b4733a57676',
          type: 'store',
          isActive: false,
          paymentMethodName: '201',
          accountName: 'amalia',
        },
      ],
      isConfigured: true,
      visualization: [0],
    },
  }

  return { data }
}

```


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

[User] Show me the implementation of mycheckout-sdk/src/contexts/UserDataProvider.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import type {
  Address,
  Item,
  Totalizer,
  OrderForm,
  ClientProfileData,
  PaymentMethod,
  LogisticsInfo,
  SlaSummary,
  Sla,
  PaymentData,
  ChangeLogistics,
  Message,
  MarketingData,
  InstallmentOption,
  RatesAndBenefitsData,
  CustomSubTotalItems,
} from '../interfaces'

interface State {
  isNew: boolean
  // user is athenticated
  loggedIn: boolean
  clientProfileData: ClientProfileData
  shippingData: ShippingData
  items: Item[]
  value: number
  totalizers: Totalizer[]
  paymentData: PaymentData
  logisticsInfo: LogisticsInfo[]
  slas: SlaSummary
  // Determine if the user is editing
  isEdit: boolean
  isNewInfo: boolean
  changeLogistics: ChangeLogistics[]
  theme: string // deprecated
  // User accept to use browser geolocation
  userLocation: boolean
  // If user go to emailForm it validate to delete cookies
  isChangeEmail: boolean
  // Store if the user accept terms
  habeasData: boolean
  storeTermsAndConditions: boolean
  customData?: unknown
  // Messages from orderForm
  messages: Message[]
  marketingData: MarketingData
  subtotalExcludePrice: SubtotalExcludePrice
  totalOfferings: number
  liteHeader: boolean // deprecated property
  isProfileDetail: boolean
  ratesAndBenefitsData: RatesAndBenefitsData
  // Exito: Show totals for bags
  customSubTotalItems?: CustomSubTotalItems[]
  itemsOrderForm: Item[]
}

interface ShippingData {
  availableAddresses?: Address[] | null
  selectedAddress?: Address | null
  address?: Address | null
  completed?: boolean
  addressAlternative?: Address | null
}

interface SubtotalExcludePrice {
  costServicePrice?: number
}

type Action =
  | {
      type: 'SET_ORDER_FORM'
      args: OrderForm
    }
  | {
      type: 'SET_EMAIL'
      args: { email: string; loadData?: boolean }
    }
  | {
      type: 'SET_USER_DATA'
      args: {
        clientProfileData: ClientProfileData
        shippingData: ShippingData
        paymentData: PaymentData
      }
    }
  | {
      type: 'SET_CLIENT_DATA'
      args: { clientProfileData: ClientProfileData }
    }
  | {
      type: 'SET_CLIENT_AND_SHIPPING_DATA'
      args: { clientProfileData: ClientProfileData; shippingData: ShippingData }
    }
  | {
      type: 'SET_SHIPPING_DATA'
      args: {
        shippingData: ShippingData
      }
    }
  | {
      type: 'SET_ADDRESS'
      args: Address
    }
  | {
      type: 'SET_SELECTED_ADDRESS'
      args: Address
    }
  | {
      type: 'SET_ITEMS'
      args: Item[]
    }
  | {
      type: 'SET_IS_NEW'
      args: { isNew: boolean }
    }
  | {
      type: 'SET_TOTALIZERS'
      args: Totalizer[]
    }
  | {
      type: 'SET_VALUE'
      args: number
    }
  | {
      type: 'SET_PAYMENT_DATA'
      args: {
        paymentData: PaymentData
      }
    }
  | {
      type: 'SET_PAYMENT_SYSTEMS'
      args: string
    }
  | {
      type: 'SET_SELECTED_PAYMENT'
      args: PaymentMethod
    }
  | {
      type: 'SET_INSTALLMENTS'
      args: InstallmentOption[]
    }
  | {
      type: 'SET_LOGISTICS_INFO'
      args: LogisticsInfo[]
    }
  | {
      type: 'SET_SLAS'
      args: SlaSummary
    }
  | {
      type: 'SET_NEW_USER'
      args: { email: string; loadData?: boolean }
    }
  | {
      type: 'SET_CHANGE_INFO'
      args: {
        isEdit: boolean
        isNewInfo: boolean
        userLocation: boolean
        isChangeEmail: boolean
      }
    }
  | {
      type: 'SET_CHANGE_LOGISTICS'
      args: ChangeLogistics[]
    }
  | {
      type: 'SET_OTHER_AVAILABLE_PAYMENTS'
      args: PaymentMethod[]
    }
  | {
      type: 'SET_THEME'
      args: string
    }
  | {
      type: 'SET_HABEAS_DATA'
      args: { habeasData: boolean }
    }
  | {
      type: 'SET_STORE_TERMS_AND_CONDITIONS'
      args: { storeTermsAndConditions: boolean }
    }
  | {
      type: 'SET_BIN'
      args: string
    }
  | {
      type: 'SET_DUES'
      args: string
    }
  | {
      type: 'SET_CUSTOM_DATA'
      args: unknown
    }
  | {
      type: 'SET_ADDRESS_ALTERNATIVE'
      args: Address
    }
  | {
      type: 'SET_OFFERINGS_PRICE'
      args: number
    }
  | {
      type: 'SET_LITEVIEW_HEADER'
      args: boolean
    }
  | {
      type: 'SET_PROFILE_DETAIL'
      args: boolean
    }
  | {
      type: 'SET_BENEFITS'
      args: {
        items: Item[]
        ratesAndBenefitsData: RatesAndBenefitsData
      }
    }
  | {
      type: 'SET_LOADING_PAYMENT'
      args: boolean
    }
  | {
      type: 'SET_TEMPORAL_PAYMENT_SYSTEM'
      args: string
    }
  | {
      type: 'SET_AVAILABLE_PAYMENT'
      args: {
        paymentData: {
          availablePaymentMethods?: PaymentMethod[] | null
        }
      }
    }
  | {
      type: 'SET_CUSTOM_SUBTOTAL_ITEMS'
      args: {
        customSubTotalItems: CustomSubTotalItems[] | null
      }
    }

type Dispatch = (action: Action) => void

interface Props {
  children: JSX.Element[] | JSX.Element
}

const defaultState: State = {
  isNew: true,
  loggedIn: false,
  clientProfileData: {
    id: '',
    firstName: '',
    lastName: '',
    documentType: '',
    document: '',
    email: '',
    phone: '',
    completed: false,
  },
  shippingData: {
    availableAddresses: null as Address[],
    selectedAddress: null as Address,
    address: null as Address,
    completed: false,
    addressAlternative: null as Address,
  },
  items: [] as Item[],
  value: 0,
  totalizers: [] as Totalizer[],
  paymentData: {
    availablePaymentMethods: null as PaymentMethod[],
    selectedPaymentMethod: null as PaymentMethod,
    paymentMethod: null as PaymentMethod,
    completed: false,
    bin: null as string,
    installmentOptions: [] as InstallmentOption[],
  },
  logisticsInfo: [] as LogisticsInfo[],
  slas: {
    delivery: [] as Sla[],
    'pickup-in-point': [] as Sla[],
    packages: [] as ChangeLogistics[],
  },
  isEdit: false,
  isNewInfo: false,
  userLocation: false,
  isChangeEmail: false,
  changeLogistics: [] as ChangeLogistics[],
  theme: '',
  habeasData: false,
  storeTermsAndConditions: false,
  messages: [] as Message[],
  marketingData: null as MarketingData,
  customData: null,
  subtotalExcludePrice: {
    costServicePrice: 0,
  },
  totalOfferings: 0,
  liteHeader: false,
  isProfileDetail: false,
  ratesAndBenefitsData: {} as RatesAndBenefitsData,
  customSubTotalItems: [],
  itemsOrderForm: [],
}

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'SET_ORDER_FORM': {
      const { args } = action

      return {
        ...state,
        clientProfileData: {
          ...state.clientProfileData,
          ...args.clientProfileData,
        },
        shippingData: {
          ...state.shippingData,
          address: {
            ...state.shippingData.address,
            ...args.shippingData?.selectedAddress,
          },
          // selectedAddress: {
          //   ...state.shippingData.selectedAddress,
          //   ...args.shippingData?.selectedAddress,
          // },
        },
        items: args.items,
        totalizers: args.totalizers,
        value: args.value,
        paymentData: {
          ...state.paymentData,
          ...args.paymentData,
          availablePaymentMethods: [
            ...(state?.paymentData?.availablePaymentMethods || []),
            // ...(args?.paymentData?.availablePaymentMethods || []),
          ],
        },
        messages: args.messages,
        marketingData: args.marketingData,
        ratesAndBenefitsData: args.ratesAndBenefitsData,
        logisticsInfo: args.logisticsInfo,
      }
    }

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

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

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

      return {
        ...state,
        clientProfileData: {
          ...state.clientProfileData,
          ...args.clientProfileData,
        },
        shippingData: {
          ...state.shippingData,
          ...args.shippingData,
        },
        paymentData: {
          ...state.paymentData,
          ...args.paymentData,
          availablePaymentMethods: [
            ...(state.paymentData.otherAvailablePaymentMethods
              ? state.paymentData.otherAvailablePaymentMethods
              : []),
            ...(args.paymentData.availablePaymentMethods
              ? args.paymentData.availablePaymentMethods
              : []),
          ],
        },
      }
    }

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

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

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

      return {
        ...state,
        clientProfileData: {
          ...state.clientProfileData,
          ...args.clientProfileData,
        },
        shippingData: {
          ...state.shippingData,
          ...args.shippingData,
        },
      }
    }

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

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

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

      return {
        ...state,
        shippingData: {
          ...state.shippingData,
          address: {
            ...state.shippingData.address,
            ...args,
          },
        },
      }
    }

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

      return {
        ...state,
        shippingData: {
          ...state.shippingData,
          address: state.shippingData.selectedAddress,
          selectedAddress: args
            ? {
                ...state.shippingData.selectedAddress,
                ...args,
              }
            : null,
          completed: true,
        },
      }
    }

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

      return {
        ...state,
        shippingData: {
          ...state.shippingData,
          addressAlternative: args
            ? {
                ...state.shippingData.addressAlternative,
                ...args,
                geoCoordinates: args.geoCoordinates
                  ? {
                      latitude:
                        args?.geoCoordinates?.latitude?.toString() || '',
                      longitude:
                        args?.geoCoordinates?.longitude?.toString() || '',
                    }
                  : null,
              }
            : null,
        },
      }
    }

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

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

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

      return {
        ...state,
        items: args.items,
        ratesAndBenefitsData: args.ratesAndBenefitsData,
      }
    }

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

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

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

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

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

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

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

      return {
        ...state,
        paymentData: {
          ...state.paymentData,
          ...args.paymentData,
          availablePaymentMethods: [
            // Se quita la funcionalidad hasta que se encuentre una solución a las tarjetas duplicadas
            // ...(state.paymentData.otherAvailablePaymentMethods
            //   ? state.paymentData.otherAvailablePaymentMethods
            //   : []),
            ...(args.paymentData.availablePaymentMethods
              ? args.paymentData.availablePaymentMethods
              : []),
          ],
        },
      }
    }

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

      return {
        ...state,
        paymentData: {
          ...state.paymentData,
          paymentSystems: args,
        },
      }
    }

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

      return {
        ...state,
        paymentData: {
          ...state.paymentData,
          availablePaymentMethods: args.paymentData.availablePaymentMethods,
        },
      }
    }

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

      return {
        ...state,
        paymentData: {
          ...state.paymentData,
          selectedPaymentMethod: {
            ...state.paymentData.selectedPaymentMethod,
            ...args,
          },
          completed: true,
        },
      }
    }

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

      return {
        ...state,
        paymentData: {
          ...state.paymentData,
          installmentOptions: args,
        },
      }
    }

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

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

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

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

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

      return {
        ...state,
        isNew: true,
        clientProfileData: {
          ...args,
          id: '',
          firstName: '',
          lastName: '',
          documentType: '',
          document: '',
          phone: '',
          completed: false,
        },
        shippingData: {
          availableAddresses: null,
          selectedAddress: null,
          address: null,
          completed: false,
          addressAlternative: { ...state.shippingData.addressAlternative },
        },
        paymentData: {
          availablePaymentMethods: null,
          selectedPaymentMethod: null,
          paymentMethod: null,
          completed: false,
        },
      }
    }

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

      return {
        ...state,
        isEdit: args.isEdit,
        isNewInfo: args.isNewInfo,
        userLocation: args.userLocation,
        isChangeEmail: args.isChangeEmail,
      }
    }

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

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

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

      return {
        ...state,
        paymentData: {
          ...state.paymentData,
          otherAvailablePaymentMethods: args,
        },
      }
    }

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

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

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

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

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

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

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

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

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

      return {
        ...state,
        paymentData: {
          ...state.paymentData,
          bin: args,
        },
      }
    }

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

      return {
        ...state,
        paymentData: {
          ...state.paymentData,
          dues: args,
        },
      }
    }

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

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

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

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

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

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

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

      return {
        ...state,
        paymentData: {
          ...state.paymentData,
          loadingPayment: args,
        },
      }
    }

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

      return {
        ...state,
        paymentData: {
          ...state.paymentData,
          temporalPaymentSystem: args,
        },
      }
    }

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

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

    default: {
      return state
    }
  }
}

const UserDataContext = createContext(defaultState)
const UserDataDispatchContext = createContext<Dispatch | null>(null)

const UserDataProvider = ({ children }: Props) => {
  const [state, dispatch] = useReducer(reducer, defaultState)

  return (
    <UserDataContext.Provider value={state}>
      <UserDataDispatchContext.Provider value={dispatch}>
        {children}
      </UserDataDispatchContext.Provider>
    </UserDataContext.Provider>
  )
}

const useUserData = () => {
  return useContext(UserDataContext)
}

const useUserDataDispatch = (): Dispatch => {
  return useContext(UserDataDispatchContext)
}

export { UserDataProvider, useUserData, useUserDataDispatch }

```


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

[User] Show me the implementation of mycheckout-sdk/src/contexts/PaymentContext.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

interface PaymentContext {
  canPayWithCredit: boolean
  disabled: boolean
  error: any
  franchiseImg: string
  gateway: string
  global: {
    [className: string]: string
  }
  intl: any
  loadingOrder: boolean
  paymentMethod: string
  paymentSystem?: string
  styles: {
    [className: string]: string
  }
  value: number
  handleClick: (cardData: any) => void
  handledClickDisabled?: () => void
  onSelectedPayment: (type: any, paymentSystem: string) => void
  setError: (error: any) => void
  setFranchiseImg: (FranchiseImg: string) => void
}

const paymentContext = createContext<PaymentContext | null>(null)

export const PaymentProvider = paymentContext.Provider

export const usePayment = () => useContext(paymentContext)

```


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

[User] Show me the implementation of mycheckout-sdk/src/contexts/ActionsProvider.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import type {
  Address,
  ItemToAdd,
  ItemToRemove,
  ClientProfileData,
  CartSimulation,
  Settings,
  OfferingInput,
  Config,
  Product,
  ProductItem,
  Runtime,
} from '../interfaces'

interface State {
  openModal: boolean
  showLogo?: boolean
  step: number
  section: string
  addToCart: (item: ItemToAdd) => void
  itemToAdd?: ItemToAdd
  updateItems: (items: ItemToRemove[]) => void
  updateSelectedAddress: (address: Address) => void
  updateOrderFormProfile: (profile: ClientProfileData) => void
  cartSimulation: (simulationItems: CartSimulation) => void
  clearData: (items: ItemToRemove[]) => void
  fullScreen: boolean
  settings: Settings
  loadingOrder: boolean
  errorOrder: any
  insertCoupon: (text: string) => void
  addItemOffering?: (offeringInput: OfferingInput) => void
  removeItemOffering?: (offeringInput: OfferingInput) => void
  config?: Partial<Config>
  isOpenSummary?: boolean
  multipleAvailableSKUs: boolean
  onClickBehavior?: 'ensure-sku-selection'
  product?: Product
  selectedItem?: ProductItem
  handleSelectedItem?: (item: ProductItem) => void
  redirectUrl?: string
  isMobile?: boolean
  minimize: boolean
  runtime: Runtime
  styles?: any
  handleGetDocumentsClient?: (email: string) => void
}

type Action =
  | {
      type: 'SET_OPEN_MODAL'
    }
  | {
      type: 'SET_CLOSE_MODAL'
    }
  | {
      type: 'SET_NEXT_STEP'
    }
  | {
      type: 'SET_PREV_STEP'
    }
  | {
      type: 'SET_NEXT_SECTION'
      args: string
    }
  | {
      type: 'SET_SAME_SECTION'
      args: string
    }
  | {
      type: 'SET_STEP'
      args: number
    }
  | {
      type: 'SET_CLEAR_CLOSE'
    }
  | {
      type: 'SET_ITEM'
      args: ItemToAdd
    }
  | {
      type: 'SET_FULL_SCREEN'
      args: boolean
    }
  | {
      type: 'SET_SETTINGS'
      args: Settings
    }
  | {
      type: 'SET_SHOW_LOGO'
      args: boolean
    }
  | {
      type: 'SET_LOADING_ORDER'
      args: boolean
    }
  | {
      type: 'SET_ERROR_ORDER'
      args: any
    }
  | {
      type: 'SET_IS_OPEN_SUMMARY'
      args: boolean
    }
  | {
      type: 'SET_SELECTED_ITEM'
      args: ProductItem
    }
  | {
      type: 'SET_REDIRECT_URL'
      args: string
    }
  | {
      type: 'SET_IS_MOBILE'
      args: boolean
    }
  | {
      type: 'SET_MINIMIZE_MODAL'
      args: boolean
    }

type Dispatch = (action: Action) => void

interface Props {
  children: JSX.Element[] | JSX.Element
  addToCart: (item: ItemToAdd) => void
  itemToAdd?: ItemToAdd
  updateItems: (items: ItemToRemove[]) => void
  updateSelectedAddress: (address: Address) => void
  updateOrderFormProfile: (profile: ClientProfileData) => void
  cartSimulation: (simulationItems: CartSimulation) => void
  clearData: (items: ItemToRemove[]) => void
  insertCoupon?: (text: string) => void
  addItemOffering?: (offeringInput: OfferingInput) => void
  removeItemOffering?: (offeringInput: OfferingInput) => void
  config?: Partial<Config>
  multipleAvailableSKUs: boolean
  onClickBehavior?: 'ensure-sku-selection'
  product?: Product
  selectedItem?: ProductItem
  handleSelectedItem?: (item: ProductItem) => void
  runtime: Runtime
  styles?: any
  handleGetDocumentsClient?: (email: string) => void
}

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'SET_OPEN_MODAL': {
      return {
        ...state,
        openModal: true,
      }
    }

    case 'SET_CLOSE_MODAL': {
      return {
        ...state,
        openModal: false,
      }
    }

    case 'SET_CLEAR_CLOSE': {
      return {
        ...state,
        openModal: false,
        step: 1,
        section: '',
      }
    }

    case 'SET_NEXT_STEP': {
      return {
        ...state,
        step: state.step + 1,
      }
    }

    case 'SET_PREV_STEP': {
      return {
        ...state,
        step: state.step - 1,
      }
    }

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

      return {
        ...state,
        step: state.step + 1,
        section: args,
      }
    }

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

      return {
        ...state,
        step: state.step,
        section: args,
      }
    }

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

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

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

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

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

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

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

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

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

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

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

      return {
        ...state,
        showLogo: !args,
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

    default: {
      return state
    }
  }
}

const ActionsContext = createContext(null)
const ActionsDispatchContext = createContext<Dispatch | null>(null)

const ActionsProvider = ({
  children,
  addToCart,
  itemToAdd,
  updateItems,
  updateSelectedAddress,
  updateOrderFormProfile,
  cartSimulation,
  clearData,
  insertCoupon,
  addItemOffering,
  removeItemOffering,
  config,
  multipleAvailableSKUs,
  onClickBehavior,
  product,
  selectedItem,
  handleSelectedItem,
  runtime,
  styles,
  handleGetDocumentsClient,
}: Props) => {
  const shouldNavigateToSkuSelector =
    onClickBehavior === 'ensure-sku-selection' && multipleAvailableSKUs

  const [state, dispatch] = useReducer(reducer, {
    openModal: false,
    showLogo: true,
    loadingOrder: false,
    errorOrder: null,
    isOpenSummary: false,
    step: shouldNavigateToSkuSelector ? 0 : 1,
    section: '',
    addToCart,
    itemToAdd,
    updateItems,
    updateSelectedAddress,
    updateOrderFormProfile,
    cartSimulation,
    clearData,
    fullScreen: false,
    settings: {
      cvcRequired: true,
      cvcValid: false,
    },
    insertCoupon,
    addItemOffering,
    removeItemOffering,
    handleGetDocumentsClient,
    config,
    multipleAvailableSKUs,
    onClickBehavior,
    product,
    selectedItem,
    handleSelectedItem,
    redirectUrl: null,
    minimize: false,
    runtime,
    styles,
  })

  return (
    <ActionsContext.Provider value={state}>
      <ActionsDispatchContext.Provider value={dispatch}>
        {children}
      </ActionsDispatchContext.Provider>
    </ActionsContext.Provider>
  )
}

const useActions = () => {
  return useContext(ActionsContext)
}

const useActionsDispatch = (): Dispatch => {
  return useContext(ActionsDispatchContext)
}

export { ActionsProvider, useActions, useActionsDispatch }

```