@saasquatch/mint-components 2.2.0-0 → 2.2.0-10

package/dist/collection/components/sqm-rewards-table/TaxAndCashRewardsTableCell.stories.js

@@ -2,6 +2,9 @@ import { h } from "@stencil/core";
 export default {
   title: "Components/Tax And Cash Rewards Table Cell",
 };
+// Reusable timestamps (current date is May 2026)
+const PAST = 1640995200000; // Jan 1, 2022
+const FUTURE = 2779257600000; // ~2058
 const cashReward = {
   id: "68c34fd98a6cb4f5f8394084",
   type: "CREDIT",
@@ -21,13 +24,13 @@ const cashReward = {
     name: "Cash",
   },
   name: null,
-  dateCreated: 1757630425085,
-  dateScheduledFor: 1757631025115,
-  dateGiven: 1757630737115,
+  dateCreated: PAST,
+  dateScheduledFor: null,
+  dateGiven: PAST,
   dateExpires: null,
   dateCancelled: null,
-  dateRedeemed: 1757630737115,
-  dateModified: 1757630737115,
+  dateRedeemed: null,
+  dateModified: PAST,
   rewardSource: "MANUAL",
   fuelTankCode: null,
   fuelTankType: null,
@@ -60,165 +63,237 @@ const cashReward = {
   },
   referral: null,
   description: null,
-  statuses: ["REDEEMED"],
+  statuses: [],
   rewardRedemptionTransactions: {
     data: null,
   },
   exchangedRewardRedemptionTransaction: null,
   pendingReasons: [],
+  rewardedCash: true,
 };
