+ {t("orderConfirmedWithSuccess")} +
++ {t("orderConfirmedWithSuccessSubtitle")} +
+diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index b11f63e..1f22f17 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -66,5 +66,9 @@ "cashPaymentType": "Cash", "totalOfItems": "Total items", "shippingTotal": "Shipping", - "confirmOrder": "Confirm order" + "confirmOrder": "Confirm order", + "noProductsInCheckout": "No coffee was selected", + "fillAllFieldsToConfirm": "You need to fulfill all fields to confirm your order", + "orderConfirmedWithSuccess": "Yay! Order confirmed", + "orderConfirmedWithSuccessSubtitle": "Now all you have to do is wait for the coffee to reach you" } diff --git a/public/locales/pt/translation.json b/public/locales/pt/translation.json index 775e203..267fbae 100644 --- a/public/locales/pt/translation.json +++ b/public/locales/pt/translation.json @@ -66,5 +66,9 @@ "cashPaymentType": "Dinheiro", "totalOfItems": "Total de itens", "shippingTotal": "Entrega", - "confirmOrder": "Confirmar pedido" + "confirmOrder": "Confirmar pedido", + "noProductsInCheckout": "Não foi selecionado nenhum café", + "fillAllFieldsToConfirm": "Você precisa completar todos os campos para confirmar seu pedido", + "orderConfirmedWithSuccess": "Uhu! Pedido confirmado", + "orderConfirmedWithSuccessSubtitle": "Agora é só aguardar que logo o café chegará até você" } diff --git a/src/assets/success-page-delivery-guy.svg b/src/assets/success-page-delivery-guy.svg new file mode 100644 index 0000000..20bea72 --- /dev/null +++ b/src/assets/success-page-delivery-guy.svg @@ -0,0 +1,99 @@ + diff --git a/src/pages/Success/index.tsx b/src/pages/Success/index.tsx index 72ffc9e..183a3dd 100644 --- a/src/pages/Success/index.tsx +++ b/src/pages/Success/index.tsx @@ -1,9 +1,51 @@ import { useContext } from "react"; +import { Helmet, HelmetProvider } from "react-helmet-async"; +import { useTranslation } from "react-i18next"; +import successPageDeliveryGuy from "../../assets/success-page-delivery-guy.svg"; import { AppContext } from "../../contexts/AppContext"; export function Success() { const { orderInfo } = useContext(AppContext); + const { t } = useTranslation(); - return
+ {t("orderConfirmedWithSuccessSubtitle")} +
+