diff --git a/src/app/register-business/register-business.component.html b/src/app/register-business/register-business.component.html index 0094e9e..02dbf1a 100644 --- a/src/app/register-business/register-business.component.html +++ b/src/app/register-business/register-business.component.html @@ -106,52 +106,105 @@ - - -
-

Acknowledgement

- -
-
-
    -
  • - -
    - {{ transaction.value }} - - {{ transaction.amount }} -
    -
    • -
- -
- S$ 15.00 -
-
- -
    -
    Important Messages
    - -
  • - 1. Please click Here to continue with your registeration. - If you do not wish to register now, please take note of the "Transaction Number" - above for your registeration later. -
    • +
    +

    Acknowledgement

    -
  • - 2. Click Here for the estimated processing time -
    • +
    +
    +
      +
    • + +
      + {{ transaction.value }} + - {{ transaction.amount }} +
      +
    -
    + +
    + S$ 15.00 +
    +
    + +
      +
      Important Messages
      + +
    • + 1. Please click Here to continue with your registeration. + If you do not wish to register now, please take note of the "Transaction Number" + above for your registeration later. +
      • + +
    • + 2. Click Here for the estimated processing time +
      • +
    +
+ +
+ + +
+
+ +
+

Receipt

+ + -
- - -
+
+
+
S/N
+
Transaction No.
+
Entity Name
+
Description
+
Amount (S$)
+
Status
+
+ +
    +
  • +
    1
    +
    39047729362923293
    +
    {{ nameToCheck }}
    +
    Application for a new business name
    +
    15.00
    +
    Completed
    +
    • +
- \ No newline at end of file + + + + +
+ + +
+ +
\ No newline at end of file diff --git a/src/app/register-business/register-business.component.scss b/src/app/register-business/register-business.component.scss index 0d3a276..1e65d7e 100644 --- a/src/app/register-business/register-business.component.scss +++ b/src/app/register-business/register-business.component.scss @@ -243,7 +243,7 @@ } } -.acknowledgement-receipt { +.acknowledgement { width: 100%; margin: 0 auto; @@ -367,4 +367,149 @@ } } } +} + +.receipt { + width: calc(100% - 4rem); + margin: 0 auto; + + h2 { + font-size: 2rem; + color: var(--dark-grey); + filter: brightness(80%); + font-weight: 500; + margin: 2rem 0; + } + + .bill-breakup { + display: grid; + grid-template-columns: 1fr 1fr; + list-style: none; + + li { + margin-bottom: 1rem; + width: 100%; + display: flex; + align-items: center; + justify-content: flex-start; + } + + label { + display: block; + color: var(--dark-grey); + font-size: 1.4rem; + } + + .value { + display: block; + color: var(--dark-grey); + opacity: 0.8; + font-size: 1.6rem; + letter-spacing: 0.5px; + line-height: 1.6; + margin-left: 1rem; + } + } + + .table { + margin: 2rem auto; + width: 100%; + border-radius: 1rem; + overflow: auto; + border: 2px solid var(--border-grey); + min-height: 10rem; + + header { + background: linear-gradient(90deg, var(--secondary) 0%, var(--primary)); + color: white; + font-size: 1.6rem; + display: flex; + align-items: center; + justify-content: flex-start; + height: 5.5rem; + font-weight: 300; + letter-spacing: 0.5px; + } + + .cell { + width: calc(100% / 6); + + &:nth-child(1) { + text-align: center; + width: 10rem; + } + + &:nth-child(2) { + width: calc(20% + (10% - 10rem)); + } + + &:nth-child(3) { + width: 20%; + } + + &:nth-child(4) { + width: 20%; + } + + &:nth-child(5) { + width: 10%; + } + + &:nth-child(3) { + width: 20%; + } + } + + ul { + list-style: none; + } + + li { + display: flex; + align-items: flex-start; + justify-content: flex-start; + padding: 2rem 0; + + &:nth-child(even) { + background-color: var(--border-grey); + } + + .cell { + font-size: 1.4rem; + color: var(--dark-grey); + line-height: 1.7; + } + } + } + + .message-board { + width: 100%; + margin: 4rem 0; + list-style: none; + + h5 { + font-size: 1.6rem; + color: var(--dark-grey); + filter: brightness(80%); + font-weight: 500; + } + + li { + margin: 1.5rem 0; + line-height: 1.7; + letter-spacing: 0.5px; + font-size: 1.4rem; + color: var(--dark-grey); + opacity: 0.8; + + a { + color: var(--highlight); + font-weight: 500; + } + } + } + + .form-action-buttons { + text-align: left; + } } \ No newline at end of file diff --git a/src/app/register-business/register-business.component.ts b/src/app/register-business/register-business.component.ts index 80a7b81..721b730 100644 --- a/src/app/register-business/register-business.component.ts +++ b/src/app/register-business/register-business.component.ts @@ -14,7 +14,7 @@ interface Plan { export class RegisterBusinessComponent implements OnInit { formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' | - 'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'ACKNOWLEDGEMENT'; + 'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'CHECK_NAME'; nameToCheck: string = 'JK Enterprises ACRA Ltd'; isAppealing: boolean = false; agreeToReserve: boolean = false; @@ -87,11 +87,11 @@ export class RegisterBusinessComponent implements OnInit { }]; - transactionAcknowledgementDetails: Array<{ + acknowledgementDetails: Array<{ name: string, value: string | number, amount?: number, - needCopyWidget?: boolean, + highlight?: boolean, }> = [{ name: 'UEM', value: '---' @@ -101,11 +101,11 @@ export class RegisterBusinessComponent implements OnInit { }, { name: 'Transaction Number', value: '39047729362923293', - needCopyWidget: true, + highlight: true, }, { name: 'Receipt Number', value: 'ACRA38293', - needCopyWidget: true + highlight: true }, { name: 'EP Reference No.', value: '20910038829384470' @@ -118,6 +118,32 @@ export class RegisterBusinessComponent implements OnInit { amount: 15 }]; + receiptDetails: Array<{ + name: string, + value: string | number, + }> = [{ + name: 'Receipt Number', + value: 'ACRA38293', + }, { + name: 'ARN', + value: 'ARN2021110294038', + }, { + name: 'EP Reference No.', + value: '20910038829384470' + }, { + name: 'Tax ID', + value: 'M9-0C038921', + }, { + name: 'Paid By', + value: 'KOH YA TING', + }, { + name: 'Payment Date', + value: '06/11/2021 11:28:01' + }, { + name: 'Paid Via', + value: 'Net Banking', + }]; + constructor() { } ngOnInit(): void { @@ -180,4 +206,8 @@ export class RegisterBusinessComponent implements OnInit { } } + print() { + window.print(); + } + } diff --git a/src/styles.scss b/src/styles.scss index 496e9df..06fb6fb 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -85,11 +85,26 @@ button, a { font-size: 1.6rem; letter-spacing: 0.5px; border-radius: 4rem; - height: 5rem; + height: 4.5rem; + transition: box-shadow 0.3s; + + &:hover { + box-shadow: 0px 0px 10px -2px var(--highlight); + } &.neutral { background-color: var(--border-grey); color: var(--dark-grey); + + &:hover { + box-shadow: 0px 0px 10px -2px var(--dark-grey); + } + } + + &.outline { + border: 1px solid var(--highlight); + background-color: transparent; + color: var(--highlight); } &:disabled {