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

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "Geef uw adres door",
  "store/checkout.shipping.chooseAddress": "Kies een adres",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "U koos",
  "store/checkout.shipping.newAddressLabel": "Nieuw adres…",
  "store/checkout.shipping.shippingOptionLabel": "Verzendoptie",
  "store/checkout.shipping.completeAddressLabel": "Vul het afleveradres in",
  "store/checkout.shipping.receiverNameLabel": "Naam en achternaam",
  "store/checkout.shipping.receiverLabel": "Ontvanger",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "Verzendopties voor",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "Er zijn geen bezorgopties beschikbaar voor uw locatie.",
  "store/checkout.shipping.changeAddressLabel": "verander",
  "store/checkout.shipping.changeReceiverLabel": "wijzig",
  "store/checkout.shipping.seeDetails": "Zie details",
  "store/checkout.shipping.distance": "{distanceValue}km afstand",
  "store/checkout.shipping.pickupPointsModal.details": "Details",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "Zondag",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "Maandag",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "Dinsdag",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "Woensdag",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "Donderdag",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "Vrijdag",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "Zaterdag",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "Maandag tot en met vrijdag",
  "store/checkout.shipping.pickupPointsModal.closed": "Gesloten",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "{openingTime}u - {closingTime}u",
  "store/checkout.shipping.pickupPointsModal.businessHours": "Kantooruren",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "Alle items zijn beschikbaar.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "Beschikbare items",
  "store/checkout.shipping.pickupPointsModal.address": "Adres",
  "store/checkout.shipping.goToPayment": "Ga naar betaling",
  "store/checkout.shipping.goToAddress": "Ga naar adres",
  "store/checkout.shipping.tryAgainButton": "Opnieuw proberen",
  "store/checkout.shipping.unknownErrorMessage": "Er is een fout opgetreden bij het indienen van uw verzoek.",
  "store/checkout.shipping.backToAddressList": "Of, <a>terug naar adreslijst</a>."
}

```


[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 checkout-shipping/messages/uk.json from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "Вкажіть свою адресу",
  "store/checkout.shipping.chooseAddress": "Виберіть адресу",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "Ви вибрали",
  "store/checkout.shipping.newAddressLabel": "Нова адреса…",
  "store/checkout.shipping.shippingOptionLabel": "Варіант відправлення",
  "store/checkout.shipping.completeAddressLabel": "Заповніть адресу доставлення",
  "store/checkout.shipping.receiverNameLabel": "Ім’я та прізвище",
  "store/checkout.shipping.receiverLabel": "Одержувач",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "Варіанти відправлення для",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "Для вашого місця розташування варіанти доставлення відсутні.",
  "store/checkout.shipping.changeAddressLabel": "змінити",
  "store/checkout.shipping.changeReceiverLabel": "змінити",
  "store/checkout.shipping.seeDetails": "Переглянути детальніше",
  "store/checkout.shipping.distance": "Відстань — {distanceValue} км",
  "store/checkout.shipping.pickupPointsModal.details": "Детальніше",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "Неділя",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "Понеділок",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "Вівторок",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "Середа",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "Четвер",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "П’ятниця",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "Субота",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "З понеділка по п’ятницю",
  "store/checkout.shipping.pickupPointsModal.closed": "Зачинено",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "З {openingTime} до {closingTime}",
  "store/checkout.shipping.pickupPointsModal.businessHours": "Робочі години",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "Усі товари доступні.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "Доступні товари",
  "store/checkout.shipping.pickupPointsModal.address": "Адреса",
  "store/checkout.shipping.goToPayment": "Перейти до оплати",
  "store/checkout.shipping.goToAddress": "Перейти до адреси",
  "store/checkout.shipping.tryAgainButton": "Спробуйте ще раз",
  "store/checkout.shipping.unknownErrorMessage": "Під час оформлення вашого запиту виникла помилка.",
  "store/checkout.shipping.backToAddressList": "Або <a>поверніться до списку адрес</a>."
}

```


[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 checkout-shipping/messages/fi.json from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "Anna osoitteesi",
  "store/checkout.shipping.chooseAddress": "Valitse osoite",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "Valitsit",
  "store/checkout.shipping.newAddressLabel": "Uusi osoite…",
  "store/checkout.shipping.shippingOptionLabel": "Lähetysvaihtoehto",
  "store/checkout.shipping.completeAddressLabel": "Täydennä toimitusosoite",
  "store/checkout.shipping.receiverNameLabel": "Etu- ja sukunimi",
  "store/checkout.shipping.receiverLabel": "Vastaanottaja",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "Lähetysvaihtoehdot kohteelle",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "Sijaintiisi ei ole saatavilla toimitusvaihtoehtoja.",
  "store/checkout.shipping.changeAddressLabel": "muuta",
  "store/checkout.shipping.changeReceiverLabel": "muuta",
  "store/checkout.shipping.seeDetails": "Näytä tiedot",
  "store/checkout.shipping.distance": "{distanceValue} km päässä",
  "store/checkout.shipping.pickupPointsModal.details": "Tiedot",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "Sunnuntai",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "Maanantai",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "Tiistai",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "Keskiviikko",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "Torstai",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "Perjantai",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "Lauantai",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "Maanantaista perjantaihin",
  "store/checkout.shipping.pickupPointsModal.closed": "Suljettu",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "{openingTime}–{closingTime}",
  "store/checkout.shipping.pickupPointsModal.businessHours": "Aukioloajat",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "Kaikki tuotteet ovat saatavilla.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "Saatavilla olevat tuotteet",
  "store/checkout.shipping.pickupPointsModal.address": "Osoite",
  "store/checkout.shipping.goToPayment": "Siirry maksamaan",
  "store/checkout.shipping.goToAddress": "Siirry osoitteeseen",
  "store/checkout.shipping.tryAgainButton": "Yritä uudelleen",
  "store/checkout.shipping.unknownErrorMessage": "Pyyntöäsi tehdessä tapahtui virhe.",
  "store/checkout.shipping.backToAddressList": "Tai <a>palaa takaisin osoiteluetteloon</a>."
}

```


[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 checkout-shipping/messages/sk.json from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "Povedzte nám svoju adresu",
  "store/checkout.shipping.chooseAddress": "Vyberte adresu",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "Vybrali ste",
  "store/checkout.shipping.newAddressLabel": "Nová adresa…",
  "store/checkout.shipping.shippingOptionLabel": "Spôsob dopravy",
  "store/checkout.shipping.completeAddressLabel": "Vyplňte dodaciu adresu",
  "store/checkout.shipping.receiverNameLabel": "Meno a priezvisko",
  "store/checkout.shipping.receiverLabel": "Príjemca",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "Spôsob dopravy pre",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "Pre vašu lokalitu nie sú k dispozícii žiadne možnosti doručenia.",
  "store/checkout.shipping.changeAddressLabel": "zmeniť",
  "store/checkout.shipping.changeReceiverLabel": "zmeniť",
  "store/checkout.shipping.seeDetails": "Pozrieť podrobnosti",
  "store/checkout.shipping.distance": "vzdialené {distanceValue} km",
  "store/checkout.shipping.pickupPointsModal.details": "Podrobnosti",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "Neďeľa",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "Pondelok",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "Utorok",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "Streda",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "Štvrtok",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "Piatok",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "Sobota",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "Pondelok až piatok",
  "store/checkout.shipping.pickupPointsModal.closed": "Zatvorené",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "{openingTime} h - {closingTime} h",
  "store/checkout.shipping.pickupPointsModal.businessHours": "Pracovná doba",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "Všetky položky sú k dispozícii.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "Dostupné položky",
  "store/checkout.shipping.pickupPointsModal.address": "Adresa",
  "store/checkout.shipping.goToPayment": "Prejsť na platbu",
  "store/checkout.shipping.goToAddress": "Prejsť na adresu",
  "store/checkout.shipping.tryAgainButton": "Skúste to znova",
  "store/checkout.shipping.unknownErrorMessage": "Pri pokuse o zadanie vašej žiadosti sa vyskytla chyba.",
  "store/checkout.shipping.backToAddressList": "Alebo <a> sa vráťte na zoznam adries</a>."
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "Por favor informe seu endereço",
  "store/checkout.shipping.chooseAddress": "Escolha um endereço",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "Você selecionou",
  "store/checkout.shipping.newAddressLabel": "Novo endereço…",
  "store/checkout.shipping.shippingOptionLabel": "Opção de entrega",
  "store/checkout.shipping.completeAddressLabel": "Complete o endereço de entrega",
  "store/checkout.shipping.receiverNameLabel": "Nome e sobrenome",
  "store/checkout.shipping.receiverLabel": "Destinatário",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "Opções de entrega para",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "Não há opções de entrega disponíveis para a sua localidade.",
  "store/checkout.shipping.changeAddressLabel": "alterar",
  "store/checkout.shipping.changeReceiverLabel": "alterar",
  "store/checkout.shipping.seeDetails": "Ver detalhes",
  "store/checkout.shipping.distance": "{distanceValue}km de distância",
  "store/checkout.shipping.pickupPointsModal.details": "Detalhes",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "Domingo",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "Segunda-feira",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "Terça-feira",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "Quarta-feira",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "Quinta-feira",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "Sexta-feira",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "Sábado",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "Segunda a Sexta-feira",
  "store/checkout.shipping.pickupPointsModal.closed": "Fechado",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "{openingTime}h a {closingTime}h",
  "store/checkout.shipping.pickupPointsModal.businessHours": "Horário de funcionamento",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "Todos os itens estão disponíveis nesta loja.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "Itens disponíveis",
  "store/checkout.shipping.pickupPointsModal.address": "Endereço",
  "store/checkout.shipping.goToPayment": "Ir para pagamento",
  "store/checkout.shipping.goToAddress": "Ir para endereço",
  "store/checkout.shipping.tryAgainButton": "Tentar novamente",
  "store/checkout.shipping.unknownErrorMessage": "Ocorreu um erro ao tentar realizar sua solicitação.",
  "store/checkout.shipping.backToAddressList": "Ou, <a>volte para a lista de endereços</a>."
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "Please inform your address",
  "store/checkout.shipping.chooseAddress": "Choose an address",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "You selected",
  "store/checkout.shipping.newAddressLabel": "New address…",
  "store/checkout.shipping.shippingOptionLabel": "Shipping option",
  "store/checkout.shipping.completeAddressLabel": "Complete the delivery address",
  "store/checkout.shipping.receiverNameLabel": "Name and surname",
  "store/checkout.shipping.receiverLabel": "Receiver",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "Shipping options for",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "No delivery options are available for your location.",
  "store/checkout.shipping.changeAddressLabel": "change",
  "store/checkout.shipping.changeReceiverLabel": "change",
  "store/checkout.shipping.seeDetails": "See details",
  "store/checkout.shipping.distance": "{distanceValue}km away",
  "store/checkout.shipping.pickupPointsModal.details": "Details",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "Sunday",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "Monday",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "Tuesday",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "Wednesday",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "Thursday",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "Friday",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "Saturday",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "Monday to Friday",
  "store/checkout.shipping.pickupPointsModal.closed": "Closed",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "{openingTime}h - {closingTime}h",
  "store/checkout.shipping.pickupPointsModal.businessHours": "Business hours",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "All the items are available.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "Available items",
  "store/checkout.shipping.pickupPointsModal.address": "Address",
  "store/checkout.shipping.goToPayment": "Go to payment",
  "store/checkout.shipping.goToAddress": "Go to address",
  "store/checkout.shipping.tryAgainButton": "Try again",
  "store/checkout.shipping.unknownErrorMessage": "There was an error while trying to make your request.",
  "store/checkout.shipping.backToAddressList": "Or, <a>go back to address list</a>."
}

```


