feat(pos-app): add default merchant credentials from environment variables (#324)

* feat(pos-app): add default merchant credentials from environment variables

- Add EXPO_PUBLIC_DEFAULT_MERCHANT_ID and EXPO_PUBLIC_DEFAULT_MERCHANT_API_KEY env vars
- Initialize merchant credentials from env defaults on first app launch
- Allow users to override defaults via settings (with PIN protection)
- Reset both merchant ID and API key to defaults when clearing merchant ID
- Sync UI state after resetting to show new default values

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor(pos-app): return new merchant ID from clearMerchantId

Make the flow more explicit by returning the default merchant ID
directly from clearMerchantId instead of reading from store afterward.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(pos-app): use nullish coalescing for env var defaults

Use ?? instead of || to preserve empty string values from environment
variables instead of converting them to null.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: ignaciosantise

dapps/pos-app/.env.example

@@ -2,4 +2,6 @@ EXPO_PUBLIC_PROJECT_ID=""
 EXPO_PUBLIC_SENTRY_DSN=""
 SENTRY_AUTH_TOKEN=""
 EXPO_PUBLIC_API_URL=""
-EXPO_PUBLIC_GATEWAY_URL=""
+EXPO_PUBLIC_GATEWAY_URL=""
+EXPO_PUBLIC_DEFAULT_MERCHANT_ID=""
+EXPO_PUBLIC_DEFAULT_MERCHANT_API_KEY=""

dapps/pos-app/hooks/use-merchant-flow.ts

@@ -29,6 +29,7 @@ const initialState: MerchantFlowState = {
 export function useMerchantFlow() {
   const storedMerchantId = useSettingsStore((state) => state.merchantId);
   const setMerchantId = useSettingsStore((state) => state.setMerchantId);
+  const clearMerchantId = useSettingsStore((state) => state.clearMerchantId);
   const getMerchantApiKey = useSettingsStore(
     (state) => state.getMerchantApiKey,
   );
@@ -123,16 +124,14 @@ export function useMerchantFlow() {
 
   const handleMerchantIdConfirm = useCallback(async () => {
     const trimmedMerchantId = state.merchantIdInput.trim();
-    if (!trimmedMerchantId) {
-      return;
-    }
 
     // Check if value changed
     if (trimmedMerchantId === storedMerchantId) {
       return;
     }
 
-    await initiateSave(trimmedMerchantId, "merchant-id");
+    // Pass empty string to indicate clearing (will reset to default)
+    await initiateSave(trimmedMerchantId || "", "merchant-id");
   }, [state.merchantIdInput, storedMerchantId, initiateSave]);
 
   const handleMerchantApiKeyConfirm = useCallback(async () => {
@@ -145,20 +144,37 @@ export function useMerchantFlow() {
   }, [state.merchantApiKeyInput, initiateSave]);
 
   const completeSave = useCallback(async () => {
-    if (!state.pendingValue || !state.pendingAction) {
+    if (state.pendingValue === null || !state.pendingAction) {
       return;
     }
 
     try {
       if (state.pendingAction === "merchant-id") {
-        setMerchantId(state.pendingValue);
-        showSuccessToast("Merchant ID saved successfully");
-        addLog(
-          "info",
-          `Merchant ID updated to: ${state.pendingValue}`,
-          "settings",
-          "completeSave",
-        );
+        if (state.pendingValue === "") {
+          // Clear merchant ID and API key (resets both to env defaults)
+          const newMerchantId = await clearMerchantId();
+          // Sync local input with the new default value
+          setState((prev) => ({
+            ...prev,
+            merchantIdInput: newMerchantId ?? "",
+          }));
+          showSuccessToast("Merchant credentials reset to default");
+          addLog(
+            "info",
+            "Merchant credentials reset to default",
+            "settings",
+            "completeSave",
+          );
+        } else {
+          setMerchantId(state.pendingValue);
+          showSuccessToast("Merchant ID saved successfully");
+          addLog(
+            "info",
+            `Merchant ID updated to: ${state.pendingValue}`,
+            "settings",
+            "completeSave",
+          );
+        }
       } else if (state.pendingAction === "merchant-api-key") {
         await setMerchantApiKey(state.pendingValue);
         setState((prev) => ({
@@ -186,6 +202,7 @@ export function useMerchantFlow() {
     state.pendingValue,
     state.pendingAction,
     setMerchantId,
+    clearMerchantId,
     setMerchantApiKey,
     addLog,
   ]);
@@ -257,9 +274,9 @@ export function useMerchantFlow() {
     }));
   }, [storedMerchantId]);
 
+  // Enable save when value has changed (including clearing to reset to default)
   const isMerchantIdConfirmDisabled =
-    state.merchantIdInput.trim().length === 0 ||
-    state.merchantIdInput.trim() === storedMerchantId;
+    state.merchantIdInput.trim() === (storedMerchantId ?? "");
 
   const isMerchantApiKeyConfirmDisabled =
     state.merchantApiKeyInput.trim().length === 0;

dapps/pos-app/services/payment.ts

@@ -1,5 +1,4 @@
 import { useSettingsStore } from "@/store/useSettingsStore";
-import { SECURE_STORAGE_KEYS, secureStorage } from "@/utils/secure-storage";
 import {
   PaymentStatusResponse,
   StartPaymentRequest,
@@ -14,9 +13,7 @@ import { apiClient } from "./client";
  */
 async function getApiHeaders(): Promise<Record<string, string>> {
   const merchantId = useSettingsStore.getState().merchantId;
-  const merchantApiKey = await secureStorage.getItem(
-    SECURE_STORAGE_KEYS.MERCHANT_API_KEY,
-  );
+  const merchantApiKey = await useSettingsStore.getState().getMerchantApiKey();
 
   if (!merchantId || merchantId.trim().length === 0) {
     throw new Error("Merchant ID is not configured");

dapps/pos-app/services/payment.web.ts

@@ -1,5 +1,4 @@
 import { useSettingsStore } from "@/store/useSettingsStore";
-import { SECURE_STORAGE_KEYS, secureStorage } from "@/utils/secure-storage";
 import {
   ApiError,
   PaymentStatusResponse,
@@ -17,9 +16,7 @@ async function getMerchantCredentials(): Promise<{
   apiKey: string;
 }> {
   const merchantId = useSettingsStore.getState().merchantId;
-  const apiKey = await secureStorage.getItem(
-    SECURE_STORAGE_KEYS.MERCHANT_API_KEY,
-  );
+  const apiKey = await useSettingsStore.getState().getMerchantApiKey();
 
   if (!merchantId || merchantId.trim().length === 0) {
     throw new Error("Merchant ID is not configured");

dapps/pos-app/store/useSettingsStore.ts

@@ -1,5 +1,6 @@
 import { DEFAULT_LOGO_BASE64 } from "@/constants/printer-logos";
 import { VariantName, Variants } from "@/constants/variants";
+import { MerchantConfig } from "@/utils/merchant-config";
 import { SECURE_STORAGE_KEYS, secureStorage } from "@/utils/secure-storage";
 import { storage } from "@/utils/storage";
 import * as Crypto from "expo-crypto";
@@ -60,7 +61,7 @@ interface SettingsStore {
   setHasHydrated: (state: boolean) => void;
   setVariant: (variant: VariantName) => void;
   setMerchantId: (merchantId: string | null) => void;
-  clearMerchantId: () => void;
+  clearMerchantId: () => Promise<string | null>;
   setMerchantApiKey: (apiKey: string | null) => Promise<void>;
   clearMerchantApiKey: () => Promise<void>;
   getMerchantApiKey: () => Promise<string | null>;
@@ -100,8 +101,31 @@ export const useSettingsStore = create<SettingsStore>()(
           set({ themeMode: variantData.defaultTheme });
         }
       },
-      setMerchantId: (merchantId: string | null) => set({ merchantId }),
-      clearMerchantId: () => set({ merchantId: null }),
+      setMerchantId: (merchantId: string | null) => {
+        // If clearing, reset to env default
+        if (!merchantId || merchantId.trim() === "") {
+          set({ merchantId: MerchantConfig.getDefaultMerchantId() });
+        } else {
+          set({ merchantId });
+        }
+      },
+      clearMerchantId: async () => {
+        // Reset both merchant ID and API key to env defaults
+        const defaultMerchantId = MerchantConfig.getDefaultMerchantId();
+        set({ merchantId: defaultMerchantId });
+        const defaultApiKey = MerchantConfig.getDefaultMerchantApiKey();
+        if (defaultApiKey) {
+          await secureStorage.setItem(
+            SECURE_STORAGE_KEYS.MERCHANT_API_KEY,
+            defaultApiKey,
+          );
+          set({ isMerchantApiKeySet: true });
+        } else {
+          await secureStorage.removeItem(SECURE_STORAGE_KEYS.MERCHANT_API_KEY);
+          set({ isMerchantApiKeySet: false });
+        }
+        return defaultMerchantId;
+      },
       setMerchantApiKey: async (apiKey: string | null) => {
         try {
           if (apiKey) {
@@ -268,6 +292,18 @@ export const useSettingsStore = create<SettingsStore>()(
             // Clean up migration data
             delete (state as any).__migrationData;
           }
+
+          // Initialize merchant defaults from env if not set
+          const defaultMerchantId = MerchantConfig.getDefaultMerchantId();
+          const defaultApiKey = MerchantConfig.getDefaultMerchantApiKey();
+
+          if (!state.merchantId && defaultMerchantId) {
+            state.setMerchantId(defaultMerchantId);
+          }
+
+          if (!state.isMerchantApiKeySet && defaultApiKey) {
+            await state.setMerchantApiKey(defaultApiKey);
+          }
         }
 
         state?.setHasHydrated(true);

dapps/pos-app/utils/merchant-config.ts

@@ -0,0 +1,10 @@
+const DEFAULT_MERCHANT_ID = process.env.EXPO_PUBLIC_DEFAULT_MERCHANT_ID ?? null;
+const DEFAULT_MERCHANT_API_KEY =
+  process.env.EXPO_PUBLIC_DEFAULT_MERCHANT_API_KEY ?? null;
+
+export const MerchantConfig = {
+  getDefaultMerchantId: (): string | null => DEFAULT_MERCHANT_ID,
+  getDefaultMerchantApiKey: (): string | null => DEFAULT_MERCHANT_API_KEY,
+  hasEnvDefaults: (): boolean =>
+    Boolean(DEFAULT_MERCHANT_ID && DEFAULT_MERCHANT_API_KEY),
+};