From 8b28d3994dcfe8ed3196ca0f6765a5459b736f2b Mon Sep 17 00:00:00 2001 From: Jan Molcik Date: Tue, 10 Dec 2024 16:55:05 +0100 Subject: [PATCH] unify PaymentInProcess with other order confirmation pages --- app/schema.graphql | 38 +++++----- .../ConfirmationPageContent.tsx | 6 +- .../OrderDetail/OrderDetailContent.tsx | 4 +- .../Pages/Customer/Orders/OrderItem.tsx | 2 +- .../Customer/Orders/OrderPaymentStatusBar.tsx | 68 ++++++++++-------- .../Order/PaymentConfirmation/PaymentFail.tsx | 26 +++---- .../PaymentConfirmation/PaymentInProcess.tsx | 23 +++--- .../PaymentConfirmation/PaymentStatus.tsx | 39 +++++++++++ storefront/graphql/docs/schema.md | 70 +++++++++---------- storefront/pages/order-confirmation.tsx | 11 ++- .../pages/order-payment-confirmation.tsx | 41 +++-------- storefront/public/locales/cs/common.json | 5 +- storefront/public/locales/en/common.json | 5 +- storefront/public/locales/sk/common.json | 5 +- 14 files changed, 181 insertions(+), 162 deletions(-) create mode 100644 storefront/components/Pages/Order/PaymentConfirmation/PaymentStatus.tsx diff --git a/app/schema.graphql b/app/schema.graphql index 2190ab9e28..377708a447 100644 --- a/app/schema.graphql +++ b/app/schema.graphql @@ -1473,11 +1473,11 @@ input OrderItemsFilterInput { "One of possible types of the order item" enum OrderItemTypeEnum { + discount payment product - discount - transport rounding + transport } type OrderPaymentsConfig { @@ -1489,14 +1489,14 @@ type OrderPaymentsConfig { "Status of order" enum OrderStatusEnum { - "New" - new - "In progress" - inProgress - "Done" - done "Canceled" canceled + "Done" + done + "In progress" + inProgress + "New" + new } "Information about pagination in a connection." @@ -1877,8 +1877,8 @@ input ProductListInput { "One of possible types of the product list" enum ProductListTypeEnum { - WISHLIST COMPARISON + WISHLIST } input ProductListUpdateInput { @@ -1889,16 +1889,16 @@ input ProductListUpdateInput { "One of possible ordering modes for product" enum ProductOrderingModeEnum { - "Order by priority" - PRIORITY - "Order by price ascending" - PRICE_ASC - "Order by price descending" - PRICE_DESC "Order by name ascending" NAME_ASC "Order by name descending" NAME_DESC + "Order by price ascending" + PRICE_ASC + "Order by price descending" + PRICE_DESC + "Order by priority" + PRIORITY "Order by relevance" RELEVANCE } @@ -2460,14 +2460,14 @@ type StoreEdge { "Status of store opening" enum StoreOpeningStatusEnum { - "Store is currently opened" - OPEN "Store is currently closed" CLOSED - "Store will be opened soon" - OPEN_SOON "Store will be closed soon" CLOSED_SOON + "Store is currently opened" + OPEN + "Store will be opened soon" + OPEN_SOON } type Token { diff --git a/storefront/components/Blocks/ConfirmationPage/ConfirmationPageContent.tsx b/storefront/components/Blocks/ConfirmationPage/ConfirmationPageContent.tsx index 9f563e1a4b..c6fc0174ad 100644 --- a/storefront/components/Blocks/ConfirmationPage/ConfirmationPageContent.tsx +++ b/storefront/components/Blocks/ConfirmationPage/ConfirmationPageContent.tsx @@ -1,15 +1,13 @@ import sentCartImage from '/public/images/sent-cart.svg'; import { Image } from 'components/Basic/Image/Image'; import { TIDs } from 'cypress/tids'; -import { ReactElement } from 'react'; type ConfirmationPageContentProps = { heading: string; content?: string; - AdditionalContent?: ReactElement; }; -export const ConfirmationPageContent: FC = ({ heading, content, AdditionalContent }) => { +export const ConfirmationPageContent: FC = ({ heading, content, children }) => { return (
@@ -24,7 +22,7 @@ export const ConfirmationPageContent: FC = ({ head dangerouslySetInnerHTML={{ __html: content }} tid={TIDs.order_confirmation_page_text_wrapper} /> - {AdditionalContent} + {children} )}
diff --git a/storefront/components/Pages/Customer/OrderDetail/OrderDetailContent.tsx b/storefront/components/Pages/Customer/OrderDetail/OrderDetailContent.tsx index 73a903693c..090693d355 100644 --- a/storefront/components/Pages/Customer/OrderDetail/OrderDetailContent.tsx +++ b/storefront/components/Pages/Customer/OrderDetail/OrderDetailContent.tsx @@ -13,11 +13,11 @@ export const OrderDetailContent: FC = ({ order }) => { return (
- {order.payment.type === PaymentTypeEnum.GoPay && !order.isPaid && !order.isPaymentInProcess && ( + {order.payment.type === PaymentTypeEnum.GoPay && !order.isPaid && !order.hasPaymentInProcess && (
= ({ order, addOrderItemsToEmptyCart, return (
diff --git a/storefront/components/Pages/Customer/Orders/OrderPaymentStatusBar.tsx b/storefront/components/Pages/Customer/Orders/OrderPaymentStatusBar.tsx index 0836750e7a..1bed74ed3a 100644 --- a/storefront/components/Pages/Customer/Orders/OrderPaymentStatusBar.tsx +++ b/storefront/components/Pages/Customer/Orders/OrderPaymentStatusBar.tsx @@ -6,44 +6,52 @@ import { twMergeCustom } from 'utils/twMerge'; type OrderPaymentStatusBarProps = { orderPaymentType: string; orderIsPaid: boolean; - orderIsPaymentInProcess: boolean; + orderHasPaymentInProcess: boolean; +}; + +const OrderPaymentStatusContent: FC<{ title: string; iconClassName?: string }> = ({ title, iconClassName }) => ( +
+ + {title} +
+); + +const OrderPaymentStatus: FC<{ + orderIsPaid: boolean; + orderHasPaymentInProcess: boolean; +}> = ({ orderIsPaid, orderHasPaymentInProcess }) => { + const { t } = useTranslation(); + + if (orderIsPaid) { + return ; + } + + if (orderHasPaymentInProcess) { + return ; + } + + return ; }; export const OrderPaymentStatusBar: FC = ({ orderPaymentType, orderIsPaid, className, - orderIsPaymentInProcess, + orderHasPaymentInProcess, }) => { - const { t } = useTranslation(); + if (orderPaymentType !== PaymentTypeEnum.GoPay) { + return null; + } + return ( - <> - {orderPaymentType === PaymentTypeEnum.GoPay && ( -
- {orderIsPaid ? ( - <> - - {t('The order was paid')} - - ) : orderIsPaymentInProcess ? ( - <> - - {t('The order is awaiting payment verification.')} - - ) : ( - <> - - {t('The order has not been paid')} - - )} -
+
+ > + +
); }; diff --git a/storefront/components/Pages/Order/PaymentConfirmation/PaymentFail.tsx b/storefront/components/Pages/Order/PaymentConfirmation/PaymentFail.tsx index 23c070ce8f..625aef5eec 100644 --- a/storefront/components/Pages/Order/PaymentConfirmation/PaymentFail.tsx +++ b/storefront/components/Pages/Order/PaymentConfirmation/PaymentFail.tsx @@ -24,20 +24,16 @@ export const PaymentFail: FC = ({ useGtmPageViewEvent(gtmStaticPageViewEvent); return ( - - {lastUsedOrderPaymentType === PaymentTypeEnum.GoPay && ( - - )} - - } - /> + + <> + {lastUsedOrderPaymentType === PaymentTypeEnum.GoPay && ( + + )} + + ); }; diff --git a/storefront/components/Pages/Order/PaymentConfirmation/PaymentInProcess.tsx b/storefront/components/Pages/Order/PaymentConfirmation/PaymentInProcess.tsx index ea20665f48..41a5f47813 100644 --- a/storefront/components/Pages/Order/PaymentConfirmation/PaymentInProcess.tsx +++ b/storefront/components/Pages/Order/PaymentConfirmation/PaymentInProcess.tsx @@ -1,6 +1,5 @@ -import { ArrowIcon } from 'components/Basic/Icon/ArrowIcon'; -import { HeartIcon } from 'components/Basic/Icon/HeartIcon'; -import { Webline } from 'components/Layout/Webline/Webline'; +import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink'; +import { ConfirmationPageContent } from 'components/Blocks/ConfirmationPage/ConfirmationPageContent'; import { useDomainConfig } from 'components/providers/DomainConfigProvider'; import { GtmPageType } from 'gtm/enums/GtmPageType'; import { useGtmStaticPageViewEvent } from 'gtm/factories/useGtmStaticPageViewEvent'; @@ -23,17 +22,13 @@ export const PaymentInProcess: FC = ({ orderUrlHash }) => useGtmPageViewEvent(gtmStaticPageViewEvent); return ( - -
- -

- {t('The payment is being processed, you can check the status on the order detail page')} -

-
- + + {t('Show order detail')} - - - + + ); }; diff --git a/storefront/components/Pages/Order/PaymentConfirmation/PaymentStatus.tsx b/storefront/components/Pages/Order/PaymentConfirmation/PaymentStatus.tsx new file mode 100644 index 0000000000..d15fc1efcd --- /dev/null +++ b/storefront/components/Pages/Order/PaymentConfirmation/PaymentStatus.tsx @@ -0,0 +1,39 @@ +import { PaymentFail } from './PaymentFail'; +import { PaymentInProcess } from './PaymentInProcess'; +import { PaymentSuccess } from './PaymentSuccess'; +import { TypeUpdatePaymentStatusMutation } from 'graphql/requests/orders/mutations/UpdatePaymentStatusMutation.generated'; +import { TypeOrderPaymentFailedContentQuery } from 'graphql/requests/orders/queries/OrderPaymentFailedContentQuery.generated'; +import { TypeOrderPaymentSuccessfulContentQuery } from 'graphql/requests/orders/queries/OrderPaymentSuccessfulContentQuery.generated'; + +export const PaymentStatus: FC<{ + paymentStatusData: TypeUpdatePaymentStatusMutation | undefined; + failedContentData: TypeOrderPaymentFailedContentQuery | undefined; + successContentData: TypeOrderPaymentSuccessfulContentQuery | undefined; + orderUuid: string; +}> = ({ paymentStatusData, failedContentData, successContentData, orderUuid }) => { + if (paymentStatusData?.UpdatePaymentStatus.isPaid) { + return successContentData ? ( + + ) : null; + } + + if (paymentStatusData?.UpdatePaymentStatus.hasPaymentInProcess) { + return ; + } + + if (paymentStatusData && failedContentData) { + return ( + + ); + } + + return null; +}; diff --git a/storefront/graphql/docs/schema.md b/storefront/graphql/docs/schema.md index 7070797e06..e5acc7f40e 100644 --- a/storefront/graphql/docs/schema.md +++ b/storefront/graphql/docs/schema.md @@ -11514,7 +11514,7 @@ One of the possible methods of the customer user login -web +admin @@ -11530,7 +11530,7 @@ One of the possible methods of the customer user login -admin +web @@ -11549,23 +11549,23 @@ One of possible types of the order item -payment +discount -product +payment -discount +product -transport +rounding -rounding +transport @@ -11584,34 +11584,34 @@ Status of order -new +canceled -New +Canceled -inProgress +done -In progress +Done -done +inProgress -Done +In progress -canceled +new -Canceled +New @@ -11662,11 +11662,11 @@ One of possible types of the product list -WISHLIST +COMPARISON -COMPARISON +WISHLIST @@ -11685,42 +11685,42 @@ One of possible ordering modes for product -PRIORITY +NAME_ASC -Order by priority +Order by name ascending -PRICE_ASC +NAME_DESC -Order by price ascending +Order by name descending -PRICE_DESC +PRICE_ASC -Order by price descending +Order by price ascending -NAME_ASC +PRICE_DESC -Order by name ascending +Order by price descending -NAME_DESC +PRIORITY -Order by name descending +Order by priority @@ -11812,34 +11812,34 @@ Status of store opening -OPEN +CLOSED -Store is currently opened +Store is currently closed -CLOSED +CLOSED_SOON -Store is currently closed +Store will be closed soon -OPEN_SOON +OPEN -Store will be opened soon +Store is currently opened -CLOSED_SOON +OPEN_SOON -Store will be closed soon +Store will be opened soon diff --git a/storefront/pages/order-confirmation.tsx b/storefront/pages/order-confirmation.tsx index 44dc143d93..fc135ebe7f 100644 --- a/storefront/pages/order-confirmation.tsx +++ b/storefront/pages/order-confirmation.tsx @@ -63,12 +63,11 @@ const OrderConfirmationPage: FC = () => { - ) : undefined - } - /> + > + {orderPaymentType === PaymentTypeEnum.GoPay ? ( + + ) : undefined} + diff --git a/storefront/pages/order-payment-confirmation.tsx b/storefront/pages/order-payment-confirmation.tsx index 4620d3e454..91fef417e4 100644 --- a/storefront/pages/order-payment-confirmation.tsx +++ b/storefront/pages/order-payment-confirmation.tsx @@ -2,9 +2,7 @@ import { MetaRobots } from 'components/Basic/Head/MetaRobots'; import { ConfirmationPageContent } from 'components/Blocks/ConfirmationPage/ConfirmationPageContent'; import { CommonLayout } from 'components/Layout/CommonLayout'; import { Webline } from 'components/Layout/Webline/Webline'; -import { PaymentFail } from 'components/Pages/Order/PaymentConfirmation/PaymentFail'; -import { PaymentInProcess } from 'components/Pages/Order/PaymentConfirmation/PaymentInProcess'; -import { PaymentSuccess } from 'components/Pages/Order/PaymentConfirmation/PaymentSuccess'; +import { PaymentStatus } from 'components/Pages/Order/PaymentConfirmation/PaymentStatus'; import { getPaymentSessionExpiredErrorMessage, useUpdatePaymentStatus, @@ -58,37 +56,20 @@ const OrderPaymentConfirmationPage: FC = () => { ); } + const isFetchingData = + !paymentStatusData || isOrderPaymentFailedContentFetching || isOrderPaymentSuccessfulContentFetching; + return ( <> - + - {paymentStatusData?.UpdatePaymentStatus.isPaid ? ( - successContentData && ( - - ) - ) : paymentStatusData?.UpdatePaymentStatus.isPaymentInProcess ? ( - - ) : ( - paymentStatusData && - failedContentData && ( - - ) - )} + diff --git a/storefront/public/locales/cs/common.json b/storefront/public/locales/cs/common.json index 496c23f069..dde0761696 100644 --- a/storefront/public/locales/cs/common.json +++ b/storefront/public/locales/cs/common.json @@ -419,10 +419,10 @@ "The message could not be sent": "Zprávu se nepodařilo odeslat", "The most reliable online store in the Czech Republic": "Nejspolehlivější internetový obchod v ČR", "The order has not been paid": "Objednávka nebyla zaplacena", - "The Order is awaiting payment verification.": "Objednávka čeká ověření platby.", + "The order is awaiting payment verification.": "Objednávka čeká na ověření platby.", "The order was paid": "Objednávka byla zaplacena", "The page is currently under maintenance.": "Stránka je aktuálně v režimu údržby.", - "The payment is being processed, you can check the status on the order details": "Probíhá zpracování platby, stav můžete zkontrolovat na detailu objednávky", + "The payment is being processed": "Probíhá zpracování platby", "The payment you selected is no longer available.": "Platba, kterou jste si zvolili, již není dostupná.", "The price of item {{ itemName }} has changed.": "Cena položky {{ itemName }} se změnila.", "The price of the payment you selected has changed.": "Cena platby, kterou jste si zvolili, se změnila.", @@ -499,6 +499,7 @@ "You": "Vy", "You are being redirected...": "Budete přesměrováni...", "You can also buy": "Můžete si dokoupit", + "You can check the status on the order detail page.": "Stav můžete zkontrolovat na detailu objednávky.", "You have exceeded the weight limit of the selected transport.": "Přesáhli jste váhový limit vámi zvolené dopravy.", "You have no complaints": "Nemáte žádné reklamace", "You have no ordered items": "Nemáte žádné objednané položky", diff --git a/storefront/public/locales/en/common.json b/storefront/public/locales/en/common.json index 83872005ee..cb75883e27 100644 --- a/storefront/public/locales/en/common.json +++ b/storefront/public/locales/en/common.json @@ -403,10 +403,10 @@ "The message could not be sent": "The message could not be sent", "The most reliable online store in the Czech Republic": "The most reliable online store in the Czech Republic", "The order has not been paid": "The order has not been paid", - "The Order is awaiting payment verification.": "", + "The order is awaiting payment verification.": "The order is awaiting payment verification.", "The order was paid": "The order was paid", "The page is currently under maintenance.": "The page is currently under maintenance.", - "The payment is being processed, you can check the status on the order details": "", + "The payment is being processed": "The payment is being processed", "The payment you selected is no longer available.": "The payment you selected is no longer available.", "The price of item {{ itemName }} has changed.": "The price of item {{ itemName }} has changed.", "The price of the payment you selected has changed.": "The price of the payment you selected has changed.", @@ -481,6 +481,7 @@ "You": "You", "You are being redirected...": "You are being redirected...", "You can also buy": "You can also buy", + "You can check the status on the order detail page.": "You can check the status on the order detail page.", "You have exceeded the weight limit of the selected transport.": "You have exceeded the weight limit of the selected transport.", "You have no complaints": "You have no complaints", "You have no ordered items": "You have no ordered items", diff --git a/storefront/public/locales/sk/common.json b/storefront/public/locales/sk/common.json index 2a2b89b677..0b602fd6d6 100644 --- a/storefront/public/locales/sk/common.json +++ b/storefront/public/locales/sk/common.json @@ -419,10 +419,10 @@ "The message could not be sent": "The message could not be sent", "The most reliable online store in the Czech Republic": "Najspoľahlivejší internetový obchod v SR", "The order has not been paid": "Objednávka nebola zaplatená", - "The Order is awaiting payment verification.": "Objednávka čaká na overenie platby.", + "The order is awaiting payment verification.": "Objednávka čaká na overenie platby.", "The order was paid": "Objednávka bola zaplatená", "The page is currently under maintenance.": "The page is currently under maintenance.", - "The payment is being processed, you can check the status on the order details": "Prebieha spracovanie platby, stav si môžete skontrolovať na detaile objednávky", + "The payment is being processed": "Platba sa spracováva", "The payment you selected is no longer available.": "The payment you selected is no longer available.", "The price of item {{ itemName }} has changed.": "The price of item {{ itemName }} has changed.", "The price of the payment you selected has changed.": "The price of the payment you selected has changed.", @@ -499,6 +499,7 @@ "You": "Vy", "You are being redirected...": "You are being redirected...", "You can also buy": "Môžete si dokúpiť", + "You can check the status on the order detail page.": "Stav môžete skontrolovať na stránke s podrobnosťami o objednávke.", "You have exceeded the weight limit of the selected transport.": "You have exceeded the weight limit of the selected transport.", "You have no complaints": "Nemáte žiadne reklamácie", "You have no ordered items": "Nemáte žiadne objednané položky",