[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 checkout-shipping/messages/fr.json from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "Veuillez renseigner votre adresse",
  "store/checkout.shipping.chooseAddress": "Choisissez une adresse",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "Vous avez sélectionné",
  "store/checkout.shipping.newAddressLabel": "Nouvelle adresse…",
  "store/checkout.shipping.shippingOptionLabel": "Mode d’expédition",
  "store/checkout.shipping.completeAddressLabel": "Complétez l’adresse de livraison",
  "store/checkout.shipping.receiverNameLabel": "Prénom et nom",
  "store/checkout.shipping.receiverLabel": "Destinataire",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "Options d’expédition pour",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "Aucune option de livraison n’est disponible pour votre localisation.",
  "store/checkout.shipping.changeAddressLabel": "changer",
  "store/checkout.shipping.changeReceiverLabel": "modifier",
  "store/checkout.shipping.seeDetails": "Afficher les détails",
  "store/checkout.shipping.distance": "{distanceValue} km de distance",
  "store/checkout.shipping.pickupPointsModal.details": "Informations",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "Dimanche",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "Lundi",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "Mardi",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "Mercredi",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "Jeudi",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "Vendredi",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "Samedi",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "Du lundi au vendredi",
  "store/checkout.shipping.pickupPointsModal.closed": "Fermé",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "{openingTime}h - {closingTime}h",
  "store/checkout.shipping.pickupPointsModal.businessHours": "Heures ouvrables",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "Tous les articles sont disponibles.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "Articles disponibles",
  "store/checkout.shipping.pickupPointsModal.address": "Adresse",
  "store/checkout.shipping.goToPayment": "Aller au paiement",
  "store/checkout.shipping.goToAddress": "Aller à l’adresse",
  "store/checkout.shipping.tryAgainButton": "Réessayez",
  "store/checkout.shipping.unknownErrorMessage": "Une erreur s’est produite lors de l’envoi de votre demande.",
  "store/checkout.shipping.backToAddressList": "Ou, <a>retourner à la liste d’adresses</a>."
}

```


[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 checkout-shipping/messages/el.json from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "Ενημερώστε για την διεύθυνσή σας",
  "store/checkout.shipping.chooseAddress": "Επιλέξτε μια διεύθυνση",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "Έχετε επιλέξει",
  "store/checkout.shipping.newAddressLabel": "Νέα διεύθυνση…",
  "store/checkout.shipping.shippingOptionLabel": "Επιλογή μεταφοράς",
  "store/checkout.shipping.completeAddressLabel": "Συμπληρώστε τη διεύθυνση παράδοσης",
  "store/checkout.shipping.receiverNameLabel": "Ονοματεπώνυμο",
  "store/checkout.shipping.receiverLabel": "Παραλήπτης",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "Επιλογές μεταφοράς για",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "Δεν υπάρχουν διαθέσιμες επιλογές παράδοσης για την τοποθεσία σας.",
  "store/checkout.shipping.changeAddressLabel": "αλλαγή",
  "store/checkout.shipping.changeReceiverLabel": "αλλαγή",
  "store/checkout.shipping.seeDetails": "Βλέπε λεπτομέρειες",
  "store/checkout.shipping.distance": "{distanceValue}χλμ μακριά",
  "store/checkout.shipping.pickupPointsModal.details": "Λεπτομέρειες",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "Κυριακή",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "Δευτέρα",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "Τρίτη",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "Τετάρτη",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "Πέμπτη",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "Παρασκευή",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "Σάββατο",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "Δευτέρα έως Παρασκευή",
  "store/checkout.shipping.pickupPointsModal.closed": "Έκλεισε",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "{openingTime}ω - {closingTime}ω",
  "store/checkout.shipping.pickupPointsModal.businessHours": "Εργάσιμες ώρες",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "Όλα τα προϊόντα είναι διαθέσιμα.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "Διαθέσιμα προϊόντα",
  "store/checkout.shipping.pickupPointsModal.address": "Διεύθυνση",
  "store/checkout.shipping.goToPayment": "Μεταβείτε στην πληρωμή",
  "store/checkout.shipping.goToAddress": "Μεταβείτε στη διεύθυνση",
  "store/checkout.shipping.tryAgainButton": "Δοκιμάστε ξανά",
  "store/checkout.shipping.unknownErrorMessage": "Προέκυψε σφάλμα κατά την προσπάθεια δημιουργίας του αιτήματός σας.",
  "store/checkout.shipping.backToAddressList": "Ή, <a>επιστρέψτε στη λίστα διεύθυνσης</a>."
}

```


[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 checkout-shipping/messages/ro.json from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "Te rugăm să ne spui adresa ta",
  "store/checkout.shipping.chooseAddress": "Alege o adresă",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "Ai selectat",
  "store/checkout.shipping.newAddressLabel": "O adresă nouă…",
  "store/checkout.shipping.shippingOptionLabel": "Opțiune expediere",
  "store/checkout.shipping.completeAddressLabel": "Completează adresa de livrare",
  "store/checkout.shipping.receiverNameLabel": "Nume și prenume",
  "store/checkout.shipping.receiverLabel": "Destinatar",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "Opțiuni de expediere pentru",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "Nu sunt disponibile opțiuni de livrare pentru locația ta.",
  "store/checkout.shipping.changeAddressLabel": "modifică",
  "store/checkout.shipping.changeReceiverLabel": "modifică",
  "store/checkout.shipping.seeDetails": "Vezi detalii",
  "store/checkout.shipping.distance": "la {distanceValue}km",
  "store/checkout.shipping.pickupPointsModal.details": "Detalii",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "Duminică",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "Luni",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "Marţi",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "Miercuri",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "Joi",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "Vineri",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "Sâmbătă",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "De luni până vineri",
  "store/checkout.shipping.pickupPointsModal.closed": "Închis",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "{openingTime}h - {closingTime}h",
  "store/checkout.shipping.pickupPointsModal.businessHours": "Program de lucru",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "Toate articolele sunt disponibile.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "Articole disponibile",
  "store/checkout.shipping.pickupPointsModal.address": "Adresa",
  "store/checkout.shipping.goToPayment": "Mergi la plată",
  "store/checkout.shipping.goToAddress": "Mergi la adresă",
  "store/checkout.shipping.tryAgainButton": "Încearcă din nou",
  "store/checkout.shipping.unknownErrorMessage": "A apărut o eroare la încercarea de a-ți transmite cererea.",
  "store/checkout.shipping.backToAddressList": "Sau<a>întoarce-te la lista de adrese</a>."
}

```


[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 checkout-shipping/messages/ko.json from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "귀하의 주소를 알려주세요.",
  "store/checkout.shipping.chooseAddress": "주소 선택",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "선택하셨습니다",
  "store/checkout.shipping.newAddressLabel": "새 주소",
  "store/checkout.shipping.shippingOptionLabel": "배송 옵션",
  "store/checkout.shipping.completeAddressLabel": "배송 주소 작성",
  "store/checkout.shipping.receiverNameLabel": "이름과 성",
  "store/checkout.shipping.receiverLabel": "받는 사람",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "배송 옵션",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "귀하의 위치에 사용할 수 있는 배송 옵션이 없습니다.",
  "store/checkout.shipping.changeAddressLabel": "변경",
  "store/checkout.shipping.changeReceiverLabel": "변경",
  "store/checkout.shipping.seeDetails": "상세 보기",
  "store/checkout.shipping.distance": "{distanceValue}km 거리",
  "store/checkout.shipping.pickupPointsModal.details": "세부 사항",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "일요일",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "월요일",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "화요일",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "수요일",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "목요일",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "금요일",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "토요일",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "월요일에서 금요일",
  "store/checkout.shipping.pickupPointsModal.closed": "닫힘",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "{openingTime}시간 - {closingTime}시간",
  "store/checkout.shipping.pickupPointsModal.businessHours": "영업시간",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "모든 항목을 사용할 수 있습니다.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "사용 가능한 항목",
  "store/checkout.shipping.pickupPointsModal.address": "주소",
  "store/checkout.shipping.goToPayment": "결제로 이동",
  "store/checkout.shipping.goToAddress": "주소로 이동",
  "store/checkout.shipping.tryAgainButton": "다시 시도",
  "store/checkout.shipping.unknownErrorMessage": "요청을 하는 동안 오류가 발생했습니다.",
  "store/checkout.shipping.backToAddressList": "또는 <a>주소 목록으로 돌아가세요</a>."
}

```