-const pending = {
-  statuses: ["PENDING"],
-};
-const payoutSent = {
-  statuses: ["PAYOUT_APPROVED"],
-};
-const payoutFailed = {
-  statuses: ["PAYOUT_FAILED"],
-};
-const payoutCancelled = {
-  statuses: ["PAYOUT_CANCELLED"],
-  dateCancelled: 1355612521321,
-};
-const processingPFT = {
-  partnerFundsTransfer: {
-    id: "123",
-    status: null,
-    dateCreated: 1355612521321,
-    dateScheduled: 2779257600000,
-    dateTransferred: null,
+// ============================================================
+// Reusable tax connections
+// ============================================================
+const fullySetupTaxConnection = {
+  connected: true,
+  taxHandlingEnabled: true,
+  connectionStatus: "COMPLETED",
+  publisher: {
+    requiredTaxDocumentType: "W9",
+    currentTaxDocument: {
+      status: "ACTIVE",
+      type: "W9",
+      dateCreated: PAST,
+    },
+    withdrawalSettings: { paymentMethod: "BANK_TRANSFER" },
+    payoutsAccount: null,
   },
 };
-const taxConnection = {
+const connectedNoWithdrawalSettings = {
   connected: true,
   taxHandlingEnabled: true,
-  connectionStatus: "NOT_STARTED",
+  connectionStatus: "COMPLETED",
   publisher: {
-    requiredTaxDocumentType: "W8BEN",
+    requiredTaxDocumentType: "W9",
     currentTaxDocument: {
-      status: "NOT_VERIFIED",
-      type: "W8BEN",
-      dateCreated: 321321487,
-    },
-    withdrawalSettings: {
-      paymentMethod: "BANK_TRANSFER",
+      status: "ACTIVE",
+      type: "W9",
+      dateCreated: PAST,
     },
+    withdrawalSettings: null,
     payoutsAccount: null,
   },
 };
-export const CashReward = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...cashReward }, availableText: "{availableAmount} remaining" }));
-};
-export const StatusCellPendingTaxReview = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...cashReward, ...pending, pendingReasons: ["US_TAX"] }, taxConnection: {
-      ...taxConnection,
-      publisher: {
-        requiredTaxDocumentType: "W8BEN",
-        currentTaxDocument: {
-          status: "",
-        },
-        ...taxConnection.publisher,
-      },
-    } }));
-};
-export const StatusCellPendingNewTaxForm = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
-      ...cashReward,
-      statuses: ["PENDING"],
-      pendingReasons: ["US_TAX"],
-    }, taxConnection: {
-      connected: true,
-      taxHandlingEnabled: true,
-      publisher: {
-        requiredTaxDocumentType: "W8BEN",
-        withdrawalSettings: {
-          paymentMethod: "BANK_TRANSFER",
-        },
-        payoutsAccount: null,
-        currentTaxDocument: {
-          status: "INACTIVE",
-          type: "W8BEN",
-          dateCreated: 321321487,
-        },
-      },
-    } }));
-};
-export const StatusCellPendingTaxSubmission = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...cashReward, ...pending, pendingReasons: ["US_TAX"] }, taxConnection: {
-      ...taxConnection,
-      publisher: {
-        ...taxConnection.publisher,
-        requiredTaxDocumentType: "W8BEN",
-        currentTaxDocument: null,
-      },
-    } }));
-};
-export const StatusCellPartnerCreatedSetupStartedButIncomplete = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
-      ...cashReward,
-      ...pending,
-      pendingReasons: ["US_TAX"],
-    }, taxConnection: {
-      ...taxConnection,
-      connected: false,
-    } }));
-};
-export const StatusCellPartnerNotCreatedSetupNotStarted = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
-      ...cashReward,
-      ...pending,
-      pendingReasons: ["US_TAX"],
-    }, taxConnection: {
-      ...taxConnection,
-      connected: false,
-    } }));
-};
-export const StatusCellPendingW9 = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
-      ...cashReward,
-      ...pending,
-      pendingReasons: ["US_TAX"],
-    }, taxConnection: {
-      ...taxConnection,
-      taxHandlingEnabled: false,
-    } }));
-};
-export const StatusCellPayoutSent = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Payout Sent", reward: {
-      ...cashReward,
-      partnerFundsTransfer: {
-        id: "transfer-123",
-        status: "TRANSFERRED",
-        dateScheduled: 1640995200000,
-        dateTransferred: 1640995200000,
-        dateCreated: 1640995200000,
-      },
-    }, taxConnection: taxConnection }));
+const notConnectedTaxConnection = {
+  connected: false,
+  taxHandlingEnabled: true,
+  connectionStatus: "NOT_STARTED",
+  publisher: null,
 };
