@zeniai/client-epic-state 5.2.74 → 5.2.76

package/lib/view/invoicing/editInvoicingSubscriptionDetailView/fetchInvoicingSubscriptionEstimateEpic.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchInvoicingSubscriptionEstimateEpic = void 0;
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const couponSelector_1 = require("../../../entity/invoicing/coupon/couponSelector");
+const responsePayload_1 = require("../../../responsePayload");
+const editInvoicingSubscriptionDetailViewPayload_1 = require("./editInvoicingSubscriptionDetailViewPayload");
+const editInvoicingSubscriptionDetailViewReducer_1 = require("./editInvoicingSubscriptionDetailViewReducer");
+const saveInvoicingSubscriptionEpic_1 = require("./saveInvoicingSubscriptionEpic");
+// Posts Save's exact body; a changed coupon rides along as `coupons` (Save syncs it after the PUT).
+const fetchInvoicingSubscriptionEstimateEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(editInvoicingSubscriptionDetailViewReducer_1.fetchInvoicingSubscriptionEstimate.match), (0, operators_1.switchMap)((action) => {
+    const { id } = action.payload;
+    const { data, localData, previousCouponCode } = (0, saveInvoicingSubscriptionEpic_1.invoicingSubscriptionSaveRequest)(state$.value, id);
+    const couponCode = localData.couponId;
+    const coupon = (0, couponSelector_1.getInvoicingCouponByCode)(state$.value.invoicingCouponState, couponCode);
+    const body = id != null &&
+        (0, saveInvoicingSubscriptionEpic_1.isInvoicingSubscriptionCouponChanged)(previousCouponCode, couponCode)
+        ? {
+            ...data,
+            coupons: couponCode !== ''
+                ? [
+                    {
+                        applied_count: 0,
+                        apply_till: null,
+                        coupon_code: couponCode,
+                        coupon_id: coupon?.id ?? couponCode,
+                    },
+                ]
+                : [],
+        }
+        : data;
+    const baseUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/subscriptions`;
+    const url = id != null
+        ? `${baseUrl}/${encodeURIComponent(id)}/estimate`
+        : `${baseUrl}/estimate`;
+    return zeniAPI
+        .postAndGetJSON(url, body)
+        .pipe((0, operators_1.map)((response) => (0, responsePayload_1.isSuccessResponse)(response) && response.data != null
+        ? (0, editInvoicingSubscriptionDetailViewReducer_1.updateInvoicingSubscriptionEstimate)({
+            estimate: (0, editInvoicingSubscriptionDetailViewPayload_1.mapInvoicingSubscriptionEstimatePayloadToState)(response.data),
+            id,
+        })
+        : (0, editInvoicingSubscriptionDetailViewReducer_1.updateInvoicingSubscriptionEstimateFailure)({
+            id,
+            status: response.status,
+        })), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, editInvoicingSubscriptionDetailViewReducer_1.updateInvoicingSubscriptionEstimateFailure)({
+        id,
+        status: (0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Subscription estimate REST API call errored out ' +
+            JSON.stringify(error)),
+    }))));
+}));
+exports.fetchInvoicingSubscriptionEstimateEpic = fetchInvoicingSubscriptionEstimateEpic;

package/lib/view/invoicing/editInvoicingSubscriptionDetailView/saveInvoicingSubscriptionEpic.d.ts

@@ -1,5 +1,6 @@
 import { ActionsObservable, StateObservable } from 'redux-observable';
 import { Observable } from 'rxjs';
+import { ID } from '../../../commonStateTypes/common';
 import { updateAddresses } from '../../../entity/address/addressReducer';
 import { updateInvoicingSubscriptions } from '../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionReducer';
 import { openSnackbar } from '../../../entity/snackbar/snackbarReducer';
@@ -10,5 +11,12 @@ import { invalidateInvoicingCustomerDetail } from '../editInvoicingCustomerDetai
 import { invalidateInvoiceListForCustomer } from '../invoiceList/invoiceListReducer';
 import { addInvoicingSubscriptionToList } from '../invoicingSubscriptionListView/invoicingSubscriptionListViewReducer';
 import { submitInvoicingSubscriptionForm, submitInvoicingSubscriptionFormFailure, submitInvoicingSubscriptionFormSuccess, syncInvoicingSubscriptionCoupons } from './editInvoicingSubscriptionDetailViewReducer';
+import { InvoicingSubscriptionFormLocalData } from './editInvoicingSubscriptionDetailViewState';
 export type ActionType = ReturnType<typeof submitInvoicingSubscriptionForm> | ReturnType<typeof submitInvoicingSubscriptionFormSuccess> | ReturnType<typeof submitInvoicingSubscriptionFormFailure> | ReturnType<typeof syncInvoicingSubscriptionCoupons> | ReturnType<typeof resetNewAddressDataInLocalStore> | ReturnType<typeof updateAddresses> | ReturnType<typeof updateInvoicingSubscriptions> | ReturnType<typeof addInvoicingSubscriptionToList> | ReturnType<typeof invalidateInvoicingCustomerDetail> | ReturnType<typeof invalidateInvoiceListForCustomer> | ReturnType<typeof openSnackbar>;
+export declare const isInvoicingSubscriptionCouponChanged: (previousCouponCode: string, nextCouponCode: string) => boolean;
+export declare const invoicingSubscriptionSaveRequest: (rootState: RootState, id?: ID) => {
+    data: Record<string, unknown>;
+    localData: InvoicingSubscriptionFormLocalData;
+    previousCouponCode: string;
+};
 export declare const saveInvoicingSubscriptionEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;

package/lib/view/invoicing/editInvoicingSubscriptionDetailView/saveInvoicingSubscriptionEpic.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveInvoicingSubscriptionEpic = void 0;
+exports.saveInvoicingSubscriptionEpic = exports.invoicingSubscriptionSaveRequest = exports.isInvoicingSubscriptionCouponChanged = void 0;
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const addressReducer_1 = require("../../../entity/address/addressReducer");
@@ -17,9 +17,11 @@ const editInvoicingSubscriptionDetailViewPayload_1 = require("./editInvoicingSub
 const editInvoicingSubscriptionDetailViewReducer_1 = require("./editInvoicingSubscriptionDetailViewReducer");
 const invoicingSubscriptionFormConfig_1 = require("./invoicingSubscriptionFormConfig");
 const normalizeCouponCode = (value) => (value ?? '').trim().toUpperCase();
-const saveInvoicingSubscriptionEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(editInvoicingSubscriptionDetailViewReducer_1.submitInvoicingSubscriptionForm.match), (0, operators_1.mergeMap)((action) => {
-    const { id } = action.payload;
-    const rootState = state$.value;
+const isInvoicingSubscriptionCouponChanged = (previousCouponCode, nextCouponCode) => normalizeCouponCode(previousCouponCode) !==
+    normalizeCouponCode(nextCouponCode);
+exports.isInvoicingSubscriptionCouponChanged = isInvoicingSubscriptionCouponChanged;
+// The draft a save reads and the body it sends; the estimate previews the same body.
+const invoicingSubscriptionSaveRequest = (rootState, id) => {
     const viewState = rootState.editInvoicingSubscriptionDetailViewState;
     const localData = (id != null
         ? viewState.editDraftById[id]?.localData
@@ -28,18 +30,24 @@ const saveInvoicingSubscriptionEpic = (actions$, state$, zeniAPI) => actions$.pi
     // object in the payload (same pattern as the customer save flow).
     const shippingAddress = rootState.addressViewState.newAddressState?.[invoicingSubscriptionFormConfig_1.INVOICING_SUBSCRIPTION_SHIPPING_ADDRESS_TYPE]?.addressToCreate;
     const data = (0, editInvoicingSubscriptionDetailViewPayload_1.localDataToSaveInvoicingSubscriptionPayload)(localData, shippingAddress);
-    // Coupons are synced via apply/remove-coupon after PUT (not via coupon_ids).
     if (id != null) {
         delete data.coupon_ids;
     }
+    const savedCoupon = id != null
+        ? rootState.invoicingSubscriptionState.invoicingSubscriptionByID[id]
+            ?.coupons?.[0]
+        : undefined;
+    return {
+        data,
+        localData,
+        previousCouponCode: savedCoupon?.couponCode ?? savedCoupon?.couponID ?? '',
+    };
+};
+exports.invoicingSubscriptionSaveRequest = invoicingSubscriptionSaveRequest;
+const saveInvoicingSubscriptionEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(editInvoicingSubscriptionDetailViewReducer_1.submitInvoicingSubscriptionForm.match), (0, operators_1.mergeMap)((action) => {
+    const { id } = action.payload;
+    const { data, localData, previousCouponCode } = (0, exports.invoicingSubscriptionSaveRequest)(state$.value, id);
     const baseUrl = `${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0`;
-    const previousCouponCode = id != null
-        ? (rootState.invoicingSubscriptionState.invoicingSubscriptionByID[id]
-            ?.coupons?.[0]?.couponCode ??
-            rootState.invoicingSubscriptionState.invoicingSubscriptionByID[id]
-                ?.coupons?.[0]?.couponID ??
-            '')
-        : '';
     const request$ = id != null
         ? zeniAPI.putAndGetJSON(`${baseUrl}/subscriptions/${encodeURIComponent(id)}`, { ...data })
         : zeniAPI.postAndGetJSON(`${baseUrl}/subscriptions`, { ...data });
@@ -57,8 +65,7 @@ const saveInvoicingSubscriptionEpic = (actions$, state$, zeniAPI) => actions$.pi
         }
         const saved = response.data;
         const couponChanged = id != null &&
-            normalizeCouponCode(previousCouponCode) !==
-                normalizeCouponCode(localData.couponId);
+            (0, exports.isInvoicingSubscriptionCouponChanged)(previousCouponCode, localData.couponId);
         // Edit + coupon change: merge the saved subscription, then hand the
         // coupon attach/detach to syncInvoicingSubscriptionCouponsEpic, which
         // finishes the flow (form success on both calls ok, form failure

package/lib/view/taskManager/taskListView/taskListSelector.d.ts

@@ -38,10 +38,20 @@ export interface TaskListSelectorView extends SelectorView {
     userGroupList: UserGroupListSelectorView;
     userList: UserListSelectorView;
 }
+/**
+ * Exactly the parts of `TaskListState` the grouping pipeline reads.
+ *
+ * `TaskListState` also carries `localData` — the current selection and the
+ * group name being typed — which changes on every checkbox click and every
+ * keystroke. None of the work below looks at it, so naming the real inputs is
+ * what lets the pipeline be memoised against them instead of against the whole
+ * slice. `TaskListState` still satisfies this, so callers are unaffected.
+ */
+type TaskListGroupingInputs = Pick<TaskListState, 'filters' | 'taskIdsByAssignees' | 'taskIdsByDueDate' | 'taskIdsByGroupsIds' | 'taskIdsByPriority' | 'taskIdsByStatus' | 'taskIdsByTags' | 'uiState'>;
 export declare const getTaskListGroupedByAssignees: ({ taskListState, taskState, userState, userRoleState, addressState, tagState, userGroupsState, }: {
     addressState: AddressState;
     tagState: TagState;
-    taskListState: TaskListState;
+    taskListState: TaskListGroupingInputs;
     taskState: TaskState;
     userGroupsState: UserGroupsState;
     userRoleState: UserRoleState;
@@ -55,7 +65,7 @@ export declare const getTaskListGroupedByAssignees: ({ taskListState, taskState,
 export declare const getTaskListGroupedByPriority: ({ taskListState, taskState, userState, userRoleState, addressState, tagState, userGroupsState, }: {
     addressState: AddressState;
     tagState: TagState;
-    taskListState: TaskListState;
+    taskListState: TaskListGroupingInputs;
     taskState: TaskState;
     userGroupsState: UserGroupsState;
     userRoleState: UserRoleState;
@@ -67,3 +77,4 @@ export declare const getTaskListGroupedByPriority: ({ taskListState, taskState,
     tasks: TaskWithUserDetails[];
 }[];
 export declare const getAllTasks: (state: RootState, isTaskTemplatesEnabled: boolean) => TaskListSelectorView;
+export {};

package/lib/view/taskManager/taskListView/taskListSelector.js

@@ -7,6 +7,7 @@ exports.getAllTasks = exports.getTaskListGroupedByPriority = exports.getTaskList
 const toolkit_1 = require("@reduxjs/toolkit");
 const orderBy_1 = __importDefault(require("lodash/orderBy"));
 const sortOrderPayload_1 = require("../../../commonPayloadTypes/sortOrderPayload");
+const common_1 = require("../../../commonStateTypes/common");
 const reduceFetchState_1 = require("../../../commonStateTypes/reduceFetchState");
 const tagSelector_1 = require("../../../entity/tag/tagSelector");
 const taskSelector_1 = require("../../../entity/task/taskSelector");
@@ -23,14 +24,18 @@ const taskList_1 = require("./taskList");
 const taskListFilterHelpers_1 = require("./taskListFilterHelpers");
 const sortTasksList = (tagState, tasksList, sortKey, sortOrder) => {
     const tasksInOrder = (0, orderBy_1.default)(tasksList, (task) => {
-        const tagsByIds = (0, tagSelector_1.getTagsByIds)(tagState, task.tagIds);
         switch (sortKey) {
             case 'dueDate':
                 return task.dueDate;
             case 'creationDate':
                 return task.createTime;
             case 'tag':
-                return tagsByIds[0]?.name ?? ''; // only one tag is supported
+                // Resolved HERE, not above the switch. Hoisted, it allocated a fresh
+                // array per task on every sort key, which made `tagState` a real
+                // dependency of the whole pipeline: tags arriving after first paint
+                // then rebuilt every group and re-rendered every row, moving that
+                // work out from behind the skeleton and into the user's hands.
+                return (0, tagSelector_1.getTagsByIds)(tagState, task.tagIds)[0]?.name ?? ''; // only one tag is supported
             case 'status':
                 return task.status.name;
             case 'priority':
@@ -75,8 +80,7 @@ const getTasksWithUserDetails = ({ taskListState, taskState, userState, userRole
     const sortedTaskList = sortTasksList(tagState, filteredTaskList, sortKey, sortOrder);
     return sortedTaskList;
 };
-const getTaskListGroupedByGroupName = ({ taskListState, taskState, taskGroupState, taskGroupViewState, userState, userRoleState, addressState, tagState, userGroupsState, }) => {
-    const { taskGroupsIds } = taskGroupViewState;
+const getTaskListGroupedByGroupName = ({ taskListState, taskState, taskGroupState, taskGroupsIds, userState, userRoleState, addressState, tagState, userGroupsState, }) => {
     const taskGroupsWithTasksList = taskGroupsIds
         .map((taskGroupId) => {
         const taskGroup = (0, taskGroupSelector_1.getTaskGroupById)(taskGroupState, taskGroupId);
@@ -118,6 +122,7 @@ const getTaskListGroupedByGroupName = ({ taskListState, taskState, taskGroupStat
     if (defaultTaskGroup != null) {
         sortedTaskGroupsWithTasksList.push(defaultTaskGroup);
     }
+    // Also hides deleted groups, which are empty as a side effect.
     return sortedTaskGroupsWithTasksList.filter((group) => group.tasks.length > 0);
 };
 const getTaskListGroupedByAssignees = ({ taskListState, taskState, userState, userRoleState, addressState, tagState, userGroupsState, }) => {
@@ -249,7 +254,7 @@ const getTaskListGroupedByDueDate = ({ taskListState, taskState, userState, user
     });
     return taskGroupsWithTasksList.filter((group) => group.tasks.length > 0);
 };
-const getTaskGroupsWithTaskList = ({ taskListState, taskState, userState, userRoleState, addressState, taskGroupState, taskGroupViewState, tagState, userGroupsState, }) => {
+const getTaskGroupsWithTaskList = ({ taskListState, taskState, userState, userRoleState, addressState, taskGroupState, taskGroupsIds, tagState, userGroupsState, }) => {
     const { groupByKey } = taskListState.uiState;
     if (groupByKey === 'groupName') {
         return getTaskListGroupedByGroupName({
@@ -259,7 +264,7 @@ const getTaskGroupsWithTaskList = ({ taskListState, taskState, userState, userRo
             userRoleState,
             addressState,
             taskGroupState,
-            taskGroupViewState,
+            taskGroupsIds,
             tagState,
             userGroupsState,
         });
@@ -318,24 +323,70 @@ const getTaskGroupsWithTaskList = ({ taskListState, taskState, userState, userRo
         userGroupsState,
     });
 };
-exports.getAllTasks = (0, toolkit_1.createSelector)((state) => state.taskListState, (state) => state.taskState, (state) => state.userState, (state) => state.userRoleState, (state) => state.userListViewState, (state) => state.addressState, (state) => state.taskGroupState, (state) => state.taskGroupViewState, (state) => state.tagViewState, (state) => state.tagState, (state) => state.taskGroupTemplateState, (state) => state.taskGroupTemplateViewState, (state) => state.userGroupsState, (state) => state.userGroupListViewState, (_state, isTaskTemplatesEnabled) => isTaskTemplatesEnabled, (taskListState, taskState, userState, userRoleState, userListViewState, addressState, taskGroupState, taskGroupViewState, tagViewState, tagState, taskGroupTemplateState, taskGroupTemplateViewState, userGroupsState, userGroupListViewState, isTaskTemplatesEnabled) => {
+/**
+ * Tags are STRUCTURAL only when they name a group or order the rows. Anywhere
+ * else they are decoration on a row that has already rendered.
+ */
+const tagsAreStructural = (uiState) => uiState.groupByKey === 'tag' || uiState.sortKey === 'tag';
+/** One frozen instance, so the "tags are not structural" input never changes. */
+const EMPTY_TAG_STATE = { tagByID: {} };
+/** Inputs are listed field by field, not as the slice: immer keeps each one
+ *  referentially stable when `localData` changes, so the memo holds. */
+const getTaskGroupsWithTaskListMemoized = (0, toolkit_1.createSelector)((state) => state.taskListState.uiState, (state) => state.taskListState.filters, (state) => state.taskListState.taskIdsByGroupsIds, (state) => state.taskListState.taskIdsByAssignees, (state) => state.taskListState.taskIdsByPriority, (state) => state.taskListState.taskIdsByStatus, (state) => state.taskListState.taskIdsByTags, (state) => state.taskListState.taskIdsByDueDate, (state) => state.taskState, (state) => state.userState, (state) => state.userRoleState, (state) => state.addressState, (state) => state.taskGroupState, 
+// `taskGroupsIds`, not the whole slice. `TaskGroupViewState` also carries
+// taskGroupCreationStatus / DeleteStatus / UpdateStatus and fetchState, and
+// none of them reach the board — but each transition produces a fresh slice
+// reference, so an inline group rename alone rebuilt the entire grouped list
+// twice (In-Progress, then Completed). That is the same needless rebuild this
+// change removes for the other slices.
+(state) => state.taskGroupViewState.taskGroupsIds, 
+// Only when tags are STRUCTURAL — they name a group or order the rows.
+// Otherwise a stable empty slice, so tags landing after first paint cannot
+// invalidate this memo and rebuild a board the user is already using.
+(state) => tagsAreStructural(state.taskListState.uiState)
+    ? state.tagState
+    : EMPTY_TAG_STATE, (state) => state.userGroupsState, (uiState, filters, taskIdsByGroupsIds, taskIdsByAssignees, taskIdsByPriority, taskIdsByStatus, taskIdsByTags, taskIdsByDueDate, taskState, userState, userRoleState, addressState, taskGroupState, taskGroupsIds, tagState, userGroupsState) => getTaskGroupsWithTaskList({
+    taskListState: {
+        uiState,
+        filters,
+        taskIdsByGroupsIds,
+        taskIdsByAssignees,
+        taskIdsByPriority,
+        taskIdsByStatus,
+        taskIdsByTags,
+        taskIdsByDueDate,
+    },
+    taskState,
+    userState,
+    userRoleState,
+    addressState,
+    taskGroupState,
+    taskGroupsIds,
+    tagState,
+    userGroupsState,
+}));
+exports.getAllTasks = (0, toolkit_1.createSelector)(
+// `taskState`, `taskGroupState`, `addressState` and `tagState` are gone from
+// here: the grouped list was their only consumer and it is memoised
+// separately now, so a tag edit or an address arriving no longer rebuilds
+// this view.
+(state) => state.taskListState, (state) => state.userState, (state) => state.userRoleState, (state) => state.userListViewState, (state) => state.taskGroupViewState, (state) => state.tagViewState, 
+// A BOOLEAN, not the tag slice: reselect compares primitives by value, so
+// this invalidates only when the map goes empty <-> non-empty.
+(state) => (0, common_1.hasAnyKey)(state.tagState.tagByID), (state) => state.taskGroupTemplateState, (state) => state.taskGroupTemplateViewState, (state) => state.userGroupsState, (state) => state.userGroupListViewState, getTaskGroupsWithTaskListMemoized, (_state, isTaskTemplatesEnabled) => isTaskTemplatesEnabled, (taskListState, userState, userRoleState, userListViewState, taskGroupViewState, tagViewState, hasAnyTag, taskGroupTemplateState, taskGroupTemplateViewState, userGroupsState, userGroupListViewState, taskGroupsWithTasksList, isTaskTemplatesEnabled) => {
     const { localData } = taskListState;
-    const taskGroupsWithTasksList = getTaskGroupsWithTaskList({
-        taskListState,
-        taskState,
-        userState,
-        userRoleState,
-        addressState,
-        taskGroupState,
-        taskGroupViewState,
-        tagState,
-        userGroupsState,
-    });
+    // Only the data the list is BUILT from. Tags decorate a row that can
+    // already be drawn.
     const fetchStateVariables = [
         taskListState,
         taskGroupViewState,
-        tagViewState,
     ];
+    // Structural tags are waited on. A failed fetch is bypassed only when tags
+    // are already in the store, because then the headers still render.
+    if (tagsAreStructural(taskListState.uiState) &&
+        !(hasAnyTag && tagViewState.fetchState === 'Error')) {
+        fetchStateVariables.push(tagViewState);
+    }
     if (isTaskTemplatesEnabled) {
         fetchStateVariables.push(taskGroupTemplateViewState);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeniai/client-epic-state",
-  "version": "5.2.74",
+  "version": "5.2.76",
   "description": "Shared module between Web & Mobile containing required abstractions for state management, async network communication. ",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",