Merge pull request #2 from BuildFire/create-controllers

fix(ui-issues): fix safe area issue, fix console error

Author: mas-iota

control/content/js/contentController.js

@@ -39,6 +39,7 @@ const contentController = {
     const { settingData, isNewInstance } = await Settings.get();
     contentState.settings = settingData;
     if (isNewInstance) {
+      await Settings.save(contentState.settings);
       await UserCodeSequences.initializeCodeSequence();
       await AnalyticsManager.init();
     }

control/transaction/js/tableController.js

@@ -7,9 +7,9 @@ const searchTableConfig = {
   },
   columns: [{
     header: 'Date',
-    data: '<span class=\'margin-bottom-five\'>${data.date}</span>',
+    data: '<span class=\'margin-bottom-five\'>${TransactionController.formatDate(data.createdOn)}</span>',
     type: 'string',
-    width: '100px',
+    width: '165px',
     sortBy: 'date1',
     defaultSorted: true,
   }, {
@@ -21,18 +21,18 @@ const searchTableConfig = {
     header: 'Stamps',
     data: '<span class=\'margin-bottom-five\'>${data.changeValue}</span>',
     type: 'string',
-    width: '100px',
+    width: '90px',
   }, {
     header: 'Rewards',
     data: '<span class=\'margin-bottom-five\'>${TransactionController.getRewards(data)}</span>',
     type: 'string',
-    width: '100px',
+    width: '90px',
   },
   {
     header: 'Redeems',
     data: '<span class=\'margin-bottom-five\'>${TransactionController.getRedeems(data)}</span>',
     type: 'string',
-    width: '100px',
+    width: '90px',
   },
   {
     header: 'Authorized by',
@@ -131,6 +131,23 @@ const TransactionController = {
 
     return 0;
   },
+  formatDate(dateString) {
+    console.log('dateString:', dateString);
+    const date = new Date(dateString);
+
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const year = date.getFullYear();
+
+    let hours = date.getHours();
+    const minutes = date.getMinutes();
+
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12 || 12;
+
+    const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
+    return `${month}/${day}/${year}, ${hours}:${formattedMinutes} ${ampm}`;
+  },
 
   init() {
     this.transactionsTable = new SearchTable('transactionTableContainer', searchTableConfig);

resources/languages.json

@@ -227,6 +227,22 @@
           "defaultValue": "Scanner works only on devices.",
           "required": true,
           "inputType": "text"
+        },
+        "networkError": {
+          "title": "Check connection and retry.",
+          "placeholder": "Check connection and retry.",
+          "maxLength": 80,
+          "defaultValue": "Check connection and retry.",
+          "required": true,
+          "inputType": "text"
+        },
+        "cameraPermissionRequired": {
+          "title": "Camera permission required.",
+          "placeholder": "Access to the camera has been prohibited, please enable it in the settings app to continue",
+          "maxLength": 80,
+          "defaultValue": "Access to the camera has been prohibited, please enable it in the settings app to continue",
+          "required": true,
+          "inputType": "text"
         }
       }
     },

widget/global/js/repositories/Settings.js

@@ -18,7 +18,6 @@ class Settings {
         if (err) return reject(err);
         if (!res || !res.data || !Object.keys(res.data).length) {
           const data = new Setting().toJSON();
-          Settings.save(data);
           resolve({ settingData: data, isNewInstance: true });
         } else {
           const data = new Setting(res.data).toJSON();

widget/index.html

@@ -85,7 +85,7 @@ <h4 class="dialog-userid-title" bfString="general.enterUserId"></h4>
             <label class="mdc-text-field mdc-text-field--filled">
                 <span class="mdc-text-field__ripple"></span>
                 <span class="mdc-floating-label hint-text" id="userId" bfString="general.userId"></span>
-                <input id="userIdField" class="mdc-text-field__input" type="number" aria-labelledby="userId">
+                <input id="userIdField" class="mdc-text-field__input" type="number" inputmode="decimal" aria-labelledby="userId">
                 <span class="mdc-line-ripple"></span>
             </label>
             <span id="userIdError" class="userid-error"></span>

widget/js/pages/customer/CustomerView.js

@@ -116,8 +116,14 @@ const CustomerView = {
     this._initRewardList(availbleRewardLength);
     this._updateConfirmButton();
   },
-  _addNewTransaction() {
+  async _addNewTransaction() {
     try {
+      if (!navigator.onLine) {
+        buildfire.dialog.toast({
+          message: await getLanguage('general.networkError'),
+        });
+        return;
+      }
       const checkboxes = document.querySelectorAll('input[type="checkbox"]');
       this._uiElement.confirmTransactionBtn.disabled = true;
 
@@ -342,6 +348,11 @@ const CustomerView = {
       availableRewardList.appendChild(emptyState);
     }
   },
+  refreshRewardList() {
+    let availbleRewardLength = CustomerController.getAvailbleRewardLength(this.newStamps, widgetAppState.currentCustomer.currentStamps, widgetAppState.settings.cardSize);
+    availbleRewardLength += widgetAppState.currentCustomer.availableRewards.length;
+    this._initRewardList(availbleRewardLength);
+  },
 
   _createCheckbox(index) {
     const template = document.getElementById('template');

widget/js/pages/employee/EmployeeView.js

@@ -17,7 +17,7 @@ const EmployeeView = {
 
     const formFab = new buildfire.components.fabSpeedDial('#fabSpeedDialContainer', formOptions);
     const scannerFab = new buildfire.components.fabSpeedDial('#fabSpeedDialContainer', scannerOptions);
-    scannerFab.onMainButtonClick = () => this._openScanner();
+    scannerFab.onMainButtonClick = () => this._openScanner(true, true);
     formFab.onMainButtonClick = () => this._openMaterialForm();
   },
 
@@ -35,6 +35,12 @@ const EmployeeView = {
     });
 
     confirmBtn.addEventListener('click', async () => {
+      if (!navigator.onLine) {
+        buildfire.dialog.toast({
+          message: await getLanguage('general.networkError'),
+        });
+        return;
+      }
       const userId = document.getElementById('userIdField').value;
       if (!userId) {
         userIdError.innerText = await getLanguage('general.userIdRequired');
@@ -63,7 +69,7 @@ const EmployeeView = {
       document.getElementById('userIdField').value = '';
     });
   },
-  _openScanner(showDeviceOnlyMessage = true) {
+  async _openScanner(showDeviceOnlyMessage = true, showCameraPermissionMessage = false) {
     const isWeb = buildfire.getContext().device.platform === 'web';
     if (isWeb) {
       if (!showDeviceOnlyMessage) return null;
@@ -75,14 +81,29 @@ const EmployeeView = {
 
       return null;
     }
+
     buildfire.services.camera.barcodeScanner.scan(
       {
         preferFrontCamera: false,
         showFlipCameraButton: false,
         formats: 'QR_CODE',
       },
       async (err, result) => {
-        if (err) return console.error(err);
+        if (err) {
+          if (JSON.stringify(err) === '"Scanning failed: Access to the camera has been prohibited; please enable it in the Settings app to continue"') {
+            if (showCameraPermissionMessage) {
+              const permissionErrorMessage = await getLanguage('general.cameraPermissionRequired');
+              buildfire.dialog.toast({
+                message: permissionErrorMessage,
+                type: 'danger',
+              });
+            }
+          } else {
+            buildfire.dialog.toast({ message: err, type: 'danger' });
+          }
+          return console.error(err);
+        }
+
         if (result.cancelled) {
           return null;
         }
@@ -127,7 +148,7 @@ const EmployeeView = {
   async  _openCustomerProfile(userId) {
     try {
       const result = await CustomerController.getCustomerInfo(userId, widgetAppState.settings.cardSize);
-      if (result.currentStamps) {
+      if (result.currentStamps !== undefined) {
         widgetAppState.currentCustomer.currentStamps = result.currentStamps;
         widgetAppState.currentCustomer.availableRewards = result.availableRewards;
       }

widget/js/utils/handleCPSync.js

@@ -12,15 +12,17 @@ const handleCPSync = {
         if (data.data.content || data.data.content === '') {
           widgetAppState.settings.introductionWYSIWYG = data.data.content;
         }
-        if (widgetAppRouter.currentPage) return;
+        if (AuthManager.isEmployee) {
+          if (widgetAppRouter.currentPage !== 'home') return;
+        } else if (widgetAppRouter.currentPage) return;
         CustomerView._initListView();
         CustomerView._initValues();
       } else if (data.cmd === 'cardChanged') {
         if (data.data.cardSize) {
           widgetAppState.settings.cardSize = data.data.cardSize;
           const result = await CustomerController.getCustomerInfo(widgetAppState.currentCustomer.friendlyId,
             widgetAppState.settings.cardSize);
-          if (result.currentStamps) {
+          if (result.currentStamps !== undefined) {
             widgetAppState.currentCustomer.currentStamps = result.currentStamps;
             widgetAppState.currentCustomer.availableRewards = result.availableRewards;
           }
@@ -32,14 +34,18 @@ const handleCPSync = {
           widgetAppState.currentCustomer.imageUrl = user?.imageUrl ? user.imageUrl : 'https://app.buildfire.com/app/media/avatar.png';
         }
 
-        if (widgetAppRouter.currentPage) return;
+        if (AuthManager.isEmployee) {
+          if (widgetAppRouter.currentPage !== 'home') return;
+        } else if (widgetAppRouter.currentPage) return;
         CustomerView.drawStamps(widgetAppState.settings.cardSize);
         if (AuthManager.isEmployee) {
-          CustomerView._initRewardList();
+          CustomerView.refreshRewardList();
         }
       } else if (data.cmd === 'designChanged') {
         widgetAppState.settings.design = data.data.design;
-        if (widgetAppRouter.currentPage) return;
+        if (AuthManager.isEmployee) {
+          if (widgetAppRouter.currentPage !== 'home') return;
+        } else if (widgetAppRouter.currentPage) return;
         CustomerView.drawStamps(widgetAppState.settings.cardSize);
       }
     };

widget/layouts/layout1.css

@@ -80,6 +80,7 @@ body {
     font-weight: 400;
     color: var(--bf-theme-body-text);
 }
+
 .mdc-dialog__actions {
     padding-top: 24px;
 }
@@ -98,15 +99,16 @@ body {
 .mdc-text-field__input {
     font-size: 16px;
     font-weight: 400;
-    color: var(--bf-theme-body-text) !important;
 }
 
 .customer-info #lifeTimeStamps, .customer-info #lifeTimeRedeems {
     font-size: 14px;
     font-weight: 400;
     color: var(--bf-theme-body-text);
+}
 
-
+#userName {
+    color: var(--bf-theme-body-text);
 }
 
 #stampsActionContainer #decrementStamp {
@@ -145,19 +147,27 @@ body {
 #stampsAction .add-stamp-title {
     color: var(--bf-theme-header-text);
 }
+#friendlyId {
+    color: var(--bf-theme-body-text) !important;
+}
 
 .available-reward-title {
     color: var(--bf-theme-header-text);
 }
 
 .mdc-checkbox {
-   color: var(--bf-theme-primary);
+    color: var(--bf-theme-primary);
 }
-.mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
+
+.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
     border-color: var(--bf-theme-primary);
     background-color: var(--bf-theme-primary);
 }
-.mdc-checkbox .mdc-checkbox__native-control:checked~.mdc-checkbox__background::before {
+.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate)~.mdc-checkbox__background {
+    border-color: var(--bf-theme-primary-text);
+}
+
+.mdc-checkbox .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background::before {
     background-color: var(--bf-theme-primary);
 }
 

widget/style/style.css

@@ -51,7 +51,7 @@ body.has-safe-area #home {
 .rewardListContainer .listView-items {
     margin-bottom: 14px;
 }
-.friendlyId {
+#friendlyId {
     padding-bottom: 1rem;
 }
 
@@ -157,7 +157,7 @@ body.has-safe-area #transactionCustomerList, body.has-safe-area #transactionEmpl
 
 .customer-info #lifeTimeStamps {
     margin-top: 8px;
-    margin-bottom: 12px;
+    margin-bottom: 2px;
 }
 
 .customer-info #lifeTimeStamps, .customer-info #lifeTimeRedeems {