Skip to content

fix: APP-556 orders UI #2597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blushi merged 5 commits into from
Feb 18, 2025
Merged

fix: APP-556 orders UI #2597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c705226
fix: order layout issue
blushi Feb 11, 2025
4578c68
fix: question mark tooltip
blushi Feb 11, 2025
4fb306f
fix: title padding
blushi Feb 13, 2025
d16c9a7
fix: float precision issue in order summary price
blushi Feb 17, 2025
ef4bb24
fix: dom validation p
blushi Feb 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web-components/src/theme/muiTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const defaultTheme = createTheme({
values: {
xs: 0,
sm: 640,
tablet: 834,
tablet: 768,
md: 1024,
lg: 1280,
xl: 1400,
Expand Down
11 changes: 7 additions & 4 deletions web-marketplace/src/components/organisms/Order/Order.Summary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ interface OrderSummaryProps {
askDenom: string;
askBaseDenom: string;
};
pricePerCredits: number;
}

export const OrderSummary = ({
Expand All @@ -42,6 +43,7 @@ export const OrderSummary = ({
displayTotalPrice,
displayDenom,
currency,
pricePerCredits,
}: OrderSummaryProps) => {
const { _ } = useLingui();
const { purchaseDate, blockchainRecord } = blockchainDetails;
Expand All @@ -59,7 +61,7 @@ export const OrderSummary = ({
title={_(msg`Price per credit`)}
value={
<AmountWithCurrency
amount={+displayTotalPrice / +credits}
amount={pricePerCredits}
currency={currency}
displayDenom={displayDenom}
classes={{
Expand Down Expand Up @@ -172,12 +174,13 @@ export const OrderSummary = ({
{blockchainRecord && (
<OrderSummaryRow
title={
<div className="relative">
<span className="inline">
<div className="flex">
<span className="inline max-w-[85px]">
<Trans>blockchain record</Trans>
</span>
<QuestionMarkTooltip
className="absolute bottom-0 right-20"
size="lg"
className="pl-1 pb-1 w-[24px] h-[24px] flex justify-center items-center"
title={_(
msg`A unique identifier that tracks and verifies a specific transaction on the blockchain.`,
)}
Expand Down
6 changes: 3 additions & 3 deletions web-marketplace/src/components/organisms/Order/Order.SummaryRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const OrderSummaryRow = ({
titleClassName?: string;
}) => {
return (
<div className={cn('grid grid-cols-[105px_auto] mb-5 sm:mb-10', className)}>
<div className={cn('grid grid-cols-[110px_auto] mb-5 sm:mb-10', className)}>
<Title
variant="h6"
className={cn(
Expand All @@ -25,14 +25,14 @@ export const OrderSummaryRow = ({
>
{title}
</Title>
<p
<div
className={cn(
'text-grey-700 m-0 ml-5 p-0 text-sm',
clampDescription ? 'line-clamp-2' : '',
)}
>
{value}
</p>
</div>
</div>
);
};
21 changes: 14 additions & 7 deletions web-marketplace/src/components/organisms/Order/Order.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,9 @@ export const Order = ({ orderData, allowedDenoms, className }: OrderProps) => {
denom => denom.bankDenom === paymentInfo.askDenom,
);
const displayTotalPrice = denom
? +credits.totalPrice * Math.pow(10, -denom.exponent)
? +(+credits.totalPrice * Math.pow(10, -denom.exponent)).toFixed(
denom.exponent,
)
: +credits.totalPrice;

const currency = {
Expand All @@ -67,6 +69,8 @@ export const Order = ({ orderData, allowedDenoms, className }: OrderProps) => {
[allowedDenoms, paymentInfo.askBaseDenom, paymentInfo.askDenom],
);

const pricePerCredits = +displayTotalPrice / +credits.credits;

return (
<>
<Card
Expand All @@ -78,12 +82,12 @@ export const Order = ({ orderData, allowedDenoms, className }: OrderProps) => {
<CardHeader
sx={{
'.MuiCardHeader-avatar': {
width: { xs: '100%', sm: 'auto' },
width: { xs: '100%', tablet: 'auto' },
},
}}
className="w-full flex flex-col items-start sm:items-center justify-between sm:flex-row p-15 sm:p-30 border-solid border-0 border-b-[1px] border-bc-neutral-300"
className="w-full flex flex-col items-start md:items-center justify-between md:flex-row p-15 sm:p-30 border-solid border-0 border-b-[1px] border-bc-neutral-300"
avatar={
<div className="w-full h-[178px] sm:w-[156px] sm:h-full">
<div className="w-full h-[178px] md:w-[156px] md:h-full">
{isPrefinanceProject && (
<PrefinanceTag
bodyTexts={getProjectCardBodyTextMapping(_)}
Expand All @@ -101,7 +105,7 @@ export const Order = ({ orderData, allowedDenoms, className }: OrderProps) => {
</div>
}
action={
<div className="flex flex-wrap md:flex-col gap-10 pb-5">
<div className="flex flex-wrap sm:flex-col gap-10 pb-5">
{retirementInfo.retiredCredits &&
retirementInfo.certificateNodeId && (
<Link
Expand Down Expand Up @@ -138,7 +142,7 @@ export const Order = ({ orderData, allowedDenoms, className }: OrderProps) => {
title={
<Title
variant="h2"
className="mt-10 sm:mt-0 mb-5 text-[21px] leading-[1.5]"
className="mt-10 md:mt-0 mb-5 text-[21px] leading-[1.5] md:pr-10"
>
<Link href={projectHref} className="text-bc-neutral-700">
{project.name}
Expand All @@ -147,7 +151,7 @@ export const Order = ({ orderData, allowedDenoms, className }: OrderProps) => {
}
subheader={
<>
<div className="flex items-center my-5">
<div className="flex items-center my-5 md:pr-10">
<ProjectPlaceInfo
place={project.place}
area={project.area}
Expand Down Expand Up @@ -184,6 +188,9 @@ export const Order = ({ orderData, allowedDenoms, className }: OrderProps) => {
displayDenom={displayDenom}
displayTotalPrice={displayTotalPrice}
currency={currency}
pricePerCredits={
denom ? +pricePerCredits.toFixed(denom.exponent) : pricePerCredits
}
/>
</CardContent>
</Card>
Expand Down