add register form to payment confirmation page (#3670)

shopsys · Jan 14, 2025 · b1618ea · b1618ea
2 parents 6771b44 + 6ea9385
commit b1618ea
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/storefront/components/Pages/OrderConfirmation/RegistrationAfterOrder.tsx b/storefront/components/Pages/OrderConfirmation/RegistrationAfterOrder.tsx
@@ -10,7 +10,6 @@ import { useCouldBeCustomerRegisteredQuery } from 'graphql/requests/customer/que
 import { GtmMessageOriginType } from 'gtm/enums/GtmMessageOriginType';
 import Trans from 'next-translate/Trans';
 import useTranslation from 'next-translate/useTranslation';
-import { useRouter } from 'next/router';
 import { OrderConfirmationUrlQuery } from 'pages/order-confirmation';
 import { useRef } from 'react';
 import { FormProvider } from 'react-hook-form';
@@ -22,14 +21,17 @@ import { blurInput } from 'utils/forms/blurInput';
 import { useErrorPopup } from 'utils/forms/useErrorPopup';
 import { showErrorMessage } from 'utils/toasts/showErrorMessage';
 
-export const RegistrationAfterOrder: FC = () => {
+export const RegistrationAfterOrder: FC<Partial<OrderConfirmationUrlQuery>> = ({
+    orderUuid,
+    companyNumber,
+    orderEmail,
+    orderUrlHash,
+}) => {
     const { t } = useTranslation();
     const [formProviderMethods] = useRegistrationAfterOrderForm();
     const formMeta = useRegistrationAfterOrderFormMeta(formProviderMethods);
     const { registerByOrder } = useRegistration();
     const isInvalidRegistrationRef = useRef(false);
-    const { query } = useRouter();
-    const { orderUuid, companyNumber, orderEmail, orderUrlHash } = query as OrderConfirmationUrlQuery;
     const isUserLoggedIn = useIsUserLoggedIn();
 
     useErrorPopup(formProviderMethods, formMeta.fields, undefined, GtmMessageOriginType.order_confirmation_page);

diff --git a/storefront/pages/order-confirmation.tsx b/storefront/pages/order-confirmation.tsx
@@ -35,7 +35,7 @@ const OrderConfirmationPage: FC<ServerSidePropsType> = () => {
     const { t } = useTranslation();
     const { query } = useRouter();
     const { fetchCart } = useCurrentCart(false);
-    const { orderUuid, orderPaymentType } = query as OrderConfirmationUrlQuery;
+    const { orderUuid, orderPaymentType, companyNumber, orderEmail, orderUrlHash } = query as OrderConfirmationUrlQuery;
 
     const gtmStaticPageViewEvent = useGtmStaticPageViewEvent(GtmPageType.order_confirmation);
     useGtmPageViewEvent(gtmStaticPageViewEvent);
@@ -68,7 +68,12 @@ const OrderConfirmationPage: FC<ServerSidePropsType> = () => {
                             <GoPayGateway orderUuid={orderUuid!} />
                         ) : undefined}
                     </ConfirmationPageContent>
-                    <RegistrationAfterOrder />
+                    <RegistrationAfterOrder
+                        companyNumber={companyNumber}
+                        orderEmail={orderEmail}
+                        orderUrlHash={orderUrlHash}
+                        orderUuid={orderUuid}
+                    />
                 </Webline>
             </CommonLayout>
         </>

diff --git a/storefront/pages/order-payment-confirmation.tsx b/storefront/pages/order-payment-confirmation.tsx
@@ -7,6 +7,7 @@ import {
     getPaymentSessionExpiredErrorMessage,
     useUpdatePaymentStatus,
 } from 'components/Pages/Order/PaymentConfirmation/paymentConfirmationUtils';
+import { RegistrationAfterOrder } from 'components/Pages/OrderConfirmation/RegistrationAfterOrder';
 import { useOrderPaymentFailedContentQuery } from 'graphql/requests/orders/queries/OrderPaymentFailedContentQuery.generated';
 import { useOrderPaymentSuccessfulContentQuery } from 'graphql/requests/orders/queries/OrderPaymentSuccessfulContentQuery.generated';
 import useTranslation from 'next-translate/useTranslation';
@@ -18,7 +19,7 @@ import { initServerSideProps, ServerSidePropsType } from 'utils/serverSide/initS
 const OrderPaymentConfirmationPage: FC<ServerSidePropsType> = () => {
     const { t } = useTranslation();
 
-    const { orderIdentifier, orderPaymentStatusPageValidityHash } = useRouter().query;
+    const { orderIdentifier, orderPaymentStatusPageValidityHash, orderEmail, orderUrlHash } = useRouter().query;
     const orderUuid = getStringFromUrlQuery(orderIdentifier);
     const orderPaymentStatusPageValidityHashParam = getStringFromUrlQuery(orderPaymentStatusPageValidityHash);
     const paymentStatusData = useUpdatePaymentStatus(orderUuid, orderPaymentStatusPageValidityHashParam);
@@ -70,6 +71,13 @@ const OrderPaymentConfirmationPage: FC<ServerSidePropsType> = () => {
                         paymentStatusData={paymentStatusData}
                         successContentData={successContentData}
                     />
+                    {paymentStatusData?.UpdatePaymentStatus.isPaid && successContentData && (
+                        <RegistrationAfterOrder
+                            orderEmail={orderEmail as string | undefined}
+                            orderUrlHash={orderUrlHash as string | undefined}
+                            orderUuid={orderUuid}
+                        />
+                    )}
                 </Webline>
             </CommonLayout>
         </>