PR: pick & offer the single best virtual card to user

.cspell.json

@@ -36,6 +36,7 @@
     "Rpcs",
     "scalarmult",
     "servedir",
+    "skus",
     "solmate",
     "sonarjs",
     "SUPABASE",

README.md

@@ -18,19 +18,35 @@ A vanilla Typescript dApp for claiming Ubiquity Rewards. It also includes tools
   PAYMENT_TOKEN_ADDRESS="0xe91D153E0b41518A2Ce8Dd3D7944Fa863463a97d"
 
   # Variables depending on spender (bounty hunter)
-  AMOUNT_IN_ETH="1"
+  AMOUNT_IN_ETH="50"
   BENEFICIARY_ADDRESS="0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"
   ```
 
+3. Update values for wrangler variables to use Reloadly sandbox or production API in the `wrangler.toml` file.
+
+```
+[vars]
+USE_RELOADLY_SANDBOX = "true"
+RELOADLY_API_CLIENT_ID = "xxxxxxxxxxxxxxxxxx"
+RELOADLY_API_CLIENT_SECRET = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+```
+
 ## Local Testing
 
 1. Set `.env` variables.
-2. Run `yarn test:anvil` in terminal A and `yarn test:fund` in terminal B.
-3. In terminal B, run `yarn start`.
+2. Run `yarn`
+3. Run `yarn test:anvil` in terminal A and `yarn test:fund` in terminal B.
+4. In terminal B, run
+
+```
+yarn build
+yarn start
+```
+
 4. A permit URL for both ERC20 and ERC721 will be generated.
 5. Open the generated permit URL from the console.
 6. Connect your wallet (import anvil accounts [0] & [1] into your wallet).
-7. Depending on your connected account, either the claim or invalidate button will be visible.
+7. Depending on your connected account, either the claim or invalidate button will be visible. The virtual card section will also display an available virtual card.
 8. To test ERC721 permits, deploy the `nft-rewards` contract from the [repository](https://github.com/ubiquity/nft-rewards).
 
 ### Importing Anvil Accounts
@@ -71,6 +87,19 @@ A vanilla Typescript dApp for claiming Ubiquity Rewards. It also includes tools
 - Ensure `.env` is correctly configured and wallet provider network is correct if `Allowance` or `Balance` is `0.00`.
 - Always start the Anvil instance before using `yarn start` as permit generation requires an on-chain call to `token.decimals()`.
 
+### Troubleshooting virtual cards
+
+Virtual cards are subject to regulations and are not available for all countries. Moreover, each virtual card is available for specific amounts. If you are unable to see an available virtual card it is either because of your location or the amount of your permit.
+
+If you are not getting an available card, you can perform a few extra steps to get a virtual card for testing purposes. You can set the permit amount `AMOUNT_IN_ETH` to be 50 WXDAI in the `.env` file and mock your location as United States. To set your location to United States, you can follow one of the steps given below:
+
+- Use a USA VPN
+- Set your timezone to `Eastern Time (ET) New York` and block the ajax request to `https://ipinfo.io/json` so that your timezone is used to detect your location.
+
+One of these steps should get you a virtual card to try both on Reloadly sandbox and production. Please note that if you are minting a virtual card with a mock location on Reloadly production, you will get a redeem code but you may not able to use the card due to restrictions on the card, and there is no refund or replacement. Use your real location if you want to use the virtual card.
+
+If you are using mainnet with your local environments, you may want to change the `giftCardTreasuryAddress` to a wallet that you own in the file `shared/constants.ts`. It is the wallet where payments for the virtual cards are sent.
+
 ## How to generate a permit2 URL using the script
 
 1. Admin sets `env.AMOUNT_IN_ETH` and `env.BENEFICIARY_ADDRESS` depending on a bounty hunter's reward and address

cypress/e2e/claim-gift-card.cy.ts

@@ -1,7 +1,7 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import { JsonRpcProvider, JsonRpcSigner } from "@ethersproject/providers";
 import { Wallet } from "ethers";
-import { PermitConfig, generateERC20Permit } from "../../scripts/typescript/generate-erc20-permit-url";
+import { PermitConfig, generateErc20Permit } from "../../scripts/typescript/generate-erc20-permit-url";
 
 const beneficiary = "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"; // anvil
 const SENDER_PRIVATE_KEY = "0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d"; // anvil
@@ -16,25 +16,18 @@ describe("Gift Cards", () => {
     setupIntercepts();
   });
 