[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 checkout-shipping/messages/no.json from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "Informer om adressen din",
  "store/checkout.shipping.chooseAddress": "Velg en adresse",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "Du valgte",
  "store/checkout.shipping.newAddressLabel": "Ny adresse…",
  "store/checkout.shipping.shippingOptionLabel": "Fraktalternativ",
  "store/checkout.shipping.completeAddressLabel": "Fullfør leveringsadressen",
  "store/checkout.shipping.receiverNameLabel": "Fornavn og etternavn",
  "store/checkout.shipping.receiverLabel": "Mottaker",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "Fraktalternativer for",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "Ingen leveringsalternativer er tilgjengelige for din posisjon.",
  "store/checkout.shipping.changeAddressLabel": "endre",
  "store/checkout.shipping.changeReceiverLabel": "endre",
  "store/checkout.shipping.seeDetails": "Vis detaljer",
  "store/checkout.shipping.distance": "{distanceValue} km unna",
  "store/checkout.shipping.pickupPointsModal.details": "Detaljer",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "Søndag",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "Mandag",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "Tirsdag",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "Onsdag",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "Torsdag",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "Fredag",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "Lørdag",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "Mandag til fredag",
  "store/checkout.shipping.pickupPointsModal.closed": "Stengt",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "{openingTime}t - {closingTime}t",
  "store/checkout.shipping.pickupPointsModal.businessHours": "Arbeidstid",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "Alle produktene er tilgjengelige.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "Tilgjengelige varer",
  "store/checkout.shipping.pickupPointsModal.address": "Adresse",
  "store/checkout.shipping.goToPayment": "Gå til betaling",
  "store/checkout.shipping.goToAddress": "Gå til adresse",
  "store/checkout.shipping.tryAgainButton": "Prøv igjen",
  "store/checkout.shipping.unknownErrorMessage": "Det oppsto en feil under forsøket på å komme med forespørselen.",
  "store/checkout.shipping.backToAddressList": "Eller, <a>gå tilbake til adresseliste</a>."
}

```


[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 checkout-shipping/messages/ar.json from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "يرجى إعلامنا بعنوانك",
  "store/checkout.shipping.chooseAddress": "اختر عنوانًا",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "لقد حدّدت",
  "store/checkout.shipping.newAddressLabel": "عنوان جديد…",
  "store/checkout.shipping.shippingOptionLabel": "خيار الشحن",
  "store/checkout.shipping.completeAddressLabel": "أكمِل عنوان التسليم",
  "store/checkout.shipping.receiverNameLabel": "الإسم والنسب",
  "store/checkout.shipping.receiverLabel": "المستقبِل",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "خيارات الشحن لـ",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "لا توجد خيارات توصيل متاحة لموقعك.",
  "store/checkout.shipping.changeAddressLabel": "تغيير",
  "store/checkout.shipping.changeReceiverLabel": "تغيير",
  "store/checkout.shipping.seeDetails": "عرض التفاصيل",
  "store/checkout.shipping.distance": "تبعد ب {distanceValue} كلم",
  "store/checkout.shipping.pickupPointsModal.details": "التفاصبل",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "الأحد",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "الإثنين",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "الثلاثاء",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "الأربعاء",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "الخميس",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "الجمعة",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "السبت",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "الإثنين إلى الجمعة",
  "store/checkout.shipping.pickupPointsModal.closed": "مغلق/ة",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "من الساعة {openingTime} إلى الساعة {closingTime}",
  "store/checkout.shipping.pickupPointsModal.businessHours": "ساعات العمل",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "جميع العناصر متوفرة.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "العناصر المتاحة",
  "store/checkout.shipping.pickupPointsModal.address": "العنوان",
  "store/checkout.shipping.goToPayment": "انتقِل للدفع",
  "store/checkout.shipping.goToAddress": "انتقل للعنوان",
  "store/checkout.shipping.tryAgainButton": "حاول من جديد",
  "store/checkout.shipping.unknownErrorMessage": "حدث خطأ أثناء محاولة تقديم طلبك.",
  "store/checkout.shipping.backToAddressList": "أو، <a>انتقِل إلى قائمة العناوين</a>."
}

```


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

[Assistant]
Here's the implementation:

```markdown
# Checkout Shipping

⚠ **This is an ongoing, unsupported, unfinished and undocumented project. We do not guarantee any results after installation.** ⚠

This app has the `ShippingSummary`, `AddressSummary`, `ShippingAddress` and `ShippingForm` components used in the shipping step of the checkout.

![Shipping summary component](./images/shipping_summary.png)
![Shipping form component](./images/form_postal_code.png)
![Address summary component](./images/address_summary.png)
![Shipping address component](./images/form_fill_address.png)

## Usage

This app is used by [`checkout-step-group`](https://github.com/vtex-apps/checkout-step-group) and shouldn't be used individually. Should you find the need to use it, you need to:

1. Add it as a dependency: `vtex add vtex.checkout-shipping`

2. Import the components in your code:

```jsx
import React from 'react'
import {
  ShippingSummary,
  ShippingForm,
  ShippingAddress,
  AddressSummary
} from 'vtex.checkout-shipping'

const MyShippingForm = ({ isPreviewMode = false }) => {
  if (isPreviewMode) {
    return (
      <ShippingSummary />
    )
  }

  return (
    // no need to pass in any props, as the component
    // uses all information provided by the `order-manager` app.
    <ShippingForm />
  )
}

const MyShippingAddress = ({ isPreviewMode = false }) => {
  if (isPreviewMode) {
    return (
      <AddressSummary />
    )
  }

  return <ShippingAddress />
}
```

Note that you need to have `OrderShippingProvider` from `vtex.order-shipping` app somewhere above these components in your tree.

## State machines

_Last updated in v0.7.0_

This app uses [XState](https://xstate.js.org/) as its state management library. Having [XState DevTools](https://github.com/amitnovick/xstate-devtools) installed really helps when debugging or developing.

Since the shipping inside checkout is comprised of two separate steps, shipping and address, we created two state machines to control each one of those steps, which we describe below.

### Shipping State Machine Diagram

![Shipping state machine diagram](./images/shipping_state_machine.png)

The shipping has a multistep UI and its state machine has [states nodes](https://xstate.js.org/docs/guides/statenodes.html) that reflect each step of filling the shipping info.

#### 1. `initial`:

The initial state is used to determine the next state by combining [eventless transitions](https://xstate.js.org/docs/guides/transitions.html#eventless-always-transitions) (which are, in short, transitions that occur immediately) and [guarded transitions](https://xstate.js.org/docs/guides/guards.html#guarded-transitions) (conditional transitions).

In the case the user is returning to the store (there are saved addresses already), the machine transitions to `selectAddress`.

Another case is when the user was already filling the shipping information and had selected the shipping address in a previous interaction, then the machine transitions to `selectDeliveryOption`.

#### 2. `createAddress`:

![Create address form](./images/form_postal_code.png)

#### 3. `selectAddress`:

![Select address form](./images/form_select_address.png)

#### 4. `selectDeliveryOption`:

This state is comprised of two sub-states, `idle` and `editing`.

##### 4.1. `selectDeliveryOption.editing`:

![Select delivery option form](./images/form_delivery_options.png)

##### 4.2. `selectDeliveryOption.idle`:

![Delivery option selected](./images/form_delivery_confirmation.png)

#### 5. `done`:

The machine is in its final state and calls `goToNextStep`, which in turn may redirect the user to either address step or payment step, depending on the conditions of the purchase.

### Address State Machine Diagram

![Address state machine diagram](./images/address_state_machine.png)

The address step has a simpler UI, consisting only of one screen which is solely responsible to update the customer's address.

#### 1. `editAddress`:

![Edit address form](./images/form_fill_address.png)

#### 2. `done`:

The machine is in its final state and calls `goToNextStep`, which in turn redirects the user to the payment step.

```


