@fleetbase/fleetops-engine 0.6.70 → 0.6.72

package/addon/components/order-config-manager/lifecycle.hbs

@@ -0,0 +1,250 @@
+<div class="px-6 py-2 space-y-4">
+    <ContentPanel @title={{t "order-config-manager.lifecycle.title"}} @open={{true}} @wrapperClass="bordered-classic">
+        <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">{{t "order-config-manager.lifecycle.description"}}</p>
+
+        <div class="mb-4">
+            <Toggle
+                @label={{t "order-config-manager.lifecycle.enable"}}
+                @helpText={{t "order-config-manager.lifecycle.enable-help"}}
+                @isToggled={{this.enabled}}
+                @disabled={{or (not this.canEdit) this.save.isRunning}}
+                @onToggle={{this.toggleEnabled}}
+            />
+        </div>
+
+        {{#if this.enabled}}
+            <div class="mb-6">
+                <div class="flex items-center justify-between mb-1">
+                    <div class="text-sm font-semibold dark:text-gray-100">{{t "order-config-manager.lifecycle.activities"}}</div>
+                    {{#if (and this.canEdit this.hasActivities)}}
+                        <button type="button" class="text-xs text-blue-600 dark:text-blue-400 hover:underline" {{on "click" this.startBlankFlow}}>{{t "order-config-manager.lifecycle.blank-flow"}}</button>
+                    {{/if}}
+                </div>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">{{t "order-config-manager.lifecycle.activities-help"}}</p>
+
+                {{#if this.hasActivities}}
+                    <div class="space-y-2">
+                        {{#each this.activityRows as |activity|}}
+                            <div class="rounded-md border border-gray-200 dark:border-gray-700 p-3 grid grid-cols-1 lg:grid-cols-12 gap-2 items-end" data-activity-code={{activity.code}}>
+                                <InputGroup @name={{t "order-config-manager.lifecycle.activity-label"}} @wrapperClass="mb-0 lg:col-span-3">
+                                    <Input class="form-input w-full" @value={{activity.status}} disabled={{not this.canEdit}} {{on "input" (fn this.setActivityField activity.code "status")}} />
+                                </InputGroup>
+                                <InputGroup @name={{t "order-config-manager.lifecycle.activity-code"}} @wrapperClass="mb-0 lg:col-span-2">
+                                    <div class="form-input bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 truncate" title={{activity.code}}>{{activity.code}}{{#if activity.isInitial}} <span class="text-xs text-green-600 dark:text-green-400">({{t "order-config-manager.lifecycle.initial-short"}})</span>{{/if}}</div>
+                                </InputGroup>
+                                <InputGroup @name={{t "order-config-manager.lifecycle.activity-details"}} @wrapperClass="mb-0 lg:col-span-3">
+                                    <Input class="form-input w-full" @value={{activity.details}} disabled={{not this.canEdit}} {{on "input" (fn this.setActivityField activity.code "details")}} />
+                                </InputGroup>
+                                <InputGroup @name={{t "order-config-manager.lifecycle.activity-next"}} @wrapperClass="mb-0 lg:col-span-3">
+                                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                                        <PowerSelectMultiple
+                                            @options={{this.activities}}
+                                            @selected={{activity.next}}
+                                            @onChange={{fn this.setNextActivities activity.code}}
+                                            @searchEnabled={{true}}
+                                            @searchField="label"
+                                            @placeholder={{t "order-config-manager.lifecycle.select-activities"}}
+                                            @triggerClass="form-select form-input"
+                                            @disabled={{not this.canEdit}}
+                                            as |next|
+                                        >
+                                            {{next.label}}
+                                        </PowerSelectMultiple>
+                                    </div>
+                                </InputGroup>
+                                <div class="flex items-center justify-end space-x-2 lg:col-span-1">
+                                    <input type="color" value={{activity.color}} title={{t "order-config-manager.lifecycle.activity-color"}} class="h-9 w-9 rounded border border-gray-300 dark:border-gray-700 bg-transparent" disabled={{not this.canEdit}} {{on "input" (fn this.setActivityField activity.code "color")}} />
+                                    {{#if this.canEdit}}
+                                        <Button @type="danger" @size="sm" @icon="trash" @helpText={{t "order-config-manager.lifecycle.remove-activity"}} @onClick={{fn this.removeActivity activity.code}} />
+                                    {{/if}}
+                                </div>
+                            </div>
+                        {{/each}}
+                    </div>
+                {{else}}
+                    <div class="rounded-md border border-dashed border-gray-300 dark:border-gray-700 px-3 py-4 text-sm text-gray-500 dark:text-gray-400 text-center">{{t "order-config-manager.lifecycle.no-activities"}}</div>
+                {{/if}}
+
+                {{#if this.canEdit}}
+                    <div class="mt-3 rounded-md border border-blue-200 dark:border-blue-800 p-3">
+                        <div class="text-sm font-semibold mb-2">{{t "order-config-manager.lifecycle.add-activity"}}</div>
+                        <div class="grid grid-cols-1 lg:grid-cols-12 gap-2 items-end">
+                            <InputGroup @name={{t "order-config-manager.lifecycle.activity-label"}} @required={{true}} @wrapperClass="mb-0 lg:col-span-3">
+                                <Input class="form-input w-full" placeholder={{t "order-config-manager.lifecycle.activity-label-placeholder"}} @value={{this.newActivity.status}} {{on "input" (fn this.setNewActivityField "status")}} />
+                            </InputGroup>
+                            <InputGroup @name={{t "order-config-manager.lifecycle.activity-code"}} @helpText={{t "order-config-manager.lifecycle.activity-code-help"}} @wrapperClass="mb-0 lg:col-span-2">
+                                <Input class="form-input w-full" placeholder={{or this.newActivityCode (t "order-config-manager.lifecycle.activity-code-placeholder")}} @value={{this.newActivity.code}} {{on "input" (fn this.setNewActivityField "code")}} />
+                            </InputGroup>
+                            <InputGroup @name={{t "order-config-manager.lifecycle.activity-details"}} @wrapperClass="mb-0 lg:col-span-4">
+                                <Input class="form-input w-full" placeholder={{t "order-config-manager.lifecycle.activity-details-placeholder"}} @value={{this.newActivity.details}} {{on "input" (fn this.setNewActivityField "details")}} />
+                            </InputGroup>
+                            <div class="flex items-center justify-end space-x-2 lg:col-span-3">
+                                <input type="color" value={{this.newActivity.color}} title={{t "order-config-manager.lifecycle.activity-color"}} class="h-9 w-9 rounded border border-gray-300 dark:border-gray-700 bg-transparent" {{on "input" (fn this.setNewActivityField "color")}} />
+                                <Button @type="primary" @icon="plus" @text={{t "order-config-manager.lifecycle.add-activity"}} @disabled={{not this.canAddActivity}} @onClick={{this.addActivity}} />
+                            </div>
+                        </div>
+                        {{#if this.newActivityCodeTaken}}
+                            <div class="mt-1 text-xs text-red-600 dark:text-red-400">{{t "order-config-manager.lifecycle.problem-duplicate-code" code=this.newActivityCode}}</div>
+                        {{/if}}
+                    </div>
+                {{/if}}
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-2">
+                <InputGroup @name={{t "order-config-manager.lifecycle.initial"}} @required={{true}} @helpText={{t "order-config-manager.lifecycle.initial-help"}}>
+                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                        <PowerSelect
+                            @options={{this.activities}}
+                            @selected={{this.selectedInitial}}
+                            @onChange={{fn this.setActivity "initial"}}
+                            @searchEnabled={{true}}
+                            @searchField="label"
+                            @placeholder={{t "order-config-manager.lifecycle.select-activity"}}
+                            @triggerClass="form-select form-input"
+                            @disabled={{not this.canEdit}}
+                            as |activity|
+                        >
+                            <span>{{activity.label}}</span>
+                            <span class="ml-2 text-xs text-gray-500">{{activity.code}}</span>
+                        </PowerSelect>
+                    </div>
+                </InputGroup>
+
+                <InputGroup @name={{t "order-config-manager.lifecycle.terminal"}} @helpText={{t "order-config-manager.lifecycle.terminal-help"}}>
+                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                        <PowerSelectMultiple
+                            @options={{this.activities}}
+                            @selected={{this.selectedTerminal}}
+                            @onChange={{this.setTerminal}}
+                            @searchEnabled={{true}}
+                            @searchField="label"
+                            @placeholder={{t "order-config-manager.lifecycle.select-activities"}}
+                            @triggerClass="form-select form-input"
+                            @disabled={{not this.canEdit}}
+                            as |activity|
+                        >
+                            {{activity.label}}
+                        </PowerSelectMultiple>
+                    </div>
+                </InputGroup>
+
+                <InputGroup @name={{t "order-config-manager.lifecycle.completed"}} @helpText={{t "order-config-manager.lifecycle.completed-help"}}>
+                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                        <PowerSelect
+                            @options={{this.activities}}
+                            @selected={{this.selectedCompleted}}
+                            @onChange={{fn this.setActivity "completed"}}
+                            @searchEnabled={{true}}
+                            @searchField="label"
+                            @allowClear={{true}}
+                            @placeholder={{t "order-config-manager.lifecycle.select-activity"}}
+                            @triggerClass="form-select form-input"
+                            @disabled={{not this.canEdit}}
+                            as |activity|
+                        >
+                            <span>{{activity.label}}</span>
+                            <span class="ml-2 text-xs text-gray-500">{{activity.code}}</span>
+                        </PowerSelect>
+                    </div>
+                </InputGroup>
+
+                <InputGroup @name={{t "order-config-manager.lifecycle.canceled"}} @helpText={{t "order-config-manager.lifecycle.canceled-help"}}>
+                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                        <PowerSelect
+                            @options={{this.activities}}
+                            @selected={{this.selectedCanceled}}
+                            @onChange={{fn this.setActivity "canceled"}}
+                            @searchEnabled={{true}}
+                            @searchField="label"
+                            @allowClear={{true}}
+                            @placeholder={{t "order-config-manager.lifecycle.select-activity"}}
+                            @triggerClass="form-select form-input"
+                            @disabled={{not this.canEdit}}
+                            as |activity|
+                        >
+                            <span>{{activity.label}}</span>
+                            <span class="ml-2 text-xs text-gray-500">{{activity.code}}</span>
+                        </PowerSelect>
+                    </div>
+                </InputGroup>
+
+            </div>
+
+            <div class="flex flex-col space-y-2 pt-2">
+                <Toggle
+                    @label={{t "order-config-manager.lifecycle.dispatch"}}
+                    @helpText={{t "order-config-manager.lifecycle.dispatch-help"}}
+                    @isToggled={{this.lifecycle.dispatch}}
+                    @disabled={{not this.canEdit}}
+                    @onToggle={{fn this.setFlag "dispatch"}}
+                />
+                <Toggle
+                    @label={{t "order-config-manager.lifecycle.strict-transitions"}}
+                    @helpText={{t "order-config-manager.lifecycle.strict-transitions-help"}}
+                    @isToggled={{this.lifecycle.strict_transitions}}
+                    @disabled={{not this.canEdit}}
+                    @onToggle={{fn this.setFlag "strict_transitions"}}
+                />
+            </div>
+
+            {{#if this.problems.length}}
+                <div class="mt-2 rounded-md border border-red-300 dark:border-red-700 px-3 py-2 text-sm">
+                    <div class="font-semibold text-red-700 dark:text-red-400 mb-1">{{t "order-config-manager.lifecycle.problems-title"}}</div>
+                    <ul class="list-disc pl-5 text-red-700 dark:text-red-400">
+                        {{#each this.problems as |problem|}}<li>{{problem}}</li>{{/each}}
+                    </ul>
+                </div>
+            {{/if}}
+        {{else}}
+            <p class="text-sm text-gray-600 dark:text-gray-300">{{t "order-config-manager.lifecycle.default-lifecycle"}}</p>
+        {{/if}}
+
+        {{#if this.canEdit}}
+            <div class="flex justify-end pt-4">
+                <Button
+                    @type="primary"
+                    @icon="save"
+                    @text={{t "common.save-changes"}}
+                    @onClick={{perform this.save}}
+                    @isLoading={{this.save.isRunning}}
+                    @disabled={{not this.canSave}}
+                    @permission="fleet-ops update order-config"
+                />
+            </div>
+        {{/if}}
+    </ContentPanel>
+
+    {{#if this.saved}}
+        <ContentPanel @title={{t "order-config-manager.lifecycle.summary"}} @open={{true}} @wrapperClass="bordered-classic">
+            <dl class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-1 text-sm">
+                <div class="flex"><dt class="w-40 shrink-0 text-gray-500">{{t "order-config-manager.lifecycle.summary-initial"}}</dt><dd>{{or
+                            (get (this.option this.saved.initial) "label")
+                            (t "order-config-manager.lifecycle.none")
+                        }}</dd></div>
+                <div class="flex"><dt class="w-40 shrink-0 text-gray-500">{{t "order-config-manager.lifecycle.summary-completed"}}</dt><dd>{{or
+                            (get (this.option this.saved.completed) "label")
+                            (t "order-config-manager.lifecycle.none")
+                        }}</dd></div>
+                <div class="flex"><dt class="w-40 shrink-0 text-gray-500">{{t "order-config-manager.lifecycle.summary-canceled"}}</dt><dd>{{or
+                            (get (this.option this.saved.canceled) "label")
+                            (t "order-config-manager.lifecycle.none")
+                        }}</dd></div>
+                <div class="flex"><dt class="w-40 shrink-0 text-gray-500">{{t "order-config-manager.lifecycle.summary-terminal"}}</dt><dd>{{#if this.saved.terminal.length}}{{#each
+                                this.saved.terminal
+                                as |code index|
+                            }}{{if index ", "}}{{get (this.option code) "label"}}{{/each}}{{else}}{{t "order-config-manager.lifecycle.none"}}{{/if}}</dd></div>
+                <div class="flex"><dt class="w-40 shrink-0 text-gray-500">{{t "order-config-manager.lifecycle.summary-dispatch"}}</dt><dd>{{if
+                            this.saved.dispatch
+                            (t "order-config-manager.lifecycle.yes")
+                            (t "order-config-manager.lifecycle.no")
+                        }}</dd></div>
+                <div class="flex"><dt class="w-40 shrink-0 text-gray-500">{{t "order-config-manager.lifecycle.summary-strict"}}</dt><dd>{{if
+                            this.saved.strict_transitions
+                            (t "order-config-manager.lifecycle.yes")
+                            (t "order-config-manager.lifecycle.no")
+                        }}</dd></div>
+            </dl>
+        </ContentPanel>
+    {{/if}}
+
+</div>

package/addon/components/order-config-manager/lifecycle.js

@@ -0,0 +1,358 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { task } from 'ember-concurrency';
+import { underscore } from '@ember/string';
+import generateUUID from '@fleetbase/ember-core/utils/generate-uuid';
+import normalizeOrderConfigFlow, { getOrderConfigFlowRootCode } from '../../utils/normalize-order-config-flow';
+
+/** Keys of `meta.lifecycle` understood by the server (see OrderConfig::lifecycle()). */
+const DEFAULTS = { initial: null, completed: null, canceled: null, terminal: [], dispatch: true, strict_transitions: false };
+
+const NEW_ACTIVITY = { status: '', code: '', details: '', color: '#1f2937' };
+
+/**
+ * Manages an order config's configured lifecycle (`meta.lifecycle`): the activity new orders start
+ * at, the activities that complete, cancel and end an order, whether orders may be dispatched and
+ * whether transitions must follow the flow. Without a configured lifecycle the default dispatch
+ * lifecycle applies.
+ *
+ * The activities themselves (the config's `flow`) can be defined here too, so a lifecycle can be
+ * built from scratch without the graph editor: add or remove activities, set their labels and the
+ * activities each one can move to. Flow and lifecycle are saved together.
+ *
+ * @extends Component
+ */
+export default class OrderConfigManagerLifecycleComponent extends Component {
+    @service modalsManager;
+    @service notifications;
+    @service abilities;
+    @service intl;
+
+    /** The config being managed. */
+    @tracked config;
+
+    /** Working copy of `meta.lifecycle`, or null when the config has none. */
+    @tracked lifecycle = null;
+
+    /** Last saved lifecycle, to tell whether there is anything to save. */
+    @tracked saved = null;
+
+    /** Working copy of the config's flow, keyed by activity code, with next activities as codes. */
+    @tracked flow = {};
+
+    /** Flow as last saved, serialized, to tell whether there is anything to save. */
+    @tracked savedFlow = '{}';
+
+    /** The activity being added. */
+    @tracked newActivity = { ...NEW_ACTIVITY };
+
+    constructor(owner, { config, configManagerContext }) {
+        super(...arguments);
+        this.changeConfig(config);
+
+        configManagerContext.on('onConfigChanged', (newConfig) => {
+            this.changeConfig(newConfig);
+        });
+    }
+
+    get canEdit() {
+        return this.abilities.can('fleet-ops update order-config') && !this.config?.core_service;
+    }
+
+    get enabled() {
+        return this.lifecycle !== null;
+    }
+
+    /** Activities of the flow as select options. */
+    get activities() {
+        return Object.values(this.flow).map((activity) => ({ code: activity.code, label: activity.status || activity.code }));
+    }
+
+    /** Activities with their next activities resolved, for the editor. */
+    get activityRows() {
+        return Object.values(this.flow).map((activity) => ({
+            ...activity,
+            next: (activity.activities ?? []).map((code) => this.option(code)).filter(Boolean),
+            isInitial: this.lifecycle?.initial === activity.code,
+        }));
+    }
+
+    get hasActivities() {
+        return Object.keys(this.flow).length > 0;
+    }
+
+    get newActivityCode() {
+        return underscore((this.newActivity.code || this.newActivity.status || '').trim());
+    }
+
+    get canAddActivity() {
+        const code = this.newActivityCode;
+        return this.canEdit && this.newActivity.status.trim() !== '' && code !== '' && !this.flow[code];
+    }
+
+    get newActivityCodeTaken() {
+        const code = this.newActivityCode;
+        return code !== '' && Boolean(this.flow[code]);
+    }
+
+    get selectedInitial() {
+        return this.option(this.lifecycle?.initial);
+    }
+
+    get selectedCompleted() {
+        return this.option(this.lifecycle?.completed);
+    }
+
+    get selectedCanceled() {
+        return this.option(this.lifecycle?.canceled);
+    }
+
+    get selectedTerminal() {
+        return (this.lifecycle?.terminal ?? []).map((code) => this.option(code)).filter(Boolean);
+    }
+
+    get isDirty() {
+        return JSON.stringify(this.lifecycle) !== JSON.stringify(this.saved) || this.serializeFlow() !== this.savedFlow;
+    }
+
+    /** Problems that make the lifecycle unusable server-side. */
+    get problems() {
+        if (!this.lifecycle) {
+            return [];
+        }
+
+        const problems = [];
+        const codes = this.activities.map((activity) => activity.code);
+        if (codes.length === 0) {
+            problems.push(this.intl.t('order-config-manager.lifecycle.problem-no-activities'));
+        }
+        if (!this.lifecycle.initial) {
+            problems.push(this.intl.t('order-config-manager.lifecycle.problem-initial-required'));
+        }
+
+        const referenced = [this.lifecycle.initial, this.lifecycle.completed, this.lifecycle.canceled, ...(this.lifecycle.terminal ?? [])].filter(Boolean);
+        for (const code of new Set(referenced)) {
+            if (!codes.includes(code)) {
+                problems.push(this.intl.t('order-config-manager.lifecycle.problem-missing-activity', { code }));
+            }
+        }
+
+        return problems;
+    }
+
+    get canSave() {
+        return this.canEdit && this.isDirty && this.problems.length === 0;
+    }
+
+    /** Arrow function so templates can call it as a helper: (this.option code). */
+    option = (code) => {
+        return code ? (this.activities.find((activity) => activity.code === code) ?? { code, label: code }) : null;
+    };
+
+    changeConfig(config) {
+        this.config = config;
+        this.saved = this.normalize(config?.meta?.lifecycle);
+        this.lifecycle = this.normalize(config?.meta?.lifecycle);
+        this.flow = this.readFlow(config?.flow);
+        this.savedFlow = this.serializeFlow();
+        this.newActivity = { ...NEW_ACTIVITY };
+    }
+
+    /** The stored flow as plain activity objects with next activities as codes. */
+    readFlow(flow) {
+        const normalized = normalizeOrderConfigFlow(flow ?? {});
+        const result = {};
+        Object.values(normalized).forEach((activity, index) => {
+            if (!activity || typeof activity !== 'object') {
+                return;
+            }
+            const code = activity.code ?? activity.key;
+            if (!code) {
+                return;
+            }
+            result[code] = {
+                ...activity,
+                code,
+                key: activity.key ?? code,
+                sequence: activity.sequence ?? index,
+                activities: (isArray(activity.activities) ? activity.activities : []).map((next) => (typeof next === 'string' ? next : (next?.code ?? next?.key))).filter(Boolean),
+            };
+        });
+        return result;
+    }
+
+    serializeFlow() {
+        const serialized = {};
+        Object.values(this.flow).forEach((activity) => {
+            // Graph-only state never belongs in the stored flow.
+            // eslint-disable-next-line no-unused-vars
+            const { node, id, parentId, _internalModel, ...stored } = activity;
+            serialized[activity.code] = { ...stored, activities: [...(activity.activities ?? [])] };
+        });
+        return JSON.stringify(serialized);
+    }
+
+    @action setNewActivityField(field, event) {
+        this.newActivity = { ...this.newActivity, [field]: event.target.value };
+    }
+
+    @action addActivity() {
+        if (!this.canAddActivity) {
+            return;
+        }
+
+        const code = this.newActivityCode;
+        const activity = {
+            key: code,
+            code,
+            status: this.newActivity.status.trim(),
+            details: this.newActivity.details.trim(),
+            color: this.newActivity.color || '#1f2937',
+            sequence: Object.keys(this.flow).length,
+            activities: [],
+            events: [],
+            logic: [],
+            actions: [],
+            entities: [],
+            complete: false,
+            require_pod: false,
+            pod_method: 'scan',
+            options: {},
+            internalId: generateUUID(),
+        };
+
+        this.flow = { ...this.flow, [code]: activity };
+        if (this.lifecycle && !this.lifecycle.initial) {
+            this.lifecycle = { ...this.lifecycle, initial: code };
+        }
+        this.newActivity = { ...NEW_ACTIVITY };
+    }
+
+    @action removeActivity(code) {
+        const flow = { ...this.flow };
+        delete flow[code];
+        Object.keys(flow).forEach((key) => {
+            flow[key] = { ...flow[key], activities: flow[key].activities.filter((next) => next !== code) };
+        });
+        this.flow = flow;
+
+        if (this.lifecycle) {
+            const without = (value) => (value === code ? null : value);
+            this.lifecycle = {
+                ...this.lifecycle,
+                initial: without(this.lifecycle.initial),
+                completed: without(this.lifecycle.completed),
+                canceled: without(this.lifecycle.canceled),
+                terminal: this.lifecycle.terminal.filter((item) => item !== code),
+            };
+        }
+    }
+
+    @action setActivityField(code, field, event) {
+        this.flow = { ...this.flow, [code]: { ...this.flow[code], [field]: event.target.value } };
+    }
+
+    @action setNextActivities(code, selected) {
+        this.flow = { ...this.flow, [code]: { ...this.flow[code], activities: (selected ?? []).map((activity) => activity.code) } };
+    }
+
+    /** Drops the default dispatch activities so a lifecycle can be designed from nothing. */
+    @action startBlankFlow() {
+        this.modalsManager.confirm({
+            title: this.intl.t('order-config-manager.lifecycle.blank-flow-title'),
+            body: this.intl.t('order-config-manager.lifecycle.blank-flow-body'),
+            acceptButtonText: this.intl.t('order-config-manager.lifecycle.blank-flow-confirm'),
+            confirm: (modal) => {
+                this.flow = {};
+                if (this.lifecycle) {
+                    this.lifecycle = { ...this.lifecycle, initial: null, completed: null, canceled: null, terminal: [] };
+                }
+                modal.done();
+            },
+        });
+    }
+
+    normalize(lifecycle) {
+        if (!lifecycle || typeof lifecycle !== 'object' || Object.keys(lifecycle).length === 0) {
+            return null;
+        }
+
+        return {
+            ...DEFAULTS,
+            ...lifecycle,
+            terminal: isArray(lifecycle.terminal) ? [...lifecycle.terminal] : [],
+            dispatch: !['false', '0', 0, false].includes(lifecycle.dispatch),
+            strict_transitions: Boolean(lifecycle.strict_transitions),
+        };
+    }
+
+    @action toggleEnabled(enabled) {
+        if (enabled) {
+            const flow = normalizeOrderConfigFlow(this.config?.flow ?? {});
+            this.lifecycle = this.saved ? { ...this.saved, terminal: [...this.saved.terminal] } : { ...DEFAULTS, terminal: [], initial: getOrderConfigFlowRootCode(flow) ?? null };
+            return;
+        }
+
+        if (this.saved) {
+            this.modalsManager.confirm({
+                title: this.intl.t('order-config-manager.lifecycle.remove-title'),
+                body: this.intl.t('order-config-manager.lifecycle.remove-body'),
+                acceptButtonText: this.intl.t('order-config-manager.lifecycle.remove-confirm'),
+                confirm: async (modal) => {
+                    modal.startLoading();
+                    this.lifecycle = null;
+                    await this.save.perform();
+                    modal.done();
+                },
+                decline: (modal) => {
+                    modal.done();
+                },
+            });
+            return;
+        }
+
+        this.lifecycle = null;
+    }
+
+    @action setActivity(key, activity) {
+        this.lifecycle = { ...this.lifecycle, [key]: activity?.code ?? null };
+    }
+
+    @action setTerminal(activities) {
+        this.lifecycle = { ...this.lifecycle, terminal: (activities ?? []).map((activity) => activity.code) };
+    }
+
+    @action setFlag(key, value) {
+        this.lifecycle = { ...this.lifecycle, [key]: Boolean(value) };
+    }
+
+    @task *save() {
+        const meta = { ...(this.config.meta ?? {}) };
+        if (this.lifecycle) {
+            meta.lifecycle = { ...this.lifecycle };
+        } else {
+            delete meta.lifecycle;
+        }
+
+        try {
+            this.config.set('meta', meta);
+            this.config.set('flow', JSON.parse(this.serializeFlow()));
+            yield this.config.save();
+            this.saved = this.normalize(this.lifecycle);
+            this.lifecycle = this.normalize(this.lifecycle);
+            this.savedFlow = this.serializeFlow();
+            this.notifications.success(this.intl.t('order-config-manager.lifecycle.saved', { orderConfigName: this.config.name }));
+            if (typeof this.args.onConfigUpdated === 'function') {
+                this.args.onConfigUpdated(this.config);
+            }
+        } catch (error) {
+            this.config.rollbackAttributes();
+            this.lifecycle = this.normalize(this.config.meta?.lifecycle);
+            this.flow = this.readFlow(this.config.flow);
+            this.notifications.serverError(error);
+        }
+    }
+}

package/addon/components/order-config-manager.js

@@ -14,6 +14,7 @@ import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-co
 import OrderConfigManagerDetailsComponent from './order-config-manager/details';
 import OrderConfigManagerCustomFieldsComponent from './order-config-manager/custom-fields';
 import OrderConfigManagerActivityFlowComponent from './order-config-manager/activity-flow';
+import OrderConfigManagerLifecycleComponent from './order-config-manager/lifecycle';
 import OrderConfigManagerEntitiesComponent from './order-config-manager/entities';
 import findActiveTab from '../utils/find-active-tab';
 
@@ -45,6 +46,7 @@ export default class OrderConfigManagerComponent extends Component {
             this.universe._createMenuItem(this.intl.t('order-config-manager.tabs.details'), null, { icon: 'circle-info', component: OrderConfigManagerDetailsComponent }),
             this.universe._createMenuItem(this.intl.t('order-config-manager.tabs.custom-fields'), null, { icon: 'rectangle-list', component: OrderConfigManagerCustomFieldsComponent }),
             this.universe._createMenuItem(this.intl.t('order-config-manager.tabs.activity-flow'), null, { icon: 'diagram-project', component: OrderConfigManagerActivityFlowComponent }),
+            this.universe._createMenuItem(this.intl.t('order-config-manager.tabs.lifecycle'), null, { icon: 'arrows-spin', component: OrderConfigManagerLifecycleComponent }),
             this.universe._createMenuItem(this.intl.t('order-config-manager.tabs.entities'), null, { icon: 'boxes-packing', component: OrderConfigManagerEntitiesComponent }),
         ];
 
@@ -106,7 +108,9 @@ export default class OrderConfigManagerComponent extends Component {
      */
     @task *loadOrderConfigs(options = {}) {
         try {
-            const configs = yield this.store.findAll('order-config').then(Array.from);
+            // Always fetch: `findAll` otherwise resolves with whatever subset of configs the store
+            // already holds (e.g. from an order's embedded config) and only refreshes in the background.
+            const configs = yield this.store.findAll('order-config', { reload: true }).then(Array.from);
             let currentConfig;
             if (isArray(configs) && configs.length > 0) {
                 currentConfig = configs.find((c) => c.id === this.args.orderConfig);

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

@@ -214,7 +214,7 @@
                     <div class="dark:text-gray-100">
                         <div class="grid grid-cols-7">
                             <div class="flex flex-col items-start justify-start pt-3">
-                                <img src="/engines-dist/images/boxes/{{parcelFee.size}}.png" alt="parcel size {{parcelFee.size}}" width="44" class="w-11" />
+                                <img src={{parcel-box-image parcelFee.size}} alt="parcel size {{parcelFee.size}}" width="44" class="w-11" />
                                 <div class="mt-2 text-sm font-medium">
                                     {{humanize parcelFee.size}}
                                 </div>

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

@@ -423,7 +423,7 @@
                     <div class="dark:text-gray-100">
                         <div class="grid grid-cols-7">
                             <div class="flex flex-col items-start justify-start pt-3">
-                                <img src="/engines-dist/images/boxes/{{parcelFee.size}}.png" alt="parcel size {{parcelFee.size}}" width="44" class="w-11" />
+                                <img src={{parcel-box-image parcelFee.size}} alt="parcel size {{parcelFee.size}}" width="44" class="w-11" />
                                 <label class="mt-2">{{humanize parcelFee.size}}</label>
                             </div>
                             <div class="col-span-6 dimensions-box space-x-2">