diff --git a/src/app/pages/account/bonus-program/bonus-program.component.scss b/src/app/pages/account/bonus-program/bonus-program.component.scss
index ff660dc..ba529eb 100644
--- a/src/app/pages/account/bonus-program/bonus-program.component.scss
+++ b/src/app/pages/account/bonus-program/bonus-program.component.scss
@@ -2,19 +2,22 @@
.woocommerce-MyAccount-content {
display: flex;
flex-direction: column;
- & > h2 {
+
+ &>h2 {
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 24px;
}
- & > p {
+
+ &>p {
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 18px;
margin-top: 8px;
}
+
.card-container {
background: #09467f;
box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
@@ -24,15 +27,18 @@
overflow: hidden;
max-width: 400px;
width: 100%;
+
&__header {
height: 62px;
color: #fff;
display: flex;
justify-content: space-between;
+
img {
height: 38px;
margin-top: 15px;
}
+
span {
font-style: normal;
font-weight: 400;
@@ -42,32 +48,45 @@
margin-right: 18px;
}
}
+
&__decorative-pattern {
height: 122px;
- background-color: #fff;
- padding-top: 9px;
- .imgs-row {
- background: url("../../../../assets/card-decorative-pattern.png")
- repeat-x;
- height: 32%;
+ background-color: #B8DEFF;
+ // padding-top: 9px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ img {
+ height: 90px;
}
+
+ // .imgs-row {
+ // background: url("../../../../assets/card-decorative-pattern.png") repeat-x;
+ // height: 32%;
+ // }
}
+
&__content {
- background-color: #b8deff;
+ background-color: #09467f;
+ color: #fff;
+
.info {
height: 79px;
- border-bottom: solid #0d457e 1px;
+ border-bottom: solid #fff 1px;
padding: 14px 18px;
+
.row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 7px;
+
.key {
font-size: 14px;
line-height: 17px;
font-weight: 400;
}
+
.value {
font-size: 18px;
font-weight: 600;
@@ -75,11 +94,13 @@
}
}
}
+
&__barcode-container {
display: flex;
justify-content: center;
align-items: center;
padding: 33px 0;
+
#barcode {
border-radius: 16px;
}
@@ -96,6 +117,7 @@
-ms-user-select: none;
-o-user-select: none;
user-select: none;
+
&__front,
&__back {
display: block;
@@ -112,10 +134,12 @@
padding: 12px;
background-size: cover;
}
+
&__front {
transform: rotateY(0deg);
background-image: url(../../../../assets/background.svg);
}
+
&__back {
position: absolute;
opacity: 0;
@@ -124,27 +148,32 @@
transform: rotateY(-180deg);
background: #000;
}
+
&.active_back {
- > .card-content__front {
+ >.card-content__front {
transform: rotateY(180deg);
opacity: 0;
}
- > .card-content__back {
+
+ >.card-content__back {
opacity: 1;
transform: rotateY(0deg);
}
}
+
&__logo {
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
+
.title {
color: #03d1be;
font-weight: 600;
letter-spacing: 2px;
}
}
+
&__footer {
display: flex;
justify-content: space-between;
@@ -152,10 +181,12 @@
position: absolute;
bottom: 12px;
width: calc(100% - 24px);
+
.count {
font-size: 22px;
}
}
+
&__barcode-container {
display: flex;
justify-content: center;
@@ -163,9 +194,10 @@
height: 100%;
}
}
+
.explanation {
font-size: 12px;
margin-bottom: 8px;
}
}
-}
+}
\ No newline at end of file
diff --git a/src/app/pages/account/user-data/user-data.component.html b/src/app/pages/account/user-data/user-data.component.html
new file mode 100644
index 0000000..6fae399
--- /dev/null
+++ b/src/app/pages/account/user-data/user-data.component.html
@@ -0,0 +1,33 @@
+
\ No newline at end of file
diff --git a/src/app/pages/account/user-data/user-data.component.scss b/src/app/pages/account/user-data/user-data.component.scss
new file mode 100644
index 0000000..de0197e
--- /dev/null
+++ b/src/app/pages/account/user-data/user-data.component.scss
@@ -0,0 +1,131 @@
+:host {
+ display: flex;
+ justify-content: center;
+
+ .woocommerce-form-login__submit {
+ width: 150px;
+ }
+
+ h2 {
+ color: #fff;
+ width: 100%;
+ height: 49px;
+ text-align: left;
+ padding-top: 13px;
+ padding-left: 32px;
+ background: #0d457e;
+ position: relative;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 24px;
+
+ &::before {
+ content: "";
+ width: 19px;
+ height: 4px;
+ background: #fff;
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 24px;
+ }
+ }
+
+ .woocommerce-form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: #ffffff;
+ box-shadow: 0px 0px 10px rgb(0 0 0 / 15%);
+ border-radius: 15px;
+ min-height: 262px;
+ max-width: 400px;
+ overflow: auto;
+ position: relative;
+ padding-bottom: 10px;
+ }
+
+ .form-row {
+ width: 80%;
+ margin-bottom: 16px;
+ max-width: 400px;
+
+ .button {
+ width: 100%;
+ font-weight: 600;
+ letter-spacing: 2px;
+ border: none;
+ height: 45px;
+ background: #b8deff;
+ border-radius: 15px;
+ color: #000;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ label {
+ display: inline-block;
+ margin-bottom: 8px;
+ margin-top: 15px;
+ color: #000;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 22px;
+ }
+
+ .input-text {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+ "Segoe UI Symbol";
+ font-size: 1rem;
+ color: #495057;
+ background: #ffffff;
+ padding: 0.5rem 0.75rem;
+ border: 1px solid #ced4da;
+ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+ -webkit-appearance: none;
+ appearance: none;
+ border-radius: 4px;
+ width: 100%;
+ }
+
+ select {
+ background: #FFFFFF;
+ border: 1px solid #B8DEFF;
+ border-radius: 15px;
+ width: 100%;
+ height: 45px;
+ padding: 0 10px;
+
+ option[value=""][disabled] {
+ display: none;
+ }
+ }
+
+ select:required:invalid {
+ color: #7D7D7D;
+ }
+ }
+
+ .policy {
+ width: 80%;
+ text-align: center;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 15px;
+ color: #BDBDBD;
+ }
+
+ .decoration-pattern {
+ margin-top: 12px;
+ display: flex;
+ align-items: end;
+ margin-left: 0;
+ width: 92%;
+ }
+}
\ No newline at end of file
diff --git a/src/app/pages/account/user-data/user-data.component.spec.ts b/src/app/pages/account/user-data/user-data.component.spec.ts
new file mode 100644
index 0000000..940124b
--- /dev/null
+++ b/src/app/pages/account/user-data/user-data.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserDataComponent } from './user-data.component';
+
+describe('UserDataComponent', () => {
+ let component: UserDataComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ UserDataComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(UserDataComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/account/user-data/user-data.component.ts b/src/app/pages/account/user-data/user-data.component.ts
new file mode 100644
index 0000000..3ff1c7c
--- /dev/null
+++ b/src/app/pages/account/user-data/user-data.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UserDataForm } from 'src/app/interface/data';
+
+@Component({
+ selector: 'app-user-data',
+ templateUrl: './user-data.component.html',
+ styleUrls: ['./user-data.component.scss']
+})
+export class UserDataComponent implements OnInit {
+ public userDataFormGroup!: FormGroup;
+ public userData: UserDataForm = {
+ name: '',
+ birthdate: '',
+ gender: '',
+ }
+
+
+ constructor() { }
+
+ ngOnInit(): void {
+ this.userDataFormGroup = new FormGroup({
+ name: new FormControl('', [Validators.required, Validators.minLength(2)]),
+ birthdate: new FormControl('', [Validators.required]),
+ gender: new FormControl('', [Validators.required]),
+ })
+ }
+
+ saveData() {
+ this.userData = this.userDataFormGroup.value as UserDataForm
+ console.log('####: ', this.userData)
+ }
+
+}
diff --git a/src/app/pages/main/main.component.ts b/src/app/pages/main/main.component.ts
index 9bec152..ea273ab 100644
--- a/src/app/pages/main/main.component.ts
+++ b/src/app/pages/main/main.component.ts
@@ -36,7 +36,7 @@ export class MainComponent implements OnInit {
})
route.queryParams.subscribe( (params) => {
console.log('####: ', params)
- this.token = params['token']
+ if (params['token']) this.token = params['token']
});
}
diff --git a/src/assets/card-decorative-pattern.svg b/src/assets/card-decorative-pattern.svg
new file mode 100644
index 0000000..a4f9465
--- /dev/null
+++ b/src/assets/card-decorative-pattern.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/menu-icons/bonus-program.png b/src/assets/menu-icons/bonus-program.png
new file mode 100644
index 0000000..f46abfe
Binary files /dev/null and b/src/assets/menu-icons/bonus-program.png differ
diff --git a/src/assets/menu-icons/user-data.png b/src/assets/menu-icons/user-data.png
new file mode 100644
index 0000000..f46abfe
Binary files /dev/null and b/src/assets/menu-icons/user-data.png differ