feat: link to easy invoice for client id generation

Author: bassgeta

.env.example

@@ -6,4 +6,5 @@ NEXT_PUBLIC_NPM_PACKAGE_URL="https://www.npmjs.com/package/@requestnetwork/payme
 NEXT_PUBLIC_DEMO_URL="https://calendly.com/mariana-rn/request-network-intro"
 NEXT_PUBLIC_INTEGRATION_URL="https://docs.request.network/building-blocks/templates/request-checkout"
 NEXT_PUBLIC_RN_API_CLIENT_ID="rn_f6mr53l2yfcdv4sych5adq7gez3avurq"
-NEXT_PUBLIC_REQUEST_API_URL="https://api.stage.request.network"
+NEXT_PUBLIC_REQUEST_API_URL="https://api.stage.request.network"
+NEXT_PUBLIC_EASY_INVOICE_URL=https://easyinvoice.request.network

src/components/PaymentStep.tsx

@@ -2,13 +2,15 @@
 
 import { useTicketStore } from "@/store/ticketStore";
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
 import { PaymentWidget } from "./payment-widget/payment-widget";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { EASY_INVOICE_URL } from "@/lib/constants";
 
 export function PaymentStep() {
   const { tickets, clearTickets } = useTicketStore();
   const [total, setTotal] = useState(0);
-  const router = useRouter();
+  const [customClientId, setCustomClientId] = useState("");
 
   useEffect(() => {
     const newTotal = Object.values(tickets).reduce(
@@ -33,9 +35,9 @@ export function PaymentStep() {
     total: total.toString(),
     totalUSD: total.toString(),
   };
-  console.log("ma kaj mona", total, invoiceTotals)
 
-  const clientId = process.env.NEXT_PUBLIC_RN_API_CLIENT_ID;
+  const defaultClientId = process.env.NEXT_PUBLIC_RN_API_CLIENT_ID;
+  const clientId = customClientId || defaultClientId;
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
@@ -72,9 +74,31 @@ export function PaymentStep() {
         </div>
       </div>
 
-      {/* Payment Widget */}
       <div role="region" aria-label="Payment Widget">
         <h2 className="text-2xl font-semibold mb-6">Payment</h2>
+        <div className="mb-6 space-y-2">
+          <Label htmlFor="custom-client-id">Custom Client ID</Label>
+          <Input
+            id="custom-client-id"
+            type="text"
+            placeholder="Enter your custom client ID"
+            value={customClientId}
+            onChange={(e) => setCustomClientId(e.target.value)}
+            className="w-full"
+          />
+          <p className="text-sm text-gray-600">
+            Get your Client ID on{" "}
+            <a
+              href={`${EASY_INVOICE_URL}/ecommerce/manage`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-green hover:text-dark-green underline"
+            >
+              EasyInvoice
+            </a>
+          </p>
+        </div>
+
         {clientId && (
           <PaymentWidget
             amountInUsd={total.toString()}
@@ -126,15 +150,12 @@ export function PaymentStep() {
             }}
             onSuccess={() => {
               clearTickets();
-              setTimeout(() => {
-                router.push("/");
-              }, 10000);
             }}
             onError={(error) => {
               console.error("Payment failed:", error);
             }}
           >
-            <div className="px-8 py-2 bg-[#099C77] text-white rounded-lg hover:bg-[#087f63] transition-colors text-center">
+            <div className="px-10 py-2 bg-[#099C77] text-white rounded-lg hover:bg-[#087f63] transition-colors text-center">
               Pay with crypto
             </div>
           </PaymentWidget>

src/components/Playground/blocks/customize.tsx

@@ -11,6 +11,7 @@ import { PlaygroundFormData } from "@/lib/validation";
 import { Switch } from "../../ui/switch";
 import { useEffect } from "react";
 import { CurrencyCombobox } from "../../ui/combobox";
+import { EASY_INVOICE_URL } from "@/lib/constants";
 
 export const CustomizeForm = () => {
   const {
@@ -126,6 +127,17 @@ export const CustomizeForm = () => {
         {errors.paymentConfig?.rnApiClientId?.message && (
           <Error>{errors.paymentConfig.rnApiClientId.message}</Error>
         )}
+        <p className="text-sm text-gray-600">
+          Get your Client ID on{" "}
+          <a
+            href={`${EASY_INVOICE_URL}/ecommerce/manage`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-green hover:text-dark-green underline"
+          >
+            EasyInvoice
+          </a>
+        </p>
       </div>
 
       <div className="flex flex-col gap-2">

src/lib/constants.ts

@@ -40,4 +40,5 @@ export const CURRENCY_ID = {
   FAU_SEPOLIA: "FAU-sepolia",
   "ETH-ZKSYNC_ZKSYNCERA": "ETH-zksync-zksyncera",
   "ETH-BASE_BASE": "ETH-base-base",
-} as const;
+} as const;
+export const EASY_INVOICE_URL = process.env.NEXT_PUBLIC_EASY_INVOICE_URL || "https://easyinvoice.request.network";