Skip to content
This repository has been archived by the owner on Jan 7, 2025. It is now read-only.

Commit

Permalink
Conditional UI rendering (#480)
Browse files Browse the repository at this point in the history 
* conditional m-ui rendering

* Pay with points conditional
  • Loading branch information
@harshasomisetty
harshasomisetty authored Jul 27, 2023
1 parent fcae9dd commit 9e4b020
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 67 deletions.
103 changes: 50 additions & 53 deletions apps/merchant-ui/src/components/PointsCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,6 @@ export function PointsCard(props: Props) {
variant: 'destructive',
});
}
// throw error; // Re-throw the error
}
}

Expand Down Expand Up @@ -148,61 +147,59 @@ export function PointsCard(props: Props) {
</div>
</div>
);
} else if (merchantInfo.data.loyalty.loyaltyProgram != 'points') {
return (
<Card className="w-[400px]">
<CardHeader>
<CardTitle>Create Points Loyalty Program</CardTitle>
<CardDescription>Give back % of purchases to every customer</CardDescription>
</CardHeader>
<CardFooter className="flex justify-between">
{!merchantInfo.data.loyalty.points.pointsMint ? (
<Button onClick={setupLoyaltyProgram}>Start the Program</Button>
) : (
<Button onClick={selectLoyaltyProgram}>Restart the Program</Button>
)}
<Button variant="outline" onClick={disconnect}>
Disconnect Wallet
</Button>
</CardFooter>
</Card>
);
} else {
return (
<Card className="w-[400px]">
{merchantInfo.data.loyalty.loyaltyProgram != 'points' ? (
<>
<CardHeader>
<CardTitle>Create Points Loyalty Program</CardTitle>
<CardDescription>Give back % of purchases to every customer</CardDescription>
</CardHeader>
<CardFooter className="flex justify-between">
{!merchantInfo.data.loyalty.points.pointsMint ? (
<Button onClick={setupLoyaltyProgram}>Start the Program</Button>
) : (
<Button onClick={selectLoyaltyProgram}>Restart the Program</Button>
)}
<Button variant="outline" onClick={disconnect}>
Disconnect Wallet
</Button>
</CardFooter>
</>
) : (
<>
<CardHeader>
<CardTitle>Manage Points Loyalty Program</CardTitle>
<CardDescription>Give back % of purchases to every customer</CardDescription>
</CardHeader>
<CardContent>
<form>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="name">Set % points back</Label>
<Input
type="number"
id="name"
placeholder="%"
onChange={e => {
const value = parseFloat(e.target.value);
if (value >= 0 && value <= 100) {
setPoints(value);
}
}}
value={points}
/>
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex justify-between">
<Button onClick={updateLoyaltyPoints}>Update Loyalty Points Back %</Button>
<Button variant="outline" onClick={disconnect}>
Disconnect Wallet
</Button>
</CardFooter>
</>
)}
<CardHeader>
<CardTitle>Manage Points Loyalty Program</CardTitle>
<CardDescription>Give back % of purchases to every customer</CardDescription>
</CardHeader>
<CardContent>
<form>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="name">Set % points back</Label>
<Input
type="number"
id="name"
placeholder="%"
onChange={e => {
const value = parseFloat(e.target.value);
if (value >= 0 && value <= 100) {
setPoints(value);
}
}}
value={points}
/>
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex justify-between">
<Button onClick={updateLoyaltyPoints}>Update Loyalty Points Back %</Button>
<Button variant="outline" onClick={disconnect}>
Disconnect Wallet
</Button>
</CardFooter>
</Card>
);
}
Expand Down
40 changes: 40 additions & 0 deletions apps/merchant-ui/src/components/TiersCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { useToast } from '@/components/ui/use-toast';
import * as RE from '@/lib/Result';
import { Tier, updateMerchant, useMerchantStore } from '@/stores/merchantStore';
import { useWallet } from '@solana/wallet-adapter-react';
import { useState } from 'react';
import { Button } from './ui/button';
import { Input } from './ui/input';
Expand All @@ -18,6 +20,8 @@ interface EditingTier {
}

