@dropins/storefront-purchase-order 0.0.3-alpha2 → 0.0.4-alpha2

package/i18n/en_US.json.d.ts

@@ -13,7 +13,13 @@ declare const _default: {
       "noPurchaseOrders": "No purchase orders requiring my approval found."
     },
     "approvalRulesList": {
-      "containerTitle": "Approval Rules",
+      "containerTitle": "Approval rules",
+      "emptyTitle": "No approval rules found",
+      "ariaLabel": {
+        "editRule": "Edit approval rule {{ruleName}}",
+        "deleteRule": "Delete approval rule {{ruleName}}",
+        "viewRule": "View approval rule {{ruleName}}"
+      },
       "buttons": {
         "newRule": "Add New Rule"
       }
@@ -87,6 +93,90 @@ declare const _default: {
       "title": "Your Purchase Order has been submitted for approval.",
       "messagePrefix": "Your Purchase Order request number is",
       "messageSuffix": "A copy of this Purchase Order will be emailed to you shortly."
+    },
+    "approvalRuleForm": {
+      "headerText": "Purchase Order Approval Rule",
+      "titleAppliesTo": "Applies to",
+      "titleRuleType": "Rule Type",
+      "titleRequiresApprovalRole": "Requires Approval From",
+      "fields": {
+        "enabled": "Enabled",
+        "disabled": "Disabled",
+        "inputRuleName": {
+          "floatingLabel": "Rule Name",
+          "placeholder": "Rule Name"
+        },
+        "textAreaDescription": {
+          "label": "Description"
+        },
+        "appliesTo": {
+          "allUsers": "All Users",
+          "specificRoles": "Specific Roles"
+        },
+        "ruleTypeOptions": {
+          "grandTotal": "Grand Total",
+          "shippingInclTax": "Shipping Cost",
+          "numberOfSkus": "Number of SKUs"
+        },
+        "conditionOperators": {
+          "moreThan": "is more than",
+          "lessThan": "is less than",
+          "moreThanOrEqualTo": "is more than or equal to",
+          "lessThanOrEqualTo": "is less than or equal to"
+        },
+        "inputQuantity": {
+          "floatingLabel": "Enter Amount",
+          "placeholder": "Enter Amount"
+        },
+        "inputAmount": {
+          "floatingLabel": "Enter Amount",
+          "placeholder": "Enter Amount"
+        },
+        "buttons": {
+          "cancel": "Cancel",
+          "save": "Save"
+        }
+      },
+      "errorsMessages": {
+        "required": "This field is required.",
+        "quantity": "Quantity must be greater than 0.",
+        "amount": "Amount must be greater than 0.",
+        "approvers": "Please select at least one approver."
+      }
+    },
+    "approvalRuleDetails": {
+      "containerTitle": "View Approval Rule",
+      "buttons": {
+        "back": "Back to Rules List"
+      },
+      "fields": {
+        "ruleName": "Rule Name:",
+        "status": "Status:",
+        "description": "Description:",
+        "appliesTo": "Applies To:",
+        "requiresApprovalFrom": "Requires Approval From:",
+        "ruleType": "Rule Type:",
+        "amount": {
+          "label": " amount {{currency}} {{value}}"
+        },
+        "statusView": {
+          "enabled": "Enabled",
+          "disabled": "Disabled"
+        },
+        "condition": {
+          "attribute": {
+            "grand_total": "Grand Total",
+            "shipping_incl_tax": "Shipping Cost",
+            "number_of_skus": "Number of SKUs"
+          },
+          "operator": {
+            "more_than": "Is more than",
+            "less_than": "Is less than",
+            "more_than_or_equal_to": "Is more than or equal to",
+            "less_than_or_equal_to": "Is less than or equal to"
+          }
+        }
+      }
     }
   }
 }

package/lib/cleanAndDeep.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Cleans form values and converts to snake_case for API submission
+ * - Handles role type logic (all_users vs specific_roles)
+ * - Removes empty condition values (amount or quantity)
+ * - Converts camelCase keys to snake_case
+ */
+export declare function cleanAndDeep(formValues: Record<string, any>): any;
+//# sourceMappingURL=cleanAndDeep.d.ts.map

package/lib/formValidation.d.ts

@@ -0,0 +1,22 @@
+import { FormValuesParams, ValidationApprovalFormError } from '../types/hooks';
+
+/**
+ * Validates all form fields and returns validation errors
+ * This function contains the core validation logic for the approval rule form
+ */
+export declare const validateFormFields: (values: FormValuesParams) => ValidationApprovalFormError;
+/**
+ * Returns only the errors for fields that have been touched by the user
+ * This prevents showing validation errors for fields the user hasn't interacted with yet
+ */
+export declare const getVisibleErrors: (allErrors: ValidationApprovalFormError, touchedFields: {
+    [key: string]: boolean;
+}) => ValidationApprovalFormError;
+/**
+ * Updates errors based on new validation results and touched fields
+ * This is used for incremental validation as the user fills out the form
+ */
+export declare const updateValidationErrors: (newErrors: ValidationApprovalFormError, currentErrors: ValidationApprovalFormError, touchedFields: {
+    [key: string]: boolean;
+}) => ValidationApprovalFormError;
+//# sourceMappingURL=formValidation.d.ts.map

package/lib/index.d.ts

@@ -4,4 +4,8 @@ export * from './isValidUrl';
 export * from './formatDate';
 export * from './case-converter';
 export * from './getRange';
+export * from './updateFormFieldValue';
+export * from './formValidation';
+export * from './transformToFormValues';
+export * from './cleanAndDeep';
 //# sourceMappingURL=index.d.ts.map

package/lib/transformToFormValues.d.ts

@@ -0,0 +1,9 @@
+import { PurchaseOrderApprovalRuleModel } from '../data/models';
+import { FormValuesParams } from '../types/hooks';
+
+/**
+ * Transforms API response data to form values format
+ * Handles all the necessary data conversions and provides safe defaults
+ */
+export declare const transformToFormValues: (data: PurchaseOrderApprovalRuleModel) => FormValuesParams;
+//# sourceMappingURL=transformToFormValues.d.ts.map

package/lib/updateFormFieldValue.d.ts

@@ -0,0 +1,4 @@
+import { FormValuesParams } from '../types/hooks';
+
+export declare const updateFormFieldValue: (formValues: FormValuesParams, key: string, value: string | number | boolean | string[]) => FormValuesParams;
+//# sourceMappingURL=updateFormFieldValue.d.ts.map

package/mocks/index.d.ts

@@ -2829,4 +2829,195 @@ export declare const mockGetPurchaseOrdersFullDataSnakeCase: {
         };
     };
 };
+export declare const mockCurrencyInfoSuccessResponse: {
+    data: {
+        currency: {
+            base_currency_code: string;
+            available_currency_codes: string[];
+        };
+    };
+    errors: undefined;
+};
+export declare const mockCurrencyInfoEmptyCodesResponse: {
+    data: {
+        currency: {
+            base_currency_code: string;
+            available_currency_codes: never[];
+        };
+    };
+    errors: undefined;
+};
+export declare const mockCurrencyInfoNullBaseResponse: {
+    data: {
+        currency: {
+            base_currency_code: null;
+            available_currency_codes: string[];
+        };
+    };
+    errors: undefined;
+};
+export declare const mockCurrencyInfoMissingDataResponse: {
+    data: {
+        currency: {
+            base_currency_code: string;
+            available_currency_codes: undefined;
+        };
+    };
+    errors: undefined;
+};
+export declare const mockCurrencyInfoErrorResponse: {
+    data: {
+        currency: {
+            base_currency_code: string;
+            available_currency_codes: never[];
+        };
+    };
+    errors: {
+        message: string;
+        extensions: {
+            category: string;
+        };
+    }[];
+};
+export declare const mockGetPurchaseOrderApprovalRulesSuccessSnakeCase: {
+    data: {
+        customer: {
+            email: string;
+            purchase_order_approval_rules: {
+                total_count: number;
+                page_info: {
+                    page_size: number;
+                    current_page: number;
+                    total_pages: number;
+                };
+                items: {
+                    uid: string;
+                    name: string;
+                    description: string;
+                    status: string;
+                    created_at: string;
+                    updated_at: string;
+                    created_by: string;
+                    applies_to_roles: {
+                        id: string;
+                        name: string;
+                        users_count: number;
+                        permissions: {
+                            id: string;
+                            sort_order: number;
+                            text: string;
+                            children: never[];
+                        }[];
+                    }[];
+                    approver_roles: {
+                        id: string;
+                        name: string;
+                        users_count: number;
+                        permissions: {
+                            id: string;
+                            sort_order: number;
+                            text: string;
+                            children: never[];
+                        }[];
+                    }[];
+                    condition: {
+                        attribute: string;
+                        operator: string;
+                    };
+                }[];
+            };
+        };
+    };
+};
+export declare const mockGetPurchaseOrderApprovalRulesErrorSnakeCase: {
+    errors: {
+        message: string;
+        extensions: {
+            category: string;
+        };
+    }[];
+};
+export declare const mockCurrencyInfoNoDataResponse: {
+    data: null;
+    errors: undefined;
+};
+export declare const mockCurrencyInfoNoCurrencyResponse: {
+    data: {};
+    errors: undefined;
+};
+export declare const mockCurrencyInfoPartialResponse: {
+    data: {
+        currency: {
+            base_currency_code: string;
+            available_currency_codes: undefined;
+        };
+    };
+    errors: undefined;
+};
+export declare const mockGetPurchaseOrderApprovalRulesEmptyDataSnakeCase: {
+    data: {
+        customer: {
+            email: string;
+            purchase_order_approval_rules: {
+                total_count: number;
+                page_info: {
+                    page_size: number;
+                    current_page: number;
+                    total_pages: number;
+                };
+                items: never[];
+            };
+        };
+    };
+};
+export declare const mockGetPurchaseOrderApprovalRulesIncompleteDataSnakeCase: {
+    data: {
+        customer: {
+            email: string;
+            purchase_order_approval_rules: {
+                total_count: number;
+                page_info: {
+                    page_size: number;
+                    current_page: number;
+                    total_pages: number;
+                };
+                items: {
+                    uid: string;
+                    name: string;
+                    description: null;
+                    status: string;
+                    created_at: string;
+                    updated_at: string;
+                    created_by: null;
+                    applies_to_roles: never[];
+                    approver_roles: never[];
+                    condition: null;
+                }[];
+            };
+        };
+    };
+};
+export declare const mockGetPurchaseOrderApprovalRulesNullDataSnakeCase: {
+    data: {
+        customer: {
+            email: string;
+            purchase_order_approval_rules: null;
+        };
+    };
+};
+export declare const mockGetPurchaseOrderApprovalRulesMissingRulesSnakeCase: {
+    data: {
+        customer: {
+            email: string;
+            purchase_order_approval_rules: {
+                total_count: number;
+                page_info: {
+                    page_size: number;
+                    current_page: number;
+                    total_pages: number;
+                };
+            };
+        };
+    };
+};
 //# sourceMappingURL=index.d.ts.map

package/mocks/storybook/events-data.d.ts

@@ -0,0 +1,12 @@
+export declare const mockPermissions: {
+    all: boolean;
+    'Magento_Company::index': boolean;
+    'Magento_Sales::all': boolean;
+    'Magento_PurchaseOrder::all': boolean;
+    'Magento_PurchaseOrder::view_purchase_orders': boolean;
+    'Magento_PurchaseOrderRule::super_approve_purchase_order': boolean;
+    'Magento_Company::user_management': boolean;
+    'Magento_PurchaseOrderRule::view_approval_rules': boolean;
+    'Magento_PurchaseOrderRule::manage_approval_rules': boolean;
+};
+//# sourceMappingURL=events-data.d.ts.map

package/mocks/storybook/index.d.ts

@@ -25,5 +25,8 @@
  * These handlers intercept actual GraphQL requests and return
  * realistic mock responses for different scenarios.
  */
+export { storybookHandlers, purchaseOrderHandlers, purchaseOrderLoadingHandlers, purchaseOrderEmptyHandlers, purchaseOrderErrorHandlers, purchaseOrderPaginationHandlers, companyPurchaseOrderPaginationHandlers, } from './purchase-orders';
+export * from './events-data';
 export * from './purchase-orders';
+export * from './approval-rules';
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1 +1 @@
-{"name": "@dropins/storefront-purchase-order", "version": "0.0.3-alpha2", "@dropins/tools": "1.5.1", "license": "SEE LICENSE IN LICENSE.md"}
+{"name": "@dropins/storefront-purchase-order", "version": "0.0.4-alpha2", "@dropins/tools": "^1.6.0-alpha2", "license": "SEE LICENSE IN LICENSE.md"}

package/render.js

@@ -1,5 +1,6 @@
 /*! Copyright 2025 Adobe
 All Rights Reserved. */
-(function(n,t){try{if(typeof document<"u"){const e=document.createElement("style"),o=t.styleId;for(const a in t.attributes)e.setAttribute(a,t.attributes[a]);e.setAttribute("data-dropin",o),e.appendChild(document.createTextNode(n));const r=document.querySelector('style[data-dropin="sdk"]');if(r)r.after(e);else{const a=document.querySelector('link[rel="stylesheet"], style');a?a.before(e):document.head.append(e)}}}catch(e){console.error("dropin-styles (injectCodeFunction)",e)}})('.b2b-purchase-order-purchase-orders-table{display:flex;flex-direction:column;gap:var(--spacing-medium)}.b2b-purchase-order-purchase-orders-table a{cursor:pointer}.b2b-purchase-order-purchase-orders-table .purchase-orders-table__item--skeleton{max-width:200px}.purchase-orders-table__empty-state{text-align:center;color:var(--color-neutral-600);font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.purchase-orders-table__pagination-wrapper{display:flex;justify-content:space-between;align-items:center}.purchase-orders-table__pagination-page-size{display:flex;align-items:center;gap:var(--spacing-small)}.purchase-orders-table__pagination-counter,.purchase-orders-table__pagination-page-size{color:var(--color-neutral-800);font:var(--type-body-2-default-font);letter-spacing:var(--type-body-2-default-letter-spacing)}@media (max-width: 783px){.purchase-orders-table__pagination-wrapper{display:grid;grid-template-areas:"counter page-size" "pagination pagination";grid-template-columns:auto auto;gap:var(--spacing-small)}.purchase-orders-table__pagination-counter{grid-area:counter}.purchase-orders-table__pagination-page-size{grid-area:page-size}.purchase-orders-table__pagination{grid-area:pagination;justify-self:center}}@media (max-width: 600px){.purchase-orders-table__pagination-wrapper{grid-template-areas:"counter" "page-size" "pagination";grid-template-columns:1fr;justify-items:center}.purchase-orders-table__pagination-counter{grid-area:counter}.purchase-orders-table__pagination-page-size{grid-area:page-size}.purchase-orders-table__pagination{grid-area:pagination}}.purchase-orders-header{margin-bottom:var(--spacing-medium)}.b2b-purchase-order-purchase-orders-table-actions{display:flex;justify-content:space-between;align-items:center}.b2b-purchase-order-purchase-orders-table-actions__buttons{display:flex;gap:10px;justify-content:space-between}.purchase-orders-confirmation-content__title{color:var(--color-neutral-800);font:var(--type-headline-1-font);letter-spacing:var(--type-headline-1-letter-spacing)}.purchase-orders-confirmation-content__message{font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.purchase-orders-confirmation-content__link{color:var(--color-brand-500);font:var(--type-body-1-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing)}',{styleId:"b2b-purchase-order"});
-import{jsx as r}from"@dropins/tools/preact-jsx-runtime.js";import{Render as d}from"@dropins/tools/lib.js";import{useState as p,useEffect as n}from"@dropins/tools/preact-hooks.js";import{UIProvider as l}from"@dropins/tools/components.js";import{events as u}from"@dropins/tools/event-bus.js";const c={customerPurchaseOrders:{containerTitle:"My purchase orders",noPurchaseOrders:"No purchase orders found."},companyPurchaseOrders:{containerTitle:"Company purchase orders",noPurchaseOrders:"No company purchase orders found."},requireApprovalPurchaseOrders:{containerTitle:"Requires my approval",noPurchaseOrders:"No purchase orders requiring my approval found."},approvalRulesList:{containerTitle:"Approval Rules",buttons:{newRule:"Add New Rule"}},alertMessages:{header:{approve:"Approve Purchase Orders",reject:"Reject Purchase Orders",error:"Error"},description:{approve:"The selected purchase orders were approved successfully.",reject:"The selected purchase orders were rejected successfully.",error:"An error occurred while processing your request."}},purchaseOrdersTable:{noPurchaseOrders:{default:"No purchase orders found."},pagination:{status:"Items {{from}} to {{to}} of {{total}} total",pageSizeLabel:{start:"Show",end:"per page"}},loading:"Loading purchase orders...",actionView:"View",actionEdit:"Edit",actionDelete:"Delete",rulesStatus:{enabled:"Enabled",disabled:"Disabled"},ruleTypes:{grand_total:"Grand Total",number_of_skus:"Number of SKUs",any_item:"Any Item",all_items:"All Items"},appliesToAll:"All",statusOrder:{order_placed:"Order placed",order_failed:"Order failed",pending:"Pending",approved:"Approved",rejected:"Rejected",canceled:"Canceled",order_in_progress:"Order in progress",approval_required:"Approval required",approved_pending_payment:"Approved pending Payment"},tableColumns:{poNumber:"PO #",orderNumber:"Order #",createdDate:"Created",updatedDate:"Updated",createdBy:"Created By",status:"Status",total:"Total",action:"Action",ruleName:"Rule Name",ruleType:"Rule Type",appliesTo:"Applies To",approver:"Approver",selectAllAriaLabel:"Select all not approved purchase orders"}},purchaseOrderConfirmation:{title:"Your Purchase Order has been submitted for approval.",messagePrefix:"Your Purchase Order request number is",messageSuffix:"A copy of this Purchase Order will be emailed to you shortly."}},i={PurchaseOrders:c},m={default:i},h=({children:a})=>{const[o,s]=p("en_US");return n(()=>{const e=u.on("locale",t=>{s(t)},{eager:!0});return()=>{e==null||e.off()}},[]),r(l,{lang:o,langDefinitions:m,children:a})},P=new d(r(h,{}));export{P as render};
+(function(t,a){try{if(typeof document<"u"){const e=document.createElement("style"),i=a.styleId;for(const r in a.attributes)e.setAttribute(r,a.attributes[r]);e.setAttribute("data-dropin",i),e.appendChild(document.createTextNode(t));const o=document.querySelector('style[data-dropin="sdk"]');if(o)o.after(e);else{const r=document.querySelector('link[rel="stylesheet"], style');r?r.before(e):document.head.append(e)}}}catch(e){console.error("dropin-styles (injectCodeFunction)",e)}})(`.dropin-skeleton{--row-gap-spacing: var(--spacing-medium);display:grid;grid-template-columns:1fr 1fr;gap:var(--row-gap-spacing)}.dropin-skeleton .dropin-skeleton--row__content{background:var(--color-neutral-300) linear-gradient(to right,var(--color-neutral-300) 0%,var(--color-neutral-100) 20%,var(--color-neutral-300) 40%,var(--color-neutral-300) 100%) no-repeat;animation:skeletonShimmer infinite 1.2s linear;border-radius:var(--shape-border-radius-2)}.dropin-skeleton__empty{background:none}.dropin-skeleton-row--multiline{--multiline-gap-spacing: var(--spacing-medium);display:grid;grid-auto-rows:max-content;gap:var(--multiline-gap-spacing)}.dropin-skeleton-row--full{grid-column:1 / -1}.dropin-skeleton-row svg{fill:var(--color-neutral-400);fill-opacity:.5;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeholderShimmer;animation-timing-function:linear}.dropin-skeleton-row__row-xsmall{height:32px}.dropin-skeleton-row__row-small{height:40px}.dropin-skeleton-row__row-medium{height:48px}.dropin-skeleton-row__row-large{height:56px}.dropin-skeleton-row__row-xlarge{height:72px}.dropin-skeleton-row__heading-xsmall{height:20px}.dropin-skeleton-row__heading-small{height:24px}.dropin-skeleton-row__heading-medium{height:32px}.dropin-skeleton-row__heading-large{height:40px}.dropin-skeleton-row__heading-xlarge{height:48px}@keyframes skeletonShimmer{0%{background-position:-600px 0}to{background-position:600px 0}}@keyframes placeholderShimmer{0%{fill-opacity:.5}50%{fill-opacity:1}to{fill-opacity:.5}}@media only screen and (max-width: 600px){.dropin-skeleton{grid-template-columns:1fr}}
+.b2b-purchase-order-purchase-orders-table{display:flex;flex-direction:column;gap:var(--spacing-medium)}.b2b-purchase-order-purchase-orders-table a{cursor:pointer}.b2b-purchase-order-purchase-orders-table .purchase-orders-table__item--skeleton{max-width:200px}.purchase-orders-table__empty-state{text-align:center;color:var(--color-neutral-600);font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.purchase-orders-table__pagination-wrapper{display:flex;justify-content:space-between;align-items:center}.purchase-orders-table__pagination-page-size{display:flex;align-items:center;gap:var(--spacing-small)}.purchase-orders-table__pagination-counter,.purchase-orders-table__pagination-page-size{color:var(--color-neutral-800);font:var(--type-body-2-default-font);letter-spacing:var(--type-body-2-default-letter-spacing)}@media (max-width: 783px){.purchase-orders-table__pagination-wrapper{display:grid;grid-template-areas:"counter page-size" "pagination pagination";grid-template-columns:auto auto;gap:var(--spacing-small)}.purchase-orders-table__pagination-counter{grid-area:counter}.purchase-orders-table__pagination-page-size{grid-area:page-size}.purchase-orders-table__pagination{grid-area:pagination;justify-self:center}}@media (max-width: 600px){.purchase-orders-table__pagination-wrapper{grid-template-areas:"counter" "page-size" "pagination";grid-template-columns:1fr;justify-items:center}.purchase-orders-table__pagination-counter{grid-area:counter}.purchase-orders-table__pagination-page-size{grid-area:page-size}.purchase-orders-table__pagination{grid-area:pagination}}.purchase-orders-header{margin-bottom:var(--spacing-medium)}.b2b-purchase-order-purchase-orders-table-actions{display:flex;justify-content:space-between;align-items:center}.b2b-purchase-order-purchase-orders-table-actions__buttons{display:flex;gap:10px;justify-content:space-between}.b2b-purchase-order-approval-rule-form form{display:flex;flex-direction:column;gap:var(--spacing-small)}.b2b-purchase-order-approval-rule-form__rule-condition,.b2b-purchase-order-approval-rule-form__approval-role,.b2b-purchase-order-approval-rule-form__rule-type,.b2b-purchase-order-approval-rule-form__applies-to,.b2b-purchase-order-approval-rule-form__rule-condition-container,.b2b-purchase-order-approval-rule-form__buttons{display:flex;flex-direction:column;gap:var(--spacing-xsmall)}.b2b-purchase-order-approval-rule-form form>label.dropin-checkbox{align-items:center}.b2b-purchase-order-approval-rule-form__rule-type select,.b2b-purchase-order-approval-rule-form__rule-condition-container select{min-height:56px}.b2b-purchase-order-approval-rule-form__rule-condition-container{flex-direction:row;position:relative;margin-bottom:var( --spacing-medium )}.b2b-purchase-order-approval-rule-form__rule-condition-container>div{position:relative}.b2b-purchase-order-approval-rule-form__rule-condition-container .error-message{position:absolute;top:100%;left:0;right:0;z-index:10}.b2b-purchase-order-approval-rule-form__buttons{justify-content:flex-start;flex-direction:row}@media (max-width: 600px){.b2b-purchase-order-approval-rule-form__rule-condition-container{flex-direction:column;margin-bottom:var(--spacing-xsmall)}.b2b-purchase-order-approval-rule-form__rule-condition-container .error-message{position:static}.b2b-purchase-order-approval-rule-form form .dropin-multi-select{min-width:100%}}.error-message{font:var(--type-details-caption-2-font);letter-spacing:var(--type-details-caption-2-letter-spacing);padding-top:var(--spacing-xsmall);text-align:left;color:var(--color-alert-800)}.b2b-purchase-order-approval-rule-form .dropin-skeleton{width:100%;display:flex;flex-direction:column;gap:8px}.approval-rule-form-loader__section{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.approval-rule-form-loader__buttons{display:flex;gap:16px}.purchase-orders-confirmation-content__title{color:var(--color-neutral-800);font:var(--type-headline-1-font);letter-spacing:var(--type-headline-1-letter-spacing)}.purchase-orders-confirmation-content__message{font:var(--type-body-1-default-font);letter-spacing:var(--type-body-1-default-letter-spacing)}.purchase-orders-confirmation-content__link{color:var(--color-brand-500);font:var(--type-body-1-strong-font);letter-spacing:var(--type-body-1-strong-letter-spacing)}.b2b-purchase-order-approval-rule-details-content__item{margin-bottom:var(--spacing-medium);display:grid;grid-template-columns:1fr;gap:var(--spacing-xsmall)}.b2b-purchase-order-approval-rule-details-content__label{font:var(--type-body-1-emphasized-font);letter-spacing:var(--type-body-1-emphasized-letter-spacing)}.b2b-purchase-order-approval-rule-details-content__value{display:block}.b2b-purchase-order-approval-rule-details-content__value ul{margin:0;padding-left:var(--spacing-medium)}.b2b-purchase-order-form-loader .dropin-skeleton{width:100%;display:flex;flex-direction:column;gap:8px}.b2b-purchase-order-form-loader .approval-rule-form-loader__section{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.b2b-purchase-order-form-loader .approval-rule-form-loader__buttons{display:flex;gap:16px}`,{styleId:"b2b-purchase-order"});
+import{jsx as r}from"@dropins/tools/preact-jsx-runtime.js";import{Render as l}from"@dropins/tools/lib.js";import{useState as n,useEffect as p}from"@dropins/tools/preact-hooks.js";import{UIProvider as u}from"@dropins/tools/components.js";import{events as i}from"@dropins/tools/event-bus.js";const d={customerPurchaseOrders:{containerTitle:"My purchase orders",noPurchaseOrders:"No purchase orders found."},companyPurchaseOrders:{containerTitle:"Company purchase orders",noPurchaseOrders:"No company purchase orders found."},requireApprovalPurchaseOrders:{containerTitle:"Requires my approval",noPurchaseOrders:"No purchase orders requiring my approval found."},approvalRulesList:{containerTitle:"Approval rules",emptyTitle:"No approval rules found",ariaLabel:{editRule:"Edit approval rule {{ruleName}}",deleteRule:"Delete approval rule {{ruleName}}",viewRule:"View approval rule {{ruleName}}"},buttons:{newRule:"Add New Rule"}},alertMessages:{header:{approve:"Approve Purchase Orders",reject:"Reject Purchase Orders",error:"Error"},description:{approve:"The selected purchase orders were approved successfully.",reject:"The selected purchase orders were rejected successfully.",error:"An error occurred while processing your request."}},purchaseOrdersTable:{noPurchaseOrders:{default:"No purchase orders found."},pagination:{status:"Items {{from}} to {{to}} of {{total}} total",pageSizeLabel:{start:"Show",end:"per page"}},loading:"Loading purchase orders...",actionView:"View",actionEdit:"Edit",actionDelete:"Delete",rulesStatus:{enabled:"Enabled",disabled:"Disabled"},ruleTypes:{grand_total:"Grand Total",number_of_skus:"Number of SKUs",any_item:"Any Item",all_items:"All Items"},appliesToAll:"All",statusOrder:{order_placed:"Order placed",order_failed:"Order failed",pending:"Pending",approved:"Approved",rejected:"Rejected",canceled:"Canceled",order_in_progress:"Order in progress",approval_required:"Approval required",approved_pending_payment:"Approved pending Payment"},tableColumns:{poNumber:"PO #",orderNumber:"Order #",createdDate:"Created",updatedDate:"Updated",createdBy:"Created By",status:"Status",total:"Total",action:"Action",ruleName:"Rule Name",ruleType:"Rule Type",appliesTo:"Applies To",approver:"Approver",selectAllAriaLabel:"Select all not approved purchase orders"}},purchaseOrderConfirmation:{title:"Your Purchase Order has been submitted for approval.",messagePrefix:"Your Purchase Order request number is",messageSuffix:"A copy of this Purchase Order will be emailed to you shortly."},approvalRuleForm:{headerText:"Purchase Order Approval Rule",titleAppliesTo:"Applies to",titleRuleType:"Rule Type",titleRequiresApprovalRole:"Requires Approval From",fields:{enabled:"Enabled",disabled:"Disabled",inputRuleName:{floatingLabel:"Rule Name",placeholder:"Rule Name"},textAreaDescription:{label:"Description"},appliesTo:{allUsers:"All Users",specificRoles:"Specific Roles"},ruleTypeOptions:{grandTotal:"Grand Total",shippingInclTax:"Shipping Cost",numberOfSkus:"Number of SKUs"},conditionOperators:{moreThan:"is more than",lessThan:"is less than",moreThanOrEqualTo:"is more than or equal to",lessThanOrEqualTo:"is less than or equal to"},inputQuantity:{floatingLabel:"Enter Amount",placeholder:"Enter Amount"},inputAmount:{floatingLabel:"Enter Amount",placeholder:"Enter Amount"},buttons:{cancel:"Cancel",save:"Save"}},errorsMessages:{required:"This field is required.",quantity:"Quantity must be greater than 0.",amount:"Amount must be greater than 0.",approvers:"Please select at least one approver."}},approvalRuleDetails:{containerTitle:"View Approval Rule",buttons:{back:"Back to Rules List"},fields:{ruleName:"Rule Name:",status:"Status:",description:"Description:",appliesTo:"Applies To:",requiresApprovalFrom:"Requires Approval From:",ruleType:"Rule Type:",amount:{label:" amount {{currency}} {{value}}"},statusView:{enabled:"Enabled",disabled:"Disabled"},condition:{attribute:{grand_total:"Grand Total",shipping_incl_tax:"Shipping Cost",number_of_skus:"Number of SKUs"},operator:{more_than:"Is more than",less_than:"Is less than",more_than_or_equal_to:"Is more than or equal to",less_than_or_equal_to:"Is less than or equal to"}}}}},c={PurchaseOrders:d},m={default:c},h=({children:a})=>{const[o,t]=n("en_US");return p(()=>{const e=i.on("locale",s=>{t(s)},{eager:!0});return()=>{e==null||e.off()}},[]),r(u,{lang:o,langDefinitions:m,children:a})},g=new l(r(h,{}));export{g as render};
 //# sourceMappingURL=render.js.map

package/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","sources":["/@dropins/storefront-purchase-order/src/render/Provider.tsx","/@dropins/storefront-purchase-order/src/render/render.tsx"],"sourcesContent":["import { FunctionComponent } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport { UIProvider } from '@adobe-commerce/elsie/components';\nimport { Lang } from '@adobe-commerce/elsie/i18n';\nimport { events } from '@adobe-commerce/event-bus';\n\nimport en_US from '../i18n/en_US.json';\n\n// Langs\nconst langDefinitions = {\n  default: en_US,\n};\n\ninterface CartProviderProps {\n  children?: any;\n}\n\nexport const Provider: FunctionComponent<CartProviderProps> = ({\n  children,\n}) => {\n  const [lang, setLang] = useState<Lang>('en_US');\n\n  //   Events\n  useEffect(() => {\n    const localeEvent = events.on(\n      'locale',\n      (locale: string) => {\n        setLang(locale as Lang);\n      },\n      { eager: true }\n    );\n    return () => {\n      localeEvent?.off();\n    };\n  }, []);\n\n  return (\n    <UIProvider lang={lang} langDefinitions={langDefinitions}>\n      {children}\n    </UIProvider>\n  );\n};\n","import { Render } from '@adobe-commerce/elsie/lib';\nimport { Provider } from './Provider';\n\nexport const render = new Render(<Provider />);\n"],"names":["langDefinitions","en_US","Provider","children","lang","setLang","useState","useEffect","localeEvent","events","locale","jsx","UIProvider","render","Render"],"mappings":"8yEASMA,EAAkB,CACtB,QAASC,CACX,EAMaC,EAAiD,CAAC,CAC7D,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAe,OAAO,EAG9C,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAcC,EAAO,GACzB,SACCC,GAAmB,CAClBL,EAAQK,CAAc,CACxB,EACA,CAAE,MAAO,EAAA,CAAK,EAEhB,MAAO,IAAM,CACXF,GAAA,MAAAA,EAAa,KACf,CACF,EAAG,CAAA,CAAE,EAGHG,EAACC,EAAA,CAAW,KAAAR,EAAY,gBAAAJ,EACrB,SAAAG,CAAA,CACH,CAEJ,ECtCaU,EAAS,IAAIC,EAAOH,EAACT,IAAS,CAAE"}
+{"version":3,"file":"render.js","sources":["/@dropins/storefront-purchase-order/src/render/Provider.tsx","/@dropins/storefront-purchase-order/src/render/render.tsx"],"sourcesContent":["import { FunctionComponent } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport { UIProvider } from '@adobe-commerce/elsie/components';\nimport { Lang } from '@adobe-commerce/elsie/i18n';\nimport { events } from '@adobe-commerce/event-bus';\n\nimport en_US from '../i18n/en_US.json';\n\n// Langs\nconst langDefinitions = {\n  default: en_US,\n};\n\ninterface CartProviderProps {\n  children?: any;\n}\n\nexport const Provider: FunctionComponent<CartProviderProps> = ({\n  children,\n}) => {\n  const [lang, setLang] = useState<Lang>('en_US');\n\n  //   Events\n  useEffect(() => {\n    const localeEvent = events.on(\n      'locale',\n      (locale: string) => {\n        setLang(locale as Lang);\n      },\n      { eager: true }\n    );\n    return () => {\n      localeEvent?.off();\n    };\n  }, []);\n\n  return (\n    <UIProvider lang={lang} langDefinitions={langDefinitions}>\n      {children}\n    </UIProvider>\n  );\n};\n","import { Render } from '@adobe-commerce/elsie/lib';\nimport { Provider } from './Provider';\n\nexport const render = new Render(<Provider />);\n"],"names":["langDefinitions","en_US","Provider","children","lang","setLang","useState","useEffect","localeEvent","events","locale","jsx","UIProvider","render","Render"],"mappings":"slIASMA,EAAkB,CACtB,QAASC,CACX,EAMaC,EAAiD,CAAC,CAC7D,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAe,OAAO,EAG9C,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAcC,EAAO,GACzB,SACCC,GAAmB,CAClBL,EAAQK,CAAc,CACxB,EACA,CAAE,MAAO,EAAA,CAAK,EAEhB,MAAO,IAAM,CACXF,GAAA,MAAAA,EAAa,KACf,CACF,EAAG,CAAA,CAAE,EAGHG,EAACC,EAAA,CAAW,KAAAR,EAAY,gBAAAJ,EACrB,SAAAG,CAAA,CACH,CAEJ,ECtCaU,EAAS,IAAIC,EAAOH,EAACT,IAAS,CAAE"}

package/types/components/approvalRuleDetailsContentProps.types.d.ts

@@ -0,0 +1,9 @@
+import { VNode } from 'preact';
+
+export interface ApprovalRuleDetailsContentProps {
+    formValues: {
+        label: string | VNode;
+        value: string | VNode;
+    }[];
+}
+//# sourceMappingURL=approvalRuleDetailsContentProps.types.d.ts.map

package/types/components/approvalRuleForm.types.d.ts

@@ -0,0 +1,12 @@
+import { FormValuesParams } from '../hooks';
+
+export interface ApprovalRuleFormProps {
+    className?: string;
+    withHeader?: boolean;
+    withWrapper?: boolean;
+    approvalRuleID?: string;
+    routeApprovalRulesList?: () => string;
+    onSubmit?: (formValues: FormValuesParams) => Promise<void>;
+    onChange?: (formValues: FormValuesParams) => void;
+}
+//# sourceMappingURL=approvalRuleForm.types.d.ts.map

package/types/components/index.d.ts

@@ -1,5 +1,7 @@
 export * from './purchaseOrdersTable.types';
 export * from './pagination.types';
 export * from './purchaseOrdersTableActions';
+export * from './approvalRuleForm.types';
 export * from './purchaseOrderConfirmationContent.types';
+export * from './approvalRuleDetailsContentProps.types';
 //# sourceMappingURL=index.d.ts.map

package/types/components/purchaseOrdersTable.types.d.ts

@@ -4,6 +4,11 @@ import { PageSizeListProps, PaginationState } from '.';
 import { AlertMessageConfigType } from '../hooks';
 
 export type Column = {
+    label: string | VNode<HTMLAttributes<HTMLElement>>;
+    key: string;
+    ariaLabel?: string;
+};
+export type TableColumn = {
     label: string;
     key: string;
     ariaLabel?: string;
@@ -32,7 +37,7 @@ export interface PurchaseOrdersTableProps {
     skeletonRowCount?: number | string;
     footer?: VNode | string | null;
     header?: VNode | string | null;
-    alertMessageConfig: AlertMessageConfigType;
+    alertMessageConfig?: AlertMessageConfigType;
     withWrapper?: boolean;
 }
 //# sourceMappingURL=purchaseOrdersTable.types.d.ts.map

package/types/containers/approvalRuleDetailsProps.types.d.ts

@@ -0,0 +1,8 @@
+export interface ApprovalRuleDetailsProps {
+    withHeader?: boolean;
+    withWrapper?: boolean;
+    className?: string;
+    approvalRuleID?: string;
+    routeApprovalRulesList: () => string;
+}
+//# sourceMappingURL=approvalRuleDetailsProps.types.d.ts.map

package/types/containers/approvalRuleForm.types.d.ts

@@ -0,0 +1,12 @@
+import { FormValuesParams } from '../hooks';
+
+export interface ApprovalRuleFormProps {
+    withHeader?: boolean;
+    withWrapper?: boolean;
+    className?: string;
+    approvalRuleID?: string;
+    routeApprovalRulesList: () => string;
+    onSubmit?: (formValues: FormValuesParams) => Promise<void>;
+    onChange?: (formValues: FormValuesParams) => void;
+}
+//# sourceMappingURL=approvalRuleForm.types.d.ts.map

package/types/containers/approvalRulesList.types.d.ts

@@ -0,0 +1,15 @@
+import { Column, PageSizeListProps, Row } from '../components';
+
+export interface ApprovalRulesListProps {
+    initialPageSize?: PageSizeListProps[];
+    routeCreateApprovalRule?: (id: string) => string;
+    routeEditApprovalRule?: (id: string) => string;
+    routeApprovalRuleDetails?: (id: string) => string;
+    setColumns?: (defaultColumns: Column[]) => Column[];
+    setRowsData?: (defaultRows: Row[]) => Row[];
+    className?: string;
+    withHeader?: boolean;
+    withWrapper?: boolean;
+    skeletonRowCount?: number;
+}
+//# sourceMappingURL=approvalRulesList.types.d.ts.map

package/types/containers/index.d.ts

@@ -1,5 +1,8 @@
 export * from './customerPurchaseOrders.types';
 export * from './companyPurchaseOrders.types';
 export * from './requireApprovalPurchaseOrders.types';
+export * from './approvalRuleForm.types';
+export * from './approvalRulesList.types';
 export * from './purchaseOrderConfirmationProps.types';
+export * from './approvalRuleDetailsProps.types';
 //# sourceMappingURL=index.d.ts.map

package/types/hooks/index.d.ts

@@ -1,2 +1,5 @@
+export * from './useApprovalRuleForm.types';
 export * from './usePurchaseOrders.types';
+export * from './useApprovalRuleDetails.types';
+export * from './useApprovalRulesList.types';
 //# sourceMappingURL=index.d.ts.map

package/types/hooks/useApprovalRuleDetails.types.d.ts

@@ -0,0 +1,5 @@
+export interface UseApprovalRuleDetailsProps {
+    approvalRuleID?: string;
+    routeApprovalRulesList: () => string;
+}
+//# sourceMappingURL=useApprovalRuleDetails.types.d.ts.map