fix: notify if using reloadly sandbox

functions/get-cards-env.ts

@@ -0,0 +1,5 @@
+import { Context } from "./utils/types";
+
+export async function onRequest(ctx: Context): Promise<Response> {
+  return Response.json({ USE_RELOADLY_SANDBOX: ctx.env.USE_RELOADLY_SANDBOX }, { status: 200 });
+}

static/scripts/rewards/gift-cards/helpers.ts

@@ -35,3 +35,25 @@ export async function getUserCountryCode() {
   }
   return null;
 }
+
+export async function isReloadlySandbox() {
+  const response = await fetch(`${getApiBaseUrl()}/get-cards-env`);
+  if (response.status == 200) {
+    const responseJson = await response.json();
+    return responseJson.USE_RELOADLY_SANDBOX === "true";
+  }
+  return false;
+}
+
+export async function detectCardsEnv() {
+  const isCardsSandbox = await isReloadlySandbox();
+  if (isCardsSandbox) {
+    const cardEnvElement = document.createElement("div");
+    cardEnvElement.setAttribute("class", "cards-env");
+    cardEnvElement.textContent = "You are using Reloadly Sandbox.";
+    const footer = document.getElementsByTagName("footer");
+    if (footer.length) {
+      footer[0].parentNode?.insertBefore(cardEnvElement, footer[0].nextSibling);
+    }
+  }
+}

static/scripts/rewards/gift-cards/index.ts

@@ -3,7 +3,7 @@ import { getGiftCardOrderId, isGiftCardAvailable } from "../../../../shared/help
 import { GiftCard, OrderTransaction } from "../../../../shared/types";
 import { AppState } from "../app-state";
 import { getGiftCardHtml } from "./gift-card";
-import { getApiBaseUrl, getUserCountryCode } from "./helpers";
+import { detectCardsEnv, getApiBaseUrl, getUserCountryCode } from "./helpers";
 import { attachMintAction } from "./mint/mint-action";
 import { getRedeemCodeHtml } from "./reveal/redeem-code-html";
 import { attachRevealAction } from "./reveal/reveal-action";
@@ -16,7 +16,10 @@ export async function initClaimGiftCard(app: AppState) {
   }
   giftCardsSection.innerHTML = "Loading...";
 
+  void detectCardsEnv();
+
   const countryCode = await getUserCountryCode();
+
   if (!countryCode) {
     giftCardsSection.innerHTML = `<p class="card-error">Failed to load suitable virtual cards for you. Refresh or try disabling adblocker.</p>`;
     return;

static/styles/rewards/gift-cards.css

@@ -162,6 +162,15 @@
   color: #fff;
 }
 
+.cards-env {
+  background: yellow;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding: 4px;
+  color: #000;
+}
+
 .disclaimer {
   text-align: center;
   padding: 24px 12px;