-export const StatusCellPayoutFailed = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Payout Failed", reward: {
-      ...cashReward,
-      partnerFundsTransfer: {
-        id: "transfer-failed",
-        status: "OVERDUE",
-        dateScheduled: 1640995200000,
-        dateTransferred: null,
-        dateCreated: 1640995200000,
+// ============================================================
+// Reward Cell (kept from original)
+// ============================================================
+export const CashReward = () => (h("sqm-rewards-table-reward-cell", { reward: { ...cashReward, statuses: ["REDEEMED"], dateRedeemed: PAST }, availableText: "{availableAmount} remaining" }));
+// ============================================================
+// STATUS PRECEDENCE LADDER — one story per rule
+// (See sqm-rewards-table-status-column-new.feature § 2)
+// ============================================================
+// 1. Fraud check denied the referral → status is Denied
+export const StatusCellFraudDenied = () => (h("sqm-rewards-table-status-cell", { statusText: "Denied", reward: {
+    ...cashReward,
+    referral: { fraudData: { moderationStatus: "DENIED" } },
+  }, taxConnection: fullySetupTaxConnection }));
+// 2. Fraud check is still pending review → status is Pending Review
+export const StatusCellFraudPendingReview = () => (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+    ...cashReward,
+    referral: { fraudData: { moderationStatus: "PENDING" } },
+  }, taxConnection: fullySetupTaxConnection }));
+// 3. Partner funds transfer was reversed → status is Payout Cancelled
+export const StatusCellPayoutCancelled = () => (h("sqm-rewards-table-status-cell", { statusText: "Payout Cancelled", reward: {
+    ...cashReward,
+    partnerFundsTransfer: {
+      id: "pft-reversed",
+      status: "REVERSED",
+      dateCreated: PAST,
+      dateScheduled: PAST,
+      dateTransferred: null,
+    },
+  }, taxConnection: fullySetupTaxConnection }));
+// 4. Partner funds transfer is overdue → status is Payout Failed
+export const StatusCellPayoutFailed = () => (h("sqm-rewards-table-status-cell", { statusText: "Payout Failed", reward: {
+    ...cashReward,
+    partnerFundsTransfer: {
+      id: "pft-overdue",
+      status: "OVERDUE",
+      dateCreated: PAST,
+      dateScheduled: PAST,
+      dateTransferred: null,
+    },
+  }, taxConnection: fullySetupTaxConnection }));
+// 5. Connected partner has not finished withdrawal settings setup → status is Pending
+export const StatusCellPartnerCreatedSetupStartedButIncomplete = () => (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+    ...cashReward,
+    partnerFundsTransfer: {
+      id: "pft-not-yet-due",
+      status: "NOT_YET_DUE",
+      dateCreated: PAST,
+      dateScheduled: FUTURE,
+      dateTransferred: null,
+    },
+  }, taxConnection: connectedNoWithdrawalSettings }));
+// Reward is pending US_TAX and the partner has not been created yet → shows the partner-setup prompt
+export const StatusCellPartnerNotCreatedSetupNotStarted = () => (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+    ...cashReward,
+    statuses: ["PENDING"],
+    pendingReasons: ["US_TAX"],
+  }, taxConnection: notConnectedTaxConnection }));
+// 6. Reward has MISSING_PAYOUT_CONFIGURATION pending reason and no withdrawal settings → status is Pending
+export const StatusCellMissingPayoutConfiguration = () => (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+    ...cashReward,
+    statuses: ["PENDING"],
+    pendingReasons: ["MISSING_PAYOUT_CONFIGURATION"],
+  }, taxConnection: connectedNoWithdrawalSettings }));
+// 7. Partner funds transfer is scheduled for a future date → status is Processing
+export const StatusCellPayoutProcessing = () => (h("sqm-rewards-table-status-cell", { statusText: "Processing", reward: {
+    ...cashReward,
+    partnerFundsTransfer: {
+      id: "pft-processing",
+      status: null,
+      dateCreated: PAST,
+      dateScheduled: FUTURE,
+      dateTransferred: null,
+    },
+  }, taxConnection: fullySetupTaxConnection }));
+// 8. Partner funds transfer has been transferred → status is Payout Approved
+export const StatusCellPayoutApproved = () => (h("sqm-rewards-table-status-cell", { statusText: "Payout Approved", reward: {
+    ...cashReward,
+    partnerFundsTransfer: {
+      id: "pft-transferred",
+      status: "TRANSFERRED",
+      dateCreated: PAST,
+      dateScheduled: PAST,
+      dateTransferred: PAST,
+    },
+  }, taxConnection: fullySetupTaxConnection }));
+// 9. Reward has a cancellation date set → status is Cancelled
+export const StatusCellRewardCancelled = () => (h("sqm-rewards-table-status-cell", { statusText: "Cancelled", reward: {
+    ...cashReward,
+    statuses: ["CANCELLED"],
+    dateCancelled: PAST,
+  }, taxConnection: fullySetupTaxConnection }));
+// 10. Reward statuses include EXPIRED → status is Expired
+export const StatusCellRewardExpired = () => (h("sqm-rewards-table-status-cell", { statusText: "Expired", reward: {
+    ...cashReward,
+    statuses: ["EXPIRED"],
+    dateExpires: PAST,
+  }, taxConnection: fullySetupTaxConnection }));
+// 11. Reward is pending and scheduled for a future date → status is Pending with the scheduled date shown
+export const StatusCellPendingScheduled = () => (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+    ...cashReward,
+    statuses: ["PENDING"],
+    pendingReasons: ["SCHEDULED"],
+    dateScheduledFor: FUTURE,
+  }, taxConnection: fullySetupTaxConnection }));
+// 12. Reward does not match any precedence rule → no badge text, no description
+export const StatusCellNoMatchingRule = () => (h("sqm-rewards-table-status-cell", { statusText: "", reward: {
+    ...cashReward,
+    statuses: [],
+  }, taxConnection: fullySetupTaxConnection }));
+// ============================================================
+// US_TAX getTaxPendingReasons branches (Pending Description Resolution § 5)
+// ============================================================
+// Reward is pending US_TAX but tax handling is disabled → shows "W-9 required"
+export const StatusCellPendingW9Required = () => (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+    ...cashReward,
+    statuses: ["PENDING"],
+    pendingReasons: ["US_TAX"],
+  }, taxConnection: { ...fullySetupTaxConnection, taxHandlingEnabled: false } }));
+// Partner is connected but has not submitted any tax documents → shows the submit-tax-docs prompt
+export const StatusCellPendingTaxSubmission = () => (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+    ...cashReward,
+    statuses: ["PENDING"],
+    pendingReasons: ["US_TAX"],
+  }, taxConnection: {
+    ...fullySetupTaxConnection,
+    publisher: {
+      ...fullySetupTaxConnection.publisher,
+      currentTaxDocument: null,
+    },
+  } }));
+// Partner's tax document is inactive (rejected) → shows the submit-a-new-form prompt
+export const StatusCellPendingNewTaxForm = () => (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+    ...cashReward,
+    statuses: ["PENDING"],
+    pendingReasons: ["US_TAX"],
+  }, taxConnection: {
+    ...fullySetupTaxConnection,
+    publisher: {
+      ...fullySetupTaxConnection.publisher,
+      currentTaxDocument: {
+        status: "INACTIVE",
+        type: "W9",
+        dateCreated: PAST,
       },
-    } }));
-};
-export const StatusCellPayoutProcessing = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Payment Processing", reward: { ...cashReward, ...processingPFT } }));
-};
-export const StatusCellPayoutCancelled = () => {
-  return (h("sqm-rewards-table-status-cell", { statusText: "Payout Cancelled", reward: {
-      ...cashReward,
-      partnerFundsTransfer: {
-        id: "transfer-reversed",
-        status: "REVERSED",
-        dateScheduled: 1640995200000,
-        dateTransferred: null,
-        dateCreated: 1640995200000,
+    },
+  } }));
+// Partner's tax document is awaiting verification → shows the awaiting-review prompt
+export const StatusCellPendingTaxReview = () => (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+    ...cashReward,
+    statuses: ["PENDING"],
+    pendingReasons: ["US_TAX"],
+  }, taxConnection: {
+    ...fullySetupTaxConnection,
+    publisher: {
+      ...fullySetupTaxConnection.publisher,
+      currentTaxDocument: {
+        status: "NOT_VERIFIED",
+        type: "W9",
+        dateCreated: PAST,
       },
-    } }));
-};
+    },
+  } }));
+// Partner has an active tax form but has not configured withdrawal settings → shows the partner-setup prompt
+export const StatusCellExistingTaxFormNoWithdrawalSettings = () => (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+    ...cashReward,
+    statuses: ["PENDING"],
+    pendingReasons: ["US_TAX"],
+  }, taxConnection: connectedNoWithdrawalSettings }));
+// Partner is connected, no tax form is required, but withdrawal settings are not submitted → shows the partner-setup prompt
+export const StatusCellConnectedNoTaxRequiredNoWithdrawalSettings = () => (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
+    ...cashReward,
+    statuses: ["PENDING"],
+    pendingReasons: [],
+  }, taxConnection: {
+    connected: true,
+    taxHandlingEnabled: true,
+    connectionStatus: "COMPLETED",
+    publisher: {
+      requiredTaxDocumentType: null,
+      currentTaxDocument: null,
+      withdrawalSettings: null,
+      payoutsAccount: null,
+    },
+  } }));
+// Aliases kept for the table-level stories file
+export const StatusCellPayoutSent = StatusCellPayoutApproved;
+export const StatusCellPendingW9 = StatusCellPendingW9Required;

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js

