[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 datadog-rum-pixel/docs/README.md from the datadog-rum-pixel VTEX app.

[Assistant]
Here's the implementation:

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

# Datadog RUM

The VTEX Datadog RUM app is a first party integration to the [Datadog Real User Monitoring (RUM)](https://www.datadoghq.com/product/real-user-monitoring/).

## Installation and configuration

### Step 1 - Installing Datadog RUM app

Install `vtex.datadog-rum-pixel` in your account.

    vtex install vtex.datadog-rum-pixel

> ℹ **Info**
>
> Access the [Datadog RUM](https://www.datadoghq.com/product/real-user-monitoring/)</a> and login to your account in order to find out what is your account **Datadog RUM ID**. You will need your application ID and client token to set up the app.

Follow the instructions provided by the Datadog RUM App in the `Admin` > `Account Settings` > `Apps` > `My Apps` > `Datadog RUM Pixel App`

### Step 2 - Setup Datadog RUM

To set up Datadog RUM in your store, you must create and set up all necessary configurations.

#### Configuring Datadog RUM

1. Log in to your [Datadog account](https://www.datadoghq.com/) and navigate to the RUM section.

2. Obtain your application ID, client token, site and service from the Datadog RUM settings.

3. In your VTEX store, go to the Datadog RUM app settings and enter the application ID, client token, site and service.

4. Configure additional settings as required, such as session sample rate, session replay sample rate, track user interactions, track resources, track long tasks, and default privacy level.

#### Checking received data

Now, let's check the received data from your website.

1. Enter in the Datadog RUM dashboard and navigate to the `Real User Monitoring` section.

2. You will see the data from your website, such as page views, user sessions, and more.

> ℹ **Info**
>
> If you are not able to see any data, go to your browser's Developer Tools, check the console for any errors, and ensure that the Datadog RUM script is correctly set up.

```


[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 datadog-rum-pixel/react/index.tsx from the datadog-rum-pixel VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { canUseDOM } from 'vtex.render-runtime'
import type { DefaultPrivacyLevel } from '@datadog/browser-rum'

import type { PixelMessage } from './typings/events'

const datadogRum = import('@datadog/browser-rum')

// no-op for extension point
export default function () {
  return null
}

export function handleEvents(e: PixelMessage) {
  datadogRum.then(dd => {
    switch (e.data.eventName) {
      case 'vtex:userData': {
        const { data } = e

        if (!data.isAuthenticated) {
          break
        }

        dd.datadogRum.setUser({
          id: data.id,
          email: data.email,
          name: data.firstName
            ? `${data.firstName} ${data.lastName}`
            : undefined,
        })

        break
      }

      case 'vtex:cartId': {
        dd.datadogRum.setGlobalContextProperty('cart', {
          cartId: e.data.cartId,
        })

        break
      }

      case 'vtex:orderPlaced': {
        const order = e.data

        dd.datadogRum.setGlobalContextProperty('order', {
          ...order,
        })

        break
      }

      default: {
        break
      }
    }
  })
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function init(settings: DatadogRumSettings, runtime: any) {
  if (!settings) {
    console.error('Datadog RUM Pixel: Missing settings')

    return
  }

  const {
    applicationId,
    clientToken,
    site,
    service,
    version,
    sessionSampleRate,
    sessionReplaySampleRate,
    trackUserInteractions,
    trackResources,
    trackLongTasks,
    defaultPrivacyLevel,
    activateInDev,
  } = settings

  const env = runtime.workspace === 'master' ? 'production' : 'development'

  if (!applicationId || !clientToken || !site || !service) {
    console.error('Datadog RUM Pixel: Missing required settings')

    return
  }

  if (env === 'development' && activateInDev === 'false') {
    console.info('Datadog RUM Pixel: Not activating in development environment')

    return
  }

  datadogRum.then(dd => {
    if (dd.datadogRum.getInternalContext()?.session_id) return

    dd.datadogRum.init({
      applicationId,
      clientToken,
      site,
      service,
      env: runtime.workspace,
      version,
      sessionSampleRate: Number(sessionSampleRate),
      sessionReplaySampleRate: Number(sessionReplaySampleRate),
      trackUserInteractions: trackUserInteractions === 'true',
      trackResources: trackResources === 'true',
      trackLongTasks: trackLongTasks === 'true',
      defaultPrivacyLevel: defaultPrivacyLevel as DefaultPrivacyLevel,
    })

    dd.datadogRum.startSessionReplayRecording()

    window.addEventListener('message', handleEvents)
  })
}

if (canUseDOM && window.__DD_RUM_PIXEL__) {
  init(window.__DD_RUM_PIXEL__, window.__RUNTIME__)
}

```


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

[User] Show me the implementation of datadog-rum-pixel/react/package.json from the datadog-rum-pixel VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "version": "0.0.1",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "author": "VTEX",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^12.0.0",
    "@vtex/test-tools": "^3.3.2"
  },
  "dependencies": {
    "@datadog/browser-rum": "^5.22.0"
  }
}

```


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

[User] Show me the implementation of datadog-rum-pixel/store/interfaces.json from the datadog-rum-pixel VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "pixel.dd-rum": {
    "component": "index"
  }
}

```


[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 datadog-rum-pixel/public/metadata/messages/es-AR.json from the datadog-rum-pixel VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Datadog RUM",
  "headline": "Integra tu tienda con Datadog Real User Monitor",
  "overview": "Datadog Real User Monitoring (RUM) proporciona una visión profunda del rendimiento del frontend de tu aplicación. Monitorea datos de usuarios reales para optimizar el rendimiento web y proporcionar experiencias de usuario excepcionales.",
  "features": [
    "Configura Datadog Real User Monitor usando el panel de administración de VTEX",
    "Rastrea las interacciones de los usuarios y las métricas de rendimiento",
    "Monitorea datos de usuarios reales para optimizar el rendimiento web"
  ],
  "additionalInformation": "Para más información sobre cómo configurar tu Datadog RUM Pixel, consulta la [documentación de Datadog](https://docs.datadoghq.com/real_user_monitoring/browser/setup/)",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


[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 datadog-rum-pixel/public/metadata/messages/pt-BR.json from the datadog-rum-pixel VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Datadog RUM",
  "headline": "Integre sua loja com o Datadog Real User Monitor",
  "overview": "O Datadog Real User Monitoring (RUM) fornece uma visão profunda do desempenho do frontend da sua aplicação. Monitore dados de usuários reais para otimizar o desempenho da web e proporcionar experiências excepcionais aos usuários.",
  "features": [
    "Configure o Datadog Real User Monitor usando o painel de administração VTEX",
    "Acompanhe as interações dos usuários e as métricas de desempenho",
    "Monitore dados de usuários reais para otimizar o desempenho da web"
  ],
  "additionalInformation": "Para mais informações sobre como configurar seu Datadog RUM Pixel, consulte a [documentação do Datadog](https://docs.datadoghq.com/real_user_monitoring/browser/setup/)",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


[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 datadog-rum-pixel/public/metadata/messages/en-US.json from the datadog-rum-pixel VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Datadog RUM",
  "headline": "Integrate your store with Datadog Real User Monitor",
  "overview": "Datadog Real User Monitoring (RUM) provides deep insight into your application's frontend performance. Monitor real user data in order to optimize your web performance and provide exceptional user experiences.",
  "features": [
    "Configure Datadog Real User Monitor using the VTEX admin panel",
    "Track user interactions and performance metrics",
    "Monitor real user data to optimize web performance"
  ],
  "additionalInformation": "For more information about configuring your Datadog RUM Pixel, see the [Datadog documentation](https://docs.datadoghq.com/real_user_monitoring/browser/setup/)",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


[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 datadog-rum-pixel/react/typings/events.d.ts from the datadog-rum-pixel VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable @typescript-eslint/no-explicit-any */
export interface PixelMessage extends MessageEvent {
  data:
    | ProductViewData
    | ProductClickData
    | OrderPlacedData
    | OrderPlacedTrackedData
    | PageViewData
    | LegacyProductViewData
    | ProductImpressionData
    | AddToCartData
    | RemoveFromCartData
    | CartChangedData
    | HomePageInfo
    | ProductPageInfoData
    | SearchPageInfoData
    | UserData
    | CartIdData
    | CartLoadedData
    | PromoViewData
    | PromotionClickData
    | AddPaymentInfoData
    | AddShippingInfoData
    | SignUpData
    | LoginData
    | ShareData
    | BeginCheckoutData
    | ViewCartData
    | RefundData
    | AddToWishlistData
    | SearchData
}

export interface EventData {
  event: string
  eventName: string
  currency: string
}

export interface PageInfoData extends EventData {
  event: 'pageInfo'
  eventName: 'vtex:pageInfo'
  accountName: string
  pageTitle: string
  pageUrl: string
}

export interface LegacyProductViewData extends EventData {
  event: 'pageInfo'
  eventName: 'vtex:pageInfo'
  eventType: 'productView'
}

export interface UserData extends PageInfoData {
  eventType: 'userData'
  eventName: 'vtex:userData'
  firstName?: string
  lastName?: string
  document?: string
  id?: string
  email?: string
  phone?: string
  isAuthenticated: boolean
}

export interface CartIdData extends PageInfoData {
  eventType: 'cartId'
  eventName: 'vtex:cartId'
  cartId: string
}

export interface HomePageInfo extends PageInfoData {
  eventType: 'homeView'
}

export interface ProductPageInfoData extends PageInfoData {
  eventType: 'productPageInfo'
}

export interface SearchPageInfoData extends PageInfoData {
  eventType:
    | 'internalSiteSearchView'
    | 'categoryView'
    | 'departmentView'
    | 'emptySearchView'
  category?: CategoryMetaData
  department?: DepartmentMetaData
  search?: SearchMetaData
}

interface CategoryMetaData {
  id: string
  name: string
}

interface DepartmentMetaData {
  id: string
  name: string
}

interface SearchMetaData {
  term: string
  category: CategoryMetaData
  results: number
}

export interface PageViewData extends EventData {
  event: 'pageView'
  eventName: 'vtex:pageView'
  pageTitle: string
  pageUrl: string
  referrer: string
}

export interface AddToCartData extends EventData {
  event: 'addToCart'
  eventName: 'vtex:addToCart'
  items: CartItem[]
}

export interface RemoveFromCartData extends EventData {
  event: 'removeFromCart'
  eventName: 'vtex:removeFromCart'
  items: CartItem[]
}

export interface CartChangedData extends EventData {
  event: 'cartChanged'
  eventName: 'vtex:cartChanged'
  items: CartItem[]
}

export interface OrderPlacedData extends Order, EventData {
  event: 'orderPlaced'
  eventName: 'vtex:orderPlaced'
}

export interface OrderPlacedTrackedData extends Order, EventData {
  event: 'orderPlacedTracked'
  eventName: 'vtex:orderPlacedTracked'
}

export interface ProductViewData extends EventData {
  event: 'productView'
  eventName: 'vtex:productView'
  product: Product
  list?: string
}

export interface ProductClickData extends EventData {
  event: 'productClick'
  eventName: 'vtex:productClick'
  product: ProductSummary
  position: number
  list?: string
}

export interface ProductImpressionData extends EventData {
  event: 'productImpression'
  eventName: 'vtex:productImpression'
  impressions: Impression[]
  product?: ProductSummary // deprecated, use impressions list!
  position?: number // deprecated, use impressions list!
  list: string
}

export interface CartLoadedData extends EventData {
  event: 'cartLoaded'
  eventName: 'vtex:cartLoaded'
  orderForm: OrderForm
}

export interface PromoViewData extends EventData {
  event: 'promoView'
  eventType: 'vtex:promoView'
  eventName: 'vtex:promoView'
  promotions: Promotion[]
}

export interface PromotionClickData extends EventData {
  event: 'promotionClick'
  eventType: 'vtex:promotionClick'
  eventName: 'vtex:promotionClick'
  promotions: Promotion[]
}

export interface AddPaymentInfoData extends EventData {
  event: 'addPaymentInfo'
  eventType: 'vtex:addPaymentInfo'
  eventName: 'vtex:addPaymentInfo'
  payment: PaymentType
  items: CartItem[]
}

export interface BeginCheckoutData extends EventData {
  event: 'beginCheckout'
  eventType: 'vtex:beginCheckout'
  eventName: 'vtex:beginCheckout'
  items: CartItem[]
}

export interface AddShippingInfoData extends EventData {
  event: 'addShippingInfo'
  eventType: 'vtex:addShippingInfo'
  eventName: 'vtex:addShippingInfo'
  items: CartItem[]
  shippingTier: string
  value: number
}

export interface ViewCartData extends EventData {
  event: 'viewCart'
  eventType: 'vtex:viewCart'
  eventName: 'vtex:viewCart'
  items: CartItem[]
}

export interface AddToWishlistData extends EventData {
  event: 'addToWishlist'
  eventType: 'vtex:addToWishlist'
  eventName: 'vtex:addToWishlist'
  items: {
    selectedItem: SelectedItem
    product: ProductSummary
  }
  list: string
}

export interface SelectedItem {
  attachments?: any[]
  complementName?: string
  ean?: string
  estimatedDateArrival?: any
  images?: Image[]
  itemId?: string
  kitItems?: any[]
  measurementUnit?: string
  name?: string
  nameComplete?: string
  referenceId?: any
  sellers: Seller[]
  unitMultiplier?: number
  variations?: any[]
  videos?: any[]
}

export interface Seller {
  addToCartLink: string
  commercialOffer: any
  sellerDefault: boolean
  sellerId: string
  sellerName: string
}

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

export interface RefundData extends EventData {
  event: 'refund'
  eventType: 'vtex:refund'
  eventName: 'vtex:refund'
  order: {
    transactionId: string
    tax: number
    shipping: number
    value: number
    items: ProductOrder[]
  }
}

export interface SearchData extends EventData {
  event: 'search'
  eventType: 'vtex:search'
  eventName: 'vtex:search'
  term: string
}

export interface ShareData extends EventData {
  event: 'share'
  eventType: 'vtex:share'
  eventName: 'vtex:share'
  method: string
  contentType: string
  itemId: string
}

export interface LoginData extends EventData {
  event: 'login'
  eventType: 'vtex:login'
  eventName: 'vtex:login'
  method: string
}

export interface SignUpData extends LoginData, EventData {
  event: 'signUp'
  eventType: 'vtex:signUp'
  eventName: 'vtex:signUp'
}

type PromotionProduct = Pick<ProductSummary, 'productId' | 'productName'>

interface Promotion {
  id?: string
  name?: string
  creative?: string
  position?: string
  products?: PromotionProduct[]
}

interface CartItemAdditionalInfo {
  brandName: string
  brandId: string
}

interface CartItem {
  id: string
  productCategories: Record<string, string> | null
  productCategoryIds?: string
  additionalInfo: CartItemAdditionalInfo | null
  brand: string
  ean: string
  category: string
  detailUrl: string
  imageUrl: string
  name: string
  skuName: string
  price: number
  priceIsInt?: boolean
  sellingPrice: number
  productId: string
  productRefId: string
  quantity: number
  skuId: string
  referenceId: string // SKU reference id
  variant: string
}

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

interface ClientProfileData {
  email: string
  firstName: string
  lastName: string
}

interface Address {
  addressId: string
  postalCode: string
  street: string
  number: string
  neighborhood: string
  complement: string
  city: string
  state: string
}

interface DeliveryOption {
  id: string
  price: number
  estimate: string
  isSelected: boolean
}

interface Shipping {
  selectedAddress: Address
  deliveryOptions?: DeliveryOption[]
}

interface MarketingData {
  coupon: string
  utmCampaign: string
  utmSource: string
  utmMedium: string
  utmiCampaign: string
  utmiPage: string
  utmiPart: string
}

export interface OrderForm {
  id: string
  totalizers: Totalizer[]
  sellers: Seller[]
  salesChannel: string
  items: CartItem[]
  canEditData: boolean
  loggedIn: boolean
  clientProfileData?: ClientProfileData
  shipping?: Shipping
  value: number
  marketingData?: MarketingData
}

export interface Order {
  accountName: string
  corporateName: string
  coupon: string
  currency: string
  openTextField: string
  orderGroup: string
  salesChannel: string
  visitorAddressCity: string
  visitorAddressComplement: string
  visitorAddressCountry: string
  visitorAddressNeighborhood: string
  visitorAddressNumber: string
  visitorAddressPostalCode: string
  visitorAddressState: string
  visitorAddressStreet: string
  visitorContactInfo: string[]
  visitorContactPhone: string
  visitorType: string
  transactionId: string
  transactionDate: string
  transactionAffiliation: string
  transactionTotal: number
  transactionShipping: number
  transactionSubtotal: number
  transactionDiscounts: number
  transactionTax: number
  transactionCurrency: string
  transactionPaymentType: PaymentType[]
  transactionShippingMethod: ShippingMethod[]
  transactionLatestShippingEstimate: Date
  transactionProducts: ProductOrder[]
  transactionPayment: {
    id: string
  }
}

export interface Impression {
  product: ProductSummary
  position: number
}

export interface PaymentType {
  group: string
  paymentSystemName: string
  installments: number
  value: number
}

export interface ShippingMethod {
  itemId: string
  selectedSla: string
}

export interface ProductOrder {
  id: string
  name: string
  sku: string
  skuRefId: string
  skuName: string
  productRefId: string
  ean: string
  slug: string
  brand: string
  brandId: string
  seller: string
  sellerId: string
  category: string
  categoryId: string
  categoryTree: string[]
  categoryIdTree: string[]
  priceTags: PriceTag[]
  originalPrice: number
  price: number
  sellingPrice: number
  tax: number
  quantity: number
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  components: any[]
  measurementUnit: string
  unitMultiplier: number
}

export interface PriceTag {
  identifier: string
  isPercentual: boolean
  value: number
}

export interface Product {
  brand: string
  brandId: string
  categories: string[]
  categoryId: string
  categoryTree: Array<{ id: string; name: string }>
  detailUrl: string
  items: Item[]
  linkText: string
  productId: string
  productName: string
  productReference: string
  selectedSku: Item
}

export interface Item {
  itemId: string
  name: string
  ean: string
  referenceId: { Key: string; Value: string }
  imageUrl: string
  sellers: Seller[]
}

export interface ProductSummary {
  brand: string
  brandId: string
  categories: string[]
  items: ItemSummary[]
  linkText: string
  productId: string
  productName: string
  productReference: string
  selectedItem: SelectedItem
  sku: ItemSummary
}

interface ItemSummary {
  itemId: string
  ean: string
  name: string
  referenceId: { Key: string; Value: string }
  seller: Seller
  sellers: Seller[]
}

export interface Seller {
  commertialOffer: CommertialOffer
  sellerId: string
  sellerDefault: boolean
}

export interface CommertialOffer {
  Price: number
  PriceWithoutDiscount: number
  ListPrice: number
  AvailableQuantity: number
}

export type ProductViewReferenceId = Array<Item['referenceId']>

```


[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 datadog-rum-pixel/react/typings/vtex.render-runtime.d.ts from the datadog-rum-pixel VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* Typings for `render-runtime` */
declare module 'vtex.render-runtime' {
  import { Component, ComponentType, ReactElement, ReactType } from 'react'

  export interface NavigationOptions {
    page: string
    params?: any
  }

  export interface RenderContextProps {
    runtime: {
      navigate: (options: NavigationOptions) => void
    }
  }

  interface ExtensionPointProps {
    id: string
    [key: string]: any
  }

  export const ExtensionPoint: ComponentType<ExtensionPointProps>

  interface ChildBlockProps {
    id: string
  }

  export const ChildBlock: ComponentType<ChildBlockProps>
  export const useChildBlock = function ({
    id: string,
  }): Record<string, unknown> {}

  export const Helmet: ReactElement
  export const Link: ReactType
  export const NoSSR: ReactElement
  export const RenderContextConsumer: ReactElement
  export const canUseDOM: boolean
  export const withRuntimeContext: <TOriginalProps extends unknown>(
    Component: ComponentType<TOriginalProps & RenderContextProps>
  ) => ComponentType<TOriginalProps>
}

```


[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 datadog-rum-pixel/react/typings/global.d.ts from the datadog-rum-pixel VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Window extends Window {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  __RUNTIME__: any

  __DD_RUM_PIXEL__: DatadogRumSettings
}

```


[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 datadog-rum-pixel/react/typings/datadog.d.ts from the datadog-rum-pixel VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface DatadogRumSettings {
  applicationId: string
  clientToken: string
  site: string
  service: string
  version: string
  sessionSampleRate: string
  sessionReplaySampleRate: string
  trackUserInteractions: string
  trackResources: string
  trackLongTasks: string
  defaultPrivacyLevel: string
  activateInDev: string
}

```


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

[User] Show me the implementation of abandoned-cart/docs/README.md from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Abandoned Cart Service

##  ⚠ Maintenance ⚠

*Starting June 1st 2023, this application will no longer be maintained by VTEX.*

---

The Abandoned Cart Service app can be used to trigger abandoned cart emails.

## Installation

Open the terminal and run the following command:

```
vtex install vtex.abandoned-cart-service
```
## Step 1 > Configure the email template in Message Center

1. In the VTEX Admin, go to **Store Settings > Email Templates > Templates**,    or type **Templates** in the search bar at the top of the page.
2. Search for **vtexcommerce-abandoned-cart** .
3. Select **Enable Email Sending?** and **Use Default Sender**.
4. Fill in the **Email Title** field as desired.
5. Fill in the **Recipient (To)** with {{email}}.
6. In **Html**, enter the created or Use the following default email template information.
```
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,
initial-scale=1.0" />
    <title>{{_accountInfo.TradingName}}</title>

Abandoned Cart

                                        {{#each items}}

{{productName}}

                                                    {{quantity}} un.
                                                    {{#if sellingPrice}}
                                                    ${{formatCurrency sellingPrice}}
                                                    {{else}} Grátis
                                                    {{/if}}

                                        {{/each}}

                                Link to the cart

```
The `addToCartURL` variable is formatted to work with the [cart URL](https://help.vtex.com/tutorial/how-to-assemble-the-cart-url--u3Tj5wagnukYwG84IQU06). Its purpose is to send the user back to the checkout with the items in the abandoned cart.

7. In **JSON Data** , enter following JSON as an example of JSON Data:
```
{
  "email": "teste@vtex.com.br",
  "items": [
    {
      "id": "880010",
      "productName": "adidas Men's Performance Polo - Blast Blue S",
      "image": "https://bibi.vteximg.com.br/arquivos/ids/155405/adidas-mens-performance-p olo-blast-blue.jpg?v=637947886549170000",
      "sellingPrice": "455.00",
      "quantity": "1",
      "link": "adidas-mens-performance-polo-blast-blue",
      "availabilityQuantity": 1000000
    }
  ],
  "addToCartURL": "add?sku=880010&qty=1&seller=1&sc=1",
  "additionalFields": {
    "firstName": "Teste VTEX"
  },
  "_accountInfo": {
    "MainAccountName": "teste",
    "AccountName": "teste",
    "Cnpj": null,
    "Id": "278fe15c-f0eb-4c30-81a2-f42b29113f1a",
    "AppId": null,
    "IsActive": true,
    "IsOperating": false,
    "CreationDate": "2022-06-21T19:58:01.3387095Z",
    "OperationDate": null,
    "CompanyName": "Companhia Brasileira de Tecnologia para ecommerce",
    "TradingName": "VTEX",
    "City": null,
    "Complement": null,
    "Country": null,
    "State": null,
    "Address": null,
    "District": null,
    "Number": null,
    "PostalCode": null,
    "Licenses": [
      7
    ],
    "ParentAccountId": null,
    "ParentAccountName": null,
    "InactivationDate": null,
    "Platform": "vtex",
    "Privacy": null,
    "HasPiiRestriction": false,
    "Infra": null
  }
}
```
8. Click on **Save**.

## Step 2 > Perform the [SPF release](https://help.vtex.com/tutorial/setting-up-abandoned-carts--tutorials_740)

## Step 3 > Follow below steps to [Configure the trigger](https://help.vtex.com/tutorial/setting-up-abandoned-carts--tutorials_740)

1. In the VTEX Admin, go to **Store Settings > Storefront > Master Data**.
2. In Master Data, click **Applications > Advanced Settings > Data structure**.
3. Click the **Trigger** tab.
4. Click the Add ``New button``.
5. Complete the following fields:
   1. **Name**: Enter the trigger name.
   2. **Data Entity**: Select the Customer entity.
   3. **Status**: Check the **Enabled** option.
6. On the **Rules** tab, select An attribute value is changed.
7. Under **Field**, select Last session.
8. Click ``Add Filter`` five times to display the filter fields. Select them and complete the information as shown below:
      1. **Checkout - Different from - Completed - and**
      2. **Checkout – Is not null – and**
      3. **Cart - Is not null - and**
      4. **Last cart - Is not null - and**
      5. **Receives newsletter? - Equal to - true**
9. Click the **Schedule** tab and select whether the email should be sent as soon as possible, on a specific date or on a dynamic date.
10. Click the **If Positive** tab.

    In the **Action** tab, select **Send an HTTP Request** with the following configuration:

   - **URL:** `https://{accountName}.myvtex.com/_v/abandoned-cart`.
   - **Method:** POST.
   - **Header:**
      ```
      content-type: application/json
      accept: application/json
      ```
      - Content as JSON field:
      ```
      {
         "email": "{!email}",
         "skuURL": "{!rclastcart}",
         "template": "vtexcommerce-abandoned-cart",
         "additionalFields": {
            // In object you can add any additional field to send in the mail
            "firstName": "{!firstName}"
         }
      }
      ```
      ![](https://user-images.githubusercontent.com/67066494/184005464-d06e1cda-3b21-42ec-b020-d85d684e6b7c.png)
11. Click **Save**.
12. Create a cart and close the page to test the trigger.

### Note:
A page session expires in 30 minutes. Only after this time does Master Data start counting the time scheduled for the Abandoned Cart trigger. Therefore, the time until the email arrives corresponds to the session time (30 minutes) plus the time scheduled in the trigger.

```


[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 abandoned-cart/node/service.json from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 4,
  "workers": 1,
  "routes": {
    "abandonedCart": {
      "path": "/_v/abandoned-cart",
      "public": true
    }
  },
  "events": {
    "configureMailTemplate": {
      "sender": "apps",
      "keys": ["setup"]
    }
  }
}

```


[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 abandoned-cart/node/example.json from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "email": "correo@gmail.com",
  "items": [
    {
      "id": "20",
      "productName": "Classic Shoes Top White Slip On 42",
      "image": "https://vtdlatamio.vteximg.com.br/arquivos/ids/155411/alQRJ5A.jpg?v=637334655878700000",
      "sellingPrice": 41700,
      "quantity": "1",
      "link": "classic-shoes"
    },
    {
      "id": "4",
      "productName": "Vintage Phone Classic",
      "image": "https://vtdlatamio.vteximg.com.br/arquivos/ids/155403/CyFKwq8.jpg?v=637334589272900000",
      "sellingPrice": 13000,
      "quantity": "1",
      "link": "vintage-phone"
    },
    {
      "id": "5",
      "productName": "Kitzin kitizin",
      "image": "https://vtdlatamio.vteximg.com.br/arquivos/ids/155404/MkylmSE.jpg?v=637334589274600000",
      "sellingPrice": 7100,
      "quantity": "1",
      "link": "kitzin-2000189"
    },
    {
      "id": "35",
      "productName": "Top Star Color Shirt Magento",
      "image": "https://vtdlatamio.vteximg.com.br/arquivos/ids/155406/m4iBsqH.jpg?v=637334655845530000",
      "sellingPrice": 8300,
      "quantity": "1",
      "link": "star-color-top"
    },
    {
      "id": "41",
      "productName": "Top Star Color Shirt yellow",
      "image": "https://vtdlatamio.vteximg.com.br/arquivos/ids/155407/aXf5h4e.jpg?v=637334655852430000",
      "sellingPrice": 8300,
      "quantity": "1",
      "link": "star-color-top"
    }
  ],
  "addToCartURL": "add?sku=20&qty=1&seller=1&sku=4&qty=1&seller=1&sku=5&qty=1&seller=1&sku=35&qty=1&seller=1&sku=41&qty=1&seller=1&sc=1"
}

```


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

[User] Show me the implementation of abandoned-cart/node/package.json from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0",
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.45.12",
    "@vtex/test-tools": "^1.0.0",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty"
  },
  "version": "3.1.6"
}

```


[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 abandoned-cart/node/index.ts from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  ClientsConfig,
  method,
  Service,
  ServiceContext,
  RecorderState,
} from '@vtex/api'

import { Clients } from './clients'
import { abandonedCart } from './middlewares/abandonedCart'
import { configureMailTemplate } from './events/configureMailTemplate'

const TIMEOUT_MS = 10000
const CONCURRENCY = 10

// This is the configuration for clients available in `ctx.clients`.
const clients: ClientsConfig<Clients> = {
  // We pass our custom implementation of the clients bag, containing the Status client.
  implementation: Clients,
  options: {
    // All IO Clients will be initialized with these options, unless otherwise specified.
    default: {
      retries: 2,
      timeout: TIMEOUT_MS,
    },
    events: {
      exponentialTimeoutCoefficient: 2,
      exponentialBackoffCoefficient: 2,
      initialBackoffDelay: 50,
      retries: 1,
      timeout: TIMEOUT_MS,
      concurrency: CONCURRENCY,
    },
  },
}

declare global {
  // We declare a global Context type just to avoid re-writing ServiceContext<Clients, State> in every handler and resolver
  type Context = ServiceContext<Clients, State>

  // The shape of our State object found in `ctx.state`. This is used as state bag to communicate between middlewares.
  interface State extends RecorderState {
    code: number
  }
}

// Export a service that defines route handlers and client options.
export default new Service({
  clients,
  events: {
    configureMailTemplate,
  },
  routes: {
    abandonedCart: method({
      POST: [abandonedCart],
    }),
  },
})

```


[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 abandoned-cart/public/metadata/messages/es-AR.json from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Carrito Abandonado",
  "headline": "Envia notificaciones por e-mail a los clientes que cargaron productos en el carrito pero no finalizaron la compra.",
  "overview": "Esta aplicacion permite a su tienda enviar correos a los consumidores recordandoles que tienen un carrito sin finalizar. Esto mejora la conversion de la tienda y aumenta la fidelidad de los clientes.",
  "features": [
    "Permite a su tienda enviar correos a los consumidores recordandoles que tienen un carrito sin finalizar."
  ],
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


[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 abandoned-cart/public/metadata/messages/pt-BR.json from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Carrinho Abandonado",
  "headline": "Envie notificações por e-mail para usuários que montaram um carrinho na sua loja mas não finalizaram a compra.",
  "overview": "Este aplicativo permite à sua loja o envio de e-mails para os clientes oferecendo o carrinho de compras que não foi comprado. Isso aumenta a taxa de conversão da loja e aumenta a fidelidade do cliente. Este app monitora os carrinhos abandonados da sua loja e envia e-mails automáticos para os clientes.",
  "features": [
    "Envie e-mails aos consumidores lembrando-os de que eles têm um carrinho pendente"
  ],
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


[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 abandoned-cart/public/metadata/messages/en-US.json from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Abandoned Cart",
  "headline": "Send e-mail notifications for users who left an abandoned cart without finish the purchase.",
  "overview": "This app is a service that will monitor abandoned cards to send emails to customers who left those.",
  "features": [
    "Allows sending of e-mails for abandoned carts automatically",
    "Contribute to increase the conversion rate"
  ],
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


[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 abandoned-cart/node/clients/message.ts from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { JanusClient, InstanceOptions, IOContext } from '@vtex/api'
import { pipe } from 'ramda'

import configEmail from '../configs/configEmail'

interface AbandonedCartMailParameters {
  items: MailItem[]
  email: string
  addToCartURL: string
  additionalFields: any
}

const withCookieAsHeader = (context: IOContext) => (
  options: InstanceOptions
): InstanceOptions => ({
  ...options,
  headers: {
    VtexIdclientAutCookie: context.authToken,
    ...(options?.headers ?? {}),
  },
})

export default class Message extends JanusClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(context, options && pipe(withCookieAsHeader(context))(options))
  }

  public async sendMail(
    abandonedCartData: AbandonedCartMailParameters,
    abandonedCartTemplate: string
  ): Promise<string> {
    const data = {
      templateName: abandonedCartTemplate,
      jsonData: {
        ...abandonedCartData,
      },
    }

    return this.http.post(`/api/mail-service/pvt/sendmail`, data)
  }

  public async sendTemplate(): Promise<any> {
    const data = {
      ...configEmail,
    }

    return this.http.post(`/api/template-render/pvt/templates`, 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 abandoned-cart/node/clients/index.ts from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { IOClients } from '@vtex/api'

import Catalog from './catalog'
import Message from './message'

// Extend the default IOClients implementation with our own custom clients.
export class Clients extends IOClients {
  public get catalog() {
    return this.getOrSet('catalog', Catalog)
  }

  public get message() {
    return this.getOrSet('message', Message)
  }
}

```


[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 abandoned-cart/node/clients/catalog.ts from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { AppClient, InstanceOptions, IOContext } from '@vtex/api'

export default class Catalog extends AppClient {
  constructor(ctx: IOContext, opts?: InstanceOptions) {
    super('vtex.catalog-api-proxy@0.x', ctx, opts)
  }

  public async getProducts(skus: SkuURLItem[]): Promise<SearchProduct[]> {
    const searchQS = skus
      ?.map((sku: SkuURLItem) => `fq=skuId:${sku.id}`)
      .join('&')

    return this.http.get(`/proxy/catalog/pub/products/search?${searchQS}`, {
      metric: 'products-get',
    })
  }
}

```


[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 abandoned-cart/node/typings/catalog.d.ts from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Range {
  from: number
  to: number
}

interface SelectedFacets {
  key: string
  value: string
}

interface QueryArgs {
  query: string
  map?: string
  selectedFacets?: SelectedFacets[]
}

interface SearchArgs extends QueryArgs {
  category: string | null
  specificationFilters: string[] | null
  priceRange?: string | null
  collection: string | null
  salesChannel: string | null
  orderBy: string | null
  from: number | null
  to: number | null
  hideUnavailableItems: boolean | null
  simulationBehavior: 'skip' | 'default' | null
  completeSpecifications: boolean
}

interface Metadata {
  metaTagDescription?: string
  titleTag?: string
}

interface Brand {
  id: string
  name: string
  isActive: boolean
  title: string | null
  metaTagDescription: string | null
  imageUrl: string | null
}

interface CategoryTreeResponse {
  id: number
  name: string
  hasChildren: boolean
  url: string
  children: CategoryTreeResponse[]
  Title: string
  MetaTagDescription: string
}

interface CategoryByIdResponse {
  parentId: number | null
  GlobalCategoryId: number
  GlobalCategoryName: string
  position: number
  slug: string
  id: number
  name: string
  hasChildren: boolean
  url: string
  children: null
  Title: string
  MetaTagDescription: string
}

interface FacetsArgs extends QueryArgs {
  hideUnavailableItems?: boolean
  behavior?: FacetsBehavior
}

enum FacetsBehavior {
  STATIC = 'Static',
  DYNAMIC = 'Dynamic',
}

interface SearchProduct {
  productId: string
  productName: string
  brand: string
  brandId: number
  linkText: string
  productReference: string
  categoryId: string
  productTitle: string
  metaTagDescription: string
  clusterHighlights: Record<string, string>
  productClusters: Record<string, string>
  searchableClusters: Record<string, string>
  categories: string[]
  categoriesIds: string[]
  link: string
  description: string
  items: SearchItem[]
  itemMetadata: {
    items: SearchMetadataItem[]
  }
  titleTag: string
  Specifications?: string[]
  allSpecifications?: string[]
  allSpecificationsGroups?: string[]
  completeSpecifications?: CompleteSpecification[]
  skuSpecifications?: SkuSpecification[]
}

interface SearchItem {
  itemId: string
  name: string
  nameComplete: string
  complementName: string
  ean: string
  referenceId: Array<{ Key: string; Value: string }>
  measurementUnit: string
  unitMultiplier: number
  modalType: any | null
  images: SearchImage[]
  Videos: string[]
  variations: string[]
  sellers: Seller[]
  attachments: Array<{
    id: number
    name: string
    required: boolean
    domainValues: string
  }>
  isKit: boolean
  kitItems?: Array<{
    itemId: string
    amount: number
  }>
}

interface CompleteSpecification {
  Values: Array<{
    Id: string
    Position: number
    Value: string
  }>
  Name: string
  Position: number
  IsOnProductDetails: boolean
  FieldId: string
}

interface SearchItemExtended extends SearchItem {
  skuSpecifications?: SkuSpecification[]
}

interface SkuSpecification {
  field: SKUSpecificationField
  values: SKUSpecificationValue[]
}

interface SKUSpecificationField {
  name: string
  id: string
}

interface SKUSpecificationValue {
  name: string
  id: string
  fieldId: string
}

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

interface SearchInstallment {
  Value: number
  InterestRate: number
  TotalValuePlusInterestRate: number
  NumberOfInstallments: number
  PaymentSystemName: string
  PaymentSystemGroupName: string
  Name: string
}

interface CommertialOffer {
  DeliverySlaSamplesPerRegion: Record<
    string,
    { DeliverySlaPerTypes: any[]; Region: any | null }
  >
  Installments: SearchInstallment[]
  DiscountHighLight: any[]
  GiftSkuIds: string[]
  Teasers: any[]
  BuyTogether: any[]
  ItemMetadataAttachment: any[]
  Price: number
  ListPrice: number
  PriceWithoutDiscount: number
  RewardValue: number
  PriceValidUntil: string
  AvailableQuantity: number
  Tax: number
  DeliverySlaSamples: Array<{
    DeliverySlaPerTypes: any[]
    Region: any | null
  }>
  GetInfoErrorMessage: any | null
  CacheVersionUsedToCallCheckout: string
}

interface Seller {
  sellerId: string
  sellerName: string
  addToCartLink: string
  sellerDefault: boolean
  commertialOffer: CommertialOffer
}

interface SearchFacet {
  Quantity: number
  Name: string
  Link: string
  LinkEncoded: string
  Map: string
  Value: string
}

interface SearchFacetCategory {
  Id: number
  Quantity: number
  Name: string
  Link: string
  LinkEncoded: string
  Map: string
  Value: string
  Children: SearchFacetCategory[]
}

interface SummaryItem {
  DisplayedItems: number
  TotalItems: number
}

interface SearchFacets {
  Departments: SearchFacet[]
  Brands: SearchFacet[]
  SpecificationFilters: Record<string, SearchFacet[]>
  CategoriesTrees: SearchFacetCategory[]
  PriceRanges: Array<{
    Slug: string
    Quantity: number
    Name: string
    Link: string
    LinkEncoded: string
    Map: null
    Value: string
  }>
  Summary: {
    Departments: SummaryItem
    CategoriesTrees: SummaryItem
    Brands: SummaryItem
    PriceRanges: SummaryItem
    SpecificationFilters: Record<string, SummaryItem>
  }
}

interface SearchAutocompleteItem {
  productId: string
  itemId: string
  name: string
  nameComplete: string
  imageUrl: string
}

interface SearchAutocompleteUnit {
  items: SearchAutocompleteItem[]
  thumb: string
  thumbUrl: string | null
  name: string
  href: string
  criteria: string
}

interface FieldTreeResponseAPI {
  Name: string
  CategoryId: number
  FieldId: number
  IsActive: boolean
  IsStockKeepingUnit: boolean
}

interface FieldResponseAPI {
  Name: string
  CategoryId: number | null
  FieldId: number
  IsActive: boolean
  IsRequired: boolean
  FieldTypeId: number
  FieldTypeName: string
  FieldValueId: string | null
  Description: string | null
  IsStockKeepingUnit: boolean
  IsFilter: boolean
  IsOnProductDetails: boolean
  Position: number
  IsWizard: boolean
  IsTopMenuLinkActive: boolean
  IsSideMenuLinkActive: boolean
  DefaultValue: string | null
  FieldGroupId: number
  FieldGroupName: string
}

interface MailItem {
  id?: string
  productName?: string
  image?: string
  sellingPrice?: number | string
  quantity?: string
  link?: string
  availabilityQuantity?: number
}

interface SkuURLItem {
  id: string
  qty: string
  seller: string
  sc: string
}

```


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

[User] Show me the implementation of abandoned-cart/node/middlewares/abandonedCart.ts from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { json } from 'co-body'

import { mapProducts, mapSkus } from '../utils/products'

interface AbandonedCart {
  skuURL: string
  email: string
  template: string
  additionalFields: any
}

export async function abandonedCart(ctx: Context, next: () => Promise<any>) {
  const {
    clients: { catalog: catalogClient, message: messageClient },
  } = ctx

  const body: AbandonedCart = await json(ctx.req)

  const skus = mapSkus(body.skuURL)
  const products = await catalogClient.getProducts(skus)

  const items = mapProducts(products, skus).filter(
    value =>
      value.availabilityQuantity !== undefined && value.availabilityQuantity > 0
  )

  if (items.length > 0) {
    await messageClient.sendMail(
      {
        email: body.email,
        items,
        addToCartURL: body.skuURL,
        additionalFields: body.additionalFields,
      },
      body.template
    )
  }

  ctx.status = 200
  ctx.body = 'ok'
  // ctx.set('Cache-Control', headers['cache-control'])

  await next()
}

```


[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 abandoned-cart/node/utils/products.ts from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```typescript
const getPriceWithDecimal = (num: number): string => {
  if (!num) return Number(0).toFixed(2)
  const dec = num.toString().split('.')[1]
  const len = dec && dec.length > 2 ? dec.length : 2

  return Number(num).toFixed(len)
}

export const mapProducts = (
  products: SearchProduct[],
  skus: SkuURLItem[]
): MailItem[] => {
  return skus.map<MailItem>((s: SkuURLItem) => {
    let sku: SearchItem | undefined
    const product = products.find((p: SearchProduct) => {
      sku = p.items.find((i: SearchItem) => i.itemId === s.id)

      return sku !== undefined
    })

    const sellingPrice = getPriceWithDecimal(
      sku?.sellers[0].commertialOffer.Price as number
    )

    return {
      id: s.id,
      productName: sku?.nameComplete,
      image: sku?.images[0].imageUrl,
      sellingPrice,
      quantity: s.qty,
      link: product?.linkText,
      availabilityQuantity: sku?.sellers[0].commertialOffer.AvailableQuantity,
    }
  })
}

export const mapSkus = (skuURL: string) => {
  const skus = skuURL.match(/(sku|qty|seller|sc)=[0-9]+/g)
  let counter = 0

  return (
    skus?.reduce((accum: SkuURLItem[], currentValue: string) => {
      const splitted = currentValue.split('=')

      if (splitted[0] === 'sku') {
        accum.push({
          id: splitted[1],
          qty: '',
          seller: '',
          sc: '',
        })
        counter++

        return accum
      }

      accum[counter - 1] = {
        ...accum[counter - 1],
        [splitted[0]]: splitted[1],
      }

      return accum
    }, []) ?? []
  )
}

```


[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 abandoned-cart/node/configs/configEmail.ts from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default {
  Name: 'vtexcommerce-abandoned-cart',
  FriendlyName: 'Abandoned Cart',
  Description: 'Notify to the user that he had an order pending to finish',
  IsDefaultTemplate: false,
  AccountId: null,
  AccountName: '{(accountName}}',
  ApplicationId: null,
  IsPersisted: true,
  IsRemoved: false,
  Type: '',
  Templates: {
    email: {
      To: '{{email}}',
      CC: null,
      BCC: null,
      Subject: 'Lost Cart!',
      Message: 'Template Example',
      Type: 'E',
      ProviderId: '00000000-0000-0000-0000-000000000000',
      ProviderName: null,
      IsActive: true,
      withError: false,
    },
    sms: {
      Type: 'S',
      ProviderId: null,
      ProviderName: null,
      IsActive: false,
      withError: false,
      Parameters: [],
    },
  },
}

```


[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 abandoned-cart/node/events/configureMailTemplate.ts from the abandoned-cart VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { EventContext } from '@vtex/api'

import { Clients } from '../clients'

export async function configureMailTemplate(ctx: EventContext<Clients>) {
  const {
    clients: { message: messageClient },
    body: { to },
  } = ctx

  if (to) {
    const [appName] = to?.id?.split('@')

    if (
      appName.length &&
      `${process.env.VTEX_APP_VENDOR}.${process.env.VTEX_APP_NAME}` === appName
    ) {
      const response = await messageClient.sendTemplate()

      return response
    }
  }

  return null
}

```


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

[User] Show me the implementation of store-components/messages/hu.json from the store-components VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/search.clear-input": "Keresési mező törlése",
  "store/search.submit-search": "Termékek keresése",
  "store/search.placeholder": "Keresés",
  "store/search.searchFor": "Keresés erre: {term}",
  "store/search.search-term-too-short": "A keresési kifejezés túl rövid",
  "admin/editor.productName.title": "Terméknév",
  "admin/editor.productName.description": "Terméknév komponens",
  "admin/editor.productName.showBrandName.title": "Márkanév megjelenítése",
  "admin/editor.productName.showSku.title": "SKU megjelenítése",
  "admin/editor.productName.showProductReference.title": "Termékreferencia megjelenítése",
  "admin/editor.productName.displayMode.title": "Link megjelenítése a terméknévvel vagy egyszerű szövegként",
  "admin/editor.productName.displayMode.plainText": "Egyszerű szöveg",
  "admin/editor.productName.displayMode.linkToProductPage": "Link a termékoldalra",
  "admin/editor.productPrice.title": "Termék ára",
  "admin/editor.productPrice.description": "Termékár komponens",
  "admin/editor.productPrice.showListPrice": "Listaár megjelenítése",
  "admin/editor.productPrice.showSellingPriceRange": "Eladási ár tartomány megjelenítése",
  "admin/editor.productPrice.showListPriceRange": "Listaár tartomány megjelenítése",
  "admin/editor.productPrice.showLabels": "Árcímkék megjelenítése",
  "admin/editor.productPrice.showInstallments": "Fizetési részletek megjelenítése",
  "admin/editor.productPrice.showSavings": "Listaár és eladási ár különbség megjelenítése",
  "admin/editor.productPrice.labelSellingPrice": "Eladási árcímke",
  "admin/editor.productPrice.labelListPrice": "Listaár címke",
  "admin/editor.share.title": "Megosztás",
  "admin/editor.share.description": "Megosztógombok listája",
  "admin/editor.share.social.title": "Közösségi média",
  "store/product-description.title": "Termékleírás",
  "store/product-description.property": "Tulajdonság",
  "store/product-description.specification": "Specifikáció",
  "store/product-description.collapse.showMore": "Mutass többet",
  "store/product-description.collapse.showLess": "Mutass kevesebbet",
  "store/pricing.installment-display": "Vagy {installments} {times} {installmentPrice} részletben",
  "store/pricing.from": "Tól",
  "store/pricing.to": "Ig",
  "store/pricing.savings": "Megtakarítás: {savings}",
  "store/pricing.interest-free": "kamatmentes",
  "store/loading": "Betöltés…",
  "store/shipping.deliveryName": "Kiszállítás",
  "store/shipping.deliveryEstimate": "Becslés",
  "store/shipping.deliveryPrice": "Érték",
  "store/shipping.label": "Szállítás kalkulációja",
  "store/shipping.free": "Ingyenes",
  "store/shipping.empty-sla": "Nincs szállítási információ a megadott irányítószámhoz",
  "store/buy-button.add-to-cart": "Kosárba helyezés",
  "store/buybutton.buy-success": "Termék hozzáadva a kosárhoz",
  "store/buybutton.buy-success-duplicate": "A termék már a kosárban van",
  "store/buybutton.add-failure": "Hiba történt, a terméket nem sikerült a kosárba helyezni!",
  "store/buybutton.buy-offline-success": "A termék hozzáadva az offline kosárhoz",
  "store/buybutton.select-sku-variations": "Kérjük, válasszon egy opciót minden variációhoz",
  "store/buybutton.see-cart": "Kosár megtekintése",
  "store/technicalspecifications.title": "Műszaki adatok",
  "store/availability-subscriber.title": "Ez a termék jelenleg nem elérhető",
  "store/availability-subscriber.subscribe-label": "Értesítést kérek, amikor a termék elérhetővé válik",
  "store/availability-subscriber.email-placeholder": "Email",
  "store/availability-subscriber.name-placeholder": "Név",
  "store/availability-subscriber.send-label": "Küldés",
  "store/availability-subscriber.invalid-email": "Érvénytelen email",
  "store/availability-subscriber.added-message": "Email sikeresen regisztrálva",
  "store/availability-subscriber.error-message": "Sikertelen. Kérjük próbálja újra.",
  "store/newsletter.label": "Iratkozzon fel a hírlevelünkre",
  "store/newsletter.placeholder": "Adja meg email címét",
  "store/newsletter.submit": "Feliratkozás",
  "store/newsletter.invalidEmail": "Kérjük, adjon meg egy érvényes emailt.",
  "store/newsletter.confirmationTitle": "Köszönjük!",
  "store/newsletter.confirmationText": "Az email sikeresen regisztrálva.",
  "store/newsletter.error": "Valami hiba történt. Kérjük, próbálja meg később újra.",
  "admin/editor.newsletter.title": "Hírlevél",
  "admin/editor.newsletter.description": "Hírlevél űrlap",
  "admin/editor.newsletter.label": "Az űrlap címkéje, amelyet a komponens használ",
  "admin/editor.newsletter.placeholder": "Email mező helykitöltő",
  "admin/editor.newsletter.submit": "Beküldés gomb címkéje",
  "admin/editor.newsletter.hideLabel": "Címke elrejtése",
  "admin/editor.categoriesHighlighted.title": "Kiemelt kategóriák",
  "admin/editor.categoriesHighlighted.description": "Osztály kiemelt kategóriák",
  "admin/editor.categoriesHighlighted.item.categoryName": "Kategória neve",
  "admin/editor.categoriesHighlighted.item.categoryImage": "Kategória képe",
  "admin/editor.categoriesHighlighted.category": "Kategória",
  "admin/editor.categoriesHighlighted.categoriesHighlighted": "Kiemelt kategóriák",
  "admin/editor.categoriesHighlighted.showCategoriesHighlighted": "Kiemelt kategóriák megjelenítése",
  "admin/editor.categoriesHighlighted.quantityOfItems": "Tétel mennyisége",
  "admin/editor.categoriesHighlighted.cardShape": "Doboz alakja",
  "admin/editor.categoriesHighlighted.cardShape.squared": "Négyzet",
  "admin/editor.categoriesHighlighted.cardShape.rectangular": "Téglalap",
  "store/searchBar.button.cancel.label": "Mégse",
  "store/buyButton-label-unavailable": "Nem elérhető",
  "store/greeting": "Helló",
  "store/store-components.share.label": "Megosztás",
  "store/share.title": "{product} {sku} a {store} áruházban:",
  "admin/editor.info-card.title": "InfoCard",
  "admin/editor.info-card.description": "Kép és szöveg komponens, amelyet beállíthat",
  "admin/editor.info-card.isFullModeStyle.title": "Kép háttérként",
  "admin/editor.info-card.isFullModeStyle.description": "Ha igaz, a megadott kép háttérképként lesz használva, és a szöveg rajta jelenik meg",
  "admin/editor.info-card.textPosition.title": "Szöveg pozíciója",
  "admin/editor.info-card.textPosition.description": "Válassza ki a komponens helyét, ahol a szöveg megjelenik: bal, közép vagy jobb",
  "admin/editor.info-card.headline.title": "Főcím",
  "admin/editor.info-card.headline.description": "Főcím szöveg a komponensen belül",
  "admin/editor.info-card.subhead.title": "Alcím",
  "admin/editor.info-card.subhead.description": "Szöveg a főcím alatt a komponensen belül",
  "admin/editor.info-card.body-text.title": "Szövegtörzs",
  "admin/editor.info-card.body-text.description": "Az alcím belső komponens alatti szöveg",
  "admin/editor.info-card.callToActionMode.title": "Call to action mód",
  "admin/editor.info-card.callToActionMode.description": "Szabályozza a call to action megjelenését",
  "admin/editor.info-card.callToActionText.title": "Call to action szöveg",
  "admin/editor.info-card.callToActionText.description": "Szöveg a call to action komponensben",
  "admin/editor.info-card.callToActionUrl.title": "Call to action URL",
  "admin/editor.info-card.callToActionLinkTarget.title": "Átirányítás típusa a call to action linknél",
  "admin/editor.info-card.callToActionLinkTarget.description": "CallToActionLinkTarget tulajdonság leírása",
  "admin/editor.info-card.callToActionLinkTarget.blank": "Link új fülön nyílik meg",
  "admin/editor.info-card.callToActionLinkTarget.self": "Link ugyanazon a fülön nyílik meg",
  "admin/editor.info-card.callToActionUrl.description": "Átirányítás URL, amikor a CTA-ra kattintanak",
  "admin/editor.info-card.imageUrl.title": "Kép",
  "admin/editor.info-card.imageUrl.description": "Kép asztali számítógéphez",
  "admin/editor.info-card.mobileImageUrl.title": "Mobilkép",
  "admin/editor.info-card.mobileImageUrl.description": "Kép mobilon való használathoz",
  "admin/editor.info-card.textAlignment.title": "Szöveg igazítása",
  "admin/editor.info-card.textAlignment.description": "Szabályozza a szöveg igazítását a komponensen belül",
  "admin/editor.info-card.textPosition.left": "Balra",
  "admin/editor.info-card.textPosition.center": "Középre",
  "admin/editor.info-card.textPosition.right": "Jobbra",
  "admin/editor.info-card.textAlignment.left": "Balra",
  "admin/editor.info-card.textAlignment.center": "Középre",
  "admin/editor.info-card.textAlignment.right": "Jobbra",
  "admin/editor.info-card.textMode.title": "Szöveg mód",
  "admin/editor.info-card.textMode.description": "Szöveg mód, amelyet az InfoCard fogad. Alapértelmezett a HTML, a rich text lehetővé teszi a markdown használatát.",
  "admin/editor.info-card.textMode.html": "HTML",
  "admin/editor.info-card.textMode.rich-text": "Rich Text",
  "admin/editor.info-card.callAction.none": "Nincs",
  "admin/editor.info-card.callAction.button": "Gomb",
  "admin/editor.info-card.callAction.link": "Link",
  "admin/editor.info-card.imageActionUrl.title": "Kép akció URL",
  "admin/editor.info-card.imageActionUrl.description": "Adja meg az URL-t, hogy a kép linkké váljon és átirányíthassa a felhasználót",
  "store/user-address.pickup": "Átvétel a következő helyen: {name}",
  "store/user-address.order": "Küldés ide",
  "store/user-address.change": "Szerkesztés",
  "store/user-address.add": "Hely hozzáadása",
  "admin/editor.notification-bar.title": "Értesítési sáv",
  "admin/editor.notification-bar.description": "Komponens, amely bármilyen szöveget sávként jelenít meg",
  "admin/editor.notification-bar.content.title": "Tartalom",
  "admin/editor.notification-bar.content.description": "A sáv szövege",
  "admin/editor.blockClass.title": "CSS blokk osztály",
  "admin/editor.blockClass.description": "Extra osztálynevet ad hozzá, hogy könnyebbé tegye a stílusbeállítást",
  "admin/editor.image.title": "Kép",
  "admin/editor.image.description": "Bármilyen kép megjelenítése",
  "admin/editor.image.src.title": "Kép",
  "admin/editor.image.title.title": "Kép címe",
  "admin/editor.image.title.description": "Cím, amely megjelenik a lebegtetéskor",
  "admin/editor.image.alt.title": "Alternatív szöveg",
  "admin/editor.info-card.imageAltText.title": "Kép alternatív szöveg",
  "admin/editor.info-card.imageAltText.description": "Alternatív szöveg a képhez",
  "admin/editor.product-images.title": "Termékképek",
  "admin/editor.product-images.description": "Komponens, amely lehetővé teszi a termékképek testreszabását",
  "admin/editor.product-images.zoomOptions.title": "Nagyítási opciók",
  "admin/editor.product-images.zoomType.title": "Nagyítás típusa",
  "admin/editor.product-images.bgopacity.title": "Háttér átlátszósága",
  "admin/editor.product-images.thumbnailsOrientation.title": "Bélyegkép tájolása",
  "admin/editor.product-images.gallery": "Galériában",
  "admin/editor.product-images.in-page": "Az oldalon",
  "admin/editor.product-images.no-zoom": "Nincs nagyítás",
  "admin/editor.product-images.vertical": "Függőleges",
  "admin/editor.product-images.horizontal": "Vízszintes",
  "admin/editor.product-images.position.title": "Bélyegkép helyzete",
  "admin/editor.product-images.position.description": "Csak akkor használatos, ha a tájolás függőleges",
  "admin/editor.product-images.left": "Bal",
  "admin/editor.product-images.right": "Jobb",
  "admin/editor.product-images.displayThumbnailsArrows.title": "Nyilak megjelenítése a bélyegképeken",
  "admin/editor.product-specifications.title": "Termék specifikációk",
  "admin/editor.product-specifications.hidden-specifications.title": "Rejtett specifikációk",
  "admin/editor.product-specifications.hidden-specifications.description": "Adja meg a specifikációk neveit, amelyeket el akar rejteni",
  "admin/editor.product-specifications.visible-specifications.title": "Látható specifikációk",
  "admin/editor.product-specifications.visible-specifications.description": "Adja meg a látható specifikációk neveit. Csak egyet adjon meg a rejtett vagy látható specifikációk közül",
  "admin/editor.product-specifications.items.title": "Specifikáció",
  "admin/editor.logo.title": "Logó",
  "admin/editor.logo.description": "Komponens az áruház logójának megjelenítéséhez",
  "admin/editor.logo.href.title": "Átirányítási link",
  "admin/editor.logo.href.description": "Átirányítási link, amikor a logóra kattintanak. Hagyja üresen, hogy ne legyen kattintható.",
  "admin/editor.logo.url.title": "Kép",
  "admin/editor.logo.url.description": "Felhasználandó kép",
  "admin/editor.logo.width.title": "Szélesség",
  "admin/editor.logo.width.description": "Logó szélessége.",
  "admin/editor.logo.height.title": "Magasság",
  "admin/editor.logo.height.description": "Logó magassága.",
  "admin/editor.logo.title.title": "Alternatív szöveg",
  "admin/editor.logo.title.description": "Alternatív szöveg a logó képhez",
  "admin/editor.logo.mobileWidth.title": "Mobil szélesség",
  "admin/editor.logo.mobileWidth.description": "Mobilon használható szélesség. Ha üres, a megadott szélességi érték lesz használva.",
  "admin/editor.logo.mobileHeight.title": "Mobil magasság",
  "admin/editor.logo.mobileHeight.description": "Mobilon használható magasság. Ha üres, a megadott magassági érték lesz használva.",
  "store/skuSelector.seeMore": "Még {quantity} megtekintése",
  "store/sku-selector.select.placeholder": "Válasszon egy opciót",
  "store/sku-selector.variation.select-an-option": "Válasszon egy lehetőséget",
  "admin/editor.skuSelector.title": "SKU választó",
  "admin/editor.skuSelector.description": "Komponens, amely különböző variációkat jelenít meg egy elemhez, amelyet a felhasználó választhat",
  "admin/editor.skuSelector.seeMoreLabel.title": "Még {quantity} megtekintése címke",
  "admin/editor.skuSelector.seeMoreLabel.description": "„Még {quantity} megtekintése” gomb címkéje. A karakterláncnak egy {quantity} helyőrzőt kell tartalmaznia, hogy megjelenítse a megfelelő maradék elemeket. Példa: „Még {quantity} megtekintése”",
  "admin/editor.product-description.title": "Termékleírás",
  "admin/editor.product-description.title-prop.title": "Cím",
  "admin/editor.search-bar.title": "Keresősáv",
  "admin/editor.search-bar.placeholder.title": "Helykitöltő",
  "store/back-to-top.label": "Vissza a tetejére",
  "admin/editor.toTop.title": "Vissza a tetejére gomb",
  "admin/editor.toTop.description": "Amikor rákattintanak, az oldal tetejére görget",
  "admin/editor.toTop.topPixel.title": "Pixel szám",
  "admin/editor.toTop.topPixel.description": "Amikor a meghatározott pixelértéket meghaladja, megjelenik a vissza a tetejére gomb"
}

```


[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 store-components/messages/nl.json from the store-components VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/search.placeholder": "Zoek",
  "store/search.searchFor": "Zoek voor {term}",
  "store/search.search-term-too-short": "Zoekterm is te kort",
  "admin/editor.productName.title": "Productnaam",
  "admin/editor.productName.description": "Productnaam component",
  "admin/editor.productName.showBrandName.title": "Toont de merknaam",
  "admin/editor.productName.showSku.title": "Toont de sku",
  "admin/editor.productName.showProductReference.title": "Toont de productreferentie",
  "admin/editor.productName.displayMode.title": "Toont de link die gekoppeld is aan de productnaam of onopgemaakte tekst",
  "admin/editor.productName.displayMode.plainText": "Onopgemaakte tekst",
  "admin/editor.productName.displayMode.linkToProductPage": "Link naar productpagina",
  "admin/editor.productPrice.title": "Productprijs",
  "admin/editor.productPrice.description": "Productprijs component",
  "admin/editor.productPrice.showListPrice": "Toon de catalogusprijs van het product",
  "admin/editor.productPrice.showSellingPriceRange": "Toon de verkoopprijzen van het product",
  "admin/editor.productPrice.showListPriceRange": "Toon de prijslijst van de producten",
  "admin/editor.productPrice.showLabels": "Toon de prijslabels van de producten",
  "admin/editor.productPrice.showInstallments": "Toon de betalingstermijnen van het product",
  "admin/editor.productPrice.showSavings": "Toon productlijst en verschil in verkoopprijs",
  "admin/editor.productPrice.labelSellingPrice": "Label verkoopprijs",
  "admin/editor.productPrice.labelListPrice": "Label prijslijst",
  "admin/editor.share.title": "Deel",
  "admin/editor.share.description": "Lijst met deelknoppen",
  "admin/editor.share.social.title": "Sociale netwerken",
  "store/product-description.title": "Productbeschrijving",
  "store/product-description.property": "Eigendom",
  "store/product-description.specification": "Specificatie",
  "store/product-description.collapse.showMore": "Meer weergeven",
  "store/product-description.collapse.showLess": "Toon minder",
  "store/pricing.installment-display": "Of {installments} {times} van {installmentPrice}",
  "store/pricing.from": "Van",
  "store/pricing.to": "Naar",
  "store/pricing.savings": "Bewaar {savings}",
  "store/pricing.interest-free": "rentevrij",
  "store/loading": "Bezig met laden…",
  "store/shipping.deliveryName": "Levering",
  "store/shipping.deliveryEstimate": "Geschat",
  "store/shipping.deliveryPrice": "Waarde",
  "store/shipping.label": "Verzending berekenen",
  "store/shipping.free": "Gratis",
  "store/shipping.empty-sla": "Er is geen verzendinformatie beschikbaar voor de geinformeerde postcode",
  "store/buy-button.add-to-cart": "Toevoegen aan winkelwagen",
  "store/buybutton.buy-success": "Item toegevoegd aan uw winkelwagen",
  "store/buybutton.buy-success-duplicate": "Item al in uw winkelwagen",
  "store/buybutton.add-failure": "Er is iets misgegaan en het item is niet toegevoegd aan uw winkelwagen!",
  "store/buybutton.buy-offline-success": "Item toegevoegd aan uw offline winkelwagen",
  "store/buybutton.select-sku-variations": "Selecteer een optie van elke variatie",
  "store/buybutton.see-cart": "Bekijk winkelwagen",
  "store/technicalspecifications.title": "Technische specificaties",
  "store/availability-subscriber.title": "Dit product is momenteel niet beschikbaar",
  "store/availability-subscriber.subscribe-label": "Ik wil weten wanneer dit product beschikbaar komt",
  "store/availability-subscriber.email-placeholder": "E-mail",
  "store/availability-subscriber.name-placeholder": "Naam",
  "store/availability-subscriber.send-label": "Verstuur",
  "store/availability-subscriber.invalid-email": "Ongeldig e-mailadres",
  "store/availability-subscriber.added-message": "E-mail succesvol geregistreerd",
  "store/availability-subscriber.error-message": "Mislukt, probeer het nog eens",
  "store/newsletter.label": "Schrijf u in op onze nieuwsbrief",
  "store/newsletter.placeholder": "Voer uw e-mailadres in",
  "store/newsletter.submit": "Aanmelden",
  "store/newsletter.invalidEmail": "Voer een geldige e-mail in.",
  "store/newsletter.confirmationTitle": "Bedankt!",
  "store/newsletter.confirmationText": "Uw e-mail werd met succes geregistreerd.",
  "store/newsletter.error": "Er is iets misgegaan, probeer het later nog eens",
  "admin/editor.newsletter.title": "Newsletter",
  "admin/editor.newsletter.description": "Nieuwsbriefformulier",
  "admin/editor.newsletter.label": "Label van de door het onderdeel gebruikte vorm",
  "admin/editor.newsletter.placeholder": "Plaatshouder van de e-mailinvoer",
  "admin/editor.newsletter.submit": "Label van de verzendknop",
  "admin/editor.newsletter.hideLabel": "Verberg label",
  "admin/editor.categoriesHighlighted.title": "Categorieën gemarkeerd",
  "admin/editor.categoriesHighlighted.description": "Categorieën gemarkeerd van de afdeling",
  "admin/editor.categoriesHighlighted.item.categoryName": "Categorienaam",
  "admin/editor.categoriesHighlighted.item.categoryImage": "Afbeelding categorie",
  "admin/editor.categoriesHighlighted.category": "Categorie",
  "admin/editor.categoriesHighlighted.categoriesHighlighted": "Categorieën gemarkeerd",
  "admin/editor.categoriesHighlighted.showCategoriesHighlighted": "Toon gemarkeerde categorieën",
  "admin/editor.categoriesHighlighted.quantityOfItems": "Hoeveelheid items",
  "admin/editor.categoriesHighlighted.cardShape": "De vorm van de doos",
  "admin/editor.categoriesHighlighted.cardShape.squared": "Vierkantig",
  "admin/editor.categoriesHighlighted.cardShape.rectangular": "Rechthoekig",
  "store/searchBar.button.cancel.label": "Annuleren",
  "store/buyButton-label-unavailable": "Niet beschikbaar",
  "store/greeting": "Hallo",
  "store/store-components.share.label": "Deel",
  "store/share.title": "{product} {sku} bij {store}: ",
  "admin/editor.info-card.title": "InfoCard",
  "admin/editor.info-card.description": "Een component met afbeelding en tekst die u kunt kiezen hoe u deze weergeeft",
  "admin/editor.info-card.isFullModeStyle.title": "Afbeelding als achtergrond",
  "admin/editor.info-card.isFullModeStyle.description": "Indien waar, zal de verstrekte afbeelding worden gebruikt als achtergrondafbeelding en zal er tekst overheen worden weergegeven",
  "admin/editor.info-card.textPosition.title": "Tekstpositie",
  "admin/editor.info-card.textPosition.description": "Kies in welke positie de componenttekst wordt weergegeven, links, in het midden of rechts",
  "admin/editor.info-card.headline.title": "Headline",
  "admin/editor.info-card.headline.description": "Tekst die moet worden weergegeven als een kop binnenin component",
  "admin/editor.info-card.subhead.title": "Subkop",
  "admin/editor.info-card.subhead.description": "Tekst die moet worden weergegeven onder de kop binnenin component",
  "admin/editor.info-card.body-text.title": "Bodytekst",
  "admin/editor.info-card.body-text.description": "Tekst onder subkop in component",
  "admin/editor.info-card.callToActionMode.title": "Oproep tot actiemodus",
  "admin/editor.info-card.callToActionMode.description": "Controleert hoe uw oproep tot actie wordt weergegeven",
  "admin/editor.info-card.callToActionText.title": "Oproep tot actie-tekst",
  "admin/editor.info-card.callToActionText.description": "Tekst die in de oproep tot actie-component moet worden weergegeven",
  "admin/editor.info-card.callToActionUrl.title": "Oproep tot actie-URL",
  "admin/editor.info-card.callToActionLinkTarget.title": "Omleidingstype van Oproep naar Actielink",
  "admin/editor.info-card.callToActionLinkTarget.description": "Beschrijving van de eigenschap callToActionLinkTarget",
  "admin/editor.info-card.callToActionLinkTarget.blank": "Link opent in een nieuw tabblad",
  "admin/editor.info-card.callToActionLinkTarget.self": "Link opent in hetzelfde tabblad",
  "admin/editor.info-card.callToActionUrl.description": "Url om door te sturen naar wanneer CTA is geklikt",
  "admin/editor.info-card.imageUrl.title": "Afbeelding",
  "admin/editor.info-card.imageUrl.description": "Afbeelding om op desktop te gebruiken",
  "admin/editor.info-card.mobileImageUrl.title": "Mobiele afbeelding",
  "admin/editor.info-card.mobileImageUrl.description": "Afbeelding voor mobiel gebruik",
  "admin/editor.info-card.textAlignment.title": "Tekstuitlijning",
  "admin/editor.info-card.textAlignment.description": "Regel de tekstuitlijning binnen het onderdeel",
  "admin/editor.info-card.textPosition.left": "Links",
  "admin/editor.info-card.textPosition.center": "Midden",
  "admin/editor.info-card.textPosition.right": "Rechts",
  "admin/editor.info-card.textAlignment.left": "Links",
  "admin/editor.info-card.textAlignment.center": "Midden",
  "admin/editor.info-card.textAlignment.right": "Rechts",
  "admin/editor.info-card.textMode.title": "Tekstmodus",
  "admin/editor.info-card.textMode.description": "Welke tekstmodus moet de InfoCard verwacht te ontvangen. HTML is de standaard en Rich Text stelt u in staat Markdown te gebruiken.",
  "admin/editor.info-card.textMode.html": "HTML",
  "admin/editor.info-card.textMode.rich-text": "Rich tekst",
  "admin/editor.info-card.callAction.none": "Geen",
  "admin/editor.info-card.callAction.button": "Knop",
  "admin/editor.info-card.callAction.link": "Link",
  "admin/editor.info-card.imageActionUrl.title": "Afbeelding actie-URL",
  "admin/editor.info-card.imageActionUrl.description": "Geef de URL door om van de afbeelding een link te maken en de gebruiker om te leiden",
  "store/user-address.pickup": "Afhalen bij {name}",
  "store/user-address.order": "Bestel aan",
  "store/user-address.change": "Verander",
  "store/user-address.add": "Locatie toevoegen",
  "admin/editor.notification-bar.title": "Notificatiebalk",
  "admin/editor.notification-bar.description": "Een onderdeel dat elke tekst in een staafstijl laat zien",
  "admin/editor.notification-bar.content.title": "Inhoud",
  "admin/editor.notification-bar.content.description": "Tekst van de balk",
  "admin/editor.blockClass.title": "CSS-blokklasse",
  "admin/editor.blockClass.description": "Voegt een extra klasse-naam toe om de styling te vergemakkelijken",
  "admin/editor.image.title": "Afbeelding",
  "admin/editor.image.description": "Toon eender welke afbeelding",
  "admin/editor.image.src.title": "Afbeelding",
  "admin/editor.image.title.title": "Titel van de afbeelding",
  "admin/editor.image.title.description": "Titel die moet worden weergegeven bij zweven",
  "admin/editor.image.alt.title": "Alternatieve tekst",
  "admin/editor.info-card.imageAltText.title": "Afbeelding alternatieve tekst",
  "admin/editor.info-card.imageAltText.description": "Alternatieve tekst voor de afbeelding",
  "admin/editor.product-images.title": "Productafbeeldingen",
  "admin/editor.product-images.description": "Met de component productafbeeldingen kunt u de productafbeeldingen aanpassen",
  "admin/editor.product-images.zoomOptions.title": "Zoomopties",
  "admin/editor.product-images.zoomType.title": "Zoomtype",
  "admin/editor.product-images.bgopacity.title": "Achtergrondopaciteit",
  "admin/editor.product-images.thumbnailsOrientation.title": "Miniatuuroriëntatie",
  "admin/editor.product-images.gallery": "In gallerij",
  "admin/editor.product-images.in-page": "In pagina",
  "admin/editor.product-images.no-zoom": "Geen zoom",
  "admin/editor.product-images.vertical": "Verticaal",
  "admin/editor.product-images.horizontal": "Horizontaal",
  "admin/editor.product-images.position.title": "Miniatuurpositie",
  "admin/editor.product-images.position.description": "Alleen gebruikt wanneer de oriëntatie verticaal is",
  "admin/editor.product-images.left": "Links",
  "admin/editor.product-images.right": "Rechts",
  "admin/editor.product-images.displayThumbnailsArrows.title": "Weergavepijlen in miniaturen",
  "admin/editor.product-specifications.title": "Productspecificaties",
  "admin/editor.product-specifications.hidden-specifications.title": "Verborgen specificaties",
  "admin/editor.product-specifications.hidden-specifications.description": "Typenamen van specificaties die u wilt verbergen",
  "admin/editor.product-specifications.visible-specifications.title": "Zichtbare specificaties",
  "admin/editor.product-specifications.visible-specifications.description": "Typenamen van specificaties die u wilt laten verschijnen. Geef slechts één van de verborgen specificaties of zichtbare specificaties op",
  "admin/editor.product-specifications.items.title": "Specificatie",
  "admin/editor.logo.title": "Logo",
  "admin/editor.logo.description": "Onderdeel om uw winkellogo te tonen",
  "admin/editor.logo.href.title": "Link naar omleiding",
  "admin/editor.logo.href.description": "Link die moet worden doorgestuurd wanneer op het logo wordt geklikt. Laat leeg om het niet aanklikbaar te maken.",
  "admin/editor.logo.url.title": "Afbeelding",
  "admin/editor.logo.url.description": "Te gebruiken afbeelding",
  "admin/editor.logo.width.title": "Breedte",
  "admin/editor.logo.width.description": "Breedte te gebruiken voor het logo.",
  "admin/editor.logo.height.title": "Hoogte",
  "admin/editor.logo.height.description": "Hoogte te gebruiken voor het logo.",
  "admin/editor.logo.title.title": "Alternatieve tekst",
  "admin/editor.logo.title.description": "Alternatieve tekst voor de afbeelding van het logo",
  "admin/editor.logo.mobileWidth.title": "Mobiele breedte",
  "admin/editor.logo.mobileWidth.description": "Breedte te gebruiken op mobiel. Indien leeg, zal de verstrekte breedtewaarde worden gebruikt.",
  "admin/editor.logo.mobileHeight.title": "Mobiele hoogte",
  "admin/editor.logo.mobileHeight.description": "Hoogte voor mobiel gebruik. Indien leeg, zal gebruik maken van de meegeleverde hoogtewaarde.",
  "store/skuSelector.seeMore": "Zie {quantity} meer",
  "store/sku-selector.select.placeholder": "Kies een optie",
  "store/sku-selector.variation.select-an-option": "Selecteer een optie",
  "admin/editor.skuSelector.title": "SKU-selector",
  "admin/editor.skuSelector.description": "Component die verschillende gegeven variaties van een item weergeeft, zodat de gebruiker kan kiezen",
  "admin/editor.skuSelector.seeMoreLabel.title": "Zie meer label",
  "admin/editor.skuSelector.seeMoreLabel.description": "Label van zie meer knop. De string moet een {quantity} plaatshouder hebben om de juiste resterende items te tonen. Voorbeeld: \"Zie {quantity} meer\"",
  "admin/editor.product-description.title": "Productbeschrijving",
  "admin/editor.product-description.title-prop.title": "Titel",
  "admin/editor.search-bar.title": "Zoekbalk",
  "admin/editor.search-bar.placeholder.title": "Plaatsaanduiding",
  "store/back-to-top.label": "Terug naar boven",
  "admin/editor.toTop.title": "Terug naar bovenste knop",
  "admin/editor.toTop.description": "Wanneer erop geklikt wordt de pagina naar de bovenkant gebracht",
  "admin/editor.toTop.topPixel.title": "Aantal pixels",
  "admin/editor.toTop.topPixel.description": "Bij overschrijding van de ingestelde pixel waarde verschijnt de knop om terug te keren naar de bovenkant"
}

```


[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 store-components/messages/ja.json from the store-components VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/search.placeholder": "検索",
  "store/search.searchFor": "{term} の検索結果",
  "store/search.search-term-too-short": "検索ワードが短すぎます",
  "admin/editor.productName.title": "製品名",
  "admin/editor.productName.description": "製品名コンポーネント",
  "admin/editor.productName.showBrandName.title": "ブランド名を表示する",
  "admin/editor.productName.showSku.title": "SKU を表示する",
  "admin/editor.productName.showProductReference.title": "製品の参照を表示する",
  "admin/editor.productName.displayMode.title": "製品名またはプレーンテキストに関連付けられているリンクの表示",
  "admin/editor.productName.displayMode.plainText": "プレーンテキスト",
  "admin/editor.productName.displayMode.linkToProductPage": "製品ページへのリンク",
  "admin/editor.productPrice.title": "製品価格",
  "admin/editor.productPrice.description": "製品価格コンポーネント",
  "admin/editor.productPrice.showListPrice": "製品のリスト価格を表示する",
  "admin/editor.productPrice.showSellingPriceRange": "製品の販売価格範囲を表示する",
  "admin/editor.productPrice.showListPriceRange": "製品のリスト価格範囲を表示する",
  "admin/editor.productPrice.showLabels": "製品の価格ラベルを表示する",
  "admin/editor.productPrice.showInstallments": "製品の分割払い回数を表示する",
  "admin/editor.productPrice.showSavings": "製品のリスト価格と販売価格の差を表示する",
  "admin/editor.productPrice.labelSellingPrice": "販売価格ラベル",
  "admin/editor.productPrice.labelListPrice": "リスト価格ラベル",
  "admin/editor.share.title": "共有する",
  "admin/editor.share.description": "共有ボタンのリスト",
  "admin/editor.share.social.title": "ソーシャルネットワーク",
  "store/product-description.title": "製品説明",
  "store/product-description.property": "プロパティ",
  "store/product-description.specification": "仕様",
  "store/product-description.collapse.showMore": "さらに表示",
  "store/product-description.collapse.showLess": "表示を減らす",
  "store/pricing.installment-display": "または {installments} {times} / {installmentPrice}",
  "store/pricing.from": "開始",
  "store/pricing.to": "終了",
  "store/pricing.savings": "保存 {savings}",
  "store/pricing.interest-free": "無利息",
  "store/loading": "読み込み中…",
  "store/shipping.deliveryName": "配送",
  "store/shipping.deliveryEstimate": "推定",
  "store/shipping.deliveryPrice": "値",
  "store/shipping.label": "発送を計算",
  "store/shipping.free": "無料",
  "store/shipping.empty-sla": "入力された郵便番号について、取得できる発送情報はありません",
  "store/buy-button.add-to-cart": "カートに追加",
  "store/buybutton.buy-success": "カートに追加された項目",
  "store/buybutton.buy-success-duplicate": "すでにカート内にある項目",
  "store/buybutton.add-failure": "エラーが発生しました。項目はカートに追加されていません！",
  "store/buybutton.buy-offline-success": "オフラインカートに追加された項目",
  "store/buybutton.select-sku-variations": "それぞれのバリエーションのオプションを選択してください",
  "store/buybutton.see-cart": "カートを閲覧する",
  "store/technicalspecifications.title": "技術仕様",
  "store/availability-subscriber.title": "現在、この製品を入手できません",
  "store/availability-subscriber.subscribe-label": "この製品が入手可能になったらお知らせください",
  "store/availability-subscriber.email-placeholder": "Eメール",
  "store/availability-subscriber.name-placeholder": "名前",
  "store/availability-subscriber.send-label": "送る",
  "store/availability-subscriber.invalid-email": "無効なメール",
  "store/availability-subscriber.added-message": "メールの登録が完了しました",
  "store/availability-subscriber.error-message": "失敗しました、もう一度やり直して下さい",
  "store/newsletter.label": "ニュースレターの購読",
  "store/newsletter.placeholder": "メールアドレスを入力",
  "store/newsletter.submit": "サインアップ",
  "store/newsletter.invalidEmail": "正しいメールアドレスを入力してください。",
  "store/newsletter.confirmationTitle": "ありがとうございました！",
  "store/newsletter.confirmationText": "メールアドレスが登録できました。",
  "store/newsletter.error": "エラーが発生しました。後でもう一度やり直してください",
  "admin/editor.newsletter.title": "ニュースレター",
  "admin/editor.newsletter.description": "ニュースレターフォーム",
  "admin/editor.newsletter.label": "コンポーネントに使用されるフォームのラベル",
  "admin/editor.newsletter.placeholder": "Eメール入力のプレースホルダー",
  "admin/editor.newsletter.submit": "提出ボタンのラベル",
  "admin/editor.newsletter.hideLabel": "ラベルを非表示にする",
  "admin/editor.categoriesHighlighted.title": "ハイライトされたカテゴリ",
  "admin/editor.categoriesHighlighted.description": "部門によりハイライトされたカテゴリ",
  "admin/editor.categoriesHighlighted.item.categoryName": "カテゴリ名",
  "admin/editor.categoriesHighlighted.item.categoryImage": "カテゴリ画像",
  "admin/editor.categoriesHighlighted.category": "カテゴリ",
  "admin/editor.categoriesHighlighted.categoriesHighlighted": "ハイライトされたカテゴリ",
  "admin/editor.categoriesHighlighted.showCategoriesHighlighted": "ハイライトされたカテゴリの表示",
  "admin/editor.categoriesHighlighted.quantityOfItems": "項目の数",
  "admin/editor.categoriesHighlighted.cardShape": "ボックスの形状",
  "admin/editor.categoriesHighlighted.cardShape.squared": "正方形",
  "admin/editor.categoriesHighlighted.cardShape.rectangular": "長方形",
  "store/searchBar.button.cancel.label": "キャンセル",
  "store/buyButton-label-unavailable": "利用不可",
  "store/greeting": "こんにちは",
  "store/store-components.share.label": "共有する",
  "store/share.title": "{store} の {product} {sku}: ",
  "admin/editor.info-card.title": "情報カード",
  "admin/editor.info-card.description": "表示方法を選ぶことのできる画像とテキストのコンポーネント",
  "admin/editor.info-card.isFullModeStyle.title": "背景の画像",
  "admin/editor.info-card.isFullModeStyle.description": "True の場合、提供された画像は背景画像として使用され、テキストはその上に表示されます",
  "admin/editor.info-card.textPosition.title": "テキストの位置",
  "admin/editor.info-card.textPosition.description": "コンポーネントテキストが表示される位置を左、中央、右から選びます。",
  "admin/editor.info-card.headline.title": "見出し",
  "admin/editor.info-card.headline.description": "コンポーネント内の見出しに表示されるテキスト",
  "admin/editor.info-card.subhead.title": "副見出し",
  "admin/editor.info-card.subhead.description": "コンポーネント内の見出しの下に表示されるテキスト",
  "admin/editor.info-card.body-text.title": "本文テキスト",
  "admin/editor.info-card.body-text.description": "コンポーネント内でサブヘッダーの下に来るテキスト",
  "admin/editor.info-card.callToActionMode.title": "行動喚起モード",
  "admin/editor.info-card.callToActionMode.description": "行動喚起の表示方法をコントロールします",
  "admin/editor.info-card.callToActionText.title": "行動喚起テキスト",
  "admin/editor.info-card.callToActionText.description": "行動喚起コンポーネントのテキストが内部に表示されます",
  "admin/editor.info-card.callToActionUrl.title": "行動喚起 URL",
  "admin/editor.info-card.callToActionLinkTarget.title": "アクションリンク通知のリダイレクトタイプ",
  "admin/editor.info-card.callToActionLinkTarget.description": "アクションリンクターゲット通知のプロパティの説明",
  "admin/editor.info-card.callToActionLinkTarget.blank": "新しいタブでリンクを開く",
  "admin/editor.info-card.callToActionLinkTarget.self": "同じタブでリンクを開く",
  "admin/editor.info-card.callToActionUrl.description": "CTA をクリックした時にリダイレクトする URL",
  "admin/editor.info-card.imageUrl.title": "画像",
  "admin/editor.info-card.imageUrl.description": "デスクトップで使用する画像",
  "admin/editor.info-card.mobileImageUrl.title": "モバイル画像",
  "admin/editor.info-card.mobileImageUrl.description": "モバイルで使用する画像",
  "admin/editor.info-card.textAlignment.title": "文字揃え",
  "admin/editor.info-card.textAlignment.description": "コンポーネント内の文字揃えをコントロールします",
  "admin/editor.info-card.textPosition.left": "左",
  "admin/editor.info-card.textPosition.center": "中央",
  "admin/editor.info-card.textPosition.right": "右",
  "admin/editor.info-card.textAlignment.left": "左",
  "admin/editor.info-card.textAlignment.center": "中央",
  "admin/editor.info-card.textAlignment.right": "右",
  "admin/editor.info-card.textMode.title": "テキストモード",
  "admin/editor.info-card.textMode.description": "InfoCard に届くことになっているテキストモードです。デフォルトは HTML ですが、リッチテキストを有効にすると Markdown を使えます。",
  "admin/editor.info-card.textMode.html": "HTML",
  "admin/editor.info-card.textMode.rich-text": "リッチテキスト",
  "admin/editor.info-card.callAction.none": "なし",
  "admin/editor.info-card.callAction.button": "ボタン",
  "admin/editor.info-card.callAction.link": "リンク",
  "admin/editor.info-card.imageActionUrl.title": "画像アクション URL",
  "admin/editor.info-card.imageActionUrl.description": "URL を渡して画像をリンクに変え、ユーザーをリダイレクトできるようにする",
  "store/user-address.pickup": "{name} でピックアップ",
  "store/user-address.order": "注文先",
  "store/user-address.change": "変更",
  "store/user-address.add": "場所を追加",
  "admin/editor.notification-bar.title": "通知バー",
  "admin/editor.notification-bar.description": "バースタイルでテキストを表示するコンポーネント",
  "admin/editor.notification-bar.content.title": "コンテンツ",
  "admin/editor.notification-bar.content.description": "バーのテキスト",
  "admin/editor.blockClass.title": "CSS ブロッククラス",
  "admin/editor.blockClass.description": "クラス名を別途追加し、スタイリングを簡単にしてください",
  "admin/editor.image.title": "画像",
  "admin/editor.image.description": "画像を表示する",
  "admin/editor.image.src.title": "画像",
  "admin/editor.image.title.title": "画像のタイトル",
  "admin/editor.image.title.description": "重ねて生じされるタイトル",
  "admin/editor.image.alt.title": "代替テキスト",
  "admin/editor.info-card.imageAltText.title": "画像の代替テキスト",
  "admin/editor.info-card.imageAltText.description": "画像の代替テキスト",
  "admin/editor.product-images.title": "製品画像",
  "admin/editor.product-images.description": "製品画像コンポーネントにより、製品画像をカスタマイズできます",
  "admin/editor.product-images.zoomOptions.title": "拡大オプション",
  "admin/editor.product-images.zoomType.title": "拡大タイプ",
  "admin/editor.product-images.bgopacity.title": "背景の透明度",
  "admin/editor.product-images.thumbnailsOrientation.title": "サムネイルの方向",
  "admin/editor.product-images.gallery": "ギャラリー内",
  "admin/editor.product-images.in-page": "ページ内",
  "admin/editor.product-images.no-zoom": "ズームなし",
  "admin/editor.product-images.vertical": "垂直",
  "admin/editor.product-images.horizontal": "水平",
  "admin/editor.product-images.position.title": "サムネイルの位置",
  "admin/editor.product-images.position.description": "垂直方向の時だけ使用できます",
  "admin/editor.product-images.left": "左",
  "admin/editor.product-images.right": "右",
  "admin/editor.product-images.displayThumbnailsArrows.title": "サムネイルに矢印を表示します",
  "admin/editor.product-specifications.title": "製品仕様",
  "admin/editor.product-specifications.hidden-specifications.title": "非表示の仕様",
  "admin/editor.product-specifications.hidden-specifications.description": "非表示にしたい仕様の名前を入力する",
  "admin/editor.product-specifications.visible-specifications.title": "見えている仕様",
  "admin/editor.product-specifications.visible-specifications.description": "表示したい仕様の名前を入力します。非表示の仕様または見えている仕様の1つだけを入力してください",
  "admin/editor.product-specifications.items.title": "仕様",
  "admin/editor.logo.title": "ロゴ",
  "admin/editor.logo.description": "ストアロゴを表示するコンポーネント",
  "admin/editor.logo.href.title": "リダイレクトするリンク",
  "admin/editor.logo.href.description": "ロゴがクリックされた時にリダイレクトされるリンクです。空欄にした場合、クリックできません。",
  "admin/editor.logo.url.title": "画像",
  "admin/editor.logo.url.description": "使用する画像",
  "admin/editor.logo.width.title": "幅",
  "admin/editor.logo.width.description": "ロゴのために使う幅",
  "admin/editor.logo.height.title": "高",
  "admin/editor.logo.height.description": "ロゴのために使う高さ",
  "admin/editor.logo.title.title": "代替テキスト",
  "admin/editor.logo.title.description": "ロゴ画像の代替テキスト",
  "admin/editor.logo.mobileWidth.title": "モバイルの幅",
  "admin/editor.logo.mobileWidth.description": "モバイルで使う幅です。空欄の場合、所定の幅を使用します。",
  "admin/editor.logo.mobileHeight.title": "モバイルの高さ",
  "admin/editor.logo.mobileHeight.description": "モバイルで使う高さです。空欄の場合、所定の高さを使用します。",
  "store/skuSelector.seeMore": "{quantity} 以上を表示する",
  "store/sku-selector.select.placeholder": "オプションを選択",
  "store/sku-selector.variation.select-an-option": "オプションを選択する",
  "admin/editor.skuSelector.title": "SKU セレクタ",
  "admin/editor.skuSelector.description": "ユーザーが選べるよう、項目のさまざまなバリエーションを表示するコンポーネント",
  "admin/editor.skuSelector.seeMoreLabel.title": "詳細を見るラベル",
  "admin/editor.skuSelector.seeMoreLabel.description": "詳細を見るボタンのラベルです。文字列は、利用できる適切な残りの項目を表示できるよう {quantity} のプレースホルダーがなければなりません。例: 「さらに {quantity} 個を見る」",
  "admin/editor.product-description.title": "製品説明",
  "admin/editor.product-description.title-prop.title": "タイトル",
  "admin/editor.search-bar.title": "検索バー",
  "admin/editor.search-bar.placeholder.title": "プレースホルダー",
  "store/back-to-top.label": "トップに戻る",
  "admin/editor.toTop.title": "トップボタンに戻る",
  "admin/editor.toTop.description": "クリックするとページが一番上に移動します",
  "admin/editor.toTop.topPixel.title": "ピクセル数",
  "admin/editor.toTop.topPixel.description": "指定したピクセル値を超えると、トップに戻るためのボタンが表示されます"
}

```