updated notification channel config for firebase and apn

console/app/components/configure/notification-channels.hbs

@@ -6,7 +6,7 @@
         <Textarea class="form-input w-full" @value={{this.apn.private_key_content}} placeholder="APN Private Key" rows="10" disabled={{this.isLoading}} />
     </InputGroup> --}}
     <InputGroup @wrapperClass="flex flex-row items-center">
-        <UploadButton @name="apn-key" @accept="text/plain,application/x-pem-file,application/x-pkcs12,application/x-x509-ca-cert,.p12,.pem,.p8" @onFileAdded={{this.uploadApnKey}} @buttonText="Upload P8 Key File" @uploadIcon="upload" class="w-auto m-0i mt-0i" />
+        <UploadButton @name="apn-key" @accept="text/plain,application/x-pem-file,application/x-pkcs12,application/x-x509-ca-cert,.p12,.pem,.p8" @onFileAdded={{this.uploadApnKey}} @buttonText="Upload P8 Key File" @icon="upload" class="w-auto m-0i mt-0i" />
         {{#if this.apn.private_key_file}}
             <div class="ml-2.5 text-sm dark:text-white text-black flex flex-row items-center border border-blue-500 rounded-lg px-2 py-0.5 -mt-1">
                 <FaIcon @icon="file-text" @size="sm" class="mr-2 dark:text-white text-black" />
@@ -15,16 +15,32 @@
             </div>
         {{/if}}
     </InputGroup>
-    <InputGroup>
+    <InputGroup @wrapperClass="mb-0i">
         <Checkbox @label="APN Production" @value={{this.apn.production}} @onToggle={{fn (mut this.apn.production)}} @disabled={{this.isLoading}} />
     </InputGroup>
+</ContentPanel>
+
+<ContentPanel @title="Firebase Configutation" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @wrapperClass="flex flex-row items-center mb-0i">
+        <UploadButton @name="firebase-service-account" @accept="text/plain,text/javascript,application/json" @onFileAdded={{this.uploadFirebaseCredentials}} @buttonText="Upload Service Account JSON" @icon="upload" class="w-auto m-0i mt-0i" />
+        {{#if this.firebase.credentials_file}}
+            <div class="ml-2.5 text-sm dark:text-white text-black flex flex-row items-center border border-blue-500 rounded-lg px-2 py-0.5 -mt-1">
+                <FaIcon @icon="file-text" @size="sm" class="mr-2 dark:text-white text-black" />
+                <span>{{this.firebase.credentials_file.original_filename}}</span>
+                <a href="javascript:;" class="text-red-500 ml-2" {{on "click" this.removeFirebaseCredentialsFile}}><FaIcon @icon="times" class="text-red-500" /></a>
+            </div>
+        {{/if}}
+    </InputGroup>
+</ContentPanel>
+
+<ContentPanel @title="Test Push Notification" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
     {{#if this.testResponse}}
         <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
             <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
             <span class="text-xs">{{this.this.testResponse.message}}</span>
         </div>
     {{/if}}
-    <div class="mt-3 rounded-lg bg-gray-900 shadow-inner p-3">
+    <div class="">
         <div class="flex flex-col space-y-2">
             <div class="flex flex-row items-center">
                 <div class="text-sm w-40">Title:</div>
@@ -47,6 +63,8 @@
     </div>
 </ContentPanel>
 
+<Spacer @height="300px" />
+
 <EmberWormhole @to="next-view-section-subheader-actions">
     <Button @type="primary" @size="sm" @icon="save" @text="Save Changes" @onClick={{this.save}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
 </EmberWormhole>

console/app/components/configure/notification-channels.js

@@ -18,14 +18,13 @@ export default class ConfigureNotificationChannelsComponent extends Component {
         team_id: '',
         app_bundle_id: '',
         private_key_path: '',
+        _private_key_path: '',
         private_key_file_id: '',
         private_key_file: null,
         production: true,
     };
-    @tracked fcm = {
-        firebase_credentials_json: '',
-        firebase_database_url: '',
-        firebase_project_name: '',
+    @tracked firebase = {
+        credentials: ''
     };
 
     constructor() {
@@ -38,26 +37,37 @@ export default class ConfigureNotificationChannelsComponent extends Component {
         apnConfig.private_key_file = null;
         apnConfig.private_key_file_id = '';
         apnConfig.private_key_path = '';
+        apnConfig._private_key_path = '';
 
         this.apn = apnConfig;
     }
 
+    @action removeFirebaseCredentialsFile() {
+        const firebaseConfig = this.firebase;
+        firebaseConfig.credentials_file = null;
+        firebaseConfig.credentials_file_id = '';
+        firebaseConfig.credentials = '';
+
+        this.firebase = firebaseConfig;
+    }
+
     @action uploadApnKey(file) {
         try {
             this.fetch.uploadFile.perform(
                 file,
                 {
                     disk: 'local',
-                    path: `apn`,
+                    path: 'apn',
                     subject_uuid: this.currentUser.companyId,
-                    subject_type: `company`,
-                    type: `apn_key`,
+                    subject_type: 'company',
+                    type: 'apn_key',
                 },
                 (uploadedFile) => {
                     const apnConfig = this.apn;
                     apnConfig.private_key_file = uploadedFile;
                     apnConfig.private_key_file_id = uploadedFile.id;
                     apnConfig.private_key_path = uploadedFile.path;
+                    apnConfig._private_key_path = uploadedFile.path;
 
                     this.apn = apnConfig;
                 }
@@ -67,6 +77,31 @@ export default class ConfigureNotificationChannelsComponent extends Component {
         }
     }
 
+    @action uploadFirebaseCredentials(file) {
+        try {
+            this.fetch.uploadFile.perform(
+                file,
+                {
+                    disk: 'local',
+                    path: 'firebase',
+                    subject_uuid: this.currentUser.companyId,
+                    subject_type: 'company',
+                    type: 'firebase_credentials',
+                },
+                (uploadedFile) => {
+                    const firebaseConfig = this.firebase;
+                    firebaseConfig.credentials_file = uploadedFile;
+                    firebaseConfig.credentials_file_id = uploadedFile.id;
+                    firebaseConfig.credentials_file_path = uploadedFile.path;
+
+                    this.firebase = firebaseConfig;
+                }
+            );
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
     @action setConfigValues(config) {
         for (const key in config) {
             if (this[key] !== undefined) {
@@ -94,9 +129,13 @@ export default class ConfigureNotificationChannelsComponent extends Component {
         const apnConfig = this.apn;
         delete apnConfig.private_key_file;
 
+        const firebaseConfig = this.firebase;
+        delete firebaseConfig.credentials_file;
+
         this.fetch
             .post('settings/notification-channels-config', {
                 apn: apnConfig,
+                firebase: firebaseConfig,
             })
             .then(() => {
                 this.notifications.success("Notification channel's configuration saved.");
@@ -112,6 +151,7 @@ export default class ConfigureNotificationChannelsComponent extends Component {
         this.fetch
             .post('settings/test-notification-channels-config', {
                 apn: this.apn,
+                firebase: this.firebase,
                 title: this.testTitle,
                 message: this.testMessage,
                 apnToken: this.apnToken,

console/translations/en-us.yaml

@@ -71,7 +71,9 @@ component:
     upload-images-videos: Upload Images & Videos
     upload-documents: Upload Documents
     upload-documents-files: Upload Documents & Files
+    upload-avatar-files: Upload Custom Avatars
     dropzone-supported-images-videos: Drag and drop image and video files onto this dropzone
+    dropzone-supported-avatars: Drag and drop SVG or PNG files
     dropzone-supported-files: Drag and drop files onto this dropzone
     or-select-button-text: or select files to upload.
     upload-queue: Upload Queue