export function TiersCard(props: Props) {
const { publicKey, sendTransaction, wallet, connect, disconnect, connected, wallets, select } = useWallet();

const [editing, setEditing] = useState<number | null>(null);
const [editingTier, setEditingTier] = useState<EditingTier>({
name: undefined,
Expand Down Expand Up @@ -106,6 +110,27 @@ export function TiersCard(props: Props) {
});
}

async function selectLoyaltyProgram() {
try {
await updateMerchant('loyaltyProgram', 'tiers');

await getMerchantInfo();

toast({
title: 'Successfully Selected Tiers Loyalty!',
variant: 'constructive',
});
} catch (error) {
if (error instanceof Error) {
toast({
title: 'Error Starting Tiers Loyalty Program',
description: error.message,
variant: 'destructive',
});
}
}
}

if (RE.isFailed(merchantInfo)) {
return (
<div className={props.className}>
Expand All @@ -127,6 +152,21 @@ export function TiersCard(props: Props) {
</div>
</div>
);
} else if (merchantInfo.data.loyalty.loyaltyProgram != 'tiers') {
return (
<Card className="w-[400px]">
<CardHeader>
<CardTitle>Select Tiers Loyalty Program</CardTitle>
<CardDescription>Reward discounts to returning customers</CardDescription>
</CardHeader>
<CardFooter className="flex justify-between">
<Button onClick={selectLoyaltyProgram}>Restart the Program</Button>
<Button variant="outline" onClick={disconnect}>
Disconnect Wallet
</Button>
</CardFooter>
</Card>
);
} else {
return (
<div className={props.className}>
Expand Down
25 changes: 14 additions & 11 deletions apps/payment-ui/src/components/BuyButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
getConnectWalletNotification,
setNotification,
} from '@/features/notification/notificationSlice';
import { getPaymentDetails, getPaymentId } from '@/features/payment-details/paymentDetailsSlice';
import { getLoyaltyDetails, getPaymentDetails, getPaymentId } from '@/features/payment-details/paymentDetailsSlice';
import { resetSession } from '@/features/payment-session/paymentSessionSlice';
import { getPointsBalance } from '@/features/wallet/walletSlice';
import { AppDispatch } from '@/store';
Expand All @@ -23,6 +23,7 @@ const BuyButton = () => {
const connectedWalletNotification = useSelector(getConnectWalletNotification);
const [walletLoading, setWalletLoading] = useState(false);
const pointsBalance = useSelector(getPointsBalance);
const loyaltyDetails = useSelector(getLoyaltyDetails);
const usdcCost = useSelector(getPaymentDetails)?.usdcSize;

const fetchAndSendTransaction = async (points: boolean = false) => {
Expand Down Expand Up @@ -119,16 +120,18 @@ const BuyButton = () => {

return (
<div className="flex flex-col space-y-2">
<Button.Primary
disabled={pointsDisabled()}
pending={walletLoading}
onClick={async () => {
await fetchAndSendTransaction(true);
}}
className="bg-purple-700 text-white w-full shadow-xl "
>
{pointsDisabled() ? 'Need more points' : 'Buy with Points'}
</Button.Primary>
{loyaltyDetails && loyaltyDetails.loyaltyProgram === 'points' && (
<Button.Primary
disabled={pointsDisabled()}
pending={walletLoading}
onClick={async () => {
await fetchAndSendTransaction(true);
}}
className="bg-purple-700 text-white w-full shadow-xl "
>
{pointsDisabled() ? 'Need more points' : 'Buy with Points'}
</Button.Primary>
)}
<Button.Primary
disabled={isDisabled()}
pending={walletLoading}
Expand Down
6 changes: 3 additions & 3 deletions apps/payment-ui/src/features/payment-details/paymentDetailsSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ export interface Product {

export interface Tier {
id: string;
name?: string;
threshold?: number;
discount?: number;
name: string;
threshold: number;
discount: number;
active: boolean;
mint?: string;
merchantId: string;
Expand Down

1 comment on commit 9e4b020

@vercel
Copy link

@vercel vercel bot commented on 9e4b020 Jul 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

shopifydocs-solana-pay – ./apps/docs

shopifydocs-solana-pay-git-main-solana-labs.vercel.app
shopifydocs-solana-pay.vercel.app
shopifydocs.solanapay.com
shopifydocs-solana-pay-solana-labs.vercel.app
commercedocs.solanapay.com

Please sign in to comment.