Add welcome dialog (holidays change)

RepoWebShop/src/app/home/components/welcome-dialog/welcome-dialog.component.html

@@ -0,0 +1,41 @@
+<h2 mat-dialog-title>Cambios en la forma de comprar</h2>
+
+<mat-dialog-content style="font-family: Noto Serif">
+
+  <p>
+    Hola, gracias por visitarnos!
+  </p>
+  <p>
+    Queriamos avisarte que a modo de prueba, las cosas van a ser un poco distintas desde el Martes 22 de Febrero, hasta el Domingo 14 de Marzo.
+  </p>
+  <ul>
+    <li>
+      Durante este tiempo vamos a tomar pedidos a través de nuestro WhatsApp solamente.
+    </li>
+    <li>
+      Solo vamos a tomar pedidos de nuestro catálo de productos dulces.
+    </li>
+    <li>
+      Las compras se podrán retirar los días Sábados entre las 9hs y 14hs.
+    </li>
+  </ul>
+
+
+  <div>
+    <p>
+      Con mucho cariño,
+    <br>
+      De las Artes
+    </p>
+  </div>
+
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <div style="display: grid; grid-template-columns: auto auto; gap: 10px; width: 100%;">
+      <a href='https://api.whatsapp.com/send?phone=5491127778899' target="_blank" style="display: flex; align-items: center; color: black; margin-right: auto;">
+        <img src="../../../assets/images/icons/whapp.png" style="width:25px; height: 25px; margin-right: 10px;" class="icon">11 2777 8899
+      </a>  
+      <button style="margin-left: auto;" mat-button color="primary" (click)="close()">Entendido</button>
+    </div>
+</mat-dialog-actions>

RepoWebShop/src/app/home/components/welcome-dialog/welcome-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WelcomeDialogComponent } from './welcome-dialog.component';
+
+describe('HoursComponent', () => {
+  let component: WelcomeDialogComponent;
+  let fixture: ComponentFixture<WelcomeDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WelcomeDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WelcomeDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

RepoWebShop/src/app/home/components/welcome-dialog/welcome-dialog.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
+import { CalendarService } from '../../services/calendar.service';
+import { Subscription } from 'rxjs';
+import { IPublicCalendar } from '../../interfaces/ipublic-calendar';
+import { map, tap, groupBy, switchMap, toArray, mergeMap } from 'rxjs/operators';
+import { IWorkingHour } from '../../interfaces/iworking-hour';
+import { IPublicHoliday } from '../../interfaces/ipublic-holiday';
+import { IVacation } from '../../interfaces/ivacation';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-welcome-dialog',
+  templateUrl: './welcome-dialog.component.html',
+  styleUrls: ['./welcome-dialog.component.scss']
+})
+export class WelcomeDialogComponent implements OnInit, OnDestroy {
+
+  constructor(
+    private dialogRef: MatDialogRef<WelcomeDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) data) {
+  }
+
+  ngOnInit() {
+
+  }
+
+  ngOnDestroy() {
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+}

RepoWebShop/src/app/home/containers/home-shell/home-shell.component.html

@@ -1,4 +1,5 @@
 <div class="container">
+<mat-dialog-content></mat-dialog-content>
 <mat-toolbar color="accent">
     <mat-toolbar-row >
         <span></span>

RepoWebShop/src/app/home/containers/home-shell/home-shell.component.ts

@@ -5,24 +5,40 @@ import { Store } from '@ngrx/store';
 import * as fromProduct from '../../../products/state';
 import * as productActions from '../../../products/state/product.actions';
 import * as cateringActions from '../../../catering/state/catering.actions';
+import { MatDialog, MatDialogConfig } from '@angular/material';
+import { WelcomeDialogComponent } from '../../components/welcome-dialog/welcome-dialog.component';
 
 @Component({
   selector: 'app-home-shell',
   templateUrl: './home-shell.component.html',
   styleUrls: ['./home-shell.component.scss']
 })
+
 export class HomeShellComponent implements OnInit {
 
-  constructor(private scroll: ScrollService, private titleService: Title, private store: Store<fromProduct.State>) { }
+  constructor(private dialog: MatDialog, private scroll: ScrollService, private titleService: Title, private store: Store<fromProduct.State>) { }
 
   ngOnInit() {
     this.titleService.setTitle('De las Artes');
 
     // this.store.dispatch(new productActions.LoadProducts());
     // this.store.dispatch(new cateringActions.LoadCaterings());
     // this.store.dispatch(new cateringActions.LoadItems());
+    if (new Date() < new Date(2021,2, 14)){
+      this.openDialog();
+    }
   }
   triggerScrollTo(target: string, offset: number) {
     this.scroll.triggerScrollTo(target, offset);
   }
+
+  openDialog() {
+
+    const dialogConfig = new MatDialogConfig();
+
+    dialogConfig.disableClose = false;
+    dialogConfig.autoFocus = true;
+
+    this.dialog.open(WelcomeDialogComponent, dialogConfig);
+}
 }

RepoWebShop/src/app/home/home.module.ts

@@ -13,6 +13,8 @@ import { HoursComponent } from './components/hours/hours.component';
 import { ProductModule } from '../products/products.module';
 import { SharedModule } from '../shared/shared.module';
 import { CateringModule } from '../catering/catering.module';
+import { MatDialogModule } from '@angular/material';
+import { WelcomeDialogComponent } from './components/welcome-dialog/welcome-dialog.component';
 
 const homeRoutes: Routes = [
   { path: 'start', component: HomeShellComponent },
@@ -29,15 +31,18 @@ const homeRoutes: Routes = [
     MaterialModule,
     SharedModule,
     ProductModule,
-    CateringModule
+    CateringModule,
+    MatDialogModule,
   ],
   declarations: [
     VideoComponent,
     HomeShellComponent,
     ContactComponent,
     InfoComponent,
     HoursComponent,
+    WelcomeDialogComponent,
   ],
-  providers: []
+  providers: [],
+  entryComponents: [WelcomeDialogComponent]
 })
 export class HomeModule { }