@nyaruka/temba-components 0.131.0 → 0.131.2

package/src/flow/nodes/shared-rules.ts

@@ -0,0 +1,301 @@
+import { getOperatorConfig } from '../operators';
+import { generateDefaultCategoryName } from '../../utils';
+import { FormData } from '../types';
+
+/**
+ * Shared helper function to get operator value from various formats.
+ * Handles string, object, and array formats that can come from the form system.
+ */
+export const getOperatorValue = (operator: any): string => {
+  if (typeof operator === 'string') {
+    return operator.trim();
+  } else if (Array.isArray(operator) && operator.length > 0) {
+    const firstOperator = operator[0];
+    if (
+      firstOperator &&
+      typeof firstOperator === 'object' &&
+      firstOperator.value
+    ) {
+      return firstOperator.value.trim();
+    }
+  } else if (operator && typeof operator === 'object' && operator.value) {
+    return operator.value.trim();
+  }
+  return '';
+};
+
+/**
+ * Shared isEmptyItem function for rules array.
+ * Determines if a rule item is considered empty and should be filtered out.
+ */
+export const isEmptyRuleItem = (item: any): boolean => {
+  // Check if operator and category are provided
+  const operatorValue = getOperatorValue(item.operator);
+  if (!operatorValue || !item.category || item.category.trim() === '') {
+    return true;
+  }
+
+  // Check if value is required based on operator configuration
+  const operatorConfig = getOperatorConfig(operatorValue);
+  if (operatorConfig && operatorConfig.operands === 1) {
+    return !item.value1 || item.value1.trim() === '';
+  } else if (operatorConfig && operatorConfig.operands === 2) {
+    return (
+      !item.value1 ||
+      item.value1.trim() === '' ||
+      !item.value2 ||
+      item.value2.trim() === ''
+    );
+  }
+
+  return false;
+};
+
+/**
+ * Shared onItemChange function for rules array.
+ * Handles auto-updating category names based on operator and value changes.
+ */
+export const createRuleItemChangeHandler = () => {
+  return (itemIndex: number, field: string, value: any, allItems: any[]) => {
+    const updatedItems = [...allItems];
+    const item = { ...updatedItems[itemIndex] };
+
+    // Update the changed field
+    item[field] = value;
+
+    // Get operator values (before and after the change)
+    const oldItem = allItems[itemIndex] || {};
+    const oldOperatorValue =
+      field === 'operator'
+        ? getOperatorValue(oldItem.operator)
+        : getOperatorValue(item.operator);
+    const newOperatorValue = getOperatorValue(item.operator);
+
+    // Calculate what the default category name should be before the change
+    const oldDefaultCategory = generateDefaultCategoryName(
+      oldOperatorValue,
+      getOperatorConfig,
+      field === 'value1' ? oldItem.value1 : item.value1,
+      field === 'value2' ? oldItem.value2 : item.value2
+    );
+
+    // Calculate what the new default category name should be after the change
+    const newDefaultCategory = generateDefaultCategoryName(
+      newOperatorValue,
+      getOperatorConfig,
+      item.value1,
+      item.value2
+    );
+
+    // Determine if we should auto-update the category
+    const shouldUpdateCategory =
+      !item.category ||
+      item.category.trim() === '' ||
+      item.category === oldDefaultCategory;
+
+    // Auto-populate or update category if conditions are met
+    if (shouldUpdateCategory && newDefaultCategory) {
+      item.category = newDefaultCategory;
+    }
+
+    updatedItems[itemIndex] = item;
+    return updatedItems;
+  };
+};
+
+/**
+ * Shared visibility condition for value1 field.
+ */
+export const value1VisibilityCondition = (formData: Record<string, any>) => {
+  const operatorValue = getOperatorValue(formData.operator);
+  const operatorConfig = getOperatorConfig(operatorValue);
+  return operatorConfig ? operatorConfig.operands >= 1 : true;
+};
+
+/**
+ * Shared visibility condition for value2 field.
+ */
+export const value2VisibilityCondition = (formData: Record<string, any>) => {
+  const operatorValue = getOperatorValue(formData.operator);
+  const operatorConfig = getOperatorConfig(operatorValue);
+  return operatorConfig ? operatorConfig.operands === 2 : false;
+};
+
+/**
+ * Shared item configuration for rules array.
+ * This defines the operator, value1, value2, and category fields.
+ */
+export const createRulesItemConfig = () => ({
+  operator: {
+    type: 'select' as const,
+    required: true,
+    multi: false,
+    options: [], // Will be set by the caller
+    flavor: 'xsmall' as const,
+    width: '200px'
+  },
+  value1: {
+    type: 'text' as const,
+    flavor: 'xsmall' as const,
+    conditions: {
+      visible: value1VisibilityCondition
+    }
+  },
+  value2: {
+    type: 'text' as const,
+    flavor: 'xsmall' as const,
+    conditions: {
+      visible: value2VisibilityCondition
+    }
+  },
+  category: {
+    type: 'text' as const,
+    placeholder: 'Category',
+    required: true,
+    maxWidth: '120px',
+    flavor: 'xsmall' as const
+  }
+});
+
+/**
+ * Shared function to extract rules from form data.
+ * Filters and transforms form rules into the format expected by createRulesRouter.
+ */
+export const extractUserRules = (formData: FormData) => {
+  return (formData.rules || [])
+    .filter((rule: any) => {
+      const operatorValue = getOperatorValue(rule?.operator);
+      if (
+        !operatorValue ||
+        !rule?.category ||
+        operatorValue === '' ||
+        rule.category.trim() === ''
+      ) {
+        return false;
+      }
+
+      const operatorConfig = getOperatorConfig(operatorValue);
+      if (operatorConfig && operatorConfig.operands === 1) {
+        return rule?.value1 && rule.value1.trim() !== '';
+      } else if (operatorConfig && operatorConfig.operands === 2) {
+        return (
+          rule?.value1 &&
+          rule.value1.trim() !== '' &&
+          rule?.value2 &&
+          rule.value2.trim() !== ''
+        );
+      }
+
+      return true;
+    })
+    .map((rule: any) => {
+      const operatorValue = getOperatorValue(rule.operator);
+      const operatorConfig = getOperatorConfig(operatorValue);
+
+      let value = '';
+
+      if (operatorConfig && operatorConfig.operands === 1) {
+        value = rule.value1 ? rule.value1.trim() : '';
+      } else if (operatorConfig && operatorConfig.operands === 2) {
+        const val1 = rule.value1 ? rule.value1.trim() : '';
+        const val2 = rule.value2 ? rule.value2.trim() : '';
+        value = `${val1} ${val2}`.trim();
+      } else {
+        value = '';
+      }
+
+      return {
+        operator: operatorValue,
+        value: value,
+        category: rule.category.trim()
+      };
+    });
+};
+
+/**
+ * Shared function to transform router cases to form rules.
+ * Converts node router cases back into the form data structure.
+ */
+export const casesToFormRules = (node: any) => {
+  const rules = [];
+  if (node.router?.cases && node.router?.categories) {
+    node.router.cases.forEach((case_: any) => {
+      // Find the category for this case
+      const category = node.router!.categories.find(
+        (cat: any) => cat.uuid === case_.category_uuid
+      );
+
+      // Skip system categories
+      if (category && !isSystemCategory(category.name)) {
+        // Handle different operator types
+        const operatorConfig = getOperatorConfig(case_.type);
+        const operatorDisplayName = operatorConfig
+          ? operatorConfig.name
+          : case_.type;
+        let value1 = '';
+        let value2 = '';
+
+        if (operatorConfig && operatorConfig.operands === 0) {
+          value1 = '';
+          value2 = '';
+        } else if (operatorConfig && operatorConfig.operands === 1) {
+          value1 = case_.arguments.join(' ');
+          value2 = '';
+        } else if (operatorConfig && operatorConfig.operands === 2) {
+          value1 = case_.arguments[0] || '';
+          value2 = case_.arguments[1] || '';
+        } else {
+          value1 = case_.arguments.join(' ');
+          value2 = '';
+        }
+
+        rules.push({
+          operator: { value: case_.type, name: operatorDisplayName },
+          value1: value1,
+          value2: value2,
+          category: category.name
+        });
+      }
+    });
+  }
+  return rules;
+};
+
+/**
+ * Helper to check if a category is a system category
+ */
+function isSystemCategory(categoryName: string): boolean {
+  return ['No Response', 'Other', 'All Responses', 'Timeout'].includes(
+    categoryName
+  );
+}
+
+/**
+ * Creates a complete rules array configuration for forms.
+ * This is the shared configuration used by both wait_for_response and split_by_expression.
+ *
+ * @param operatorOptions - The operator options to use (from operatorsToSelectOptions)
+ * @param helpText - The help text to display for the rules array
+ * @returns A complete array field configuration object
+ */
+export const createRulesArrayConfig = (
+  operatorOptions: any[],
+  helpText: string = 'Define rules to categorize responses'
+) => ({
+  type: 'array' as const,
+  helpText,
+  itemLabel: 'Rule',
+  minItems: 0,
+  maxItems: 100,
+  sortable: true,
+  maintainEmptyItem: true,
+  isEmptyItem: isEmptyRuleItem,
+  onItemChange: createRuleItemChangeHandler(),
+  itemConfig: {
+    ...createRulesItemConfig(),
+    operator: {
+      ...createRulesItemConfig().operator,
+      options: operatorOptions
+    }
+  }
+});

