feat: Add Bin Lookup and Brand Selector. #24

ddiestra · 2025-08-22T04:02:13Z

Description

Testing required outside of automated testing?

Not Applicable

Screenshots (if appropriate):

Not Applicable

Rollback / Rollforward Procedure

Roll Forward
Roll Back

Reviewer Checklist

Description of Change
Description of outside testing if applicable.
Description of Roll Forward / Backward Procedure
Documentation updated for Change

src/components/BrandPicker.tsx

src/components/CardNumberElement.tsx

src/components/shared/useUserEventHandlers.ts

src/components/useBinLookup.ts

src/useBasisTheory.ts

src/ElementValues.ts

src/components/shared/useUserEventHandlers.ts

demo/Collect.tsx

chore: remove console.log

kevinperaza · 2025-10-28T15:26:01Z

src/components/CardNumberElement.hook.ts

+  const hasCoBadgedSupport = (coBadgedSupport?.length ?? 0) > 0;
+
+  if (hasCoBadgedSupport && coBadgedSupport) {
+    const validValues = Object.values(CoBadgedSupport);
+    const invalidValues = coBadgedSupport.filter(value => !validValues.includes(value));
+
+    if (invalidValues.length > 0) {
+      throw new Error(
+        `Invalid coBadgedSupport values: ${invalidValues.join(', ')}. ` +
+        `Valid values are: ${validValues.join(', ')}`
+      );
+    }
+  }


Should this also be wrapped in a useEffect?

kevinperaza · 2025-10-28T15:31:08Z

src/components/shared/useElementEvent.ts

+    let errors = validate(value);
+
+    // Check if selectedNetwork is required but not set
+    const requiresNetworkSelection = !isNilOrEmpty(coBadgedSupport) && (brandOptionsCount ?? 0) > 1;
+    const networkNotSelected = requiresNetworkSelection && !selectedNetwork;
+
+    // Add network selection error if required but not selected
+    if (networkNotSelected && !empty) {
+      const networkError = {
+        targetId: type,
+        type: 'network_not_selected' as const,
+      };
+      errors = errors ? [...errors, networkError] : [networkError];
+    }
+
+    const valid = !empty && !errors && !networkNotSelected;


Should we move this to a smaller function and test it in isolation?

kevinperaza · 2025-10-28T17:37:44Z

src/components/shared/useUserEventHandlers.ts

+  useEffect(() => {
+    const currentState = _elementMetadata[element.id];
+    const newMetadata = {
+      binInfo: element.binInfo,
+      selectedNetwork: element.selectedNetwork,
+    };
+
+    const hasChanged =
+      currentState?.binInfo !== newMetadata.binInfo ||
+      currentState?.selectedNetwork !== newMetadata.selectedNetwork;
+
+    if (hasChanged && onChange) {
+      const event = createEvent(_elementRawValues[element.id]?.toString() || '');
+      onChange(event);
+    }
+
+    _elementMetadata[element.id] = {
+      ...currentState,
+      ...newMetadata,
+    };
+  }, [element.binInfo, element.selectedNetwork, onChange, createEvent, element.id]);
+


Wondering if we should also encapsulate in a hook and test it independently 🤔

ddiestra requested a review from a team as a code owner August 22, 2025 04:02