feat: Add UI and controller for Opt in step (#3390)

src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.html

@@ -0,0 +1,99 @@
+<div class="opt-in-step__body">
+  <div>
+    <div>
+      <div class="opt-in-step__heading">Opt in to send text receipts</div>
+      <div class="opt-in-step__sub-heading">This will help you send receipts via text message.</div>
+    </div>
+
+    <div class="opt-in-step__content no-keyboard-adjust">
+      <ng-container
+        *ngIf="optInFlowState === OptInFlowState.MOBILE_INPUT || optInFlowState === OptInFlowState.OTP_VERIFICATION"
+      >
+        <div class="opt-in-step__container">
+          <ng-container *ngIf="optInFlowState === OptInFlowState.MOBILE_INPUT">
+            <div class="opt-in-step__mobile-input-container">
+              <div class="opt-in-step__mobile-input-container__label">
+                <span> Mobile number </span>
+              </div>
+              <input
+                #mobileInput
+                matInput
+                [(ngModel)]="mobileNumberInputValue"
+                class="opt-in-step__mobile-input-container__input"
+                [ngClass]="{ 'opt-in-step__mobile-input-container__input__error': mobileNumberError?.length }"
+                [placeholder]="'Enter mobile number with country code e.g +155512345..'"
+                type="tel"
+                [maxlength]="15"
+                [minlength]="7"
+              />
+              <span *ngIf="mobileNumberError?.length" class="opt-in-step__mobile-input-container__error">{{
+                mobileNumberError
+              }}</span>
+            </div>
+          </ng-container>
+          <ng-container *ngIf="optInFlowState === OptInFlowState.OTP_VERIFICATION">
+            <div class="opt-in-step__mobile-input-container__label">
+              <span> Mobile Number </span>
+            </div>
+            <div class="opt-in-step__description">
+              {{ mobileNumberInputValue }}
+              <span (click)="goBack()">
+                <ion-icon class="opt-in-step__edit-icon" src="../../../assets/svg/edit.svg"></ion-icon>
+              </span>
+            </div>
+            <div class="opt-in-step__otp-container">
+              <ng-otp-input (onInputChange)="onOtpChange($event)" [config]="otpConfig"></ng-otp-input>
+            </div>
+            <ng-container *ngIf="showOtpTimer; else resendOtpCta">
+              <span class="opt-in-step__otp-container__label__otp-timer">
+                Resend code in
+                <span class="opt-in-step__otp-container__label__otp-timer__timer">
+                  0:{{ otpTimer | number : '2.0' }}
+                </span>
+                <span class="opt-in-step__otp-container__label__attempts"> ({{ otpAttemptsLeft }} attempts left) </span>
+              </span>
+            </ng-container>
+            <ng-template #resendOtpCta>
+              <ng-container *ngIf="!disableResendOtp">
+                <button
+                  class="opt-in-step__otp-container__label__resend"
+                  (click)="resendOtp('CLICK')"
+                  appFormButtonValidation
+                  buttonType="secondary"
+                  [loading]="sendCodeLoading"
+                  loadingText="Sending Code"
+                >
+                  Resend Code
+                </button>
+                <span class="opt-in-step__otp-container__label__attempts">({{ otpAttemptsLeft }} attempts left)</span>
+              </ng-container>
+              <div *ngIf="disableResendOtp" class="opt-in-step__otp-container__label__resend__disabled-container">
+                <span class="opt-in-step__otp-container__label__resend__disabled"> Resend Code </span>
+                <span class="opt-in-step__otp-container__label__attempts">(0 attempts left)</span>
+              </div>
+            </ng-template>
+          </ng-container>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="optInFlowState === OptInFlowState.SUCCESS">
+        <div class="opt-in-step__success">
+          <ion-icon
+            class="fy-icon opt-in-step__success__image-container"
+            src="/assets/svg/check-circle-fill.svg"
+          ></ion-icon>
+          <div class="opt-in-step__success__header">You are all set</div>
+          <div class="opt-in-step__success__description">
+            We have sent you a confirmation message. You can now use text messages to create and submit your next
+            expense!
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+
+  <div class="opt-in-step__primary-cta-container" *ngIf="optInFlowState === OptInFlowState.MOBILE_INPUT">
+    <ion-button class="btn-primary opt-in-step__primary-cta" fill="clear" role="button" (click)="saveMobileNumber()">
+      Continue
+    </ion-button>
+  </div>
+</div>