-  it("should show/hide activation info", () => {
+  it.only("should show redeem info", () => {
     const permitConfig = Cypress.env("permitConfig");
     void cy.getPermitUrl(permitConfig).then((permitUrl) => {
       cy.visit(`${permitUrl as string}`);
-      cy.wait(2000);
-
-      cy.wait("@listGiftCards");
-
-      cy.get("#gift-cards").should("exist").and("include.text", "Or claim in virtual visa/mastercard");
-      cy.get(".gift-card").should("have.length.above", 0);
 
-      cy.get(".gift-card.purchased").should("not.exist");
-
-      cy.get('#activate-info .redeem-info-wrapper[data-show="true"]').should("not.exist");
-      cy.get(".gift-card").eq(0).find(".activate-btn").invoke("click");
+      cy.wait("@getBestCard");
+      cy.wait(2000);
 
-      cy.get('#activate-info .redeem-info-wrapper[data-show="true"]').should("exist");
-      cy.get("#activate-info .close-btn").invoke("click");
-      cy.get('#activate-info .redeem-info-wrapper[data-show="true"]').should("not.exist");
+      cy.get("#gift-cards").should("exist").and("include.text", "Or mint a virtual visa/mastercard");
+      cy.get(".card-section").should("have.length.above", 0);
+      cy.get(".redeem-info").should("exist");
+      cy.get(".redeem-info").eq(0).should("include.text", "How to use redeem code?");
     });
   });
 
@@ -47,34 +40,30 @@ describe("Gift Cards", () => {
       cy.visit(permitUrl);
       cy.wait(2000);
 
-      cy.wait("@listGiftCards");
-      cy.get(".gift-card").should("have.length.above", 0);
-      cy.get(".gift-card .available").should("have.length.above", 0);
-      cy.get(".gift-card .available")
-        .eq(0)
-        .parent()
-        .parent()
-        .find("h3")
-        .eq(0)
-        .then(($name) => {
-          const giftCardName = $name;
-          cy.wrap(giftCardName).as("giftCardName");
-        });
-
-      cy.intercept({ method: "POST", url: "/post-order" }).as("postOrder");
+      cy.wait("@getBestCard");
+      cy.get(".card-section").should("have.length.above", 0);
+      cy.get("#offered-card").should("exist");
+      cy.get("#offered-card .details h3").then(($name) => {
+        const giftCardName = $name;
+        cy.wrap(giftCardName).as("giftCardName");
+      });
 
-      cy.get(".gift-card .available").eq(0).parent().parent().find(".claim-gift-card-btn").should("have.length", 1);
+      cy.intercept({ method: "POST", url: "/post-order?country=US" }).as("postOrder");
 
+      cy.get("#offered-card .details #mint").should("exist");
       cy.intercept({ method: "GET", url: "/get-order**" }).as("getOrder");
-      cy.get(".gift-card .available").eq(0).parent().parent().find(".claim-gift-card-btn").invoke("click");
+
+      cy.get("#offered-card .details #mint").invoke("click");
+
       cy.get(".notifications", { timeout: 10000 }).should("contain.text", "Processing... Please wait. Do not close this page.");
-      cy.get(".notifications", { timeout: 10000 }).should("contain.text", "Transaction confirmed. Loading your card now.");
+      cy.get(".notifications", { timeout: 10000 }).should("contain.text", "Transaction confirmed. Minting your card now.");
       cy.wait("@getOrder", { timeout: 10000 });
 
-      cy.get("#gift-cards").should("exist").and("include.text", "Your gift card");
+      cy.get("#gift-cards").should("exist").and("include.text", "Your virtual visa/mastercard");
 
+      cy.get("#redeem-code").should("exist");
       cy.get("@giftCardName").then((name) => {
-        cy.get(".gift-card h3")
+        cy.get("#offered-card .details h3")
           .eq(0)
           .should("have.text", name.text() as string);
       });
@@ -87,18 +76,18 @@ describe("Gift Cards", () => {
     );
     cy.wait(2000);
 
-    cy.wait("@listGiftCards");
+    cy.wait("@getBestCard");
 
-    cy.get("#gift-cards").should("exist").and("include.text", "Your gift card");
-    cy.get(".gift-card.redeem-code > h3").eq(0).should("have.text", "Your redeem code");
-    cy.get(".gift-card.redeem-code > p").eq(0).should("have.text", "xxxxxxxxxxxx");
-    cy.get(".gift-card.redeem-code > p").eq(1).should("have.text", "xxxxxxxxxxxx");
-    cy.get(".gift-card.redeem-code > p").eq(2).should("have.text", "xxxxxxxxxxxx");
-    cy.get(".gift-card.redeem-code > .buttons > #reveal-btn").invoke("click");
+    cy.get("#gift-cards").should("exist").and("include.text", "Your virtual visa/mastercard");
+    cy.get("#redeem-code > h3").eq(0).should("have.text", "Redeem code");
+    cy.get("#redeem-code > p").eq(0).should("have.text", "xxxxxxxxxxxx");
+    cy.get("#redeem-code > p").eq(1).should("have.text", "xxxxxxxxxxxx");
+    cy.get("#redeem-code > p").eq(2).should("have.text", "xxxxxxxxxxxx");
+    cy.get("#redeem-code > #reveal").invoke("click");
 
-    cy.get(".gift-card.redeem-code > h3").eq(0).should("have.text", "Your redeem code");
-    cy.get(".gift-card.redeem-code > p").should("exist");
-    cy.get(".gift-card.redeem-code > p").eq(0).should("not.have.text", "xxxxxxxxxxxx");
+    cy.get("#redeem-code > h3").eq(0).should("have.text", "Redeem code");
+    cy.get("#redeem-code > p").should("exist");
+    cy.get("#redeem-code > p").eq(0).should("not.have.text", "xxxxxxxxxxxx");
   });
 });
 
@@ -139,7 +128,22 @@ function setupIntercepts() {
     body: {},
   });
 
