feat: clean up the style of public payment page.

packages/server/src/api/controllers/StripeIntegration/StripeIntegrationController.ts

@@ -1,18 +1,10 @@
 import { NextFunction, Request, Response, Router } from 'express';
 import { Service, Inject } from 'typedi';
-import { StripePaymentService } from '@/services/StripePayment/StripePaymentService';
 import asyncMiddleware from '@/api/middleware/asyncMiddleware';
-import { StripeIntegrationApplication } from './StripeIntegrationApplication';
 import { StripePaymentApplication } from '@/services/StripePayment/StripePaymentApplication';
 
 @Service()
 export class StripeIntegrationController {
-  @Inject()
-  private stripePaymentService: StripePaymentService;
-
-  @Inject()
-  private stripeIntegrationApp: StripeIntegrationApplication;
-
   @Inject()
   private stripePaymentApp: StripePaymentApplication;
 
@@ -70,7 +62,7 @@ export class StripeIntegrationController {
     const { tenantId } = req;
 
     try {
-      const accountId = await this.stripeIntegrationApp.createStripeAccount(
+      const accountId = await this.stripePaymentApp.createStripeAccount(
         tenantId
       );
 
@@ -95,9 +87,12 @@ export class StripeIntegrationController {
     res: Response,
     next: NextFunction
   ) {
+    const { tenantId } = req;
     const { account } = req.body;
+
     try {
-      const clientSecret = await this.stripePaymentService.createAccountSession(
+      const clientSecret = await this.stripePaymentApp.createStripeAccount(
+        tenantId,
         account
       );
       res.status(200).json({ clientSecret });

packages/server/src/services/StripePayment/CreateStripeAccountService.ts

@@ -31,8 +31,8 @@ export class CreateStripeAccountService {
     const stripeAccountId = stripeAccount.id;
 
     const parsedStripeAccountDTO = {
-      ...stripeAccountDTO,
       name: 'Stripe',
+      ...stripeAccountDTO,
     };
     // Stores the details of the Stripe account.
     await PaymentIntegration.query().insert({

packages/server/src/services/StripePayment/StripePaymentApplication.ts

@@ -9,7 +9,7 @@ export class StripePaymentApplication {
   private createStripeAccountService: CreateStripeAccountService;
 
   @Inject()
-  private createSaleInvoiceCheckoutSessionService: CreateInvoiceCheckoutSession;
+  private createInvoiceCheckoutSessionService: CreateInvoiceCheckoutSession;
 
   /**
    * Creates a new Stripe account for Bigcapital.
@@ -18,7 +18,7 @@ export class StripePaymentApplication {
    */
   public createStripeAccount(
     tenantId: number,
-    createStripeAccountDTO: CreateStripeAccountDTO
+    createStripeAccountDTO: CreateStripeAccountDTO = {}
   ) {
     return this.createStripeAccountService.createStripeAccount(
       tenantId,
@@ -36,7 +36,7 @@ export class StripePaymentApplication {
     tenantId: number,
     paymentLinkId: number
   ): Promise<StripeInvoiceCheckoutSessionPOJO> {
-    return this.createSaleInvoiceCheckoutSessionService.createInvoiceCheckoutSession(
+    return this.createInvoiceCheckoutSessionService.createInvoiceCheckoutSession(
       tenantId,
       paymentLinkId
     );

packages/server/src/services/StripePayment/types.ts

@@ -2,5 +2,5 @@
 
 
 export interface CreateStripeAccountDTO {
-  name: string;
+  name?: string;
 }

packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss

@@ -1,3 +1,17 @@
+
+.rootBodyPage {
+  background: #0c103f;
+}
+
+.root {
+  border-radius: 10px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  width: 600px;
+  margin: 40px auto;
+  color: #222;
+  background-color: #fff;
+}
+
 .companyLogoWrap {
   height: 50px;
   width :50px;
@@ -10,19 +24,6 @@
   border: 1px solid #e8e8e8;
 }
 
-.rootBodyPage {
-  background: #181a30;
-}
-
-.root {
-  border-radius: 10px;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-  width: 600px;
-  margin: 40px auto;
-  color: #222;
-  background-color: #fff;
-}
-
 .bigTitle{
   margin: 0;
   font-weight: 500;
@@ -31,7 +32,7 @@
 }
 
 .invoiceDueDate{
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .invoiceNumber {
@@ -53,12 +54,14 @@
   font-size: 12px;
 }
 
+.address{
+  color: #5f6b7c;
+}
+
 .customerName{
   font-size: 16px;
   font-weight: 600;
-}
-.totals {
-  color: #000;
+  color: #222;
 }
 
 .totalItem {
@@ -72,6 +75,26 @@
   }
 }
 
+.downloadInvoiceButton:global(.bp4-button.bp4-minimal){
+  box-shadow: 0 0 0 1px #DCE0E5;
+}
+
+.viewInvoiceButton:global(.bp4-button:not([class*=bp4-intent-]):not(.bp4-minimal)){
+  background-color: #EDEFF2;
+}
+
+.buyNote{
+  margin-top: 16px;
+  font-size: 12px;
+}
+
+
+// Footer
+// -------------------
+.totals {
+  color: #000;
+}
+
 .footerButtons{
   margin-top: 20px;
 }
@@ -81,21 +104,7 @@
   line-height: 40px;
   font-size: 16px;
 }
-.downloadInvoiceButton:global(.bp4-button.bp4-minimal){
-  box-shadow: 0 0 0 1px #DCE0E5;
-}
-.viewInvoiceButton:global(.bp4-button:not([class*=bp4-intent-]):not(.bp4-minimal)){
-  background-color: #EDEFF2;
-}
-.buyButton{
-
-}
 
 .footerText{
   color: #666;
 }
-
-.buyNote{
-  margin-top: 16px;
-  font-size: 12px;
-}

packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx

@@ -25,7 +25,7 @@ export function PaymentPortal() {
       .then((session) => {
         window.open(session.redirectTo);
       })
-      .catch(() => {
+      .catch((error) => {
         AppToaster.show({
           intent: Intent.DANGER,
           message: 'Something went wrong.',
@@ -52,7 +52,7 @@ export function PaymentPortal() {
             </Text>
           </Stack>
 
-          <Stack spacing={2}>
+          <Stack className={styles.address} spacing={2}>
             <Box className={styles.customerName}>
               {sharableLinkMeta?.customerName}
             </Box>