package/src/flow/nodes/shared.ts

@@ -0,0 +1,18 @@
+import { TextFieldConfig } from '../types';
+
+/**
+ * Shared result_name field configuration for router nodes.
+ * This provides a consistent "Save as..." optional field interface across all splits.
+ *
+ * The field is hidden by default and revealed via a "Save as..." link.
+ * Once revealed, it cannot be hidden again (the link disappears).
+ * If the field already has a value, it's shown immediately without the link.
+ */
+export const resultNameField: TextFieldConfig = {
+  type: 'text',
+  label: 'Result Name',
+  required: false,
+  placeholder: '(optional)',
+  helpText: 'The name to use to reference this result in the flow',
+  optionalLink: 'Save result as...'
+};

package/src/flow/nodes/split_by_airtime.ts

@@ -1,9 +1,242 @@
-import { transfer_airtime } from '../actions/transfer_airtime';
-import { COLORS, NodeConfig } from '../types';
+import { ACTION_GROUPS, FormData, NodeConfig } from '../types';
+import { TransferAirtime, Node } from '../../store/flow-definition';
+import { generateUUID, createSuccessFailureRouter } from '../../utils';
+import { html } from 'lit';
+import { CURRENCY_OPTIONS, CURRENCIES } from '../currencies';
+import { resultNameField } from './shared';
 
 export const split_by_airtime: NodeConfig = {
   type: 'split_by_airtime',
-  name: 'Split by Airtime Transfer',
-  color: COLORS.send,
-  action: transfer_airtime
+  name: 'Send Airtime',
+  group: ACTION_GROUPS.services,
+  showAsAction: true,
+  form: {
+    amounts: {
+      type: 'array',
+      label: 'Airtime Amounts',
+      helpText: 'Define the currencies and amounts to transfer',
+      required: true,
+      itemLabel: 'Amount',
+      sortable: false,
+      minItems: 1,
+      maxItems: 10,
+      isEmptyItem: (item: any) => {
+        return !item.currency || !item.amount || item.amount.trim() === '';
+      },
+      itemConfig: {
+        currency: {
+          type: 'select',
+          placeholder: 'Select a currency',
+          required: true,
+          options: CURRENCY_OPTIONS,
+          searchable: true,
+          multi: false,
+          width: '200px'
+        },
+        amount: {
+          type: 'text',
+          placeholder: 'Amount',
+          required: true
+        }
+      }
+    },
+    result_name: resultNameField
+  },
+  layout: ['amounts', 'result_name'],
+  validate: (formData: FormData) => {
+    const errors: { [key: string]: string } = {};
+
+    // Validate that we have at least one amount
+    if (formData.amounts && Array.isArray(formData.amounts)) {
+      const validAmounts = formData.amounts.filter(
+        (item: any) =>
+          item?.currency && item?.amount && item.amount.trim() !== ''
+      );
+
+      if (validAmounts.length === 0) {
+        errors.amounts = 'At least one currency and amount is required';
+        return {
+          valid: false,
+          errors
+        };
+      }
+
+      // Check for duplicate currencies
+      const currencies = new Set();
+      const duplicates: string[] = [];
+
+      validAmounts.forEach((item: any) => {
+        // Extract currency code from selection
+        const currencyCode =
+          Array.isArray(item.currency) && item.currency.length > 0
+            ? item.currency[0].value
+            : typeof item.currency === 'string'
+            ? item.currency
+            : item.currency?.value;
+
+        if (currencies.has(currencyCode)) {
+          duplicates.push(currencyCode);
+        } else {
+          currencies.add(currencyCode);
+        }
+      });
+
+      if (duplicates.length > 0) {
+        errors.amounts = `Duplicate currencies found: ${duplicates.join(', ')}`;
+      }
+
+      // Validate amounts are numeric
+      for (const item of validAmounts) {
+        const amount = item.amount.trim();
+        if (isNaN(Number(amount)) || Number(amount) <= 0) {
+          errors.amounts = 'All amounts must be valid positive numbers';
+          return {
+            valid: false,
+            errors
+          };
+        }
+      }
+    } else {
+      errors.amounts = 'At least one currency and amount is required';
+    }
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    };
+  },
+  render: (node: Node) => {
+    const transferAirtimeAction = node.actions?.find(
+      (action) => action.type === 'transfer_airtime'
+    ) as TransferAirtime;
+
+    if (!transferAirtimeAction || !transferAirtimeAction.amounts) {
+      return html`<div class="body">Configure airtime transfer</div>`;
+    }
+
+    const amounts = transferAirtimeAction.amounts;
+    const currencies = Object.keys(amounts);
+
+    if (currencies.length === 0) {
+      return html`<div class="body">Configure airtime transfer</div>`;
+    }
+
+    // Display the first currency amount, with indicator if there are more
+    const firstCurrency = currencies[0];
+    const firstAmount = amounts[firstCurrency];
+    const moreCount = currencies.length - 1;
+
+    return html`
+      <div class="body">
+        ${firstCurrency}
+        ${firstAmount}${moreCount > 0
+          ? html` <span style="color: #999;">+${moreCount} more</span>`
+          : ''}
+      </div>
+    `;
+  },
+  toFormData: (node: Node) => {
+    // Extract data from the existing node structure
+    const transferAirtimeAction = node.actions?.find(
+      (action) => action.type === 'transfer_airtime'
+    ) as TransferAirtime;
+
+    const amounts: any[] = [];
+    if (transferAirtimeAction && transferAirtimeAction.amounts) {
+      Object.entries(transferAirtimeAction.amounts).forEach(
+        ([currency, amount]) => {
+          amounts.push({
+            currency: [
+              {
+                value: currency,
+                name: CURRENCIES[currency]?.name
+                  ? `${CURRENCIES[currency].name} (${currency})`
+                  : currency
+              }
+            ],
+            amount: String(amount)
+          });
+        }
+      );
+    }
+
+    return {
+      uuid: node.uuid,
+      amounts: amounts,
+      result_name: node.router?.result_name || ''
+    };
+  },
+  fromFormData: (formData: FormData, originalNode: Node): Node => {
+    // Get user amounts and convert to amounts object
+    const amountsObject: Record<string, number> = {};
+
+    if (formData.amounts && Array.isArray(formData.amounts)) {
+      formData.amounts.forEach((item: any) => {
+        if (!item?.currency || !item?.amount || item.amount.trim() === '') {
+          return;
+        }
+
+        // Extract currency code from selection (handle both array and object formats)
+        let currencyCode: string;
+        if (Array.isArray(item.currency) && item.currency.length > 0) {
+          currencyCode = item.currency[0].value;
+        } else if (typeof item.currency === 'string') {
+          currencyCode = item.currency;
+        } else if (item.currency?.value) {
+          currencyCode = item.currency.value;
+        } else {
+          return;
+        }
+
+        const amount = parseFloat(item.amount.trim());
+        if (!isNaN(amount) && amount > 0) {
+          amountsObject[currencyCode] = amount;
+        }
+      });
+    }
+
+    // Find existing transfer_airtime action to preserve its UUID
+    const existingTransferAirtimeAction = originalNode.actions?.find(
+      (action) => action.type === 'transfer_airtime'
+    );
+    const transferAirtimeUuid =
+      existingTransferAirtimeAction?.uuid || generateUUID();
+
+    // Create transfer_airtime action
+    const transferAirtimeAction: TransferAirtime = {
+      type: 'transfer_airtime',
+      uuid: transferAirtimeUuid,
+      amounts: amountsObject
+    };
+
+    // Create categories and exits for Success and Failure
+    const existingCategories = originalNode.router?.categories || [];
+    const existingExits = originalNode.exits || [];
+    const existingCases = originalNode.router?.cases || [];
+
+    const { router, exits } = createSuccessFailureRouter(
+      '@locals._new_transfer',
+      {
+        type: 'has_text',
+        arguments: []
+      },
+      existingCategories,
+      existingExits,
+      existingCases
+    );
+
+    // Add result_name if provided
+    const finalRouter: any = { ...router };
+    if (formData.result_name && formData.result_name.trim() !== '') {
+      finalRouter.result_name = formData.result_name.trim();
+    }
+
+    // Return the complete node
+    return {
+      uuid: originalNode.uuid,
+      actions: [transferAirtimeAction],
+      router: finalRouter,
+      exits: exits
+    };
+  }
 };