[SG-69] Small Billing Adjustments (#3143)

* Adjust sizing of billing fields

* Move billing component into trial initiation module

apps/web/src/app/modules/billing/billing.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from "@angular/core";
-
-import { SharedModule } from "../shared.module";
-
-import { BillingComponent } from "./billing.component";
-
-@NgModule({
-  imports: [SharedModule],
-  declarations: [BillingComponent],
-  exports: [BillingComponent],
-})
-export class BillingModule {}

apps/web/src/app/modules/trial-initiation/trial-initiation.module.ts

@@ -9,7 +9,7 @@ import { RegisterFormModule } from "../register-form/register-form.module";
 import { SharedModule } from "../shared.module";
 import { VerticalStepperModule } from "../vertical-stepper/vertical-stepper.module";
 
-import { BillingModule } from "./../billing/billing.module";
+import { BillingComponent } from "./billing.component";
 import { ConfirmationDetailsComponent } from "./confirmation-details.component";
 import { EnterpriseContentComponent } from "./enterprise-content.component";
 import { FamiliesContentComponent } from "./families-content.component";
@@ -24,7 +24,6 @@ import { TrialInitiationComponent } from "./trial-initiation.component";
     FormFieldModule,
     RegisterFormModule,
     OrganizationCreateModule,
-    BillingModule,
   ],
   declarations: [
     TrialInitiationComponent,
@@ -32,6 +31,7 @@ import { TrialInitiationComponent } from "./trial-initiation.component";
     FamiliesContentComponent,
     TeamsContentComponent,
     ConfirmationDetailsComponent,
+    BillingComponent,
   ],
   exports: [TrialInitiationComponent],
   providers: [TitleCasePipe],

apps/web/src/app/modules/vertical-stepper/vertical-step.component.html

@@ -1,6 +1,6 @@
 <ng-template>
   <div
-    class="tw-pl-7 tw-inline-block tw-w-10/12"
+    class="tw-pl-7 tw-inline-block tw-w-11/12"
     [ngClass]="{ 'tw-border-0 tw-border-l tw-border-solid tw-border-secondary-300': applyBorder }"
   >
     <ng-content></ng-content>

apps/web/src/app/settings/payment.component.html

@@ -58,7 +58,7 @@
 </div>
 <ng-container *ngIf="showMethods && method === paymentMethodType.Card">
   <div class="row">
-    <div [ngClass]="trialFlow ? 'col-4' : 'col-4'" class="form-group">
+    <div [ngClass]="trialFlow ? 'col-5' : 'col-4'" class="form-group">
       <label for="stripe-card-number-element">{{ "number" | i18n }}</label>
       <div id="stripe-card-number-element" class="form-control stripe-form-control"></div>
     </div>
@@ -74,7 +74,7 @@
       <label for="stripe-card-expiry-element">{{ "expiration" | i18n }}</label>
       <div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
     </div>
-    <div [ngClass]="trialFlow ? 'col-5' : 'col-4'" class="form-group">
+    <div class="form-group col-4">
       <div class="d-flex">
         <label for="stripe-card-cvc-element">
           {{ "securityCode" | i18n }}

apps/web/src/app/settings/tax-info.component.html

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-6">
+  <div [ngClass]="trialFlow ? 'col-7' : 'col-6'">
     <div class="form-group">
       <label for="addressCountry">{{ "country" | i18n }}</label>
       <select
@@ -265,7 +265,7 @@
       </select>
     </div>
   </div>
-  <div [ngClass]="trialFlow ? 'col-4' : 'col-3'">
+  <div [ngClass]="trialFlow ? 'col-5' : 'col-3'">
     <div class="form-group">
       <label for="addressPostalCode">{{ "zipPostalCode" | i18n }}</label>
       <input