@fleetbase/fleetops-engine 0.6.50 → 0.6.51

package/addon/components/modals/update-order-activity.hbs

@@ -21,7 +21,7 @@
                 <div class="text-xs font-semibold uppercase">Updating activity for</div>
                 <div class="mt-1 flex items-start justify-between gap-3">
                     <div class="min-w-0">
-                        <div class="truncate text-sm font-semibold">{{or this.currentWaypoint.name this.currentWaypoint.id}}</div>
+                        <div class="truncate text-sm font-semibold">{{or this.currentWaypoint.name this.currentWaypoint.public_id}}</div>
                         <div class="truncate text-xs">{{or (place-address-html this.currentWaypoint showTitle=false) this.currentWaypoint.address this.currentWaypoint.street1}}</div>
                     </div>
                     {{#if this.currentWaypoint.status_code}}
@@ -111,24 +111,58 @@
         </fieldset>
 
         {{#if this.selectedActivityRequiresPod}}
-            <div class="mb-5 rounded-md border border-yellow-300 bg-yellow-50 p-4 dark:border-yellow-700 dark:bg-yellow-900">
-                <div class="mb-2 text-sm font-semibold text-yellow-900 dark:text-yellow-50">Photo proof of delivery required</div>
-                <p class="mb-3 text-xs text-yellow-800 dark:text-yellow-100">Upload a delivery photo before submitting this activity update.</p>
-                <FileUpload @name="photos[]" @accept={{join "," this.acceptedProofFileTypes}} @multiple={{false}} @onFileAdded={{this.setProofFile}}>
-                    <a tabindex={{0}} class="btn btn-magic cursor-pointer">
-                        <FaIcon @icon="camera" class="mr-1" />
-                        Select photo
-                    </a>
-                </FileUpload>
+            <div class="mb-4 rounded-md border border-yellow-300 bg-yellow-50 py-2 text-yellow-900 dark:border-yellow-700 dark:bg-yellow-900 dark:text-yellow-50">
+                <div class="flex flex-wrap items-center justify-between gap-2 px-3">
+                    <div class="min-w-0">
+                        <div class="text-xs font-semibold uppercase">Photo proof required</div>
+                        {{#if this.bypassProof}}
+                            <div class="text-xs text-yellow-800 dark:text-yellow-100">Proof bypass enabled.</div>
+                        {{else if this.hasUploadedProof}}
+                            <div class="text-xs text-yellow-800 dark:text-yellow-100">Proof uploaded.</div>
+                        {{else if this.uploadProofFile.isRunning}}
+                            <div class="text-xs text-yellow-800 dark:text-yellow-100">Uploading proof...</div>
+                        {{else}}
+                            <div class="text-xs text-yellow-800 dark:text-yellow-100">Upload proof before submitting.</div>
+                        {{/if}}
+                    </div>
+                    {{#unless this.bypassProof}}
+                        <FileUpload @name="photos" @accept={{join "," this.acceptedProofFileTypes}} @multiple={{false}} @onFileAdded={{perform this.uploadProofFile}}>
+                            <a tabindex={{0}} class="btn btn-magic btn-sm cursor-pointer">
+                                {{#if this.uploadProofFile.isRunning}}
+                                    <Spinner class="mr-1" />
+                                    Uploading
+                                {{else}}
+                                    <FaIcon @icon="camera" class="mr-1" />
+                                    Select photo
+                                {{/if}}
+                            </a>
+                        </FileUpload>
+                    {{/unless}}
+                </div>
+                <div class="px-3 mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-yellow-50 pt-2 dark:border-yellow-700">
+                    <Toggle @isToggled={{this.bypassProof}} @onToggle={{this.toggleBypassProof}} @label="Bypass proof of delivery" @labelClass="text-xs" />
+                    <span class="text-xs text-yellow-800 dark:text-yellow-100">Use only when proof cannot be provided from the console.</span>
+                </div>
                 {{#if this.proofFiles}}
-                    {{#each this.proofFiles as |file|}}
-                        <div class="mt-3 flex items-center justify-between rounded-md border border-yellow-400 bg-white px-3 py-2 text-xs text-yellow-900 dark:bg-yellow-950 dark:text-yellow-50">
-                            <span class="truncate">{{file.name}}</span>
-                            <span class="font-semibold">{{round file.progress}}%</span>
-                        </div>
-                    {{/each}}
+                    <div class="mt-4 mb-1 px-3 space-x-2">
+                        {{#each this.proofFiles as |file|}}
+                            <div class="flex items-center justify-between gap-2 text-xs text-yellow-900 dark:text-yellow-50 border border-yellow-50 dark:border-yellow-700 shadow-sm px-2 py-1.5 rounded-md">
+                                <div class="text-xs flex items-center space-x-2">
+                                    <FaIcon @icon="file" />
+                                    <span class="truncate">{{file.name}}</span>
+                                </div>
+                                <span class="flex-shrink-0 font-semibold">
+                                    {{#if this.hasUploadedProof}}
+                                        Uploaded
+                                    {{else}}
+                                        {{round file.progress}}%
+                                    {{/if}}
+                                </span>
+                            </div>
+                        {{/each}}
+                    </div>
                 {{/if}}
             </div>
         {{/if}}
     </div>
-</Modal::Default>
+</Modal::Default>

package/addon/components/modals/update-order-activity.js

@@ -16,6 +16,8 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
     @tracked selectedActivity;
     @tracked customActivity = {};
     @tracked proofFiles = [];
+    @tracked proof;
+    @tracked bypassProof = false;
 
     constructor(owner, { options = {} }) {
         super(...arguments);
@@ -104,6 +106,14 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
         return ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
     }
 
+    get hasUploadedProof() {
+        return Boolean(this.proof?.id || this.proof?.public_id);
+    }
+
+    get uploadedProofId() {
+        return this.proof?.id ?? this.proof?.public_id;
+    }
+
     @task *loadActivity() {
         if (!this.order?.id) {
             return [];
@@ -128,14 +138,22 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
             return this.notifications.warning(this.intl.t('fleet-ops.operations.orders.index.view.invalid-warning'));
         }
 
-        if (this.selectedActivityRequiresPod && this.proofFiles.length === 0) {
+        if (this.selectedActivityRequiresPod && this.uploadProofFile.isRunning) {
+            modal.stopLoading();
+            return this.notifications.warning('Photo proof of delivery is still uploading.');
+        }
+
+        if (this.selectedActivityRequiresPod && !this.hasUploadedProof && !this.bypassProof) {
             modal.stopLoading();
-            return this.notifications.warning('Photo proof of delivery is required for this activity.');
+            return this.notifications.warning('Upload photo proof of delivery or choose to bypass proof of delivery.');
         }
 
         try {
-            const proof = this.selectedActivityRequiresPod ? yield this.capturePhotoProof.perform() : null;
-            yield this.fetch.patch(`orders/update-activity/${this.order.id}`, { activity, proof: proof?.id ?? proof?.public_id });
+            yield this.fetch.patch(`orders/update-activity/${this.order.id}`, {
+                activity,
+                proof: this.hasUploadedProof ? this.uploadedProofId : null,
+                bypass_proof: this.selectedActivityRequiresPod && this.bypassProof,
+            });
 
             if (typeof this.order?.reload === 'function') {
                 yield this.order.reload();
@@ -150,6 +168,7 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
             }
 
             this.modalsManager.setOption('activityCreated', activity);
+            this.modalsManager.setOption('proofCreated', this.hasUploadedProof ? this.proof : null);
             this.notifications.success(`Order activity has been updated to ${activity.status}`);
             modal.done();
         } catch (error) {
@@ -161,6 +180,10 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
 
     @task *capturePhotoProof() {
         const [proofFile] = this.proofFiles;
+        if (!proofFile) {
+            return null;
+        }
+
         const headers = this.fetch.getHeaders();
         delete headers['Content-Type'];
 
@@ -179,11 +202,42 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
         return response.json();
     }
 
-    @action setProofFile(file) {
+    @task *uploadProofFile(file) {
         if (!file) {
             return;
         }
 
+        this.bypassProof = false;
+        this.proof = null;
         this.proofFiles = [file];
+
+        try {
+            this.proof = this.normalizeProofResponse(yield this.capturePhotoProof.perform());
+            this.notifications.success('Photo proof of delivery uploaded.');
+        } catch (error) {
+            this.proof = null;
+            this.proofFiles = [];
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action toggleBypassProof(value) {
+        this.bypassProof = value;
+        if (value) {
+            this.proofFiles = [];
+            this.proof = null;
+        }
+    }
+
+    normalizeProofResponse(response) {
+        if (response?.proof) {
+            return response.proof;
+        }
+
+        if (response?.data?.id || response?.data?.public_id) {
+            return response.data;
+        }
+
+        return response;
     }
 }

package/addon/components/order/details/activity.js

@@ -31,9 +31,9 @@ export default class OrderDetailsActivityComponent extends Component {
                         disabled: this.args.resource.status === 'canceled',
                         onClick: () => {
                             this.orderActions.updateActivity(this.args.resource, {
-                                onFinish: ({ activityCreated }) => {
+                                onFinish: (options) => {
                                     if (typeof this.args.onChange === 'function') {
-                                        this.args.onChange(activityCreated);
+                                        this.args.onChange(options);
                                     }
                                 },
                             });

package/addon/components/order/details/proof.hbs

@@ -1,42 +1,44 @@
-<ContentPanel @title={{t "order.fields.proof-of-delivery"}} @isLoading={{@isLoading}} @open={{true}} @wrapperClass="bordered-top">
-    {{#if this.proofs}}
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
-            {{#each this.proofs as |proof|}}
-                <div>
-                    {{#if (eq proof.type "photo")}}
-                        <a href={{proof.url}} target={{proof.id}}>
-                            <Image src={{proof.url}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
-                        </a>
-                    {{/if}}
-                    {{#if (eq proof.type "signature")}}
-                        <a href={{proof.raw}} target={{proof.id}} download>
-                            <Image src={{proof.raw}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
-                        </a>
-                    {{/if}}
-                    {{#if (eq proof.type "scan")}}
-                        <div class="flex items-center mb-2">
-                            <FaIcon @icon="qrcode" @size="2xl" class="text-blue-400" />
-                        </div>
-                    {{/if}}
-                    <div class="font-semibold text-sm mb-0.5">{{proof.remarks}}</div>
-                    <div class="text-xs">{{proof.public_id}}</div>
-                    <div class="text-xs">{{format-date-fns proof.created_at}}</div>
-                </div>
-            {{/each}}
-        </div>
-    {{else}}
-        <div class="min-h-24 p-4">
-            <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
-                <div class="text-center">
-                    <FaIcon @icon="camera-retro" @size="2x" class="text-gray-400 mb-2" />
-                    <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">
-                        No proof of delivery
+<div {{did-update this.reloadProofs @reloadToken}}>
+    <ContentPanel @title={{t "order.fields.proof-of-delivery"}} @isLoading={{@isLoading}} @open={{true}} @wrapperClass="bordered-top">
+        {{#if this.proofs}}
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
+                {{#each this.proofs as |proof|}}
+                    <div>
+                        {{#if (eq proof.type "photo")}}
+                            <a href={{proof.url}} target={{proof.id}}>
+                                <Image src={{proof.url}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
+                            </a>
+                        {{/if}}
+                        {{#if (eq proof.type "signature")}}
+                            <a href={{proof.raw}} target={{proof.id}} download>
+                                <Image src={{proof.raw}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
+                            </a>
+                        {{/if}}
+                        {{#if (eq proof.type "scan")}}
+                            <div class="flex items-center mb-2">
+                                <FaIcon @icon="qrcode" @size="2xl" class="text-blue-400" />
+                            </div>
+                        {{/if}}
+                        <div class="font-semibold text-sm mb-0.5">{{proof.remarks}}</div>
+                        <div class="text-xs">{{proof.public_id}}</div>
+                        <div class="text-xs">{{format-date-fns proof.created_at}}</div>
                     </div>
-                    <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
-                        Captured proof of delivery will show up here
+                {{/each}}
+            </div>
+        {{else}}
+            <div class="min-h-24 p-4">
+                <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
+                    <div class="text-center">
+                        <FaIcon @icon="camera-retro" @size="2x" class="text-gray-400 mb-2" />
+                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">
+                            No proof of delivery
+                        </div>
+                        <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
+                            Captured proof of delivery will show up here
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    {{/if}}
-</ContentPanel>
+        {{/if}}
+    </ContentPanel>
+</div>

package/addon/components/order/details/proof.js

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency-decorators';
 
@@ -13,12 +14,18 @@ export default class OrderDetailsProofComponent extends Component {
     }
 
     @task *loadOrderProofs(order) {
+        if (!order?.id) {
+            this.proofs = [];
+            return;
+        }
+
         const proofs = yield this.fetch.get(`orders/${order.id}/proofs`);
 
-        this.proofs = proofs.map((proof) => ({
-            ...proof,
-            type: this.#getTypeFromRemarks(proof.remarks),
-        }));
+        this.proofs = this.#normalizeProofs(proofs);
+    }
+
+    @action reloadProofs() {
+        this.loadOrderProofs.perform(this.args.resource);
     }
 
     #getTypeFromRemarks(remarks = '') {
@@ -27,4 +34,24 @@ export default class OrderDetailsProofComponent extends Component {
         if (remarks.endsWith('Signature')) return 'signature';
         return undefined;
     }
+
+    #normalizeProofs(proofs = []) {
+        const seen = new Set();
+
+        return proofs
+            .filter((proof) => {
+                const key = proof.uuid ?? proof.public_id ?? proof.id;
+                if (!key || seen.has(key)) {
+                    return false;
+                }
+
+                seen.add(key);
+                return true;
+            })
+            .map((proof) => ({
+                ...proof,
+                type: this.#getTypeFromRemarks(proof.remarks),
+            }))
+            .sort((a, b) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
+    }
 }

package/addon/components/order/details.hbs

@@ -2,12 +2,12 @@
     {{#if (has-block)}}
         {{yield
             (hash
-                Activity=(component "order/details/activity" resource=@resource onChange=@onActivityChanged isLoadingActivity=@isLoadingActivity isLoading=@isLoading)
+                Activity=(component "order/details/activity" resource=@resource onChange=this.handleActivityChanged isLoadingActivity=@isLoadingActivity isLoading=@isLoading)
                 Detail=(component "order/details/detail" resource=@resource onChange=@onDetailsChanged isLoading=@isLoading)
                 CustomFields=(component "order/details/custom-fields" resource=@resource onChange=@onCustomFieldsChanged isLoading=@isLoading)
                 PurchaseRate=(component "order/details/purchase-rate" resource=@resource isLoading=@isLoading)
                 Tracking=(component "order/details/tracking" resource=@resource isLoading=@isLoading)
-                Proof=(component "order/details/proof" resource=@resource isLoading=@isLoading)
+                Proof=(component "order/details/proof" resource=@resource reloadToken=this.effectiveProofReloadToken isLoading=@isLoading)
                 Notes=(component "order/details/notes" resource=@resource onChange=@onNotesChanged isLoading=@isLoading)
                 IntegratedVendorDetails=(component "order/details/integrated-vendor-details" resource=@resource isLoading=@isLoading)
                 Route=(component "order/details/route" resource=@resource onChange=@onRouteChanged isLoading=@isLoading)
@@ -21,12 +21,12 @@
             )
         }}
     {{else}}
-        <Order::Details::Activity @resource={{@resource}} @onChange={{@onActivityChanged}} @isLoadingActivity={{@isLoadingActivity}} @isLoading={{@isLoading}} />
+        <Order::Details::Activity @resource={{@resource}} @onChange={{this.handleActivityChanged}} @isLoadingActivity={{@isLoadingActivity}} @isLoading={{@isLoading}} />
         <Order::Details::Detail @resource={{@resource}} @onChange={{@onDetailsChanged}} @isLoading={{@isLoading}} />
         <Order::Details::CustomFields @resource={{@resource}} @onChange={{@onCustomFieldsChanged}} @isLoading={{@isLoading}} />
         <Order::Details::PurchaseRate @resource={{@resource}} @isLoading={{@isLoading}} />
         <Order::Details::Tracking @resource={{@resource}} @isLoading={{@isLoading}} />
-        <Order::Details::Proof @resource={{@resource}} @isLoading={{@isLoading}} />
+        <Order::Details::Proof @resource={{@resource}} @reloadToken={{this.effectiveProofReloadToken}} @isLoading={{@isLoading}} />
         <Order::Details::Notes @resource={{@resource}} @onChange={{@onNotesChanged}} @isLoading={{@isLoading}} />
         <Order::Details::IntegratedVendorDetails @resource={{@resource}} @isLoading={{@isLoading}} />
         <Order::Details::Route @resource={{@resource}} @onChange={{@onRouteChanged}} @isLoading={{@isLoading}} />
@@ -38,4 +38,4 @@
         <Order::Details::Comments @resource={{@resource}} @onChange={{@onCommentsChanged}} @isLoading={{@isLoading}} />
         <Order::Details::Metadata @resource={{@resource}} @onChange={{@onMetadataChanged}} @isLoading={{@isLoading}} />
     {{/if}}
-</div>
+</div>

package/addon/components/order/details.js

@@ -1,3 +1,21 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
-export default class OrderDetailsComponent extends Component {}
+export default class OrderDetailsComponent extends Component {
+    @tracked proofReloadToken = 0;
+
+    get effectiveProofReloadToken() {
+        return `${this.args.proofReloadToken ?? 0}:${this.proofReloadToken}`;
+    }
+
+    @action handleActivityChanged(optionsOrActivity) {
+        if (typeof this.args.onActivityChanged === 'function') {
+            this.args.onActivityChanged(optionsOrActivity?.activityCreated ?? optionsOrActivity);
+        }
+
+        if (optionsOrActivity?.proofCreated) {
+            this.proofReloadToken++;
+        }
+    }
+}

package/addon/components/order/header.hbs

@@ -10,7 +10,7 @@
                     <Badge @status={{@order.status}} @helpText={{if (eq @order.status (t "order.header.dispatched")) (concat (t "order.header.dispatched-at") @order.dispatchedAt)}} />
                     {{#if @order.shouldDisplayDispatchLabel}}
                         <Badge @status="info" class="ml-2" @helpText={{t "order.header.dispatched" htmlSafe=true order=@order.dispatchedAt}}>{{t
-                                "fleet-ops.component.order.header.dispatched"
+                                "order-status.dispatched"
                             }}</Badge>
                     {{/if}}
                 </div>

package/addon/components/route-list.hbs

@@ -20,9 +20,6 @@
                     {{#if this.firstStop.etaSeconds}}
                         <Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration this.firstStop.etaSeconds}}</Badge>
                     {{/if}}
-                    {{#if this.firstStop.etaAt}}
-                        <Badge @status="pending" @hideStatusDot={{true}}>{{format-date-fns this.firstStop.etaAt "d MMM HH:mm"}}</Badge>
-                    {{/if}}
                 </div>
                 <DisplayPlace @place={{this.firstStop.place}} @waypointActions={{@waypointActions}} @waypointActionContext={{this.firstStop}} @hideBadges={{true}} />
             </div>
@@ -58,9 +55,6 @@
                             {{#if stop.etaSeconds}}
                                 <Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration stop.etaSeconds}}</Badge>
                             {{/if}}
-                            {{#if stop.etaAt}}
-                                <Badge @status="pending" @hideStatusDot={{true}}>{{format-date-fns stop.etaAt "d MMM HH:mm"}}</Badge>
-                            {{/if}}
                         </div>
                         <DisplayPlace @place={{stop.place}} @waypointActions={{@waypointActions}} @waypointActionContext={{stop}} @hideBadges={{true}} />
                     </div>
@@ -86,9 +80,6 @@
                         {{#if stop.etaSeconds}}
                             <Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration stop.etaSeconds}}</Badge>
                         {{/if}}
-                        {{#if stop.etaAt}}
-                            <Badge @status="pending" @hideStatusDot={{true}}>{{format-date-fns stop.etaAt "d MMM HH:mm"}}</Badge>
-                        {{/if}}
                     </div>
                     <DisplayPlace @place={{stop.place}} @waypointActions={{@waypointActions}} @waypointActionContext={{stop}} @hideBadges={{true}} />
                 </div>
@@ -117,9 +108,6 @@
                     {{#if this.lastStop.etaSeconds}}
                         <Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration this.lastStop.etaSeconds}}</Badge>
                     {{/if}}
-                    {{#if this.lastStop.etaAt}}
-                        <Badge @status="pending" @hideStatusDot={{true}}>{{format-date-fns this.lastStop.etaAt "d MMM HH:mm"}}</Badge>
-                    {{/if}}
                 </div>
                 <DisplayPlace @place={{this.lastStop.place}} @waypointActions={{@waypointActions}} @waypointActionContext={{this.lastStop}} @hideBadges={{true}} />
             </div>

package/addon/components/service-rate/details.hbs

@@ -199,7 +199,7 @@
             <div class="field-info-container">
                 <div class="field-name">Algorithm Code</div>
                 <div class="field-value">
-                    <pre class="bg-gray-100 dark:bg-gray-900 font-mono p-3 rounded text-xs overflow-x-auto"><code class="font-mono text-xs">{{n-a @resource.algorithm}}</code></pre>
+                    <pre class="bg-gray-100 dark:bg-gray-900 font-mono p-3 rounded text-xs overflow-x-auto"><code class="font-mono text-xs whitespace-break-spaces">{{n-a @resource.algorithm}}</code></pre>
                 </div>
             </div>
         </ContentPanel>

package/addon/components/service-rate/form.hbs

@@ -10,7 +10,7 @@
                 @disabled={{cannot-write @resource}}
             />
 
-            <InputGroup @name={{t "service-rate.fields.service-order-label"}} @helpText={{t "service-rate.fields.service-order-help-text"}}>
+            <InputGroup @name={{t "service-rate.fields.service-order-label"}} @helpText={{t "service-rate.fields.service-order-help-text"}} @required={{true}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
                         @options={{this.orderConfigActions.allOrderConfigs}}

package/addon/components/service-rate/form.js

@@ -53,6 +53,7 @@ export default class ServiceRateFormComponent extends Component {
     }
 
     @action selectRuleGeographyType(rule, { value }) {
+        rule.set('selected_geography_type', value);
         rule.set('zone', null);
         rule.set('zone_uuid', null);
         rule.set('service_area', null);
@@ -61,6 +62,7 @@ export default class ServiceRateFormComponent extends Component {
     }
 
     @action selectRuleServiceArea(rule, serviceArea) {
+        rule.set('selected_geography_type', 'service_area');
         rule.set('service_area', serviceArea);
         rule.set('service_area_uuid', serviceArea?.id);
         rule.set('zone', null);
@@ -69,6 +71,7 @@ export default class ServiceRateFormComponent extends Component {
     }
 
     @action selectRuleZone(rule, zone) {
+        rule.set('selected_geography_type', 'zone');
         rule.set('zone', zone);
         rule.set('zone_uuid', zone?.id);
         rule.set('service_area', null);
@@ -79,6 +82,7 @@ export default class ServiceRateFormComponent extends Component {
     @action setRuleFallback(rule, isFallback) {
         rule.set('is_fallback', Boolean(isFallback));
         if (isFallback) {
+            rule.set('selected_geography_type', 'fallback');
             rule.set('zone', null);
             rule.set('zone_uuid', null);
             rule.set('service_area', null);