Merge branch 'pwa_integration'

angular.json

@@ -24,7 +24,8 @@
             "tsConfig": "tsconfig.app.json",
             "aot": true,
             "assets": [
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/styles.scss",
@@ -62,7 +63,9 @@
                   "maximumWarning": "6kb",
                   "maximumError": "10kb"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             }
           }
         },
@@ -92,7 +95,8 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/styles.scss",

ngsw-config.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser": "~10.1.1",
     "@angular/platform-browser-dynamic": "~10.1.1",
     "@angular/router": "~10.1.1",
+    "@angular/service-worker": "~10.1.1",
     "apollo-angular": "^2.4.0",
     "bootstrap": "^4.5.3",
     "jquery": "^3.5.1",

src/app/app.component.html

@@ -3,6 +3,6 @@
     <router-outlet></router-outlet>
     <footer class="secondary-text text-center fs-12 my-4">
         <div class="store-credits"> {{footerText}} </div>
-        <div class="powered-by pt-2"> <small style="font-size: 8px;">Powered by</small> Eragap Tech Company</div>
+        <div class="powered-by pt-2 cursor-pointer" (click)="poweredByEragapTech()"> <small style="font-size: 8px;">Powered by</small> Eragap Tech Company</div>
     </footer>
 </app-main-nav>

src/app/app.component.ts

@@ -96,4 +96,8 @@ export class AppComponent implements OnInit {
     const faviconURL = browserData?.storeInformation?.faviconURL;
     this.favIcon.href = faviconURL;
   }
+
+  poweredByEragapTech(){
+    window.open(`https://eragap.co.in`, "_blank");
+  }
 }

src/app/app.module.ts

@@ -27,6 +27,8 @@ import { ProductDetailsComponent } from './components/product-details/product-de
 import { ProductCardComponent } from './components/utils/product-card/product-card.component';
 import { InterceptorService } from './services';
 import { GraphQLModule } from './graphql.module';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 
 @NgModule({
   declarations: [
@@ -53,7 +55,8 @@ import { GraphQLModule } from './graphql.module';
     MatSelectModule,
     MatCardModule,
     MatProgressSpinnerModule,
-    GraphQLModule
+    GraphQLModule,
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
   ],
   providers: [
     {

src/app/components/homepage/homepage.component.html

@@ -114,14 +114,14 @@ <h5 class="py-3 fs-18">{{item?.displayTitle}}</h5>
                 <div [ngClass]="{'pt-4': (isHandset$ | async)}">
                     <h5 class="fs-18" *ngIf="!(isHandset$ | async)"> follow us:</h5>
                     <div class="pt-1">
-                        <span class="px-2">
-                            <i class="fa fa-facebook cursor-pointer" aria-hidden="true"></i>
+                        <span class="px-2" *ngIf="!!storeFacebookURL">
+                            <i class="fa fa-facebook cursor-pointer" (click)="socialMediaCTA('facebook')" aria-hidden="true"></i>
                         </span>
-                        <span class="px-2">
-                            <i class="fa fa-instagram cursor-pointer" aria-hidden="true"></i>
+                        <span class="px-2" *ngIf="!!storeInstagramURL">
+                            <i class="fa fa-instagram cursor-pointer" (click)="socialMediaCTA('instagram')" aria-hidden="true"></i>
                         </span>
-                        <span class="px-2">
-                            <i class="fa fa-twitter cursor-pointer" aria-hidden="true"></i>
+                        <span class="px-2" *ngIf="!!storeTwitterURL">
+                            <i class="fa fa-twitter cursor-pointer" (click)="socialMediaCTA('twitter')" aria-hidden="true"></i>
                         </span>
                     </div>
                     <aside class="py-3">

src/app/components/homepage/homepage.component.ts

@@ -30,6 +30,10 @@ export class HomepageComponent implements OnInit {
   storeAddressLineOne = browserData?.storeInformation?.addressLineOne;
   storeAddressLineTwo = browserData?.storeInformation?.addressLineTwo;
   storeGoogleMapLocationURL = browserData?.storeInformation?.googleMapsLocationURL;
+  storeFacebookURL = browserData?.storeInformation?.socialFacebook;
+  storeInstagramURL = browserData?.storeInformation?.socialInstagram;
+  storeTwitterURL = browserData?.storeInformation?.socialTwitter;
+
 
   constructor(
     private _utilService: UtilsService,
@@ -71,6 +75,24 @@ export class HomepageComponent implements OnInit {
     window.open(`tel:${this.storeContactNumber}`, "_blank");
   }
 
+  socialMediaCTA(platform: string) {
+    switch (platform) {
+      case 'facebook':
+        window.open(`${this.storeFacebookURL}`, "_blank");
+        break;
+
+      case 'instagram':
+        window.open(`${this.storeInstagramURL}`, "_blank");
+        break;
+      case 'twitter':
+        window.open(`${this.storeTwitterURL}`, "_blank");
+        break;
+
+      default:
+        break;
+    }
+  }
+
 }
 
 

src/app/components/main-nav/main-nav.component.html

@@ -18,7 +18,7 @@
     </div>
     <div class="copyright-text pt-2">
       <span class="d-block secondary-text fs-12">{{copyrightText}}</span>
-      <span class="d-block secondary-text fs-12 pt-2"> <small style="font-size: 8px;">Powered by</small> Eragap Tech Company</span>
+      <span class="d-block secondary-text fs-12 pt-2 cursor-pointer" (click)="poweredByEragapTech()"> <small style="font-size: 8px;">Powered by</small> Eragap Tech Company</span>
     </div>
   </mat-sidenav>
   <mat-sidenav-content>

src/app/components/main-nav/main-nav.component.ts

@@ -57,4 +57,8 @@ export class MainNavComponent implements OnInit {
     this._stateManagementService.updateItemCategoryClicked(categoryInformation, 'lastItemCategoryClicked');
   }
 
+  poweredByEragapTech(){
+    window.open(`https://eragap.co.in`, "_blank");
+  }
+
 }

src/assets/data/inbrowser-data.ts

@@ -28,9 +28,9 @@ export class browserData {
         emailAddress: "[email protected]",
         addressLineOne: "Sector 1, Shantinagar",
         addressLineTwo: "Miraroad (E), Thane 401107",
-        socialFacebook: "urlhere",
-        socialInstagram: null,
-        socialTwitter: null,
+        socialFacebook: "https://eragap.co.in/",
+        socialInstagram: "https://eragap.co.in/",
+        socialTwitter: 'https://eragap.co.in/',
     };
 
     static footerContent = {

src/index.html

@@ -9,14 +9,17 @@
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
-  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Poppins:wght@300;400;500&display=swap" rel="stylesheet"> 
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&amp;family=Poppins:wght@300;400;500&amp;display=swap" rel="stylesheet"> 
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#ffebcd">
 </head>
 
 <body>
   <app-root></app-root>
 
   <!-- to lazyload images -->
   <!-- <script src="lazysizes.min.js" async=""></script> -->
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 
 </html>

src/manifest.webmanifest

@@ -0,0 +1,35 @@
+{
+  "name": "Eragap Tech Company",
+  "short_name": "Eragap Tech",
+  "theme_color": "#ffebcd",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}