From a119f045cf64c0450b3f1833163fe5c4a5b8f698 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Sat, 6 Nov 2021 20:20:31 +0530 Subject: [PATCH] Acknowledgement UI --- .../register-business.component.html | 69 ++++++- .../register-business.component.scss | 177 +++++++++++++----- .../register-business.component.ts | 38 +++- src/styles.scss | 33 +++- 4 files changed, 258 insertions(+), 59 deletions(-) diff --git a/src/app/register-business/register-business.component.html b/src/app/register-business/register-business.component.html index 4a7fc1b..0094e9e 100644 --- a/src/app/register-business/register-business.component.html +++ b/src/app/register-business/register-business.component.html @@ -5,7 +5,8 @@
- E-Services / Business Names + E-Services / + Business Names
@@ -28,7 +29,7 @@

- @@ -61,10 +62,10 @@
- -
@@ -79,12 +80,12 @@

{{ plan.name }}

S$ {{ plan.amount }}/- (govt fees + taxes extra)

{{ plan.range }}

- +
-
@@ -98,5 +99,59 @@ 'Please stand by while the Authority Officer contacts you with the results of your appeal' : 'Congratulations! Your name has been submitted for reservation under "' + selectedPlan.range + ' Plan". Please proceed with further setup of your business entity' }}

+ + + +
+ + + +
+

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. +
    • + +
  • + 2. Click Here for the estimated processing time +
    • +
+
+ +
+ + +
+
- \ 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 5b5a948..0d3a276 100644 --- a/src/app/register-business/register-business.component.scss +++ b/src/app/register-business/register-business.component.scss @@ -93,52 +93,15 @@ color: var(--success); } } - - .proceed-button { - border: none; - background-color: var(--highlight); - padding: 0 4rem; - color: white; - font-size: 1.6rem; - letter-spacing: 0.5px; - border-radius: 4rem; - height: 5rem; - - &:disabled { - cursor: not-allowed; - opacity: 0.5; - } - } } .form-action-buttons { text-align: center; + margin-bottom: 2rem; button { - border: none; - background-color: var(--highlight); - padding: 0 4rem; - color: white; - font-size: 1.6rem; - letter-spacing: 0.5px; - border-radius: 4rem; - height: 5rem; - vertical-align: middle; - - &.disabled { - cursor: not-allowed; - opacity: 0.5; - } - &:first-child { - background-color: var(--border-grey); - color: var(--dark-grey); - margin-right: 20px; - - &.highlight { - background-color: var(--highlight); - color: white; - } + margin-right: 2rem; } } } @@ -253,17 +216,7 @@ } button { - border: none; - background-color: var(--highlight); - padding: 0 6rem; - color: white; - font-size: 1.6rem; - letter-spacing: 0.5px; - border-radius: 4rem; - height: 5rem; - vertical-align: middle; margin-top: 4rem; - cursor: pointer; } } @@ -288,4 +241,130 @@ text-align: center; } } +} + +.acknowledgement-receipt { + width: 100%; + margin: 0 auto; + + h2 { + font-size: 2rem; + color: var(--dark-grey); + filter: brightness(80%); + font-weight: 500; + margin: 2rem; + } + + .container { + display: flex; + width: calc(100% - 2rem); + align-items: flex-start; + margin: 2rem auto; + } + + .bill-container { + width: 50%; + border: 2px solid var(--border-grey); + border-radius: 1rem; + } + + .bill-breakup { + display: grid; + grid-template-columns: 1fr 1fr; + list-style: none; + + li { + margin: 1.8rem; + width: 100%; + } + + label { + display: block; + color: var(--dark-grey); + font-size: 1.4rem; + filter: brightness(80%); + } + + .value { + display: block; + color: var(--dark-grey); + opacity: 0.8; + font-size: 1.6rem; + letter-spacing: 0.5px; + line-height: 1.6; + margin-top: 1rem; + + &.active { + color: var(--highlight); + font-weight: normal; + } + } + } + + .form-action-buttons { + text-align: left; + margin: 2rem 1.5rem; + } + + .total-amount { + text-align: right; + margin: 0 1.5rem 2rem; + overflow: hidden; + padding: 1rem; + border-radius: 1rem; + position: relative; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: var(--border-grey); + opacity: 0.4; + } + + & > * { + position: relative; + } + + label { + font-size: 2rem; + color: var(--dark-grey); + } + + span { + margin-left: 1rem; + font-size: 2.4rem; + color: var(--highlight); + } + } + + .message-board { + width: 50%; + padding: 0 2rem; + 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; + } + } + } } \ 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 37a5484..80a7b81 100644 --- a/src/app/register-business/register-business.component.ts +++ b/src/app/register-business/register-business.component.ts @@ -12,7 +12,9 @@ interface Plan { styleUrls: ['./register-business.component.scss'] }) export class RegisterBusinessComponent implements OnInit { - formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' | undefined = 'CHECK_NAME'; + formState: 'CHECK_NAME' | 'INIT_REGISTER' | + 'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' | + 'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'ACKNOWLEDGEMENT'; nameToCheck: string = 'JK Enterprises ACRA Ltd'; isAppealing: boolean = false; agreeToReserve: boolean = false; @@ -49,7 +51,7 @@ export class RegisterBusinessComponent implements OnInit { name: string, type: 'date' | 'select' | 'text' | 'email' | 'number', placeholder?: string, - options?: Array + options?: Array, }> = [{ name: 'Entity Type', type: 'select', @@ -84,6 +86,38 @@ export class RegisterBusinessComponent implements OnInit { options: ['YES', 'NO'] }]; + + transactionAcknowledgementDetails: Array<{ + name: string, + value: string | number, + amount?: number, + needCopyWidget?: boolean, + }> = [{ + name: 'UEM', + value: '---' + }, { + name: 'Entity Name', + value: this.nameToCheck + }, { + name: 'Transaction Number', + value: '39047729362923293', + needCopyWidget: true, + }, { + name: 'Receipt Number', + value: 'ACRA38293', + needCopyWidget: true + }, { + name: 'EP Reference No.', + value: '20910038829384470' + }, { + name: 'Payment Date', + value: '06/11/2021 11:28:01' + }, { + name: 'Description', + value: 'Application for Business Name', + amount: 15 + }]; + constructor() { } ngOnInit(): void { diff --git a/src/styles.scss b/src/styles.scss index a7138dd..496e9df 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -31,6 +31,11 @@ button, a { align-items: center; justify-content: flex-start; padding: 0 2rem; + position: sticky; + position: -webkit-sticky; + background-color: white; + z-index: 1; + top: 0; &::after { content: ''; @@ -52,7 +57,12 @@ button, a { .bread-crumbs { font-size: 1.4rem; color: var(--dark-grey); - margin: 2rem; + padding: 2rem; + position: sticky; + position: -webkit-sticky; + background-color: white; + top: 2.9rem; + z-index: 1; span { color: var(--highlight); @@ -65,4 +75,25 @@ button, a { color: var(--dark-grey); } } +} + +.common-button { + border: none; + background-color: var(--highlight); + padding: 0 4rem; + color: white; + font-size: 1.6rem; + letter-spacing: 0.5px; + border-radius: 4rem; + height: 5rem; + + &.neutral { + background-color: var(--border-grey); + color: var(--dark-grey); + } + + &:disabled { + cursor: not-allowed; + opacity: 0.5; + } } \ No newline at end of file