-  cy.intercept({ method: "GET", url: "/list-gift-cards" }).as("listGiftCards");
+  cy.intercept({ method: "GET", url: "/get-best-card?country=US**" }).as("getBestCard");
+  cy.intercept("GET", "https://ipinfo.io/json", {
+    statusCode: 200,
+    body: {
+      ip: "192.158.1.38",
+      hostname: "example.com",
+      city: "Los Angeles",
+      region: "California",
+      country: "US",
+      loc: "34.0522,-118.2437",
+      org: "Example org",
+      postal: "90009",
+      timezone: "America/Los_Angeles",
+      readme: "https://ipinfo.io/missingauth",
+    },
+  });
 }
 
 function stubEthereum(signer: JsonRpcSigner) {
@@ -192,5 +196,5 @@ function providerFunctions(method: string) {
 }
 
 Cypress.Commands.add("getPermitUrl", (customPermitConfig: PermitConfig) => {
-  return generateERC20Permit(customPermitConfig);
+  return generateErc20Permit(customPermitConfig);
 });

cypress/e2e/main.cy.ts

@@ -7,6 +7,5 @@ describe("Homepage tests", () => {
     });
     cy.get("@consoleError").should("not.be.called");
     cy.get("body").should("exist");
-    cy.get("h1").should("exist");
   });
 });

functions/get-best-card.ts

@@ -0,0 +1,30 @@
+import { BigNumber } from "ethers";
+import { getAccessToken, findBestCard } from "./helpers";
+import { Context } from "./types";
+import { validateEnvVars, validateRequestMethod } from "./validators";
+
+export async function onRequest(ctx: Context): Promise<Response> {
+  try {
+    validateRequestMethod(ctx.request.method, "GET");
+    validateEnvVars(ctx);
+
+    const { searchParams } = new URL(ctx.request.url);
+    const country = searchParams.get("country");
+    const amount = searchParams.get("amount");
+
+    if (isNaN(Number(amount)) || !(country && amount)) {
+      throw new Error(`Invalid query parameters: ${{ country, amount }}`);
+    }
+
+    const accessToken = await getAccessToken(ctx.env);
+    const bestCard = await findBestCard(country, BigNumber.from(amount), accessToken);
+
+    if (bestCard) {
+      return Response.json(bestCard, { status: 200 });
+    }
+    return Response.json({ message: "There are no gift cards available." }, { status: 404 });
+  } catch (error) {
+    console.error("There was an error while processing your request.", error);
+    return Response.json({ message: "There was an error while processing your request." }, { status: 500 });
+  }
+}

functions/get-order.ts

@@ -1,5 +1,6 @@
 import { OrderTransaction } from "../shared/types";
 import { commonHeaders, getAccessToken, getBaseUrl } from "./helpers";
+import { getGiftCardById } from "./post-order";
 import { AccessToken, Context, ReloadlyFailureResponse, ReloadlyGetTransactionResponse } from "./types";
 import { validateEnvVars, validateRequestMethod } from "./validators";
 
@@ -22,7 +23,12 @@ export async function onRequest(ctx: Context): Promise<Response> {
     if (!reloadlyTransaction) {
       return Response.json("Order not found.", { status: 404 });
     } else if (reloadlyTransaction.status && reloadlyTransaction.status == "SUCCESSFUL") {
-      return Response.json(reloadlyTransaction, { status: 200 });
+      try {
+        const product = await getGiftCardById(reloadlyTransaction.product.productId, accessToken);
+        return Response.json({ transaction: reloadlyTransaction, product: product }, { status: 200 });
+      } catch (error) {
+        return Response.json({ transaction: reloadlyTransaction, product: null }, { status: 200 });
+      }
     } else {
       return Response.json({ message: "There is no successful transaction for given order ID." }, { status: 404 });
     }