[SSP-2840] The e-shop will not allow you to repeat the payment if the…

… current payment is in the verification process.
shopsys · Dec 17, 2024 · 7be1f89 · 7be1f89
1 parent 3748511
commit 7be1f89
Show file tree

Hide file tree

Showing 18 changed files with 171 additions and 81 deletions.
diff --git a/app/schema.graphql b/app/schema.graphql
@@ -1275,6 +1275,8 @@ type Order {
   email: String!
   "The customer's first name"
   firstName: String
+  "Indicates whether order payment is still being processed with GoPay payment type"
+  hasPaymentInProcess: Boolean!
   "Determines whether the customer agrees with sending satisfaction questionnaires within the Verified by Customers Heureka program"
   heurekaAgreement: Boolean!
   "Indicates whether the billing address is other than a delivery address"
@@ -1471,11 +1473,11 @@ input OrderItemsFilterInput {
 
 "One of possible types of the order item"
 enum OrderItemTypeEnum {
-  discount
   payment
   product
-  rounding
+  discount
   transport
+  rounding
 }
 
 type OrderPaymentsConfig {
@@ -1487,14 +1489,14 @@ type OrderPaymentsConfig {
 
 "Status of order"
 enum OrderStatusEnum {
-  "Canceled"
-  canceled
-  "Done"
-  done
-  "In progress"
-  inProgress
   "New"
   new
+  "In progress"
+  inProgress
+  "Done"
+  done
+  "Canceled"
+  canceled
 }
 
 "Information about pagination in a connection."
@@ -1875,8 +1877,8 @@ input ProductListInput {
 
 "One of possible types of the product list"
 enum ProductListTypeEnum {
-  COMPARISON
   WISHLIST
+  COMPARISON
 }
 
 input ProductListUpdateInput {
@@ -1887,16 +1889,16 @@ input ProductListUpdateInput {
 
 "One of possible ordering modes for product"
 enum ProductOrderingModeEnum {
-  "Order by name ascending"
-  NAME_ASC
-  "Order by name descending"
-  NAME_DESC
+  "Order by priority"
+  PRIORITY
   "Order by price ascending"
   PRICE_ASC
   "Order by price descending"
   PRICE_DESC
-  "Order by priority"
-  PRIORITY
+  "Order by name ascending"
+  NAME_ASC
+  "Order by name descending"
+  NAME_DESC
   "Order by relevance"
   RELEVANCE
 }
@@ -2458,14 +2460,14 @@ type StoreEdge {
 
 "Status of store opening"
 enum StoreOpeningStatusEnum {
-  "Store is currently closed"
-  CLOSED
-  "Store will be closed soon"
-  CLOSED_SOON
   "Store is currently opened"
   OPEN
+  "Store is currently closed"
+  CLOSED
   "Store will be opened soon"
   OPEN_SOON
+  "Store will be closed soon"
+  CLOSED_SOON
 }
 
 type Token {

diff --git a/storefront/components/Pages/Customer/OrderDetail/OrderDetailContent.tsx b/storefront/components/Pages/Customer/OrderDetail/OrderDetailContent.tsx
@@ -12,8 +12,12 @@ type OrderDetailContentProps = {
 export const OrderDetailContent: FC<OrderDetailContentProps> = ({ order }) => {
     return (
         <div>
-            <OrderPaymentStatusBar orderIsPaid={order.isPaid} orderPaymentType={order.payment.type} />
-            {order.payment.type === PaymentTypeEnum.GoPay && !order.isPaid && (
+            <OrderPaymentStatusBar
+                orderIsPaid={order.isPaid}
+                orderIsPaymentInProcess={order.isPaymentInProcess}
+                orderPaymentType={order.payment.type}
+            />
+            {order.payment.type === PaymentTypeEnum.GoPay && !order.isPaid && !order.isPaymentInProcess && (
                 <div>
                     <PaymentsInOrderSelect
                         orderUuid={order.uuid}

diff --git a/storefront/components/Pages/Customer/Orders/OrderItem.tsx b/storefront/components/Pages/Customer/Orders/OrderItem.tsx
@@ -33,7 +33,11 @@ export const OrderItem: FC<OrderItemProps> = ({ order, addOrderItemsToEmptyCart,
 
     return (
         <div className="flex flex-col gap-5 rounded-md bg-backgroundMore p-4 vl:p-6">
-            <OrderPaymentStatusBar orderIsPaid={order.isPaid} orderPaymentType={order.payment.type} />
+            <OrderPaymentStatusBar
+                orderIsPaid={order.isPaid}
+                orderIsPaymentInProcess={order.isPaymentInProcess}
+                orderPaymentType={order.payment.type}
+            />
             <div className="flex flex-col gap-6 vl:flex-row vl:items-start vl:justify-between">
                 <div className="flex flex-col gap-5">
                     <div className="flex flex-wrap gap-x-8 gap-y-2">

diff --git a/storefront/components/Pages/Customer/Orders/OrderPaymentStatusBar.tsx b/storefront/components/Pages/Customer/Orders/OrderPaymentStatusBar.tsx
@@ -6,9 +6,15 @@ import { twMergeCustom } from 'utils/twMerge';
 type OrderPaymentStatusBarProps = {
     orderPaymentType: string;
     orderIsPaid: boolean;
+    orderIsPaymentInProcess: boolean;
 };
 
-export const OrderPaymentStatusBar: FC<OrderPaymentStatusBarProps> = ({ orderPaymentType, orderIsPaid, className }) => {
+export const OrderPaymentStatusBar: FC<OrderPaymentStatusBarProps> = ({
+    orderPaymentType,
+    orderIsPaid,
+    className,
+    orderIsPaymentInProcess,
+}) => {
     const { t } = useTranslation();
     return (
         <>
@@ -25,6 +31,11 @@ export const OrderPaymentStatusBar: FC<OrderPaymentStatusBarProps> = ({ orderPay
                             <InfoIconInCircle className="w-4 text-backgroundSuccessMore" />
                             {t('The order was paid')}
                         </>
+                    ) : orderIsPaymentInProcess ? (
+                        <>
+                            <InfoIconInCircle className="w-4 text-backgroundWarning" />
+                            {t('The order is awaiting payment verification.')}
+                        </>
                     ) : (
                         <>
                             <InfoIconInCircle className="w-4 text-backgroundWarningMore" />

diff --git a/storefront/components/Pages/Order/PaymentConfirmation/PaymentInProcess.tsx b/storefront/components/Pages/Order/PaymentConfirmation/PaymentInProcess.tsx
@@ -0,0 +1,39 @@
+import { ArrowIcon } from 'components/Basic/Icon/ArrowIcon';
+import { HeartIcon } from 'components/Basic/Icon/HeartIcon';
+import { Webline } from 'components/Layout/Webline/Webline';
+import { useDomainConfig } from 'components/providers/DomainConfigProvider';
+import { GtmPageType } from 'gtm/enums/GtmPageType';
+import { useGtmStaticPageViewEvent } from 'gtm/factories/useGtmStaticPageViewEvent';
+import { useGtmPageViewEvent } from 'gtm/utils/pageViewEvents/useGtmPageViewEvent';
+import useTranslation from 'next-translate/useTranslation';
+import { getInternationalizedStaticUrls } from 'utils/staticUrls/getInternationalizedStaticUrls';
+
+type PaymentInProcessProps = {
+    orderUrlHash: string;
+};
+
+export const PaymentInProcess: FC<PaymentInProcessProps> = ({ orderUrlHash }) => {
+    const { t } = useTranslation();
+    const { url } = useDomainConfig();
+    const [orderDetailUrl] = getInternationalizedStaticUrls(
+        [{ url: '/order-detail/:urlHash', param: orderUrlHash }],
+        url,
+    );
+    const gtmStaticPageViewEvent = useGtmStaticPageViewEvent(GtmPageType.payment_in_process);
+    useGtmPageViewEvent(gtmStaticPageViewEvent);
+
+    return (
+        <Webline className="mt-8 lg:mt-10 vl:mt-20">
+            <div className="flex items-center gap-6">
+                <HeartIcon className="text-green h-20 w-20" />
+                <h1 className="mb-0">
+                    {t('The payment is being processed, you can check the status on the order detail page')}
+                </h1>
+            </div>
+            <a className="w-fit" href={orderDetailUrl}>
+                {t('Show order detail')}
+                <ArrowIcon className="h-3 w-3 -rotate-90" />
+            </a>
+        </Webline>
+    );
+};