@@ -68,7 +68,7 @@ export class RewardTableStatusCell {
     this.pendingTaxReview = "Awaiting tax form review.";
     this.pendingNewTaxForm = "Invalid tax form. Submit a new form to receive your rewards.";
     this.pendingTaxSubmission = "Submit your tax documents to receive your rewards.";
-    this.pendingPartnerCreation = "Complete your tax and cash payout setup to receive your rewards.";
+    this.pendingPartnerCreation = "Complete your cash payout setup to receive your rewards.";
     this.pendingScheduled = "Until";
     this.pendingUnhandled = "Fulfillment error";
     this.pendingReviewText = "Awaiting review";
@@ -79,16 +79,26 @@ export class RewardTableStatusCell {
     this.payoutProcessing = "Processing until {date}. Payout is then scheduled based on your settings.";
   }
   rewardStatus(reward) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const hasExpired = (_a = reward.statuses) === null || _a === void 0 ? void 0 : _a.includes("EXPIRED");
     const isPending = (_b = reward.statuses) === null || _b === void 0 ? void 0 : _b.includes("PENDING");
     const integrationOrFueltankReward = reward.type === "INTEGRATION" || reward.type === "FUELTANK";
+    // AL: TODO Scott said we should change this to use pendingReasons instead of fraudStatus - probably dont want to change this for backwards compatibility
     const fraudStatus = (_d = (_c = reward.referral) === null || _c === void 0 ? void 0 : _c.fraudData) === null || _d === void 0 ? void 0 : _d.moderationStatus;
     if (fraudStatus === "DENIED")
       return "DENIED";
     if (fraudStatus === "PENDING")
       return "PENDING_REVIEW";
-    const partnerTransferStatus = (_e = reward.partnerFundsTransfer) === null || _e === void 0 ? void 0 : _e.status;
+    const isCashReward = reward.rewardedCash;
+    console.log(this.reward, "reward in status cell");
+    // pft can now be created before withdrawal settings exist
+    if (isCashReward) {
+      if (!((_e = this.taxConnection) === null || _e === void 0 ? void 0 : _e.connected) ||
+        (((_f = this.taxConnection) === null || _f === void 0 ? void 0 : _f.connected) &&
+          !((_h = (_g = this.taxConnection) === null || _g === void 0 ? void 0 : _g.publisher) === null || _h === void 0 ? void 0 : _h.withdrawalSettings)))
+        return "PENDING";
+    }
+    const partnerTransferStatus = (_j = reward.partnerFundsTransfer) === null || _j === void 0 ? void 0 : _j.status;
     if (reward.partnerFundsTransfer) {
       if (partnerTransferStatus === "REVERSED")
         return "PAYOUT_CANCELLED";
@@ -113,24 +123,24 @@ export class RewardTableStatusCell {
     if (isPending)
       return "PENDING";
     if (reward.type === "CREDIT") {
-      return ((_f = reward.statuses) === null || _f === void 0 ? void 0 : _f.includes("REDEEMED")) ? "REDEEMED" : "AVAILABLE";
+      return ((_k = reward.statuses) === null || _k === void 0 ? void 0 : _k.includes("REDEEMED")) ? "REDEEMED" : "AVAILABLE";
     }
-    if (reward.type === "PCT_DISCOUNT" && ((_g = reward.statuses) === null || _g === void 0 ? void 0 : _g.includes("AVAILABLE"))) {
+    if (reward.type === "PCT_DISCOUNT" && ((_l = reward.statuses) === null || _l === void 0 ? void 0 : _l.includes("AVAILABLE"))) {
       return "AVAILABLE";
     }
     if (integrationOrFueltankReward && isPending) {
       return "PENDING";
     }
-    if (integrationOrFueltankReward && ((_h = reward.statuses) === null || _h === void 0 ? void 0 : _h.includes("CANCELLED"))) {
+    if (integrationOrFueltankReward && ((_m = reward.statuses) === null || _m === void 0 ? void 0 : _m.includes("CANCELLED"))) {
       return "CANCELLED";
     }
-    if (integrationOrFueltankReward && ((_j = reward.statuses) === null || _j === void 0 ? void 0 : _j.includes("AVAILABLE"))) {
+    if (integrationOrFueltankReward && ((_o = reward.statuses) === null || _o === void 0 ? void 0 : _o.includes("AVAILABLE"))) {
       return "AVAILABLE";
     }
     return "";
   }
   getTaxPendingReasons(reward, taxConnection) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     if ((_a = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _a === void 0 ? void 0 : _a.includes("US_TAX")) {
       if (!(taxConnection === null || taxConnection === void 0 ? void 0 : taxConnection.taxHandlingEnabled))
         return this.pendingUsTax;
@@ -145,12 +155,22 @@ export class RewardTableStatusCell {
         if (status === "NOT_VERIFIED")
           return this.pendingTaxReview;
       }
-      if (!((_d = taxConnection === null || taxConnection === void 0 ? void 0 : taxConnection.publisher) === null || _d === void 0 ? void 0 : _d.withdrawalSettings))
+      if (!((_d = taxConnection === null || taxConnection === void 0 ? void 0 : taxConnection.publisher) === null || _d === void 0 ? void 0 : _d.withdrawalSettings)) {
         return this.pendingPartnerCreation;
+      }
     }
     if ((_e = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _e === void 0 ? void 0 : _e.includes("MISSING_PAYOUT_CONFIGURATION")) {
       return this.pendingPartnerCreation;
     }
+    // Fallback: when rewardStatus() forced PENDING because the user is
+    // connected but hasn't set up withdrawal settings (no pendingReasons
+    // were returned by the API, e.g. for credit rewards with a PFT).
+    if (reward.rewardedCash) {
+      if (!(taxConnection === null || taxConnection === void 0 ? void 0 : taxConnection.connected) ||
+        ((taxConnection === null || taxConnection === void 0 ? void 0 : taxConnection.connected) &&
+          !((_f = taxConnection === null || taxConnection === void 0 ? void 0 : taxConnection.publisher) === null || _f === void 0 ? void 0 : _f.withdrawalSettings)))
+        return this.pendingPartnerCreation;
+    }
     return "";
   }
   getBadgeType(rewardStatus) {
@@ -447,7 +467,7 @@ export class RewardTableStatusCell {
       },
       "attribute": "pending-partner-creation",
       "reflect": false,
-      "defaultValue": "\"Complete your tax and cash payout setup to receive your rewards.\""
+      "defaultValue": "\"Complete your cash payout setup to receive your rewards.\""
     },
     "pendingScheduled": {
       "type": "string",

package/dist/collection/components/sqm-rewards-table/useRewardsTable.js

@@ -49,6 +49,7 @@ const GET_REWARDS = gql `
             fuelTankCode
             fuelTankType
             currency
+            rewardedCash
             prettyValue(locale: $locale)
             prettyValueNumber: prettyValue(
               formatType: NUMBER_FORMATTED

package/dist/collection/components/sqm-share-code/sqm-share-code.js

@@ -415,7 +415,6 @@ function useDemoShareCode(props) {
     borderRadius: props.borderRadius,
     borderColor: props.borderColor,
     buttonType: props.buttonType,
-    rewardStatus: "AVAILABLE",
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility