Add more RuleEngine options

.vscode/mcp.json

@@ -0,0 +1,21 @@
+{
+  "servers": {
+    "commerce-layer-core-docs": {
+      "url": "https://docs.commercelayer.io/core/~gitbook/mcp",
+      "type": "http"
+    },
+    "commerce-layer-metrics-docs": {
+      "url": "https://docs.commercelayer.io/metrics/~gitbook/mcp",
+      "type": "http"
+    },
+    "commerce-layer-provisioning-docs": {
+      "url": "https://docs.commercelayer.io/provisioning/~gitbook/mcp",
+      "type": "http"
+    },
+    "commerce-layer-rules-engine-docs": {
+      "url": "https://docs.commercelayer.io/rules-engine/~gitbook/mcp",
+      "type": "http"
+    }
+  },
+  "inputs": []
+}

packages/app-elements/src/locales/en.ts

@@ -469,7 +469,7 @@ const en = {
     "order.subtotal_amount_cents": "subtotal amount cents",
     "order.tags.name": "order tag name",
     "order.total_amount_cents": "total amount cents",
-    order: "order total",
+    order: "order",
     "price.amount_cents": "price amount cents",
     "price.jwt_customer.email": "customer email",
     "price.jwt_customer.tags.id": "customer tag",

packages/app-elements/src/ui/composite/Dropdown/Dropdown.tsx

@@ -48,7 +48,8 @@ export const Dropdown: React.FC<DropdownProps> = ({
   const closeDropdownMenuIfButtonClicked = (
     e: React.MouseEvent<HTMLElement>,
   ): void => {
-    if ((e.target as any).nodeName === "BUTTON") {
+    const target = e.target as HTMLElement
+    if (target.closest("button")) {
       close()
     }
   }

packages/app-elements/src/ui/forms/CodeEditor/CodeEditorComponent.tsx

@@ -13,6 +13,15 @@ import {
   InputWrapper,
   type InputWrapperBaseProps,
 } from "#ui/internals/InputWrapper"
+import orderRulesJsonSchema from "../RuleEngine/json_schema/order_rules.json" with {
+  type: "json",
+}
+import organizationConfigJsonSchema from "../RuleEngine/json_schema/organization_config.json" with {
+  type: "json",
+}
+import priceRulesJsonSchema from "../RuleEngine/json_schema/price_rules.json" with {
+  type: "json",
+}
 import { fetchJsonSchema, type JSONSchema } from "../RuleEngine/utils"
 import { fetchCoreResourcesSuggestions } from "./fetchCoreResourcesSuggestions"
 
@@ -169,6 +178,7 @@ export const CodeEditor = forwardRef<
           const schema = await fetchJsonSchema(jsonSchema, domain).then(
             (json) => {
               if (json != null) {
+                console.log(json)
                 return clearExamples(json)
               }
 
@@ -298,7 +308,13 @@ function createDeferred(delay: number = 100) {
 /**
  * Remove `examples` attribute when present.
  */
-function clearExamples(json: JsonValue, previousKey?: string): JsonValue {
+function clearExamples(
+  json:
+    | typeof organizationConfigJsonSchema
+    | typeof orderRulesJsonSchema
+    | typeof priceRulesJsonSchema,
+  previousKey?: string,
+): JsonValue {
   if (typeof json !== "object" || json === null) {
     return json
   }

packages/app-elements/src/ui/forms/InputSelect/overrides.tsx

@@ -1,20 +1,24 @@
 import { XIcon } from "@phosphor-icons/react"
 import cn from "classnames"
 import { castArray } from "lodash-es"
-import type { JSX } from "react"
+import { type JSX, useEffect, useRef, useState } from "react"
 import {
   type ClearIndicatorProps,
+  type ControlProps,
   components,
   type DropdownIndicatorProps,
   type GroupBase,
   type GroupHeadingProps,
   type InputProps,
   type MenuListProps,
   type MultiValueGenericProps,
+  type SingleValueProps,
+  type ValueContainerProps,
 } from "react-select"
 import { Hr } from "#ui/atoms/Hr"
 import { Spacer } from "#ui/atoms/Spacer"
 import { Tag } from "#ui/atoms/Tag"
+import { Tooltip } from "#ui/atoms/Tooltip"
 import type { InputSelectValue } from "."
 
 function DropdownIndicator(
@@ -174,6 +178,60 @@ function Input(props: InputProps<InputSelectValue>): JSX.Element {
   return <components.Input {...newProps} />
 }
 
+function isEllipsisActive(e: HTMLElement): boolean {
+  return e.offsetWidth < e.scrollWidth
+}
+
+function Control(props: ControlProps<InputSelectValue>): JSX.Element {
+  const ref = useRef<HTMLDivElement>(null)
+  const [title, setTitle] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (ref.current != null) {
+      const singleValueElement = ref.current.querySelector(".single-value")
+      if (
+        props.selectProps.isMulti === false &&
+        singleValueElement != null &&
+        singleValueElement instanceof HTMLElement &&
+        isEllipsisActive(singleValueElement)
+      ) {
+        setTitle(singleValueElement.innerText)
+      } else {
+        setTitle(null)
+      }
+    }
+  }, [ref, props.selectProps.value])
+
+  const newProps = {
+    ...props,
+  }
+
+  return (
+    <div ref={ref}>
+      <Tooltip content={title} label={<components.Control {...newProps} />} />
+    </div>
+  )
+}
+
+function ValueContainer(
+  props: ValueContainerProps<InputSelectValue>,
+): JSX.Element {
+  const newProps = {
+    ...props,
+  }
+
+  return <components.ValueContainer {...newProps} />
+}
+
+function SingleValue(props: SingleValueProps<InputSelectValue>): JSX.Element {
+  const newProps = {
+    ...props,
+    className: cn(props.className, "single-value"),
+  }
+
+  return <components.SingleValue {...newProps} />
+}
+
 const selectComponentOverrides = {
   DropdownIndicator,
   IndicatorSeparator: () => null,
@@ -185,6 +243,9 @@ const selectComponentOverrides = {
   MenuList,
   MenuPortal,
   Input,
+  Control,
+  ValueContainer,
+  SingleValue,
 }
 
 export default selectComponentOverrides