added contact page

package-lock.json

@@ -397,7 +397,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -418,12 +419,14 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -438,17 +441,20 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -578,6 +584,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -592,6 +599,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -599,12 +607,14 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -623,6 +633,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -703,7 +714,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -715,6 +727,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -800,7 +813,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -836,6 +850,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -855,6 +870,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -898,12 +914,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
@@ -1443,6 +1461,21 @@
         "protobufjs": "^6.8.6"
       }
     },
+    "@ionic-native/call-number": {
+      "version": "5.21.4",
+      "resolved": "https://registry.npmjs.org/@ionic-native/call-number/-/call-number-5.21.4.tgz",
+      "integrity": "sha512-BWm8cNJBGKO/luG4c7iH0vdrs3ZP45xgDpo4lZ1h8fN3vGTKrG7P6XgVQJ1gQo4jRz4XnEPYatWBYH1A0BcAog==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      },
+      "dependencies": {
+        "@types/cordova": {
+          "version": "0.0.34",
+          "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+          "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+        }
+      }
+    },
     "@ionic-native/core": {
       "version": "5.19.1",
       "resolved": "https://registry.npmjs.org/@ionic-native/core/-/core-5.19.1.tgz",
@@ -2955,6 +2988,11 @@
         "unset-value": "^1.0.0"
       }
     },
+    "call-number": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-number/-/call-number-1.0.1.tgz",
+      "integrity": "sha1-v52q5If9alVz+JqjZV++ivA2r9I="
+    },
     "caller-callsite": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
@@ -6814,7 +6852,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -6857,7 +6896,8 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -6868,7 +6908,8 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -6985,7 +7026,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -6997,6 +7039,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7026,6 +7069,7 @@
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7044,6 +7088,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7137,6 +7182,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7222,7 +7268,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -7258,6 +7305,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -7277,6 +7325,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -7320,12 +7369,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
@@ -11885,6 +11936,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -12478,7 +12530,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -12521,7 +12574,8 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -12532,7 +12586,8 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -12649,7 +12704,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -12661,6 +12717,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -12690,6 +12747,7 @@
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -12708,6 +12766,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -12788,7 +12847,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -12800,6 +12860,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -12885,7 +12946,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -12921,6 +12983,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -12940,6 +13003,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -12983,12 +13047,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },

package.json

 {
-    "name": "getme",
-    "version": "0.0.1",
-    "author": "Techware Software Solutions Pvt Ltd",
-    "homepage": "https://techware.com/",
-    "scripts": {
-        "ng": "ng",
-        "start": "ng serve",
-        "build": "ng build",
-        "test": "ng test",
-        "lint": "ng lint",
-        "e2e": "ng e2e"
+  "name": "getme",
+  "version": "0.0.1",
+  "author": "Techware Software Solutions Pvt Ltd",
+  "homepage": "https://techware.com/",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@agm/core": "^1.1.0",
+    "@angular/animations": "^8.2.14",
+    "@angular/common": "~8.1.2",
+    "@angular/compiler": "~8.1.2",
+    "@angular/core": "~8.1.2",
+    "@angular/fire": "^5.3.0",
+    "@angular/forms": "~8.1.2",
+    "@angular/platform-browser": "~8.1.2",
+    "@angular/platform-browser-dynamic": "~8.1.2",
+    "@angular/router": "~8.1.2",
+    "@ionic-native/call-number": "^5.21.4",
+    "@ionic-native/core": "^5.19.1",
+    "@ionic-native/geolocation": "^5.19.1",
+    "@ionic-native/google-plus": "^5.19.1",
+    "@ionic-native/native-geocoder": "^5.19.1",
+    "@ionic-native/social-sharing": "^5.20.0",
+    "@ionic-native/splash-screen": "^5.19.1",
+    "@ionic-native/status-bar": "^5.19.1",
+    "@ionic/angular": "^4.11.8",
+    "@ionic/storage": "^2.2.0",
+    "@types/googlemaps": "^3.39.2",
+    "agm-direction": "^0.7.9",
+    "call-number": "^1.0.1",
+    "cordova-android": "8.0.0",
+    "cordova-plugin-device": "^2.0.3",
+    "cordova-plugin-geolocation": "^4.0.2",
+    "cordova-plugin-googleplus": "^8.2.1",
+    "cordova-plugin-ionic-keyboard": "^2.2.0",
+    "cordova-plugin-ionic-webview": "^4.1.3",
+    "cordova-plugin-nativegeocoder": "^3.2.2",
+    "cordova-plugin-splashscreen": "^5.0.3",
+    "cordova-plugin-statusbar": "^2.4.3",
+    "cordova-plugin-whitelist": "^1.3.4",
+    "cordova-plugin-x-socialsharing": "^5.6.3",
+    "cordova-sqlite-storage": "^3.4.1",
+    "core-js": "^2.6.11",
+    "es6-promise-plugin": "^4.2.2",
+    "firebase": "^6.6.2",
+    "rxjs": "^6.5.4",
+    "rxjs-compat": "^6.5.4",
+    "tslib": "^1.9.0",
+    "zone.js": "~0.9.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/architect": "~0.801.2",
+    "@angular-devkit/build-angular": "~0.801.2",
+    "@angular-devkit/core": "~8.1.2",
+    "@angular-devkit/schematics": "~8.1.2",
+    "@angular/cli": "~8.1.2",
+    "@angular/compiler": "~8.1.2",
+    "@angular/compiler-cli": "~8.1.2",
+    "@angular/language-service": "~8.1.2",
+    "@ionic/angular-toolkit": "~2.0.0",
+    "@types/jasmine": "~3.3.8",
+    "@types/jasminewd2": "^2.0.8",
+    "@types/node": "~8.9.4",
+    "codelyzer": "^5.2.1",
+    "jasmine-core": "~3.4.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.5.1",
+    "protractor": "~5.4.0",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.15.0",
+    "typescript": "~3.4.3"
+  },
+  "description": "An Ionic project",
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-whitelist": {},
+      "cordova-plugin-statusbar": {},
+      "cordova-plugin-device": {},
+      "cordova-plugin-splashscreen": {},
+      "cordova-plugin-ionic-webview": {
+        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
+      },
+      "cordova-plugin-ionic-keyboard": {},
+      "cordova-plugin-geolocation": {
+        "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
+      },
+      "cordova-plugin-nativegeocoder": {},
+      "cordova-sqlite-storage": {},
+      "cordova-plugin-googleplus": {
+        "REVERSED_CLIENT_ID": "com.googleusercontent.apps.949385251610-a6lrfr6uhr73991e38t3t013jj3v56a9",
+        "PLAY_SERVICES_VERSION": "15.0.1"
+      },
+      "cordova-plugin-x-socialsharing": {
+        "ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
+      },
+      "mx.ferreyra.callnumber": {}
     },