[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 checkout-shipping/react/ShippingAddress.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { AddressContext } from 'vtex.address-context'
import { OrderShipping } from 'vtex.order-shipping'
import type { Address } from 'vtex.checkout-graphql'
import { Loading } from 'vtex.render-runtime'

import useAddressStateMachine from './machines/useAddressStateMachine'
import AddressCompletionForm from './components/AddressCompletionForm'
import useAddressRules from './useAddressRules'

const { useOrderShipping } = OrderShipping

const ShippingAddress: React.VFC = () => {
  const { matches, send, state } = useAddressStateMachine()

  const handleAddressCompleted = (updatedAddress: Address) => {
    send({
      type: 'SUBMIT_EDIT_ADDRESS',
      updatedAddress: {
        ...updatedAddress,
        addressType: updatedAddress.addressType ?? 'residential',
      },
    })
  }

  switch (true) {
    case state.matches('editAddress'): {
      return (
        <AddressCompletionForm
          onAddressCompleted={handleAddressCompleted}
          onAddressReset={() => send('RESET_ADDRESS')}
          isSubmitting={matches({ editAddress: 'submitting' })}
        />
      )
    }

    default: {
      return null
    }
  }
}

const ShippingAddressWithAddress: React.VFC = () => {
  const { selectedAddress, countries } = useOrderShipping()

  const addressRules = useAddressRules()

  if (addressRules == null) {
    return <Loading />
  }

  return (
    <AddressContext.AddressContextProvider
      address={selectedAddress ?? {}}
      countries={countries}
      rules={addressRules}
    >
      <ShippingAddress />
    </AddressContext.AddressContextProvider>
  )
}

export default ShippingAddressWithAddress

```


[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 checkout-shipping/react/ShippingOptionList.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useMemo } from 'react'
import type { DeliveryOption, PickupOption } from 'vtex.checkout-graphql'
import { Alert } from 'vtex.styleguide'
import { ListGroup } from 'vtex.checkout-components'
import { getFastestSla, getCheapestSla } from '@vtex/estimate-calculator'
import { FormattedMessage } from 'react-intl'

import ShippingOption from './ShippingOption'
import { isPickupOption } from './utils/sla'

interface Props {
  deliveryOptions: DeliveryOption[]
  pickupOptions: PickupOption[]
  onDeliveryOptionSelected?: (id: string) => void
  onDeliveryOptionDeselected?: (id: string) => void
  onPickupOptionSelected?: (id: string) => void
  onPickupOptionDeselected?: (id: string) => void
  showOnlySelectedShippingOption?: boolean
}

const ShippingOptionList: React.FC<Props> = ({
  deliveryOptions,
  pickupOptions = [],
  onDeliveryOptionSelected = () => {},
  onDeliveryOptionDeselected = () => {},
  onPickupOptionSelected = () => {},
  onPickupOptionDeselected = () => {},
  showOnlySelectedShippingOption = false,
}) => {
  const shippingOptions = useMemo(
    () => [...deliveryOptions, ...pickupOptions.slice(0, 1)],
    [deliveryOptions, pickupOptions]
  )

  const handleShippingOptionSelect = (
    shippingOption: DeliveryOption | PickupOption
  ) => {
    if (isPickupOption(shippingOption)) {
      onPickupOptionSelected(shippingOption.id)
    } else {
      onDeliveryOptionSelected(shippingOption.id!)
    }
  }

  const handleDeliveryOptionDeselect = (deliveryOption: DeliveryOption) => {
    onDeliveryOptionDeselected(deliveryOption.id!)
  }

  const handlePickupOptionDeselect = (pickupOption: PickupOption) => {
    onPickupOptionDeselected(pickupOption.id!)
  }

  const fastestOption = useMemo(() => {
    return getFastestSla(
      deliveryOptions.map(({ id, estimate, price }) => ({
        id: id!,
        shippingEstimate: estimate!,
        price,
      }))
    )
  }, [deliveryOptions])

  const cheapestOption = useMemo(() => {
    return getCheapestSla(
      deliveryOptions.map(({ id, estimate, price }) => ({
        id: id!,
        shippingEstimate: estimate!,
        price,
      }))
    )
  }, [deliveryOptions])

  const selectedShippingOptions = useMemo(() => {
    return shippingOptions.filter(({ isSelected }) => isSelected)
  }, [shippingOptions])

  return shippingOptions.length > 0 ? (
    showOnlySelectedShippingOption ? (
      <>
        <p className="mt0 mb5 fw4 f4 lh-copy">
          <FormattedMessage id="store/checkout.shipping.selectedDeliveryOptionsLabel" />
        </p>

        <ListGroup borderPosition="none">
          {selectedShippingOptions.map((shippingOption) => (
            <ShippingOption
              key={shippingOption.id}
              shippingOption={shippingOption}
              fastestOption={fastestOption}
              cheapestOption={cheapestOption}
              onDeselectShippingOption={() => {
                if (isPickupOption(shippingOption)) {
                  handlePickupOptionDeselect(shippingOption)
                } else {
                  handleDeliveryOptionDeselect(shippingOption)
                }
              }}
              isSelected
            />
          ))}
        </ListGroup>
      </>
    ) : (
      <ListGroup>
        {shippingOptions.map((shippingOption) => (
          <ShippingOption
            key={shippingOption.id}
            shippingOption={shippingOption}
            fastestOption={fastestOption}
            cheapestOption={cheapestOption}
            onSelectShippingOption={() => {
              handleShippingOptionSelect(shippingOption)
            }}
          />
        ))}
      </ListGroup>
    )
  ) : (
    <Alert type="warning">
      <FormattedMessage id="store/checkout.shipping.emptyDeliveryOptionsAlert" />
    </Alert>
  )
}

export default ShippingOptionList

```


[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 checkout-shipping/react/AddressSummary.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect } from 'react'
import { PlaceDetails } from 'vtex.place-components'
import { AddressContext } from 'vtex.address-context'
import { OrderShipping } from 'vtex.order-shipping'
import { OrderForm } from 'vtex.order-manager'
import { Loading } from 'vtex.render-runtime'

import useAddressRules from './useAddressRules'

const { useAddressContext } = AddressContext
const { useOrderShipping } = OrderShipping
const { useOrderForm } = OrderForm

const AddressSummary: React.VFC = () => {
  const { selectedAddress } = useOrderShipping()
  const { address, setAddress, isValid } = useAddressContext()
  const {
    orderForm: { canEditData },
  } = useOrderForm()

  useEffect(() => {
    if (selectedAddress == null) {
      return
    }

    setAddress(selectedAddress)
  }, [selectedAddress, setAddress])

  const shouldConsiderValidation =
    (address.isDisposable ?? false) || canEditData

  if (shouldConsiderValidation && !isValid) {
    return null
  }

  return (
    <div className="c-muted-1 lh-copy">
      <PlaceDetails display="extended" />
    </div>
  )
}

const AddressSummaryWithAddress: React.VFC = () => {
  const { selectedAddress, countries } = useOrderShipping()

  const addressRules = useAddressRules()

  if (selectedAddress != null && addressRules == null) {
    return <Loading />
  }

  return (
    <AddressContext.AddressContextProvider
      address={selectedAddress!}
      countries={countries}
      rules={addressRules ?? {}}
    >
      <AddressSummary />
    </AddressContext.AddressContextProvider>
  )
}

export default AddressSummaryWithAddress

```


[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 checkout-shipping/react/ShippingOption.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState } from 'react'
import classnames from 'classnames'
import { TranslateEstimate } from 'vtex.shipping-estimate-translator'
import { FormattedPrice } from 'vtex.formatted-price'
import { GroupOption } from 'vtex.checkout-components'
import type { DeliveryOption, PickupOption } from 'vtex.checkout-graphql'
import { IconDelete, ButtonPlain, Divider } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

import PickupDetailsModal from './components/PickupDetailsModal'
import { getName, isPickupOption, slugify } from './utils/sla'

interface EstimateDeliveryOption {
  shippingEstimate: string
  price: number
}

export const ShippingOptionPreview: React.VFC = () => {
  return (
    <>
      <button
        className="w-100 tl pointer db lh-copy bg-base ph5 pv5-ns flex items-center justify-between bn pv4"
        role="option"
        aria-selected="false"
        disabled
      >
        <div className="flex w-100">
          <div className="flex flex-column w-100">
            <span className="br1 mw4 w-100 pt2 pb3 mv2 bg-muted-5" />
            <span className="br1 dib mt4 mw5 w-100 pt2 pb3 mv2 bg-muted-5" />
          </div>
          <div className="mw3 w-100">
            <span className="br1 dib w-100 pt2 pb3 mv2 bg-muted-5" />
          </div>
        </div>
      </button>
      <div className="w-100 pr5 pr0-ns pl5">
        <Divider />
      </div>
    </>
  )
}

interface Props {
  onSelectShippingOption?: () => void
  onDeselectShippingOption?: () => void
  shippingOption: DeliveryOption | PickupOption
  isSelected?: boolean
  fastestOption?: EstimateDeliveryOption
  cheapestOption?: EstimateDeliveryOption
}

const ShippingOption: React.VFC<Props> = ({
  onSelectShippingOption,
  onDeselectShippingOption,
  shippingOption,
  fastestOption,
  cheapestOption,
  isSelected = false,
}) => {
  const [showPickupModal, setShowPickupModal] = useState(false)

  const content = (
    <div className="flex w-100" id={slugify(shippingOption.id)}>
      <div className="flex flex-column w-100">
        <span className="c-on-base fw5">{getName(shippingOption)}</span>
        <span
          className={classnames('dib mt2 fw5', {
            'c-muted-1':
              shippingOption.estimate !== fastestOption?.shippingEstimate,
            'c-success':
              shippingOption.estimate === fastestOption?.shippingEstimate,
          })}
        >
          <TranslateEstimate shippingEstimate={shippingOption.estimate ?? ''} />
        </span>
        {isPickupOption(shippingOption) && (
          <span className="fw4 f6 c-muted-1">
            <FormattedMessage
              id="store/checkout.shipping.distance"
              values={{
                distanceValue: shippingOption.storeDistance?.toFixed(1),
              }}
            />
          </span>
        )}
      </div>
      <div
        className={classnames('fw4', {
          'c-success fw5': shippingOption.price === cheapestOption?.price,
        })}
      >
        <FormattedPrice value={(shippingOption.price ?? 0) / 100} />
      </div>
    </div>
  )

  return isSelected ? (
    <div className="bg-muted-5 pa5 flex-column items-start lh-copy">
      <div className="flex">
        {content}
        <button
          className="flex-shrink-0 c-muted-1 ml5 pa2 flex bg-transparent bn pointer"
          onClick={onDeselectShippingOption}
          role="option"
          aria-selected
        >
          <IconDelete />
        </button>
      </div>

      {isPickupOption(shippingOption) && (
        <div className="flex flex-column items-start">
          <ButtonPlain size="small" onClick={() => setShowPickupModal(true)}>
            <FormattedMessage id="store/checkout.shipping.seeDetails" />
          </ButtonPlain>

          <PickupDetailsModal
            pickupOption={shippingOption}
            showPickupModal={showPickupModal}
            setShowPickupModal={setShowPickupModal}
          />
        </div>
      )}
    </div>
  ) : (
    <GroupOption
      onClick={onSelectShippingOption}
      selected={shippingOption.isSelected}
    >
      {content}
    </GroupOption>
  )
}

export default ShippingOption

```


[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 checkout-shipping/react/ShippingForm.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { Address } from 'vtex.checkout-graphql'
import React, { useCallback } from 'react'
import { OrderForm } from 'vtex.order-manager'
import { OrderShipping } from 'vtex.order-shipping'
import { AddressContext } from 'vtex.address-context'
import { Button } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'
import { Loading } from 'vtex.render-runtime'

import NewAddressForm from './NewAddressForm'
import AddressList from './components/AddressList'
import ShippingOptionList from './ShippingOptionList'
import useShippingStateMachine from './machines/useShippingStateMachine'
import useAddressRules from './useAddressRules'
import ShippingHeader from './ShippingHeader'

const { useOrderForm } = OrderForm
const { useOrderShipping } = OrderShipping

const ShippingForm: React.VFC = () => {
  const {
    orderForm: {
      canEditData,
      shipping: { availableAddresses },
      userProfileId,
    },
  } = useOrderForm()

  const { selectedAddress, deliveryOptions, pickupOptions } = useOrderShipping()

  const { matches, send, state } = useShippingStateMachine({
    availableAddresses: (availableAddresses as Address[]) ?? [],
    canEditData,
    selectedAddress: selectedAddress ?? null,
    userProfileId,
    retryAddress: null,
  })

  const handleAddressCreated = useCallback(
    (address: Address) => {
      send({
        type: 'SUBMIT_CREATE_ADDRESS',
        address: {
          ...address,
          addressType: address.addressType ?? 'residential',
        },
      })
    },
    [send]
  )

  const handleDeliveryOptionSelect = (deliveryOptionId: string) => {
    send({
      type: 'SUBMIT_SELECT_SHIPPING_OPTION',
      shippingOptionId: deliveryOptionId,
      deliveryChannel: 'delivery',
    })
  }

  const handlePickupOptionSelect = (pickupOptionId: string) => {
    send({
      type: 'SUBMIT_SELECT_SHIPPING_OPTION',
      shippingOptionId: pickupOptionId,
      deliveryChannel: 'pickup-in-point',
    })
  }

  switch (true) {
    case matches('selectShippingOption'): {
      return (
        <>
          <ShippingHeader onEditAddress={() => send('EDIT_ADDRESS')} />

          <ShippingOptionList
            deliveryOptions={deliveryOptions}
            pickupOptions={pickupOptions}
            onDeliveryOptionSelected={handleDeliveryOptionSelect}
            onPickupOptionSelected={handlePickupOptionSelect}
            onDeliveryOptionDeselected={() => send('DESELECT_SHIPPING_OPTION')}
            onPickupOptionDeselected={() => send('DESELECT_SHIPPING_OPTION')}
            showOnlySelectedShippingOption={matches({
              selectShippingOption: 'idle',
            })}
          />

          {matches({ selectShippingOption: 'idle' }) &&
            state.context.hasHistory && (
              <div className="mt6">
                <Button
                  block
                  size="large"
                  onClick={() => send('GO_TO_ADDRESS_STEP')}
                  testId="continue-shipping-button"
                >
                  <span className="f5">
                    <FormattedMessage id="store/checkout.shipping.goToAddress" />
                  </span>
                </Button>
              </div>
            )}
        </>
      )
    }

    case matches('selectAddress'): {
      return (
        <AddressList
          hasError={matches({ selectAddress: 'error' })}
          isSubmitting={matches({ selectAddress: 'submitting' })}
          addresses={state.context.availableAddresses}
          selectedAddress={state.context.selectedAddress}
          onCreateAddress={() => send('GO_TO_CREATE_ADDRESS')}
          onAddressSelected={(address) =>
            send({ type: 'SUBMIT_SELECT_ADDRESS', address })
          }
          onRetrySelectAddress={() => {
            send('RETRY_SELECT_ADDRESS', {
              address: state.context.retryAddress!,
            })
          }}
          onEditAddress={() => send('EDIT_ADDRESS')}
        />
      )
    }

    case matches('createAddress'):

    // eslint-disable-next-line no-fallthrough
    default: {
      return (
        <NewAddressForm
          onAddressCreated={handleAddressCreated}
          onEditAddress={() => send('EDIT_ADDRESS')}
          onRetryCreateAddress={() => {
            send('RETRY_CREATE_ADDRESS', {
              address: state.context.retryAddress!,
            })
          }}
          isSubmitting={matches({ createAddress: 'submitting' })}
          hasError={matches({ createAddress: 'error' })}
          hasAvailableAddresses={matches({
            createAddress: { editing: 'withListBacklink' },
          })}
          onViewAddressList={() => send('GO_TO_SELECT_ADDRESS')}
        />
      )
    }
  }
}

const ShippingFormWithAddress: React.FC = () => {
  const { selectedAddress, countries } = useOrderShipping()

  const addressRules = useAddressRules()

  if (addressRules == null) {
    return <Loading />
  }

  return (
    <AddressContext.AddressContextProvider
      address={selectedAddress!}
      countries={countries}
      rules={addressRules}
    >
      <ShippingForm />
    </AddressContext.AddressContextProvider>
  )
}

export default ShippingFormWithAddress

```


[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 checkout-shipping/react/package.json from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "checkout-shipping",
  "version": "0.9.0",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "devDependencies": {
    "@apollo/react-testing": "^4.0.0",
    "@types/classnames": "^2.2.10",
    "@types/history": "^4",
    "@types/node": "^12.12.31",
    "@types/react": "^16.9.26",
    "@types/react-router": "^5.1.11",
    "@vtex/test-tools": "^3.4.1",
    "vtex.address-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-context@0.6.2/public/@types/vtex.address-context",
    "vtex.checkout-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-components@0.5.1/public/@types/vtex.checkout-components",
    "vtex.checkout-container": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-container@0.8.0/public/@types/vtex.checkout-container",
    "vtex.checkout-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-graphql@0.56.2/public/@types/vtex.checkout-graphql",
    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.42.0/public/@types/vtex.checkout-resources",
    "vtex.country-data-settings": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.country-data-settings@0.4.0/public/@types/vtex.country-data-settings",
    "vtex.format-currency": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.format-currency@0.3.0/public/@types/vtex.format-currency",
    "vtex.formatted-price": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.formatted-price@0.4.0/public/@types/vtex.formatted-price",
    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.9.0/public/@types/vtex.order-manager",
    "vtex.order-shipping": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-shipping@0.7.0/public/@types/vtex.order-shipping",
    "vtex.place-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.place-components@0.14.2/public/@types/vtex.place-components",
    "vtex.places-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.places-graphql@0.4.0/public/@types/vtex.places-graphql",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.128.2/public/@types/vtex.render-runtime",
    "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.2/public/@types/vtex.shipping-estimate-translator",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.136.1/public/@types/vtex.styleguide"
  },
  "dependencies": {
    "@vtex/estimate-calculator": "^1.1.0",
    "@xstate/react": "^1.2.2",
    "classnames": "^2.2.6",
    "graphql": "^14.6.0",
    "react": "^16.13.1",
    "react-apollo": "^3.1.5",
    "react-dom": "^16.13.1",
    "react-intl": "^3",
    "xstate": "^4.16.0"
  },
  "peerDependencies": {
    "@types/jest": "^26.0.21"
  }
}

```


[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 checkout-shipping/react/NewAddressForm.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import {
  DeviceCoordinates,
  LocationInput,
  LocationCountry,
  LocationSearch,
} from 'vtex.place-components'
import type { Address } from 'vtex.places-graphql'
import { FormattedMessage } from 'react-intl'
import { ListGroup } from 'vtex.checkout-components'
import { Loading } from 'vtex.render-runtime'
import { useGeolocationEnabled } from 'vtex.checkout-resources'

import ShippingHeader from './ShippingHeader'
import { ShippingOptionPreview } from './ShippingOption'
import ShippingEditError from './components/ShippingEditError'

interface Props {
  onAddressCreated: (address: Address) => void
  onRetryCreateAddress?: () => void
  onEditAddress?: () => void
  onViewAddressList?: () => void
  isSubmitting: boolean
  hasError: boolean
  hasAvailableAddresses: boolean
}

const NewAddressForm: React.FC<Props> = ({
  onAddressCreated,
  onRetryCreateAddress = () => {},
  onEditAddress = () => {},
  onViewAddressList = () => {},
  isSubmitting,
  hasError,
  hasAvailableAddresses,
}) => {
  const [geolocationEnabled, loading] = useGeolocationEnabled()

  if (loading) {
    return <Loading />
  }

  if (hasError) {
    return (
      <ShippingEditError
        onEditAddress={onEditAddress}
        onTryAgain={onRetryCreateAddress}
      />
    )
  }

  if (isSubmitting) {
    return (
      <>
        <ShippingHeader onEditAddress={onEditAddress} />

        <ListGroup>
          <ShippingOptionPreview />
          <ShippingOptionPreview />
          <ShippingOptionPreview />
        </ListGroup>
      </>
    )
  }

  return (
    <>
      <p className="t-body mt0 mb6">
        <FormattedMessage id="store/checkout.shipping.informAddress" />
      </p>

      <div>
        <DeviceCoordinates onSuccess={onAddressCreated} />
      </div>

      <LocationCountry className="w-100 mw6 mt6" />

      {!geolocationEnabled ? (
        <div className="mt6 w-100 mw5">
          <LocationInput onSuccess={onAddressCreated} variation="primary" />
        </div>
      ) : (
        <div className="mt6 w-100 mw6">
          <LocationSearch onSelectAddress={onAddressCreated} />
        </div>
      )}

      {hasAvailableAddresses && (
        <div className="mt6">
          <FormattedMessage
            id="store/checkout.shipping.backToAddressList"
            values={{
              // eslint-disable-next-line react/display-name
              a: (chunks: any) => {
                return (
                  <button
                    className="bn bg-transparent pa0 c-action-primary pointer"
                    onClick={onViewAddressList}
                  >
                    {chunks}
                  </button>
                )
              },
            }}
          />
        </div>
      )}
    </>
  )
}

export default NewAddressForm

```


[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 checkout-shipping/react/ShippingHeader.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { ButtonPlain } from 'vtex.styleguide'
import { PlaceDetails } from 'vtex.place-components'
import { FormattedMessage } from 'react-intl'

interface Props {
  onEditAddress?: () => void
}

const ShippingHeader: React.VFC<Props> = ({ onEditAddress }) => {
  return (
    <>
      <p className="t-body fw6 mv0">
        <FormattedMessage id="store/checkout.shipping.shippingOptionsForAddressLabel" />
      </p>
      <div className="flex items-center mt2 mb6">
        <div className="lh-copy">
          <PlaceDetails display="minimal" />
        </div>
        <div className="ml3">
          <ButtonPlain onClick={onEditAddress}>
            <FormattedMessage id="store/checkout.shipping.changeAddressLabel" />
          </ButtonPlain>
        </div>
      </div>
    </>
  )
}

export default ShippingHeader

```


[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 checkout-shipping/react/ShippingSummary.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { OrderShipping } from 'vtex.order-shipping'
import { TranslateEstimate } from 'vtex.shipping-estimate-translator'
import { FormattedCurrency } from 'vtex.format-currency'
import type { DeliveryOption, PickupOption } from 'vtex.checkout-graphql'

import { getName } from './utils/sla'

const { useOrderShipping } = OrderShipping

const ShippingSummary: React.FC = () => {
  const { deliveryOptions, pickupOptions } = useOrderShipping()

  const shippingOptions = [...deliveryOptions, ...pickupOptions]

  const selectedShippingOptions = shippingOptions.filter(
    ({ isSelected }) => isSelected
  )

  if (!selectedShippingOptions.length) {
    return null
  }

  return (
    <div className="c-muted-1 lh-copy">
      {selectedShippingOptions.map(
        (shippingOption: DeliveryOption | PickupOption) => (
          <div key={shippingOption.id}>
            <span>
              {getName(shippingOption)} – {''}
              <FormattedCurrency value={shippingOption.price / 100} />
            </span>
            <p className="mv0">
              <TranslateEstimate shippingEstimate={shippingOption.estimate} />
            </p>
          </div>
        )
      )}
    </div>
  )
}

export default ShippingSummary

```


[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 checkout-shipping/react/useAddressRules.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useAddressRules } from 'vtex.address-context'

export default useAddressRules

```


[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 checkout-shipping/react/typings/assets.d.ts from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  const styles: { [key: string]: string }
  export default styles
}

```


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

[User] Show me the implementation of checkout-shipping/react/typings/graphql.d.ts from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

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

  const query: DocumentNode

  export default query
}

```


[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 checkout-shipping/react/typings/vtex.styleguide.d.ts from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type React from 'react'

declare module 'vtex.styleguide' {
  const IconCaretRight: React.FC

  interface IconEditProps {
    solid?: boolean
  }

  const IconEdit: React.FC<IconEditProps>

  const IconDelete: React.FC

  const Button: React.FC<any>

  const Checkbox: React.FC<any>

  const Input: React.FC<any>

  const Alert: React.FC<any>

  const Modal: React.FC<any>

  const Divider: React.FC<any>
}

```


[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 checkout-shipping/react/utils/sla.ts from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { DeliveryOption, PickupOption } from 'vtex.checkout-graphql'

export const isPickupOption = (
  shippingOption: DeliveryOption | PickupOption
): shippingOption is PickupOption => {
  return shippingOption.deliveryChannel === 'pickup-in-point'
}

export const getName = (shippingOption: DeliveryOption | PickupOption) => {
  return isPickupOption(shippingOption)
    ? shippingOption.friendlyName
    : shippingOption.id
}

export const slugify = (text: string) => {
  return text?.toLowerCase().replace(/\s+/g, '-').replace(/[()]/g, '')
}

```


[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 checkout-shipping/react/components/PickupDetailsModal.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { TranslateEstimate } from 'vtex.shipping-estimate-translator'
import { FormattedPrice } from 'vtex.formatted-price'
import type { PickupOption, BusinessHour } from 'vtex.checkout-graphql'
import { Divider } from 'vtex.styleguide'
import { PlaceDetails } from 'vtex.place-components'
import { AddressContext } from 'vtex.address-context'
import { Modal } from 'vtex.checkout-components'
import { FormattedMessage, defineMessages, FormattedTime } from 'react-intl'

const { useAddressContext } = AddressContext

const messages = defineMessages({
  details: {
    defaultMessage: 'Details',
    id: 'store/checkout.shipping.pickupPointsModal.details',
  },
  weekDay0: {
    defaultMessage: 'Sunday',
    id: 'store/checkout.shipping.pickupPointsModal.weekDay0',
  },
  weekDay1: {
    defaultMessage: 'Monday',
    id: 'store/checkout.shipping.pickupPointsModal.weekDay1',
  },
  weekDay2: {
    defaultMessage: 'Tuesday',
    id: 'store/checkout.shipping.pickupPointsModal.weekDay2',
  },
  weekDay3: {
    defaultMessage: 'Wednesday',
    id: 'store/checkout.shipping.pickupPointsModal.weekDay3',
  },
  weekDay4: {
    defaultMessage: 'Thursday',
    id: 'store/checkout.shipping.pickupPointsModal.weekDay4',
  },
  weekDay5: {
    defaultMessage: 'Friday',
    id: 'store/checkout.shipping.pickupPointsModal.weekDay5',
  },
  weekDay6: {
    defaultMessage: 'Saturday',
    id: 'store/checkout.shipping.pickupPointsModal.weekDay6',
  },
  weekDay1to5: {
    defaultMessage: 'Monday to Friday',
    id: 'store/checkout.shipping.pickupPointsModal.weekDay1to5',
  },
})

const formatHour = (hour: string) => {
  const hoursNumbers = hour.split(':').map((t) => parseInt(t, 10))
  // eslint-disable-next-line prefer-spread
  const time = new Date().setHours.apply(new Date(), hoursNumbers)

  return <FormattedTime value={time} hour="numeric" />
}

interface Props {
  pickupOption: PickupOption
  setShowPickupModal: (showPickupModal: boolean) => void
  showPickupModal: boolean
}

const PickupDetailsModal: React.VFC<Props> = ({
  pickupOption,
  showPickupModal,
  setShowPickupModal,
}) => {
  const { countries, rules } = useAddressContext()

  return (
    <Modal
      isOpen={showPickupModal}
      onClose={() => setShowPickupModal(false)}
      title={<FormattedMessage {...messages.details} />}
    >
      <div className="lh-copy">
        <Divider orientation="horizontal" />
        <div className="flex-column mt4 mb4">
          <div className="flex justify-between mb0">
            <p className="fw6 f3 mv0">{pickupOption.friendlyName}</p>
            <span className="fw5 f5 flex items-center">
              <FormattedPrice value={(pickupOption.price ?? 0) / 100} />
            </span>
          </div>

          <p className="fw5 f5 c-muted-1 mv0">
            <TranslateEstimate shippingEstimate={pickupOption.estimate ?? ''} />
          </p>

          <p className="fw4 f6 c-muted-1 mv0">
            <FormattedMessage
              id="store/checkout.shipping.distance"
              values={{
                distanceValue: pickupOption.storeDistance?.toFixed(1),
              }}
            />
          </p>
        </div>

        <div className="flex-column mb4">
          <p className="fw6 mb2 mt0">
            <FormattedMessage id="store/checkout.shipping.pickupPointsModal.address" />
          </p>

          <AddressContext.AddressContextProvider
            address={pickupOption.address}
            countries={countries}
            rules={rules}
          >
            <PlaceDetails />
          </AddressContext.AddressContextProvider>
        </div>

        <div className="flex-column mb4">
          <p className="fw6 mb2 mt0">
            <FormattedMessage id="store/checkout.shipping.pickupPointsModal.businessHours" />
          </p>

          <table className="dt--fixed">
            <tbody>
              {pickupOption.businessHours.map((businessHour: BusinessHour) => (
                <tr
                  key={businessHour.dayNumber}
                  className="flex justify-between bb b--light-gray mt2"
                >
                  <td>
                    <FormattedMessage
                      id={`store/checkout.shipping.pickupPointsModal.weekDay${businessHour.dayNumber}`}
                    />
                  </td>

                  <td>
                    {businessHour.closed ? (
                      <FormattedMessage id="store/checkout.shipping.pickupPointsModal.closed" />
                    ) : (
                      <FormattedMessage
                        id="store/checkout.shipping.pickupPointsModal.hourFromTo"
                        values={{
                          openingTime: formatHour(businessHour.openingTime),
                          closingTime: formatHour(businessHour.closingTime),
                        }}
                      />
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="flex-column">
          <p className="fw6 mb2 mt0">
            <FormattedMessage id="store/checkout.shipping.pickupPointsModal.availableItems" />
          </p>
          <p className="mv0">
            <FormattedMessage id="store/checkout.shipping.pickupPointsModal.allItemsAvailable" />
          </p>
        </div>
      </div>
    </Modal>
  )
}

export default PickupDetailsModal

```


[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 checkout-shipping/react/components/ShippingEditError.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

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

import ShippingHeader from '../ShippingHeader'

interface Props {
  onEditAddress: () => void
  onTryAgain: () => void
}

const ShippingEditError: React.VFC<Props> = ({ onEditAddress, onTryAgain }) => {
  return (
    <>
      <ShippingHeader onEditAddress={onEditAddress} />

      <Alert
        type="warning"
        action={{
          onClick: onTryAgain,
          label: (
            <span className="f5 ttn">
              <FormattedMessage id="store/checkout.shipping.tryAgainButton" />
            </span>
          ),
        }}
      >
        <FormattedMessage id="store/checkout.shipping.unknownErrorMessage" />
      </Alert>
    </>
  )
}

export default ShippingEditError

```


[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 checkout-shipping/react/components/AddressCompletionForm.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState, useMemo } from 'react'
import { AddressForm, useAddressForm } from 'vtex.place-components'
import type { Address } from 'vtex.checkout-graphql'
import { Button, Input, ButtonPlain } from 'vtex.styleguide'
import { OrderForm } from 'vtex.order-manager'
import { AddressContext } from 'vtex.address-context'
import { FormattedMessage, useIntl } from 'react-intl'

const { useOrderForm } = OrderForm
const { useAddressContext } = AddressContext

interface Props {
  isSubmitting: boolean
  onAddressCompleted?: (updatedAddress: Address) => void
  onAddressReset: () => void
}

const AddressCompletionForm: React.FC<Props> = ({
  isSubmitting,
  onAddressReset = () => {},
  onAddressCompleted = () => {},
}) => {
  const intl = useIntl()
  const {
    orderForm: { clientProfileData, canEditData },
  } = useOrderForm()

  const { address: initialAddress } = useAddressContext()
  const form = useAddressForm({ initialAddress })

  const mandatoryEditableFields = form.invalidFields

  const { firstName, lastName } = clientProfileData ?? {
    firstName: '',
    lastName: '',
  }

  const autoReceiverName = useMemo(() => `${firstName} ${lastName}`, [
    firstName,
    lastName,
  ])

  const [editingReceiverName, setEditingReceiverName] = useState(
    !form.address.receiverName && !canEditData
  )

  const handleEditReceiverName = () => {
    setEditingReceiverName(true)
  }

  const handleNameChange: React.ChangeEventHandler<HTMLInputElement> = (
    evt
  ) => {
    form.onFieldChange('receiverName', evt.target.value)
  }

  const handleFormSubmit: React.FormEventHandler = (evt) => {
    evt.preventDefault()

    const updatedAddress = { ...form.address }

    const onlyReceiverInvalid =
      form.invalidFields.length > 0 &&
      form.invalidFields.every((field) => field === 'receiverName')

    if (!editingReceiverName && onlyReceiverInvalid) {
      updatedAddress.receiverName = autoReceiverName
      onAddressCompleted(updatedAddress)
    } else if (form.isValid) {
      onAddressCompleted(updatedAddress)
    } else {
      form.invalidFields.forEach((field: string) => {
        form.onFieldBlur(field)
      })
    }
  }

  return (
    <div className="lh-copy">
      <form onSubmit={handleFormSubmit}>
        <span className="dib mb4 t-body fw6">
          <FormattedMessage id="store/checkout.shipping.completeAddressLabel" />
        </span>

        <AddressForm
          hiddenFields={['receiverName']}
          onResetAddress={onAddressReset}
          mandatoryEditableFields={mandatoryEditableFields}
          form={form}
        />

        <div className="mt6 mb6">
          <p className="fw5 mb5 mt0">
            <FormattedMessage id="store/checkout.shipping.receiverLabel" />
          </p>

          {!editingReceiverName ? (
            <div className="flex items-center">
              <span className="mr3">
                {form.address.receiverName ?? autoReceiverName}
              </span>
              <ButtonPlain onClick={handleEditReceiverName}>
                <FormattedMessage id="store/checkout.shipping.changeReceiverLabel" />
              </ButtonPlain>
            </div>
          ) : (
            <Input
              label={intl.formatMessage({
                id: 'store/checkout.shipping.receiverNameLabel',
              })}
              onChange={handleNameChange}
              onBlur={() => {
                form.onFieldBlur('receiverName')
              }}
              value={form.address.receiverName}
              errorMessage={
                form.meta.receiverName?.blurred &&
                form.meta.receiverName?.errorMessage
                  ? intl.formatMessage(form.meta.receiverName.errorMessage)
                  : ''
              }
            />
          )}
        </div>

        <Button
          testId="continue-address-button"
          block
          size="large"
          type="submit"
          disabled={isSubmitting}
          isLoading={isSubmitting}
        >
          <span className="f5">
            <FormattedMessage id="store/checkout.shipping.goToPayment" />
          </span>
        </Button>
      </form>
    </div>
  )
}

export default AddressCompletionForm

```


[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 checkout-shipping/react/components/AddressList.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { AddressContext } from 'vtex.address-context'
import { PlaceDetails } from 'vtex.place-components'
import type { Address } from 'vtex.checkout-graphql'
import { OrderShipping } from 'vtex.order-shipping'
import { FormattedMessage } from 'react-intl'
import { ListGroup, GroupOption } from 'vtex.checkout-components'

import ShippingHeader from '../ShippingHeader'
import { ShippingOptionPreview } from '../ShippingOption'
import ShippingEditError from './ShippingEditError'

const { useAddressContext } = AddressContext
const { useOrderShipping } = OrderShipping

interface Props {
  addresses: Address[]
  onCreateAddress?: () => void
  onAddressSelected?: (address: Address) => void
  onRetrySelectAddress?: () => void
  onEditAddress?: () => void
  selectedAddress: Address | null
  isSubmitting: boolean
  hasError: boolean
}

const AddressList: React.FC<Props> = ({
  addresses,
  onEditAddress = () => {},
  onCreateAddress = () => {},
  onRetrySelectAddress = () => {},
  onAddressSelected = () => {},
  selectedAddress,
  isSubmitting,
  hasError,
}) => {
  const { countries } = useOrderShipping()
  const { rules } = useAddressContext()

  if (hasError) {
    return (
      <ShippingEditError
        onEditAddress={onEditAddress}
        onTryAgain={onRetrySelectAddress}
      />
    )
  }

  if (isSubmitting) {
    return (
      <>
        <ShippingHeader onEditAddress={onEditAddress} />

        <ListGroup>
          <ShippingOptionPreview />
          <ShippingOptionPreview />
          <ShippingOptionPreview />
        </ListGroup>
      </>
    )
  }

  return (
    <div>
      <span className="db fw6 lh-copy mb3">
        <FormattedMessage id="store/checkout.shipping.chooseAddress" />
      </span>
      <ListGroup>
        {addresses.map((address, id) => (
          <GroupOption
            onClick={() => onAddressSelected(address)}
            selected={address.addressId === selectedAddress?.addressId}
            key={`${address?.addressId}-${id}`}
          >
            <AddressContext.AddressContextProvider
              address={address}
              countries={countries}
              rules={rules}
            >
              <PlaceDetails />
            </AddressContext.AddressContextProvider>
          </GroupOption>
        ))}
        <GroupOption onClick={onCreateAddress}>
          <FormattedMessage id="store/checkout.shipping.newAddressLabel" />
        </GroupOption>
      </ListGroup>
    </div>
  )
}

export default AddressList

```


[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 checkout-shipping/react/__tests__/PickupDetailsModal.tsx from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render, screen } from '@vtex/test-tools/react'
import { AddressContext } from 'vtex.address-context'
import type { PickupOption } from 'vtex.checkout-graphql'

import PickupDetailsModal from '../components/PickupDetailsModal'

describe('PickupDetailsModal', () => {
  it('should display pickup address instead of user address', async () => {
    render(
      <AddressContext.AddressContextProvider
        address={{
          street: 'User fake street',
        }}
        countries={[]}
        rules={{}}
      >
        <PickupDetailsModal
          pickupOption={
            {
              address: {
                street: 'Pickup fake street',
              },
              businessHours: [] as PickupOption['businessHours'],
            } as PickupOption
          }
          showPickupModal
          setShowPickupModal={() => {}}
        />
      </AddressContext.AddressContextProvider>
    )

    expect(screen.queryByText(/Pickup fake street/i)).toBeInTheDocument()
    expect(screen.queryByText(/User fake street/i)).not.toBeInTheDocument()
  })
})

```


[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 checkout-shipping/react/machines/useShippingStateMachine.ts from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useMachine } from '@xstate/react'
import { Router, routes } from 'vtex.checkout-container'
import { OrderShipping } from 'vtex.order-shipping'
import { assign } from 'xstate'
import { AddressContext } from 'vtex.address-context'
import { useContext } from 'react'

import shippingStateMachine from './shippingStateMachine'
import type { ShippingMachineContext, ShippingMachineEvents } from './types'
import useMatcher from './useMatcher'

const { useOrderShipping } = OrderShipping
const { useAddressContext } = AddressContext

const useShippingStateMachine = ({
  availableAddresses,
  selectedAddress,
  canEditData,
  userProfileId,
}: Omit<ShippingMachineContext, 'hasHistory'>) => {
  const {
    insertAddress,
    selectDeliveryOption,
    selectPickupOption,
    updateSelectedAddress,
  } = useOrderShipping()

  const { setAddress } = useAddressContext()

  const history = useContext(Router.__RouterContext)?.history

  const [state, send] = useMachine<
    ShippingMachineContext,
    ShippingMachineEvents
  >(shippingStateMachine, {
    devTools: true,
    context: {
      availableAddresses,
      selectedAddress,
      canEditData,
      userProfileId,
      hasHistory: !!history,
    },
    actions: {
      goToNextStep: () => history?.push(routes.ADDRESS),
      updateAddressContext: (_, event) => {
        if (
          event.type !== 'SUBMIT_CREATE_ADDRESS' &&
          event.type !== 'SUBMIT_SELECT_ADDRESS'
        ) {
          return
        }

        setAddress(event.address)
      },
      updateSelectedAddress: assign((_, event) => {
        if (
          event.type === 'done.invoke.tryToCreateAddress' ||
          event.type === 'done.invoke.tryToSelectAddress'
        ) {
          const updatedAddress = event.data.orderForm.shipping.selectedAddress

          setAddress(updatedAddress)

          return {
            selectedAddress: event.data.orderForm.shipping.selectedAddress,
          }
        }

        return {}
      }),
    },
    services: {
      tryToCreateAddress: async (_, event) => {
        if (
          event.type !== 'SUBMIT_CREATE_ADDRESS' &&
          event.type !== 'RETRY_CREATE_ADDRESS'
        ) {
          return
        }

        try {
          return await insertAddress(event.address)
        } catch {
          throw event.address
        }
      },
      tryToSelectAddress: async (_, event) => {
        if (
          event.type !== 'SUBMIT_SELECT_ADDRESS' &&
          event.type !== 'RETRY_SELECT_ADDRESS'
        ) {
          return
        }

        try {
          return await updateSelectedAddress(event.address)
        } catch {
          throw event.address
        }
      },
      tryToSelectShippingOption: async (_, event) => {
        if (event.type !== 'SUBMIT_SELECT_SHIPPING_OPTION') {
          return
        }

        if (event.deliveryChannel === 'delivery') {
          return selectDeliveryOption(event.shippingOptionId)
        }

        return selectPickupOption(event.shippingOptionId)
      },
    },
  })

  const matches = useMatcher<ShippingMachineContext, ShippingMachineEvents>(
    state
  )

  return { matches, send, state }
}

export default useShippingStateMachine

```


[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 checkout-shipping/react/machines/shippingStateMachine.ts from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { assign, Machine } from 'xstate'

import type { ShippingMachineContext, ShippingMachineEvents } from './types'

const hasSelectedAddress = ({ selectedAddress }: ShippingMachineContext) =>
  selectedAddress != null

const hasNoAvailableAddresses = ({
  availableAddresses,
}: ShippingMachineContext) => availableAddresses.length === 0

const hasAvailableAddresses = ({
  availableAddresses,
}: ShippingMachineContext) => availableAddresses.length !== 0

const isFirstPurchase = ({
  canEditData,
  userProfileId,
}: ShippingMachineContext) => canEditData && !userProfileId

const hasEditingAddressId = ({ editingAddressId }: ShippingMachineContext) =>
  editingAddressId != null

const shippingStateMachine = Machine<
  ShippingMachineContext,
  ShippingMachineEvents
>(
  {
    initial: 'initial',
    context: {
      availableAddresses: [],
      canEditData: true,
      selectedAddress: null,
      userProfileId: null,
      editingAddressId: null,
      hasHistory: true,
      retryAddress: null,
    },
    states: {
      initial: {
        always: [
          { target: 'createAddress', cond: hasEditingAddressId },
          { target: 'selectShippingOption', cond: hasSelectedAddress },
          { target: 'selectAddress', cond: hasAvailableAddresses },
          { target: 'createAddress' },
        ],
      },
      createAddress: {
        initial: 'editing',
        states: {
          editing: {
            initial: 'withListBacklink',
            states: {
              normal: {
                on: {
                  GO_TO_SELECT_ADDRESS: undefined,
                },
              },
              withListBacklink: {
                always: [
                  {
                    target: 'normal',
                    cond: isFirstPurchase,
                  },
                  {
                    target: 'normal',
                    cond: hasNoAvailableAddresses,
                  },
                ],
              },
            },
            on: {
              GO_TO_SELECT_ADDRESS: 'selectAddress',
              SUBMIT_CREATE_ADDRESS: {
                target: 'submitting',
                actions: 'updateAddressContext',
              },
            },
          },
          submitting: {
            on: {
              EDIT_ADDRESS: {
                target: 'editing',
                actions: 'clearRetryAddress',
              },
            },
            invoke: {
              src: 'tryToCreateAddress',
              onDone: {
                target: 'done',
                actions: [
                  'updateSelectedAddress',
                  'updateAvailableAddresses',
                  'clearRetryAddress',
                ],
              },
              onError: {
                target: 'error',
                actions: 'updateRetryAddress',
              },
            },
          },
          error: {
            on: {
              RETRY_CREATE_ADDRESS: 'submitting',
              EDIT_ADDRESS: {
                target: 'editing',
                actions: 'clearRetryAddress',
              },
            },
          },
          selectAddress: {
            entry: 'clearEditingAddressId',
            type: 'final',
          },
          done: {
            entry: 'clearEditingAddressId',
            type: 'final',
          },
        },
        onDone: [
          {
            target: 'selectAddress',
            cond: (_, __, meta) =>
              meta.state.matches({ createAddress: 'selectAddress' }),
          },
          { target: 'selectShippingOption' },
        ],
      },
      selectAddress: {
        initial: 'idle',
        states: {
          idle: {
            always: [
              {
                target: 'createAddress',
                cond: hasNoAvailableAddresses,
              },
              {
                target: 'createAddress',
                cond: isFirstPurchase,
              },
            ],
            on: {
              GO_TO_CREATE_ADDRESS: 'createAddress',
              SUBMIT_SELECT_ADDRESS: {
                target: 'submitting',
                actions: 'updateAddressContext',
              },
            },
          },
          submitting: {
            on: {
              EDIT_ADDRESS: {
                target: 'idle',
                actions: 'clearRetryAddress',
              },
            },
            invoke: {
              src: 'tryToSelectAddress',
              onDone: {
                target: 'selectOption',
                actions: ['updateSelectedAddress', 'clearRetryAddress'],
              },
              onError: {
                target: 'error',
                actions: 'updateRetryAddress',
              },
            },
          },
          error: {
            on: {
              RETRY_SELECT_ADDRESS: 'submitting',
              EDIT_ADDRESS: {
                target: 'idle',
                actions: 'clearRetryAddress',
              },
            },
          },
          createAddress: {
            type: 'final',
          },
          selectOption: {
            type: 'final',
          },
        },

        onDone: [
          {
            target: 'selectShippingOption',
            cond: (_, __, meta) =>
              meta.state.matches({ selectAddress: 'selectOption' }),
          },
          {
            target: 'createAddress',
          },
        ],
      },
      selectShippingOption: {
        initial: 'editing',
        on: {
          EDIT_ADDRESS: [
            {
              target: 'createAddress',
              cond: isFirstPurchase,
              actions: 'updateEditingAddressId',
            },
            { target: 'selectAddress' },
          ],
        },
        states: {
          idle: {
            on: {
              DESELECT_SHIPPING_OPTION: 'editing',
              GO_TO_ADDRESS_STEP: 'done',
            },
          },
          editing: {
            on: {
              SUBMIT_SELECT_SHIPPING_OPTION: 'submitting',
            },
          },
          submitting: {
            on: {
              EDIT_ADDRESS: undefined,
            },
            invoke: {
              src: 'tryToSelectShippingOption',
              onDone: 'idle',
            },
          },
          done: {
            type: 'final',
          },
        },

        onDone: 'done',
      },
      done: {
        entry: 'goToNextStep',
      },
    },
  },
  {
    actions: {
      goToNextStep: () => {},
      updateEditingAddressId: assign((ctx) => {
        return {
          editingAddressId: ctx.selectedAddress?.addressId,
        }
      }),
      clearEditingAddressId: assign((_) => {
        return {
          editingAddressId: null,
        }
      }),
      updateRetryAddress: assign((_, action) => {
        if (
          action.type !== 'error.platform.tryToCreateAddress' &&
          action.type !== 'error.platform.tryToSelectAddress'
        ) {
          return {}
        }

        return {
          retryAddress: action.data,
        }
      }),
      clearRetryAddress: assign({
        retryAddress: (_) => {
          return null
        },
      }),
      updateAvailableAddresses: assign({
        availableAddresses: (ctx, action) => {
          if (action.type !== 'done.invoke.tryToCreateAddress') {
            return ctx.availableAddresses
          }

          return action.data.orderForm.shipping.availableAddresses
        },
      }),
    },
  }
)

export default shippingStateMachine

```


[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 checkout-shipping/react/machines/types.ts from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type {
  Address,
  DeliveryOption,
  PickupOption,
} from 'vtex.checkout-graphql'

export interface ShippingMachineContext {
  availableAddresses: Address[]
  canEditData: boolean
  selectedAddress: Address | null
  retryAddress: Address | null
  userProfileId?: string | null
  editingAddressId?: string | null
  hasHistory: boolean
}

export type ShippingMachineEvents =
  | { type: 'GO_TO_CREATE_ADDRESS' }
  | { type: 'GO_TO_SELECT_ADDRESS' }
  | { type: 'GO_TO_ADDRESS_STEP' }
  | { type: 'DESELECT_SHIPPING_OPTION' }
  | { type: 'EDIT_ADDRESS' }
  | { type: 'SUBMIT_SELECT_ADDRESS' | 'RETRY_SELECT_ADDRESS'; address: Address }
  | {
      type: 'SUBMIT_SELECT_SHIPPING_OPTION'
      shippingOptionId: string
      deliveryChannel: string
    }
  | { type: 'SUBMIT_CREATE_ADDRESS' | 'RETRY_CREATE_ADDRESS'; address: Address }
  | {
      type: 'done.invoke.tryToCreateAddress'
      data: {
        orderForm: {
          shipping: {
            availableAddresses: Address[]
            deliveryOptions: DeliveryOption[]
            pickupOptions: PickupOption[]
            selectedAddress: Address
          }
        }
      }
    }
  | {
      type: 'error.platform.tryToCreateAddress'
      data: Address
    }
  | {
      type: 'done.invoke.tryToSelectAddress'
      data: {
        orderForm: {
          shipping: {
            deliveryOptions: DeliveryOption[]
            pickupOptions: PickupOption[]
            selectedAddress: Address
          }
        }
      }
    }
  | {
      type: 'error.platform.tryToSelectAddress'
      data: Address
    }
  | {
      type: 'done.invoke.tryToSelectShippingOption'
      data: {
        success: boolean
      }
    }

export type AddressMachineEvents =
  | { type: 'SUBMIT_RECEIVER_INFO'; receiverName: string }
  | { type: 'EDIT_ADDRESS' }
  | {
      type: 'SUBMIT_EDIT_ADDRESS'
      updatedAddress: Address
    }
  | { type: 'RESET_ADDRESS' }
  | {
      type: 'done.invoke.tryToUpdateCompleteAddress'
      data: {
        success: boolean
        orderForm: {
          shipping: {
            deliveryOptions: DeliveryOption[]
            pickupOptions: PickupOption[]
            selectedAddress: Address
          }
        }
        buyerIsReceiver: boolean
      }
    }

```