feat: sharable payment link dialog

packages/webapp/src/components/App.tsx

@@ -59,7 +59,7 @@ function AppInsider({ history }) {
                 children={<EmailConfirmation />}
               />
               <Route path={'/auth'} children={<AuthenticationPage />} />
-              <Route path={'/payment'} children={<PaymentPortalPage />} />
+              <Route path={'/payment/:linkId'} children={<PaymentPortalPage />} />
               <Route path={'/'} children={<DashboardPrivatePages />} />
             </Switch>
           </Router>

packages/webapp/src/components/Dialog/Dialog.tsx

@@ -5,6 +5,7 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { compose } from '@/utils';
 
 import '@/style/components/Dialog/Dialog.scss';
+import { DialogProvider } from './DialogProvider';
 
 function DialogComponent(props) {
   const { name, children, closeDialog, onClose } = props;
@@ -15,7 +16,7 @@ function DialogComponent(props) {
   };
   return (
     <Dialog {...props} onClose={handleClose}>
-      {children}
+      <DialogProvider value={props}>{children}</DialogProvider>
     </Dialog>
   );
 }

packages/webapp/src/components/Dialog/DialogProvider.tsx

@@ -0,0 +1,20 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+
+const DialogContext = createContext<any>(null);
+
+export const useDialogContext = () => {
+  return useContext(DialogContext);
+};
+
+interface DialogProviderProps {
+  value: any;
+  children: ReactNode;
+}
+
+export const DialogProvider: React.FC<DialogProviderProps> = ({ value, children }) => {
+  return (
+    <DialogContext.Provider value={value}>
+      {children}
+    </DialogContext.Provider>
+  );
+};

packages/webapp/src/components/DialogsContainer.tsx

@@ -52,6 +52,7 @@ import PaymentMailDialog from '@/containers/Sales/PaymentsReceived/PaymentMailDi
 import { ExportDialog } from '@/containers/Dialogs/ExportDialog';
 import { RuleFormDialog } from '@/containers/Banking/Rules/RuleFormDialog/RuleFormDialog';
 import { DisconnectBankAccountDialog } from '@/containers/CashFlow/AccountTransactions/dialogs/DisconnectBankAccountDialog/DisconnectBankAccountDialog';
+import { SharePaymentLinkDialog } from '@/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkDialog';
 
 /**
  * Dialogs container.
@@ -151,6 +152,7 @@ export default function DialogsContainer() {
       <DisconnectBankAccountDialog
         dialogName={DialogsName.DisconnectBankAccountConfirmation}
       />
+      <SharePaymentLinkDialog dialogName={DialogsName.SharePaymentLink} />
     </div>
   );
 }