-    "private": true,
-    "dependencies": {
-        "@agm/core": "^1.1.0",
-        "@angular/animations": "^8.2.14",
-        "@angular/common": "~8.1.2",
-        "@angular/compiler": "~8.1.2",
-        "@angular/core": "~8.1.2",
-        "@angular/fire": "^5.3.0",
-        "@angular/forms": "~8.1.2",
-        "@angular/platform-browser": "~8.1.2",
-        "@angular/platform-browser-dynamic": "~8.1.2",
-        "@angular/router": "~8.1.2",
-        "@ionic-native/core": "^5.19.1",
-        "@ionic-native/geolocation": "^5.19.1",
-        "@ionic-native/google-plus": "^5.19.1",
-        "@ionic-native/native-geocoder": "^5.19.1",
-        "@ionic-native/social-sharing": "^5.20.0",
-        "@ionic-native/splash-screen": "^5.19.1",
-        "@ionic-native/status-bar": "^5.19.1",
-        "@ionic/angular": "^4.11.8",
-        "@ionic/storage": "^2.2.0",
-        "@types/googlemaps": "^3.39.2",
-        "agm-direction": "^0.7.9",
-        "cordova-android": "8.0.0",
-        "cordova-plugin-device": "^2.0.3",
-        "cordova-plugin-geolocation": "^4.0.2",
-        "cordova-plugin-googleplus": "^8.2.1",
-        "cordova-plugin-ionic-keyboard": "^2.2.0",
-        "cordova-plugin-ionic-webview": "^4.1.3",
-        "cordova-plugin-nativegeocoder": "^3.2.2",
-        "cordova-plugin-splashscreen": "^5.0.3",
-        "cordova-plugin-statusbar": "^2.4.3",
-        "cordova-plugin-whitelist": "^1.3.4",
-        "cordova-plugin-x-socialsharing": "^5.6.3",
-        "cordova-sqlite-storage": "^3.4.1",
-        "core-js": "^2.6.11",
-        "es6-promise-plugin": "^4.2.2",
-        "firebase": "^6.6.2",
-        "rxjs": "^6.5.4",
-        "rxjs-compat": "^6.5.4",
-        "tslib": "^1.9.0",
-        "zone.js": "~0.9.1"
-    },
-    "devDependencies": {
-        "@angular-devkit/architect": "~0.801.2",
-        "@angular-devkit/build-angular": "~0.801.2",
-        "@angular-devkit/core": "~8.1.2",
-        "@angular-devkit/schematics": "~8.1.2",
-        "@angular/cli": "~8.1.2",
-        "@angular/compiler": "~8.1.2",
-        "@angular/compiler-cli": "~8.1.2",
-        "@angular/language-service": "~8.1.2",
-        "@ionic/angular-toolkit": "~2.0.0",
-        "@types/jasmine": "~3.3.8",
-        "@types/jasminewd2": "^2.0.8",
-        "@types/node": "~8.9.4",
-        "codelyzer": "^5.2.1",
-        "jasmine-core": "~3.4.0",
-        "jasmine-spec-reporter": "~4.2.1",
-        "karma": "~4.1.0",
-        "karma-chrome-launcher": "~2.2.0",
-        "karma-coverage-istanbul-reporter": "~2.0.1",
-        "karma-jasmine": "~2.0.1",
-        "karma-jasmine-html-reporter": "^1.5.1",
-        "protractor": "~5.4.0",
-        "ts-node": "~7.0.0",
-        "tslint": "~5.15.0",
-        "typescript": "~3.4.3"
-    },
-    "description": "An Ionic project",
-    "cordova": {
-        "plugins": {
-            "cordova-plugin-whitelist": {},
-            "cordova-plugin-statusbar": {},
-            "cordova-plugin-device": {},
-            "cordova-plugin-splashscreen": {},
-            "cordova-plugin-ionic-webview": {
-                "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
-            },
-            "cordova-plugin-ionic-keyboard": {},
-            "cordova-plugin-geolocation": {
-                "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
-            },
-            "cordova-plugin-nativegeocoder": {},
-            "cordova-sqlite-storage": {},
-            "cordova-plugin-googleplus": {
-                "REVERSED_CLIENT_ID": "com.googleusercontent.apps.949385251610-a6lrfr6uhr73991e38t3t013jj3v56a9",
-                "PLAY_SERVICES_VERSION": "15.0.1"
-            },
-            "cordova-plugin-x-socialsharing": {
-                "ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
-            }
-        },
-        "platforms": [
-            "android"
-        ]
-    }
+    "platforms": [
+      "android"
+    ]
+  }
 }

src/app/app-routing.module.ts

@@ -100,7 +100,8 @@ const routes: Routes = [
   { path: 'address', loadChildren: './address/address.module#AddressPageModule' },
   { path: 'success', loadChildren: './success/success.module#SuccessPageModule' },
   { path: 'failed', loadChildren: './failed/failed.module#FailedPageModule' },
-  { path: 'preference', loadChildren: './preference/preference.module#PreferencePageModule' }
+  { path: 'preference', loadChildren: './preference/preference.module#PreferencePageModule' },
+  { path: 'contact', loadChildren: './contact/contact.module#ContactPageModule' }
 
 ];
 @NgModule({

src/app/app.component.html

@@ -101,7 +101,7 @@
         (click)="setActive5()"
       ></div>
     </li>
-    <li (click)="goToPage('profile')">
+    <li (click)="goToPage('contact')">
       <div
         class="icon_sec m6_icon"
         [class.m6_icon_act]="sec_active6"

src/app/app.module.ts

@@ -29,7 +29,7 @@ import { DeliverypopPageModule } from './deliverypop/deliverypop.module';
 import { FormsModule } from '@angular/forms';
 import { SearchmodalPageModule } from './searchmodal/searchmodal.module';
 import { SocialSharing } from '@ionic-native/social-sharing/ngx';
-
+import { CallNumber } from '@ionic-native/call-number/ngx';
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
@@ -48,6 +48,7 @@ import { SocialSharing } from '@ionic-native/social-sharing/ngx';
     FormsModule
   ],
   providers: [
+    CallNumber,
     StatusBar,
     SplashScreen,
     Geolocation,

src/app/contact/contact.component.html

-<p>
-  contact works!
-</p>

src/app/contact/contact.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-contact',
-  templateUrl: './contact.component.html',
-  styleUrls: ['./contact.component.scss'],
-})
-export class ContactComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {}
-
-}

