hotfix cancel order button

apps/mock-shopify-serverless/src/handlers/payment.ts

@@ -30,7 +30,7 @@ export const payment = async (event: APIGatewayProxyEventV2): Promise<APIGateway
                 payment_method: {
                     type: 'type',
                     data: {
-                        cancel_url: 'localhost:4004/processing',
+                        cancel_url: 'http://localhost:4004/processing',
                     },
                 },
                 proposed_at: '2021-08-10T18:02:00.000Z',

apps/payment-ui/src/components/Button/Primary.tsx

@@ -31,7 +31,7 @@ export const Primary = forwardRef<HTMLButtonElement, Props>(function Primary(pro
                 'disabled:bg-slate-200',
                 'disabled:cursor-not-allowed',
                 !pending && 'hover:bg-indigo-500',
-                pending && 'cursor-not-allowed',
+                pending && 'cursor-not-allowed'
             )}
             onClick={e => {
                 if (!pending && !disabled) {
@@ -46,11 +46,11 @@ export const Primary = forwardRef<HTMLButtonElement, Props>(function Primary(pro
                     'font-semibold',
                     'items-center',
                     'justify-center',
-                    'text-current',
+                    'text-center',
                     'text-sm',
                     'transition-all',
                     'group-disabled:text-neutral-400',
-                    pending ? 'opacity-0' : 'opacity-100',
+                    pending ? 'opacity-0' : 'opacity-100'
                 )}
             >
                 {rest.children}

apps/payment-ui/src/components/DefaultLayout.tsx

@@ -1,4 +1,5 @@
 import DisplaySection from '@/components/DisplaySection';
+import FooterSection from './FooterSection';
 
 interface Props {
     className?: string;
@@ -12,6 +13,7 @@ export function DefaultLayout(props: Props) {
             <div className="flex flex-col flex-auto container mx-auto bg-white rounded-t-2xl max-w-2xl px-4 sm:px-20 pt-16">
                 {props.children}
             </div>
+            <FooterSection />
         </main>
     );
 }

apps/payment-ui/src/components/DisplaySection.tsx

@@ -1,30 +1,9 @@
-import { getPaymentDetails } from '@/features/payment-details/paymentDetailsSlice';
 import Image from 'next/image';
-import { MdArrowBack } from 'react-icons/md';
-import { useSelector } from 'react-redux';
 
 const DisplaySection = () => {
-    const paymentDetails = useSelector(getPaymentDetails);
-
-    const handleBackButtonClick = () => {
-        if (paymentDetails?.cancelUrl) {
-            window.location.href = paymentDetails.cancelUrl;
-        }
-    };
-
     return (
-        <div className="w-full max-w-xl mx-auto">
-            <div className="container mx-auto">
-                <div className="grid grid-cols-3 h-16 py-2 font-black text-white text-2xl">
-                    <button className="btn btn-ghost z-10" onClick={handleBackButtonClick}>
-                        <MdArrowBack color="white" size={30} />
-                    </button>
-                    <div className="flex flex-col mx-auto my-auto">
-                        <Image src="/solana-pay.svg" alt="Solana Pay Logo" width={80} height={200} />
-                    </div>
-                    <div />
-                </div>
-            </div>
+        <div className="flex items-center justify-center h-16 py-2 w-full max-w-xl mx-auto">
+            <Image src="/solana-pay.svg" alt="Solana Pay Logo" width={80} height={200} />
         </div>
     );
 };

apps/payment-ui/src/components/FooterSection.tsx

@@ -1,3 +1,4 @@
+import * as Button from '@/components/Button';
 import CancelTransactionButton from '@/components/CancelTransactionButton';
 import SolanaPayErrorView from '@/components/SolanaPayErrorView';
 import WalletSection from '@/components/WalletSection';
@@ -7,8 +8,10 @@ import {
     getIsSolanaPayNotification,
     getSolanaPayNotification,
 } from '@/features/notification/notificationSlice';
+import { getPaymentDetails } from '@/features/payment-details/paymentDetailsSlice';
 import { getPaymentMethod } from '@/features/payment-options/paymentOptionsSlice';
 import { MergedState, getMergedState } from '@/features/payment-session/paymentSessionSlice';
+import { useRouter } from 'next/router';
 import { useSelector } from 'react-redux';
 
 const FooterSection = () => {
@@ -18,6 +21,9 @@ const FooterSection = () => {
     const solanaPayNotification = useSelector(getSolanaPayNotification);
     const connectedWalletNotification = useSelector(getConnectWalletNotification);
 
+    const paymentDetails = useSelector(getPaymentDetails);
+    const router = useRouter();
+
     const isPayWithWalletSection = () =>
         paymentMethod == 'connect-wallet' &&
         mergedState == MergedState.start &&
@@ -30,12 +36,18 @@ const FooterSection = () => {
         connectedWalletNotification != Notification.declined;
 
     return (
-        <div className="w-full">
-            <div className="container h-36 mx-auto px-4 sm:px-20 bg-white text-white text-center max-w-2xl">
+        <div className="container w-full max-w-2xl mx-auto bg-white text-white text-center px-4 sm:px-20">
+            <div className="">
                 {isPayWithWalletSection() && <WalletSection />}
                 {isSolanaPayErrorView() && <SolanaPayErrorView />}
                 {isCancelTransactionButton() && <CancelTransactionButton />}
             </div>
+            <Button.Primary
+                onClick={() => router.push(paymentDetails?.cancelUrl!)}
+                className="bg-red-600 text-white w-full shadow-xl text-lg my-2"
+            >
+                Cancel order
+            </Button.Primary>
         </div>
     );
 };

apps/payment-ui/src/components/WalletSection.tsx

@@ -8,33 +8,20 @@ const WalletSection = () => {
     const { connected } = useWallet();
 
     return (
-        <div className="flex flex-col justify-end h-full pb-4 py-2 items-center w-full">
+        <div className="flex flex-col justify-end h-full items-center w-full">
             {!connected ? (
-                <WalletMultiButton
-                    style={{
-                        backgroundColor: 'black',
-                        width: '400',
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        zIndex: 100,
-                    }}
-                >
-                    <div className="flex flex-row items-center justify-center">
-                        <div className="pl-1">Connect wallet</div>
-                    </div>
-                </WalletMultiButton>
-            ) : (
                 <div className="w-full">
-                    <div className="pb-4">
-                        <SimpleNotificationView />
-                    </div>
-                    <div className="pb-2">
-                        <CustomerProfile />
-                    </div>
-                    <div className="pt-2">
-                        <BuyButton />
-                    </div>
+                    <WalletMultiButton>
+                        <div className="flex flex-row items-center justify-center">
+                            <div className="pl-1">Connect wallet</div>
+                        </div>
+                    </WalletMultiButton>
+                </div>
+            ) : (
+                <div className="w-full flex flex-col space-y-2">
+                    <SimpleNotificationView />
+                    <CustomerProfile />
+                    <BuyButton />
                 </div>
             )}
         </div>

apps/payment-ui/src/pages/[paymentId]/index.tsx

@@ -1,6 +1,5 @@
 import CheckoutSection from '@/components/CheckoutSection';
 import { DefaultLayout } from '@/components/DefaultLayout';
-import FooterSection from '@/components/FooterSection';
 import { useRouter } from 'next/router';
 
 export default function CheckoutPage() {
@@ -13,7 +12,6 @@ export default function CheckoutPage() {
     return (
         <DefaultLayout>
             <CheckoutSection />
-            <FooterSection />
         </DefaultLayout>
     );
 }

apps/payment-ui/src/pages/_app.tsx

@@ -5,6 +5,7 @@ import WalletHandler from '@/components/handlers/WalletHandler';
 import WebsocketHandler from '@/components/handlers/WebsocketHandler';
 import WindowHandler from '@/components/handlers/WindowHandler';
 import '@/styles/globals.css';
+import '@/styles/wallet.css';
 import {
     SolanaMobileWalletAdapter,
     createDefaultAddressSelector,
@@ -14,7 +15,6 @@ import {
 import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
 import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
 import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
-import '@solana/wallet-adapter-react-ui/styles.css';
 import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';
 import { clusterApiUrl } from '@solana/web3.js';
 import type { AppProps } from 'next/app';

apps/payment-ui/src/styles/globals.css

@@ -31,14 +31,6 @@ a {
     width: 100%;
 }
 
-.wallet-adapter-button-trigger {
-    background-color: black;
-}
-
-.wallet-adapter-button-trigger {
-    background-color: black;
-}
-
 @layer base {
     :root {
         --background: 0 0% 100%;