Merge pull request #1713 from shadow-dot-cat/castaway/stripe_dialog_scroll

fix(stripe): Allow dialog to scroll (make Submit reachable)

Author: castaway

src/app/account-app/account-app.module.ts

@@ -58,7 +58,7 @@ import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/lega
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule as MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatIconModule } from '@angular/material/icon';

src/app/account-app/bitpay-payment-dialog.component.ts

@@ -18,7 +18,7 @@
 // ---------- END RUNBOX LICENSE ----------
 
 import { Component, Inject } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 
 import { CartService } from './cart.service';

src/app/account-app/paypal-payment-dialog.component.ts

@@ -18,33 +18,33 @@
 // ---------- END RUNBOX LICENSE ----------
 
 import { Component, Inject } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import { RunboxWebmailAPI } from '../rmmapi/rbwebmail';
 
 @Component({
     selector: 'app-paypal-payment-dialog-component',
     template: `
-<div mat-dialog-content style="width: 500px; height: 300px;">
-  <h1 mat-dialog-title>PayPal payment</h1>
-  <div *ngIf="!redirect_url">
-    <div> We're preparing your Paypal payment, please wait...</div>
-    <mat-spinner style="margin:0 auto;"></mat-spinner>
-  </div>
-  <div *ngIf="redirect_url">
-    Your PayPal payment link is ready. Please click the button below to be transferred to PayPal and complete your payment.
-  </div>
-  <br /><br />
-  <div style="text-align: center">
-    <a *ngIf="redirect_url" mat-flat-button color="primary" [href]="redirect_url" style="background: none">
+<h1 mat-dialog-title>PayPal payment</h1>
+  <div mat-dialog-content>
+    <div *ngIf="!redirect_url">
+      <div> We're preparing your Paypal payment, please wait...</div>
+      <mat-spinner style="margin:0 auto;"></mat-spinner>
+    </div>
+    <div *ngIf="redirect_url">
+      Your PayPal payment link is ready. Please click the button below to be transferred to PayPal and complete your payment.
+    </div>
+    <br /><br />
+    <div style="text-align: center">
+      <a *ngIf="redirect_url" mat-flat-button color="primary" [href]="redirect_url" style="background: none">
       <img src="/_img/pay/paypal_bundle_s.png" alt="PayPal">
-    </a>
+      </a>
+    </div>
   </div>
   <div mat-dialog-actions style="justify-content: space-between;">
     <button mat-button (click)="close()"> Cancel </button>
     <a *ngIf="redirect_url" mat-flat-button color="primary" [href]="redirect_url"> Continue to PayPal </a>
   </div>
-</div>
 `
 })
 export class PaypalPaymentDialogComponent {

src/app/account-app/shopping-cart.component.ts

@@ -18,7 +18,7 @@
 // ---------- END RUNBOX LICENSE ----------
 
 import { Component, OnInit } from '@angular/core';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialog as MatDialog, MatDialogRef as MatDialogRef } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 
@@ -236,6 +236,7 @@ export class ShoppingCartComponent implements OnInit {
             let dialogRef: MatDialogRef<any>;
             if (method === 'stripe') {
                 dialogRef = this.dialog.open(StripePaymentDialogComponent, {
+                    'height': '90%',
                     data: { tx }
                 });
             } else if (method === 'coinbase') {
@@ -244,6 +245,8 @@ export class ShoppingCartComponent implements OnInit {
                 });
             } else if (method === 'paypal') {
                 dialogRef = this.dialog.open(PaypalPaymentDialogComponent, {
+                    'height': '300px',
+                    'width': '500px',
                     data: { tx }
                 });
             } else if (method === 'giro') {

src/app/account-app/stripe-payment-dialog.component.html

@@ -1,6 +1,7 @@
 <h1 mat-dialog-title>Card payment</h1>
+  <div mat-dialog-content>
     <div [style.display]="state === 'initial' ? 'block' : 'none'">
-      <div >
+      <div>
         <div #paymentElement id="payment-element"></div>
       </div>
 
@@ -28,7 +29,7 @@ <h1 mat-dialog-title>Card payment</h1>
     </div>
 
     <div class="description" style="text-align: center"> Payment form not working? <a href="/payment/payment?tid={{tid}}&method=stripe" target="_blank">Try our alternative payment system instead.</a> </div>
-
+  </div>
     <div mat-dialog-actions style="justify-content: center;" *ngIf="state === 'loading'">
       <button mat-button (click)="close()"> Cancel </button>
     </div>

src/app/account-app/stripe-payment-dialog.component.ts

@@ -19,7 +19,7 @@
 
 import { AfterViewInit, Component, ElementRef, Inject, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef as MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { HttpErrorResponse } from '@angular/common/http';
 
 import { PaymentsService } from './payments.service';