src/app/contact/contact.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ContactPage } from './contact.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ContactPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ContactPage]
+})
+export class ContactPageModule {}

src/app/contact/contact.page.html

+<div class="nav_header">
+  <button class="nav_btn nav_back floatLeft" (click)="goBack()">
+    <img src="../assets/Group17_2.png" />
+  </button>
+  <div class="nav_title floatLeft">
+    <h4>Send Us</h4>
+  </div>
+  <div class="clear"></div>
+</div>
+
+<ion-content>
+  <form
+    novalidate
+    #contactUsForm="ngForm"
+    class="contact_wrapper"
+    *ngIf="userData && contactData"
+  >
+    <div class="form_div">
+      <div class="row">
+        <p>Write Us</p>
+        <textarea
+          required
+          name="writeUs"
+          [(ngModel)]="contactData.message"
+          #writeUs="ngModel"
+          class="form-control"
+          rows="8"
+          placeholder="Type here.."
+        ></textarea>
+        <div
+          class="md-errors-spacer"
+          [hidden]="writeUs.valid || submitted == false"
+          class="ion-padding-start"
+        >
+          This is required.
+        </div>
+      </div>
+      <div class="row">
+        <button (click)="onContactSubmit(contactUsForm)" class="login_btn">
+          SENT
+        </button>
+      </div>
+      <div class="row">
+        <span>or</span>
+      </div>
+      <div class="row">
+        <button (click)="callUs()" class="login_btn" [disabled]="submitted">
+          Call Us
+        </button>
+      </div>
+    </div>
+  </form>
+</ion-content>
+
+<div class="loader" *ngIf="contactService.loader">
+  <div class="lds-ripple">
+    <div></div>
+    <div></div>
+  </div>
+</div>

src/app/contact/contact.page.scss

+.contact_wrapper {
+  width: 80%;
+  margin: 0 auto;
+  padding-top: 30px;
+  .form_div {
+    .row {
+      margin: 20px;
+      .form-control {
+        border: 1px solid rgba(215, 213, 228, 1);
+        background: transparent;
+        color: #333;
+        width: 100%;
+        border-radius: 8px;
+        font-size: 16px;
+        padding: 11px 15px;
+        resize: none;
+        &::placeholder {
+          color: rgba(215, 213, 228, 1);
+        }
+      }
+      .login_btn {
+        width: 100%;
+        background-color: #29285b;
+        color: #fff;
+        border-radius: 8px;
+        height: 45px;
+        font-size: 16px;
+      }
+      p {
+        text-align: left;
+        color: rgba(59, 57, 77, 1);
+        margin: 0px;
+        font-weight: bolder;
+        padding-bottom: 10px;
+      }
+
+      span {
+        opacity: 0.6;
+        text-align: center !important;
+        display: block;
+      }
+    }
+  }
+}

src/app/contact/contact.component.spec.ts → src/app/contact/contact.page.spec.ts

 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ContactComponent } from './contact.component';
+import { ContactPage } from './contact.page';
 
