[SG-69] Billing payment step (#3133)

* billing folder added

* initial commit

* [SG-74] Trial Initiation Component with Vertical Stepper (#2913)

* Vertical stepper PoC

* Convert stepper css to tailwind

* trial component start

* trial component params

* tailwind-ify header

* Support teams, enterprise, and families layout param and more layout ui work

* Some more theming fixes

* Rename TrialModule to TrialInitiationModule

* Stepper fixes, plus more functionality demo

* Cleanup

* layout params and placeholders

* Only allow trial route to be hit if not logged in

* fix typo

* Use background-alt2 color for header

* Move vertical stepper out of trial-initiation

* Create components for the different plan types

* Remove width on steps

* Remove content projection for label

* Tailwind style fixes

* Extract step content into a component

* Remove layout param for now

* Remove step tags

* remove pointer classes from step button

* Remove most tailwind important designations

* Update apps/web/src/app/modules/vertical-stepper/vertical-step.component.ts

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Tailwind and layout fixes

* Remove container

* lint & prettier fixes

* Remove extra CdkStep declaration

* Styles fixes

* Style logo directly

* Remove 0 margin on image

* Fix tiling and responsiveness

* Minor padding fixes for org pages

* Update apps/web/src/app/modules/trial-initiation/trial-initiation.component.html

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* prettier fix

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* [SG-65] Reusable Registration Form (#2946)

* created reusable registration form

* fixed conflicts

* replicated reactive form changes in other clients

* removed comments

* client template cleanup

* client template cleanup

* removed comments in template file

* changed to component suffix

* switched show password to use component

* comments resolution

* comments resolution

* added toast disable functionality

* removed unused locale

* mode custom input validator generic

* fixed button

* fixed linter

* removed horizontal rule

* switched to button component

* Added billng step

* Added keys to locale

* billing trial initiation step

* billing trial initiation step

* Dont load billing content until the step is selected

* billing trial initiation step

* billing trial initiation step

* billing trial initiation step

* made the get plans endpoint anonymous

* merged with master and extra changes

* major changes on billing step

* billing step sub label

* Made changes to billing step sub label

* removed unused variable

* removed unused logic

* cleanup

* fixed suggestions

* removed unused reference

* added billing sub label

Co-authored-by: Robyn MacCallum <robyntmaccallum@gmail.com>
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: addison <addisonbeck1@gmail.com>

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

@@ -58,11 +58,11 @@
 </div>
 <ng-container *ngIf="showMethods && method === paymentMethodType.Card">
   <div class="row">
-    <div class="form-group col-4">
+    <div [ngClass]="trialFlow ? 'col-4' : '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>
-    <div class="form-group col-8 d-flex align-items-end">
+    <div *ngIf="!trialFlow" class="form-group col-8 d-flex align-items-end">
       <img
         src="../../images/cards.png"
         alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay"
@@ -70,11 +70,11 @@
         height="32"
       />
     </div>
-    <div class="form-group col-4">
+    <div [ngClass]="trialFlow ? 'col-3' : 'col-4'" class="form-group">
       <label for="stripe-card-expiry-element">{{ "expiration" | i18n }}</label>
       <div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
     </div>
-    <div class="form-group col-4">
+    <div [ngClass]="trialFlow ? 'col-5' : 'col-4'" class="form-group">
       <div class="d-flex">
         <label for="stripe-card-cvc-element">
           {{ "securityCode" | i18n }}