+
\ No newline at end of file
diff --git a/src/app/auth/components/signup/signup.component.scss b/src/app/auth/components/signup/signup.component.scss
new file mode 100644
index 0000000000..b235506188
--- /dev/null
+++ b/src/app/auth/components/signup/signup.component.scss
@@ -0,0 +1,35 @@
+.signup-container {
+ padding: 50px;
+ display: flex;
+ flex-direction: row;
+ .heading-box {
+ padding: 30px;
+ }
+ .form-box {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ padding: 0 0 0 20px;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .row {
+ width: 100%;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .row {
+ width: 100%;
+ }
+ .signup-container {
+ flex-direction: column;
+ padding: 10px;
+
+ .form-box {
+ width: 100%;
+ padding: 0 30px;
+ }
+ }
+}
diff --git a/src/app/auth/components/signup/signup.component.spec.ts b/src/app/auth/components/signup/signup.component.spec.ts
new file mode 100644
index 0000000000..3500b3dcf8
--- /dev/null
+++ b/src/app/auth/components/signup/signup.component.spec.ts
@@ -0,0 +1,88 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignupComponent } from './signup.component';
+import { AuthService } from '../../services/auth.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SharedModule } from '../../../shared/shared.module';
+import { CoreModule } from '../../../core/core.module';
+import { RouterTestingModule } from '@angular/router/testing';
+import { StoreModule } from '@ngrx/store';
+import * as fromApp from '../../../store/reducers/app.reducer';
+import { HomeComponent } from '../../../features/home/components/home/home.component';
+
+describe('SignupComponent', () => {
+ let component: SignupComponent;
+ let fixture: ComponentFixture
+
+
+
+
+ Signup
+We do not share your personal detail with anyone.
+Loading…
\ No newline at end of file
diff --git a/src/app/core/components/loader/loader.component.scss b/src/app/core/components/loader/loader.component.scss
new file mode 100644
index 0000000000..81ccd75fe2
--- /dev/null
+++ b/src/app/core/components/loader/loader.component.scss
@@ -0,0 +1,119 @@
+/* Absolute Center Spinner */
+.loading {
+ position: fixed;
+ z-index: 999;
+ height: 2em;
+ width: 2em;
+ overflow: visible;
+ margin: auto;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ }
+
+ /* Transparent Overlay */
+ .loading:before {
+ content: '';
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,0.3);
+ }
+
+ /* :not(:required) hides these rules from IE9 and below */
+ .loading:not(:required) {
+ /* hide "loading..." text */
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
+ }
+
+ .loading:not(:required):after {
+ content: '';
+ display: block;
+ font-size: 10px;
+ width: 1em;
+ height: 1em;
+ margin-top: -0.5em;
+ -webkit-animation: spinner 1500ms infinite linear;
+ -moz-animation: spinner 1500ms infinite linear;
+ -ms-animation: spinner 1500ms infinite linear;
+ -o-animation: spinner 1500ms infinite linear;
+ animation: spinner 1500ms infinite linear;
+ border-radius: 0.5em;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+ box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+ }
+
+ /* Animation */
+
+ @-webkit-keyframes spinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ @-moz-keyframes spinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ @-o-keyframes spinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ @keyframes spinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
\ No newline at end of file
diff --git a/src/app/core/components/loader/loader.component.spec.ts b/src/app/core/components/loader/loader.component.spec.ts
new file mode 100644
index 0000000000..12da842b27
--- /dev/null
+++ b/src/app/core/components/loader/loader.component.spec.ts
@@ -0,0 +1,74 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderComponent } from './loader.component';
+import { LoaderService } from '../../services/loader.service';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Subject } from 'rxjs';
+import { RouterEvent, Router, NavigationStart, NavigationEnd } from '@angular/router';
+
+
+// mocked source of events
+const routerEventsSubject = new SubjectOops ! Page Not Found
\ No newline at end of file diff --git a/src/app/core/components/page-not-found/page-not-found.component.scss b/src/app/core/components/page-not-found/page-not-found.component.scss new file mode 100644 index 0000000000..ff38fe229e --- /dev/null +++ b/src/app/core/components/page-not-found/page-not-found.component.scss @@ -0,0 +1,4 @@ +h1 { + text-align: center; + margin: 100px; +} \ No newline at end of file diff --git a/src/app/core/components/page-not-found/page-not-found.component.spec.ts b/src/app/core/components/page-not-found/page-not-found.component.spec.ts new file mode 100644 index 0000000000..aa242a975d --- /dev/null +++ b/src/app/core/components/page-not-found/page-not-found.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageNotFoundComponent } from './page-not-found.component'; + +describe('PageNotFoundComponent', () => { + let component: PageNotFoundComponent; + let fixture: ComponentFixture
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/features/home/components/home/home.component.scss b/src/app/features/home/components/home/home.component.scss
new file mode 100644
index 0000000000..ac3daa5cd5
--- /dev/null
+++ b/src/app/features/home/components/home/home.component.scss
@@ -0,0 +1,99 @@
+@import "~src/styles/variables";
+.slide-show {
+ width: 100%;
+ height: auto;
+ min-height: 100px;
+ box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
+ padding: 30px 0;
+}
+carousel {
+ z-index: 1 !important;
+}
+.p-cat-home {
+ display: flex;
+ justify-content: space-between;
+ padding: 30px 0;
+ box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
+ align-items: center;
+ .img-cont {
+ flex: 1 1 50%;
+ display: flex;
+ justify-content: flex-start;
+ img {
+ width: 50%;
+ height: fit-content;
+ }
+ }
+
+ .cat-details {
+ flex: 1 1 50%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 60%;
+ align-items: center;
+ h2 {
+ margin-bottom: 20px;
+ }
+
+ p {
+ margin-bottom: 20px;
+ text-align: center;
+ font-weight: 500;
+ }
+ }
+}
+
+.carousel-dots .carousel-dot {
+ border-color: gray !important;
+}
+
+.carousel-dots .carousel-dot-active {
+ background-color: gray !important;
+}
+
+// media queries
+
+@media screen and (max-width: 768px) {
+ .row {
+ width: 100%;
+ padding: 0 10px;
+ }
+ .slide-show {
+ padding: 15px 0;
+ }
+ .p-cat-home {
+ .img-cont {
+ img {
+ width: 60%;
+ height: fit-content;
+ }
+ }
+ }
+}
+
+/* Samll phones to small tablets: from 0 to 480px*/
+@media screen and (max-width: 480px) {
+ // product page media query
+
+ .product-card {
+ display: none;
+ }
+ .mobile-list {
+ display: block;
+ }
+
+ .p-cat-home {
+ .img-cont {
+ img {
+ width: 100%;
+ height: fit-content;
+ }
+ }
+ }
+
+ carousel {
+ z-index: 1 !important;
+ height: 100px !important;
+ }
+}
diff --git a/src/app/features/home/components/home/home.component.spec.ts b/src/app/features/home/components/home/home.component.spec.ts
new file mode 100644
index 0000000000..568099cc6a
--- /dev/null
+++ b/src/app/features/home/components/home/home.component.spec.ts
@@ -0,0 +1,40 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+import { StoreModule, Store } from '@ngrx/store';
+import * as fromApp from '../../../../store/reducers/app.reducer';
+import { MessageService } from '../../../../core/services/message.service';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { AppState } from '../../../../store/reducers/app.reducer';
+import { appState } from '../../../../shared/mocks/app-state.mock';
+describe('HomeComponent', () => {
+ let component: HomeComponent;
+ let fixture: ComponentFixture
+
+
+ ![]()
+
+
+
+
+
+ Start Shopping
+
+
+
+ close
+
+
+
+ My cart + ({{cartItem.length}} item) +
+ +
+
+
+ No Item in your cart
+Your favurite item are just a click away.
+
+
+
+
+ ![]()
+
+
+
+
+
+ {{cart.product.name}}
+
+
+ remove
+ add
+
+
+ {{cart.qty}}
+ X
+Rs. {{cart.product.price}}
+ Rs. {{cart.qty * cart.product.price}}
+
+ 
+ You won't find it cheaper anywhere.
+
+
+ You won't find it cheaper anywhere.
+
+
+ Promo code can be apply on payment page.
+ + Proceed to Checkout + Rs. {{total}} > + +
+
+
+ Request !
+
+
+ Login is required for checkout.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/features/products/components/product-list/product-list.component.scss b/src/app/features/products/components/product-list/product-list.component.scss
new file mode 100644
index 0000000000..54d6537223
--- /dev/null
+++ b/src/app/features/products/components/product-list/product-list.component.scss
@@ -0,0 +1,197 @@
+@import "~/src/styles/variables";
+
+.products-container {
+ display: flex;
+ flex-direction: row;
+}
+
+.sidebar-box {
+ width: 20%;
+ background-color: $bg-color-gray;
+}
+.products-view {
+ width: 80%;
+ margin-top: 10px;
+}
+
+.main-box {
+ display: flex;
+ flex-wrap: wrap;
+ // padding-left: 20px;
+}
+
+.product-card {
+ flex-direction: column;
+ display: flex;
+ position: relative;
+ flex: 0 1 25%;
+ border-bottom: 2px dashed #eeeeee;
+ padding: 12px;
+ margin-bottom: 20px;
+ .small {
+ flex: 1 1 0;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ .description {
+ background-color: $bg-color-gray;
+ padding: 10px;
+ font-size: 80%;
+ margin: 5px 5px 10px 5px;
+ height: 105px;
+
+ p {
+ padding-bottom: 10px;
+ overflow: hidden;
+ height: 80px;
+ }
+ }
+ }
+ img {
+ flex: 1 1 0;
+ width: 100%;
+ height: fit-content;
+ max-height: 163px;
+ }
+
+ &--title {
+ margin-bottom: 10px;
+ flex-grow: 1;
+ }
+
+ .action {
+ display: flex;
+ max-height: 26px;
+ justify-content: space-between;
+ }
+
+ .m-action {
+ display: none;
+ }
+
+ &--price {
+ font-size: 90%;
+ font-weight: bold;
+ flex-grow: 1;
+ text-align: center;
+ align-self: center;
+ }
+}
+
+.mobile-list {
+ display: flex;
+ flex-direction: column;
+ display: none;
+ border-bottom: 2px dashed #eeeeee;
+ padding: 12px;
+ margin-bottom: 20px;
+ .mob-container {
+ display: flex;
+ flex-direction: row;
+ img {
+ width: 50%;
+ }
+ .desc {
+ display: flex;
+ flex-direction: column;
+ justify-content: stretch;
+ .description {
+ flex-grow: 1;
+ background-color: $bg-color-gray;
+ padding: 5px;
+ font-size: 70%;
+ margin: 5px 5px 10px 5px;
+ }
+ div {
+ display: flex;
+ }
+ }
+ }
+}
+
+// media query
+
+@media screen and (max-width: 768px) {
+ // product page media query
+ .product-card {
+ flex: 0 1 50%;
+
+ &--title {
+ margin-bottom: 10px;
+ flex-grow: 1;
+ }
+ .small {
+ flex-direction: row;
+ flex: 0 1 50%;
+ margin-bottom: 10px;
+ .description {
+ height: 120px;
+ p {
+ height: 100px;
+ }
+ }
+ }
+
+ img {
+ width: 50%;
+ // height: fit-content;
+ }
+
+ .tab {
+ display: block;
+ }
+
+ .action {
+ display: none;
+ }
+
+ &--price {
+ flex: 1 1 50%;
+ }
+ .m-action {
+ display: flex;
+ max-height: 26px;
+ button {
+ width: 100%;
+ }
+ }
+ }
+}
+
+/* Samll phones to small tablets: from 0 to 480px*/
+@media screen and (max-width: 480px) {
+ // product page media query
+ .product-card {
+ display: none;
+ }
+ .mobile-list {
+ display: block;
+ }
+}
+
+.vertical {
+ border-left: 3px solid #eee;
+ height: 80%;
+ top: 60px;
+ position: absolute;
+ right: 0;
+}
+
+.count {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ flex: 1 1 50%;
+ justify-content: space-between;
+ height: 26px;
+ mat-icon {
+ height: 18px;
+ width: 18px;
+ font-size: 130%;
+ background: $bg-color-pink;
+ border-radius: 20px;
+ margin: 0 10px;
+ color: white;
+ cursor: pointer;
+ }
+}
diff --git a/src/app/features/products/components/product-list/product-list.component.spec.ts b/src/app/features/products/components/product-list/product-list.component.spec.ts
new file mode 100644
index 0000000000..340c89393c
--- /dev/null
+++ b/src/app/features/products/components/product-list/product-list.component.spec.ts
@@ -0,0 +1,120 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductListComponent } from './product-list.component';
+import { StoreModule } from '@ngrx/store';
+import { appReducer, AppState } from '../../../../store/reducers/app.reducer';
+import { HttpClientModule } from '@angular/common/http';
+import { MessageService } from '../../../../core/services/message.service';
+import { DataService } from '../../../../core/services/data.service';
+import { RouterTestingModule } from '@angular/router/testing';
+import { SharedModule } from '../../../../shared/shared.module';
+import { Product } from '../../models/product';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { appState } from '../../../../shared/mocks/app-state.mock';
+import { of } from 'rxjs';
+
+describe('ProductListComponent', () => {
+ let component: ProductListComponent;
+ let fixture: ComponentFixture
+
+
+
+
+ {{product.name}}
+
+ ![]()
+
+
+
+ {{product.description}}
+
+ MRP Rs. {{product.price}}
+
+
+
+ remove
+ add
+
+
+ {{cartMap.get(product.id)}}
+
+
+
+ MRP Rs. {{product.price}}
+
+
+
+
+
+ remove
+ add
+
+
+ {{cartMap.get(product.id)}}
+
+
+
+
+
+ {{product.name}}
+
+ ![]()
+
+
+
+ {{product.description}}
+ +
+ MRP Rs. {{product.price}}
+
+
+ remove
+ add
+
+ {{cartMap.get(product.id)}}
+
+
\ No newline at end of file
diff --git a/src/app/features/products/components/products/products.component.scss b/src/app/features/products/components/products/products.component.scss
new file mode 100644
index 0000000000..5f09e2b693
--- /dev/null
+++ b/src/app/features/products/components/products/products.component.scss
@@ -0,0 +1,53 @@
+@import '~/src/styles/variables';
+
+.products-container {
+ display: flex;
+ flex-direction: row;
+ }
+
+ .sidebar-box {
+ width: 20%;
+ background-color: $bg-color-gray;
+ }
+ .products-view {
+ width: 80%;
+ margin-top:10px;
+ }
+
+
+
+/* Samll tablels to small tablets: from 0 to 768px*/
+@media screen and (max-width: 768px) {
+ .row {
+ width: 100%;
+ padding: 0 10x
+ }
+ // product page media query
+ // .products-container{
+ // flex-direction: column;
+ // }
+ // .sidebar-box{
+ // width: 100%;
+ // }
+ // .products-view{
+ // width: 100%;
+ // }
+}
+
+/* Samll phones to small tablets: from 0 to 480px*/
+@media screen and (max-width: 480px) {
+ .row {
+ width: 100%;
+ padding: 0 10x
+ }
+ // product page media query
+ .products-container{
+ flex-direction: column;
+ }
+ .sidebar-box{
+ width: 100%;
+ }
+ .products-view{
+ width: 100%;
+ }
+}
diff --git a/src/app/features/products/components/products/products.component.spec.ts b/src/app/features/products/components/products/products.component.spec.ts
new file mode 100644
index 0000000000..1083b409c1
--- /dev/null
+++ b/src/app/features/products/components/products/products.component.spec.ts
@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductsComponent } from './products.component';
+import { StoreModule } from '@ngrx/store';
+import { appReducer } from '../../../../store/reducers/app.reducer';
+import { RouterTestingModule } from '@angular/router/testing';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { ProductListComponent } from '../product-list/product-list.component';
+import { SharedModule } from '../../../../shared/shared.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('ProductsComponent', () => {
+ let component: ProductsComponent;
+ let fixture: ComponentFixture
+
+
+
+
+