-describe('ContactComponent', () => {
-  let component: ContactComponent;
-  let fixture: ComponentFixture<ContactComponent>;
+describe('ContactPage', () => {
+  let component: ContactPage;
+  let fixture: ComponentFixture<ContactPage>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ContactComponent ],
+      declarations: [ ContactPage ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ContactComponent);
+    fixture = TestBed.createComponent(ContactPage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/contact/contact.page.ts

+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { ContactData } from 'src/config/services/contact';
+import { SubjectService } from '../../config/subject.service';
+import { NgForm } from '@angular/forms';
+import { ContactService } from 'src/config/contact.service';
+import { ServiceService } from '../../config/service.service';
+import { CallNumber } from '@ionic-native/call-number/ngx';
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.page.html',
+  styleUrls: ['./contact.page.scss']
+})
+export class ContactPage implements OnInit {
+  submitted = false;
+  userData: any;
+  contactData: ContactData = {
+    from: '',
+    message: '',
+    contactId: ''
+  };
+  constructor(
+    private location: Location,
+    public subjectService: SubjectService,
+    public contactService: ContactService,
+    public service: ServiceService,
+    private callNumber: CallNumber
+  ) {
+    // Gets userdata
+    this.subjectService.getUserData().subscribe(userData => {
+      if (userData) {
+        this.userData = JSON.parse(userData);
+        this.contactData.from = JSON.parse(userData).emailId;
+        console.log(userData);
+      } else {
+        console.log(userData);
+      }
+    });
+  }
+
+  ngOnInit() {}
+
+  callUs() {
+    this.callNumber
+      .callNumber('+61 411 622 880', true)
+      .then(res => console.log('Launched dialer!', res))
+      .catch(err => console.log('Error launching dialer', err));
+  }
+
+  onContactSubmit(form: NgForm) {
+    this.submitted = true;
+    console.log(form.value);
+    if (form.valid && form.value.message !== '') {
+      const contData = { ...this.contactData, from: this.userData.emailId };
+      this.contactService.contactCreate(contData);
+    } else {
+      console.log('form not valid');
+      this.submitted = false;
+      this.service.showToast('Invalid request!', 'top', 'my-error', 1000);
+    }
+  }
+
+  goBack() {
+    this.location.back();
+  }
+}
+
+// +61 411 622 880

src/app/orderplaced/orderplaced.page.html

@@ -102,7 +102,7 @@
       </h5>
       <button
         class="cancel_btn"
-        (click)="cancellOrder(data.orderId)"
+        (click)="goToPage('contact')"
         *ngIf="cancelDelivery > 0 && data.orderStatus != 0 && data.orderStatus != 8"
       >
         CANCEL THIS ORDER

src/config/auth.service.ts

-import { Injectable } from '@angular/core';
-import { User, Signup, Address } from './services/user';
-import { auth } from 'firebase/app';
-import { Router, ActivatedRoute } from '@angular/router';
-import { AngularFireAuth } from '@angular/fire/auth';
+import { Injectable } from "@angular/core";
+import { User, Signup, Address } from "./services/user";
+import { auth } from "firebase/app";
+import { Router, ActivatedRoute } from "@angular/router";
+import { AngularFireAuth } from "@angular/fire/auth";
 import {
   AngularFirestore,
   AngularFirestoreDocument,
   AngularFirestoreCollection
-} from '@angular/fire/firestore';
-import { ServiceService } from './../config/service.service';
-import { SubjectService } from './../config/subject.service';
-import { GooglePlus } from '@ionic-native/google-plus/ngx';
-import { take } from 'rxjs/operators';
-import { from } from 'rxjs';
+} from "@angular/fire/firestore";
+import { ServiceService } from "./../config/service.service";
+import { SubjectService } from "./../config/subject.service";
+import { GooglePlus } from "@ionic-native/google-plus/ngx";
+import { take } from "rxjs/operators";
+import { from } from "rxjs";
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root"
 })
 export class AuthService {
   loader: boolean;
@@ -30,33 +30,33 @@ export class AuthService {
     this.loader = true;
     this.type = 1;
     this.afAuth.authState.subscribe(user => {
-      console.log('here');
+      console.log("here");
       console.log(user);
       if (user) {
         this.subjectService.sendLoginData(false);
         this.userData = user;
         console.log(this.userData);
-        this.service.set('user', JSON.stringify(this.userData));
+        this.service.set("user", JSON.stringify(this.userData));
         this.SetUserData(user);
         this.loader = false;
         if (this.type === 1) {
-          this.router.navigateByUrl('home');
+          this.router.navigateByUrl("home");
         } else {
-          this.router.navigateByUrl('verification');
+          this.router.navigateByUrl("verification");
         }
       } else {
-        console.log('here too');
+        console.log("here too");
         this.loader = false;
         this.subjectService.sendLoginData(true);
-        this.service.set('user', null);
-        JSON.parse(localStorage.getItem('user'));
-        this.router.navigateByUrl('login');
+        this.service.set("user", null);
+        JSON.parse(localStorage.getItem("user"));
+        this.router.navigateByUrl("login");
       }
     });
   }
 
   get isLoggedIn(): boolean {
-    const user = JSON.parse(localStorage.getItem('user'));
+    const user = JSON.parse(localStorage.getItem("user"));
     return user !== null && user.emailVerified !== false ? true : false;
   }
   userData: any;
@@ -70,21 +70,21 @@ export class AuthService {
     return this.afAuth.auth
       .signInWithEmailAndPassword(email, password)
       .then(result => {
-        console.log('success');
+        console.log("success");
         document.body.scrollTop = document.documentElement.scrollTop = 0;
         this.SetUserData(result.user);
       })
       .catch(error => {
         this.loader = false;
-        this.service.showToast(error.message, 'bottom', 'my-error', 1000);
+        this.service.showToast(error.message, "bottom", "my-error", 1000);
       });
   }
 
   public async verify(otp: string) {
     this.loader = true;
     const custRef: AngularFirestoreCollection<any> = this.afs.collection(
-      'customers',
-      ref => ref.where('otp', '==', otp).where('uid', '==', this.userData.uid)
+      "customers",
+      ref => ref.where("otp", "==", otp).where("uid", "==", this.userData.uid)
     );
     custRef
       .valueChanges()
@@ -92,18 +92,18 @@ export class AuthService {
       .subscribe((value: User[]) => {
         if (value.length > 0) {
           this.afs
-            .collection('customers')
+            .collection("customers")
             .doc(this.userData.uid)
-            .update({ otp: '', phoneVerified: true });
-          this.service.set('type', 1);
+            .update({ otp: "", phoneVerified: true });
+          this.service.set("type", 1);
           this.loader = false;
-          this.router.navigateByUrl('nearby');
+          this.router.navigateByUrl("nearby");
         } else {
           this.loader = false;
           this.service.showToast(
-            'Please input valid OTP',
-            'bottom',
-            'my-error',
+            "Please input valid OTP",
+            "bottom",
+            "my-error",
             1000
           );
         }
@@ -112,7 +112,7 @@ export class AuthService {
 
   profilePic(pic) {
     this.afs
-      .collection('customers')
+      .collection("customers")
       .doc(this.userData.uid)
       .update({ profilePhoto: pic });
   }
@@ -123,7 +123,7 @@ export class AuthService {
     this.afAuth.auth
       .signInWithPopup(new auth.GoogleAuthProvider())
       .then(result => {
-        console.log('success');
+        console.log("success");
         console.log(result.additionalUserInfo.isNewUser);
         if (
           result.additionalUserInfo &&
@@ -150,11 +150,11 @@ export class AuthService {
         .signInWithPopup(new auth.FacebookAuthProvider())
         .then(result => {
           this.loader = false;
-          console.log('success');
+          console.log("success");
           console.log(result);
         })
         .catch(err => {
-          this.service.showToast(err.message, 'bottom', 'my-error', 1000);
+          this.service.showToast(err.message, "bottom", "my-error", 1000);
         });
     } catch (error) {
       This.loader = false;
@@ -181,7 +181,7 @@ export class AuthService {
         loginType: value.loginType
       };
       this.loggedUser = userData;
-      this.service.set('userData', JSON.stringify(this.loggedUser));
+      this.service.set("userData", JSON.stringify(this.loggedUser));
       this.subjectService.sendUserData(JSON.stringify(this.loggedUser));
       console.log(this.loggedUser);
     });
@@ -191,9 +191,9 @@ export class AuthService {
     this.loader = true;
     return this.afAuth.auth.signOut().then(() => {
       this.subjectService.sendLoginData(true);
-      this.service.remove('user');
+      this.service.remove("user");
       this.loader = false;
-      console.log('logout');
+      console.log("logout");
     });
   }
 
@@ -201,9 +201,9 @@ export class AuthService {
     this.type = 2;
     console.log(userData.user);
     const currencyData = {
-      currId: '123',
-      currName: 'Australian dollar',
-      symbol: 'A$'
+      currId: "123",
+      currName: "Australian dollar",
+      symbol: "A$"
     };
     const otp = Math.floor(1000 + Math.random() * 9000);
     userData = userData.user;
@@ -223,11 +223,11 @@ export class AuthService {
     this.userPostData = postData;
     console.log(postData);
     this.afs
-      .collection('customers')
+      .collection("customers")
       .doc(userData.uid)
       .set(postData)
       .then(() => {
-        console.log('successs');
+        console.log("successs");
       });
   }
 
@@ -242,15 +242,15 @@ export class AuthService {
         console.log(result.user);
         this.afAuth.auth.currentUser.sendEmailVerification();
         const currencyData = {
-          currId: '123',
-          currName: 'Australian dollar',
-          symbol: 'A$'
+          currId: "123",
+          currName: "Australian dollar",
+          symbol: "A$"
         };
         const custData = result.user;
         const postData: User = {
           uid: custData.uid,
           status: true,
-          profilePhoto: '',
+          profilePhoto: "",
           phoneVerified: false,
           phone: userData.phone,
           name: userData.name,
@@ -263,11 +263,11 @@ export class AuthService {
         this.userPostData = postData;
         console.log(postData);
         this.afs
-          .collection('customers')
+          .collection("customers")
           .doc(custData.uid)
           .set(postData)
           .then(() => {
-            console.log('successs');
+            console.log("successs");
           });
         this.loader = false;
       })
@@ -282,7 +282,7 @@ export class AuthService {
     console.log(this.userData.uid);
     this.loader = true;
     this.afs
-      .collection('address')
+      .collection("address")
       .add({
         uid: this.userData.uid
       })
@@ -306,13 +306,13 @@ export class AuthService {
         const neworderId = docRef.id;
         console.log(addrData);
         this.afs
-          .collection('address')
+          .collection("address")
           .doc(neworderId)
           .set(addrData)
           .then(() => {
-            console.log('Address add Successfully');
-            this.service.set('user', JSON.stringify(this.userData));
-            this.router.navigateByUrl('home');
+            console.log("Address add Successfully");
+            this.service.set("user", JSON.stringify(this.userData));
+            this.router.navigateByUrl("home");
             document.body.scrollTop = document.documentElement.scrollTop = 0;
           })
           .catch(err => {

src/config/contact.service.ts

+import { Injectable } from '@angular/core';
+import {
+  AngularFirestore,
+  AngularFirestoreCollection
+} from '@angular/fire/firestore';
+import { take } from 'rxjs/operators';
+import { ContactData } from './services/contact';
+import { ServiceService } from './service.service';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactService {
+  loader: boolean;
+  constructor(
+    public afs: AngularFirestore,
+    private router: Router,
+    private service: ServiceService
+  ) {
+    this.loader = false;
+  }
+
+  contactCreate(data: ContactData) {
+    this.loader = true;
+    this.afs
+      .collection('contacts')
+      .add({})
+      .then(docRef => {
+        data.contactId = docRef.id;
+        this.afs
+          .collection('contacts')
+          .doc(data.contactId)
+          .set(data)
+          .then(() => {
+            this.service
+              .showToast('Thank you for your feedback!', 'top', 'my-toast', 500)
+              .then(() => {
+                this.loader = false;
+                console.log('redirected');
+                setTimeout(() => {
+                  this.router.navigateByUrl('home');
+                }, 2100);
+              })
+              .catch(err => {
+                this.loader = false;
+              });
+          });
+      });
+  }
+}

src/config/services/contact.ts

+export interface ContactData {
+  from: string;
+  contactId: string;
+  message: string;
+}