Move monero component to order confirmation page

Author: atsamd21

README.md

@@ -83,4 +83,5 @@ Copyright (C) 2019-Present BigCommerce Inc. All rights reserved.
 
 ## Monero
 
-![alt text](https://i.ibb.co/6nJ2GFj/Screenshot.png)
+![alt text](https://i.ibb.co/6XDCKH1/2-1.png)
+![alt text](https://i.ibb.co/Y7K2srY/1-1.png)

package-lock.json

@@ -83,6 +83,7 @@
     "react-media": "^1.10.0",
     "react-modal": "^3.8.1",
     "react-popper": "^1.3.2",
+    "react-qr-code": "^2.0.15",
     "react-transition-group": "^2.5.3",
     "reselect": "^4.1.7",
     "shallowequal": "^1.1.0",

package.json

@@ -34,6 +34,7 @@ export const SUPPORTED_METHODS: string[] = [
     'googlepaystripe',
     'googlepaystripeupe',
     'googlepayworldpayaccess',
+    'monero'
 ];
 
 export interface CheckoutButtonListProps {

packages/core/src/app/customer/CheckoutButtonList.tsx

@@ -26,6 +26,7 @@ export const SUPPORTED_METHODS: string[] = [
     'googlepayworldpayaccess',
     'googlepaypaypalcommerce',
     'googlepaytdonlinemart',
+    'monero'
 ];
 
 export const getSupportedMethodIds = (methodIds: string[]): string[] => {

packages/core/src/app/customer/getSupportedMethods.ts

@@ -42,6 +42,7 @@ import OrderConfirmationSection from './OrderConfirmationSection';
 import OrderStatus from './OrderStatus';
 import PrintLink from './PrintLink';
 import ThankYouHeader from './ThankYouHeader';
+import { MoneroPaymentMethod } from './monero/MoneroPaymentMethod';
 
 const OrderSummary = lazy(() =>
     retry(
@@ -132,6 +133,12 @@ class OrderConfirmation extends Component<
             links: { siteLink },
         } = config;
 
+        let isMonero = false;
+
+        if (order?.payments?.at(0)?.providerId === "instore") {
+            isMonero = true;
+        }
+
         return (
             <div
                 className={classNames('layout optimizedCheckout-contentPrimary', {
@@ -150,14 +157,18 @@ class OrderConfirmation extends Component<
                         />
 
                         {paymentInstructions && (
-                            <OrderConfirmationSection>
-                                <div
-                                    dangerouslySetInnerHTML={{
-                                        __html: DOMPurify.sanitize(paymentInstructions),
-                                    }}
-                                    data-test="payment-instructions"
-                                />
-                            </OrderConfirmationSection>
+
+                            isMonero ?
+                                <MoneroPaymentMethod order={order} />
+                                :
+                                <OrderConfirmationSection>
+                                    <div
+                                        dangerouslySetInnerHTML={{
+                                            __html: DOMPurify.sanitize(paymentInstructions),
+                                        }}
+                                        data-test="payment-instructions"
+                                    />
+                                </OrderConfirmationSection>
                         )}
 
                         {this.renderGuestSignUp({

packages/core/src/app/order/OrderConfirmation.tsx

@@ -1,12 +1,21 @@
 .main {
 
+    .monero-text{
+        font-weight: 500;
+        font-size: 24px;
+    }
+
     .address{
         margin-bottom: 10px;
         white-space: initial;
         line-break: anywhere;
         resize: none;
     }
 
+    .amount {
+        margin-bottom: 10px;
+    }
+
     .QR {
         display: block;
         width: 100%;
@@ -16,4 +25,15 @@
         margin-bottom: 20px;
         margin-top: 30px;
     }
+
+    .state{
+        text-transform: capitalize;
+    }
+
+    .openwallet{
+        margin-top: 20px;
+        text-decoration: underline;
+        text-align: center;
+        display: block;
+    }
 }

packages/core/src/app/payment/paymentMethod/MoneroPaymentMethod.scss renamed to packages/core/src/app/order/monero/MoneroPaymentMethod.scss

@@ -1,60 +1,60 @@
 import React, { useEffect, useState } from 'react'
 import './MoneroPaymentMethod.scss';
 import { LoadingSpinner } from '@bigcommerce/checkout/ui';
-import { createCheckoutService } from '@bigcommerce/checkout-sdk';
+import { Order } from '@bigcommerce/checkout-sdk';
 import QRCode from 'react-qr-code';
 
+enum PaymentState {
+    unpaid,
+    pending,
+    paid,
+    withdrawn,
+    refunded,
+    expired,
+    deleted
+}
+
 interface CreatePaymentRequest {
-    checkoutId: string;
-    amount: number;
-    currency: string;
-    email: string;
+    orderId: number;
 }
 
 interface CreatePaymentResponse {
-    paymentId: string;
+    orderId: number;
     xmrAmount: number;
     address: string;
-    walletURI: string;
-    qrLink: string;
+    paymentState: PaymentState;
+}
+
+interface MoneroPaymentMethodProps {
+    order: Order;
 }
 
-export function MoneroPaymentMethod(props: any) {
+export function MoneroPaymentMethod({ order }: MoneroPaymentMethodProps) {
     const [loading, setLoading] = useState(false);
     const [paymentResponse, setPaymentResponse] = useState<CreatePaymentResponse | null>(null);
     const [paymentLink, setPaymentLink] = useState("");
+    const [error, setError] = useState("");
 
-    console.log(props)
+    useEffect(() => {
+        (async () => {
+            await getPaymentDetails();
+        })();
+    }, []);
 
     useEffect(() => {
-        // Try to fetch existing payment by checkoutId
-    }, [])
+        const interval = setInterval(getPaymentDetails, 120000);
+        return () => { clearInterval(interval); }
+    }, [paymentResponse]);
 
-    const createPaymentAddress = async () => {
+    const getPaymentDetails = async () => {
         setLoading(true);
 
         try {
-            const service = createCheckoutService();
-            // const state = await service.loadCheckout(checkoutId);
-
-            const checkoutSelectors = await service.loadCheckout(service.getState().data.getCheckout()?.id)
-
-            const checkout = checkoutSelectors.data.getCheckout();
-
-            if (!checkout) return;
-            
-            console.log(checkout?.grandTotal)
-            console.log(checkout?.id)
-            console.log(checkout?.cart.currency.code)
-            console.log(checkout?.customer.email)
-
             const createPaymentRequest: CreatePaymentRequest = {
-                amount: checkout.grandTotal,
-                checkoutId: checkout.id,
-                email: checkout.customer.email,
-                currency: checkout.cart.currency.code
+                orderId: order.orderId,
             }
 
+            // TODO Configable
             const response = await fetch("http://localhost:5025/api" + "/payments", {
                 method: "POST",
                 body: JSON.stringify(createPaymentRequest),
@@ -65,7 +65,7 @@ export function MoneroPaymentMethod(props: any) {
             });
 
             if (!response.ok) {
-                // setError(await response.json());
+                setError(await response.json());
                 return;
             }
 
@@ -85,19 +85,28 @@ export function MoneroPaymentMethod(props: any) {
 
     return (
         <div className='main'>
-            <button type='button' onClick={createPaymentAddress} className='button'>Create a one-time payment address</button>
-            <LoadingSpinner isLoading={loading}></LoadingSpinner>
+            <p className='monero-text'>Pay with Monero</p>
+            <LoadingSpinner isLoading={loading}/>
             {
                 paymentResponse && 
                 <div>
                     <label htmlFor='address'>Address</label>
                     <textarea readOnly rows={2} name='address' id='address' className='form-input optimizedCheckout-form-input address' value={paymentResponse.address}/>
                     <label htmlFor='amount'>Amount</label>
                     <input readOnly name='amount' id='amount' className='form-input optimizedCheckout-form-input amount' value={paymentResponse.xmrAmount}/>
-                    
-                    <QRCode className="QR" value={paymentLink}></QRCode>
+                    <label htmlFor='state'>Status</label>
+                    <input readOnly name='state' id='state' className='form-input optimizedCheckout-form-input state' value={PaymentState[paymentResponse.paymentState]}/>
+                
+                    <QRCode className="QR" value={paymentLink}/>
+                    <a className="openwallet" href={paymentLink}>Open Monero wallet</a>
                 </div>
             }
+            {
+                error !== "" ? 
+                <></> 
+                : 
+                <></>
+            }
         </div>
     );
 

packages/core/src/app/payment/paymentMethod/MoneroPaymentMethod.tsx renamed to packages/core/src/app/order/monero/MoneroPaymentMethod.tsx

@@ -608,35 +608,40 @@ export function mapToPaymentProps({
 
     const { isComplete = false } = getOrder() || {};
 
-    const monero = {
-        id: 'monero',
-        gateway: undefined,
-        logoUrl: "",
-        method: 'monero',
-        supportedCards: [],
-        initializationData: null,
-        initializationStrategy: { type: "not_applicable" },
-        config: {
-            cardCode: false,
-            displayName: 'Monero',
-            enablePaypal: undefined,
-            hasDefaultStoredInstrument: false,
-            helpText: '',
-            is3dsEnabled: undefined,
-            isHostedFormEnabled: false,
-            isVaultingCvvEnabled: false,
-            isVaultingEnabled: false,
-            isVisaCheckoutEnabled: undefined,
-            requireCustomerCode: false,
-            merchantId: undefined,
-            testMode: false,
-        },
-        type: "PAYMENT_TYPE_OFFLINE"
-    } as PaymentMethod
-
-    let methods: PaymentMethod[] = [monero, ...(getPaymentMethods() || EMPTY_ARRAY)];
-
-    console.log(methods)
+    // const monero = {
+    //     id: 'monero',
+    //     gateway: null!,
+    //     logoUrl: "",
+    //     method: 'offline',
+    //     supportedCards: [],
+    //     initializationData: null,
+    //     initializationStrategy: { type: "not_applicable" },
+    //     clientToken: null!,
+    //     returnUrl: null!,
+    //     config: {
+    //         cardCode: null!,
+    //         displayName: 'Monero',
+    //         enablePaypal: null!,
+    //         hasDefaultStoredInstrument: false,
+    //         helpText: '',
+    //         is3dsEnabled: null!,
+    //         isHostedFormEnabled: false,
+    //         isVaultingCvvEnabled: false,
+    //         isVaultingEnabled: false,
+    //         isVisaCheckoutEnabled: null!,
+    //         requireCustomerCode: false,
+    //         merchantId: null!,
+    //         testMode: false,
+    //         showCardHolderName: null!,
+    //         logo: null!
+    //     },
+    //     nonce: null!,
+    //     type: "PAYMENT_TYPE_OFFLINE"
+    // } as PaymentMethod
+
+    // let methods: PaymentMethod[] = [monero, ...(getPaymentMethods() || EMPTY_ARRAY)];
+
+    let methods: PaymentMethod[] = [...(getPaymentMethods() || EMPTY_ARRAY)];
 
     // TODO: In accordance with the checkout team, this functionality is temporary and will be implemented in the backend instead.
     if (paymentProviderCustomer?.stripeLinkAuthenticationState) {