From 8dba50023d93db99fbd5c537fa68192d72b9f0b6 Mon Sep 17 00:00:00 2001 From: Fishbakh-N <54896745+Fishbakh-N@users.noreply.github.com> Date: Fri, 15 Dec 2023 21:18:30 +0200 Subject: [PATCH] Fundraiser card (#380) * create fundraiser card * image size * add fundraiser example --- .../NonprofitInfo/FundraiserCard.tsx | 103 ++++++++++++++++++ .../NonprofitInfo/NonprofitCard.tsx | 4 +- .../widget/components/NonprofitInfo/index.tsx | 8 ++ .../widget/components/NonprofitInfo/styles.ts | 74 ++++++++++++- .../src/helpers/getCloudinaryUrl.ts | 31 +++++- .../donate-button-v4/src/public/index.html | 23 +++- 6 files changed, 233 insertions(+), 10 deletions(-) create mode 100644 packages/donate-button-v4/src/components/widget/components/NonprofitInfo/FundraiserCard.tsx diff --git a/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/FundraiserCard.tsx b/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/FundraiserCard.tsx new file mode 100644 index 00000000..45ffa687 --- /dev/null +++ b/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/FundraiserCard.tsx @@ -0,0 +1,103 @@ +import cxs from 'cxs'; +import {Fragment} from 'preact/jsx-runtime'; +import {GridCard} from 'src/components/widget/components/GridCard'; +import { + nonprofitNameCss, + descriptionCss, + truncatedTextCss, + fundraiserCardLogoCss, + fundraiserAvatarAndNameWrapperCss, + largeFundraiserCardCss, + smallFundraiserCardCss +} from 'src/components/widget/components/NonprofitInfo/styles'; +import {useNonprofitOrError} from 'src/components/widget/hooks/useNonprofit'; +import {Fundraiser} from 'src/components/widget/types/Fundraiser'; +import {LOGO_IMAGE_PLACEHOLDER_ID} from 'src/constants/placeholders'; +import {getCloudinaryUrl} from 'src/helpers/getCloudinaryUrl'; +import joinClassNames from 'src/helpers/joinClassNames'; + +const coverImageCss = (url: string) => + cxs({ + backgroundImage: `url(${url})`, + backgroundSize: 'cover', + width: 'calc(100% + 25px + 25px)', + height: '160px', + position: 'relative', + left: '-25px' + }); + +interface FundraiserCardProps { + fundraiser: Fundraiser; +} + +export const FundraiserCard = ({fundraiser}: FundraiserCardProps) => { + return ( + + + + + ); +}; + +const LargeFundraiserCard = ({fundraiser}: FundraiserCardProps) => { + const { + name: nonprofitName, + logoCloudinaryId, + coverImageCloudinaryId, + hasAdmin + } = useNonprofitOrError(); + const logoUrl = getCloudinaryUrl( + logoCloudinaryId ?? LOGO_IMAGE_PLACEHOLDER_ID + ); + const coverImageUrl = + coverImageCloudinaryId && + getCloudinaryUrl(coverImageCloudinaryId, {width: 320}); + + return ( + +
+
+
+

{nonprofitName}

+ {fundraiser.creatorNonprofitId === fundraiser.nonprofitId && ( +

Official fundraiser

+ )} +
+
+ {coverImageUrl &&
} +

+ {fundraiser.title} +

+ {fundraiser.description && ( +

+ {fundraiser.description} +

+ )} + + ); +}; + +const SmallFundraiserCard = ({fundraiser}: FundraiserCardProps) => { + const { + name: nonprofitName, + logoCloudinaryId, + coverImageCloudinaryId, + hasAdmin + } = useNonprofitOrError(); + const logoUrl = getCloudinaryUrl( + logoCloudinaryId ?? LOGO_IMAGE_PLACEHOLDER_ID + ); + const coverImageUrl = + coverImageCloudinaryId && getCloudinaryUrl(coverImageCloudinaryId); + + return ( + +
+
+

+ {fundraiser.title} +

+
+ + ); +}; diff --git a/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/NonprofitCard.tsx b/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/NonprofitCard.tsx index 076d275a..55d228f8 100644 --- a/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/NonprofitCard.tsx +++ b/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/NonprofitCard.tsx @@ -5,7 +5,7 @@ import { nonprofitNameCss, descriptionCss, avatarAndNameWrapperCss, - cardCss + nonprofitCardCss } from 'src/components/widget/components/NonprofitInfo/styles'; import {useNonprofitOrError} from 'src/components/widget/hooks/useNonprofit'; import {LOGO_IMAGE_PLACEHOLDER_ID} from 'src/constants/placeholders'; @@ -17,7 +17,7 @@ export const NonprofitCard = () => { logoCloudinaryId ?? LOGO_IMAGE_PLACEHOLDER_ID ); return ( - +

diff --git a/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/index.tsx b/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/index.tsx index d30e4857..b09604e2 100644 --- a/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/index.tsx +++ b/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/index.tsx @@ -1,5 +1,13 @@ +import {FundraiserCard} from 'src/components/widget/components/NonprofitInfo/FundraiserCard'; import {NonprofitCard} from 'src/components/widget/components/NonprofitInfo/NonprofitCard'; +import {useFundraiserOrUndefined} from 'src/components/widget/hooks/useFundraiser'; export const NonprofitInfo = () => { + const fundraiser = useFundraiserOrUndefined(); + + if (fundraiser) { + return ; + } + return ; }; diff --git a/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/styles.ts b/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/styles.ts index c619da55..20e8fb61 100644 --- a/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/styles.ts +++ b/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/styles.ts @@ -7,9 +7,19 @@ import { Spacing, verticalStackCss } from 'src/components/widget/theme/spacing'; +import joinClassNames from 'src/helpers/joinClassNames'; export const nonprofitNameCss = cxs({ lineHeight: '20px', + fontWeight: 'unset', + '> span': { + fontWeight: 700 + } +}); + +export const fundraiserNameCss = cxs({ + lineHeight: '20px', + fontWeight: 'unset', '> span': { fontWeight: 700 } @@ -31,7 +41,21 @@ export const logoImageCss = (logoUrl: string) => } }); -export const cardCss = cxs({ +export const fundraiserCardLogoCss = (logoUrl: string) => + joinClassNames([ + logoImageCss(logoUrl), + cxs({ + width: '32px', + height: '32px', + flexShrink: 0, + [BREAKPOINTS.TabletLandscapeUp]: { + width: '40px', + height: '40px' + } + }) + ]); + +export const nonprofitCardCss = cxs({ padding: `${Spacing.XL}`, [BREAKPOINTS.TabletLandscapeUp]: { ...verticalStackCss.cxs(Spacing.S), @@ -39,11 +63,47 @@ export const cardCss = cxs({ } }); +export const largeFundraiserCardCss = cxs({ + display: 'none', + overflow: 'hidden', + [BREAKPOINTS.TabletLandscapeUp]: { + display: 'flex', + gap: `${Spacing.S}`, + flexDirection: 'column', + padding: `${Spacing.L}` + } +}); + +export const smallFundraiserCardCss = cxs({ + display: 'flex', + gap: `${Spacing.S}`, + padding: `${Spacing.XL}`, + overflow: 'hidden', + [BREAKPOINTS.TabletLandscapeUp]: { + display: 'none', + flexDirection: 'column', + padding: `${Spacing.L}` + } +}); + export const avatarAndNameWrapperCss = cxs({ ...horizontalStackCss.cxs(Spacing.S), alignItems: 'center' }); +export const fundraiserAvatarAndNameWrapperCss = cxs({ + display: 'flex', + gap: `${Spacing.S}`, + alignItems: 'center', + + '& > .every-embedded-fundraiser-card__nonprofit-name': { + display: 'none', + [BREAKPOINTS.TabletLandscapeUp]: { + display: 'block' + } + } +}); + export const descriptionCss = cxs({ ...textSize.xs, color: 'rgba(0, 0, 0, 0.7)', @@ -52,3 +112,15 @@ export const descriptionCss = cxs({ display: 'block' } }); + +export const truncatedTextCss = (numberLines: number) => + cxs({ + overflow: 'hidden', + overflowWrap: 'anywhere', + wordBreak: 'break-word', + textOverflow: 'ellipsis', + display: '-webkit-box', + '-webkit-box-orient': 'vertical', + '-webkit-line-clamp': numberLines, + alignItems: 'start' + }); diff --git a/packages/donate-button-v4/src/helpers/getCloudinaryUrl.ts b/packages/donate-button-v4/src/helpers/getCloudinaryUrl.ts index 374bd013..c2dafeac 100644 --- a/packages/donate-button-v4/src/helpers/getCloudinaryUrl.ts +++ b/packages/donate-button-v4/src/helpers/getCloudinaryUrl.ts @@ -1,7 +1,32 @@ import {BASE_CLOUDINARY_URL} from 'src/constants/url'; -const FLAGS = 'f_auto,q_auto/'; +interface CloudinaryOptions { + width?: number; + height?: number; + fillMode?: 'fill' | 'lfill'; +} -export const getCloudinaryUrl = (cloudinaryId: string) => { - return `${BASE_CLOUDINARY_URL}${FLAGS}${cloudinaryId}`; +const FLAGS = 'f_auto,q_auto'; + +export function fillDimensionsTransform(options: CloudinaryOptions) { + if (options.width === 0 || options.height === 0) { + throw new Error('dimensions cannot be 0'); + } + + return [ + `c_${options.fillMode ?? 'lfill'}`, + options.width ? `w_${Math.floor(options.width)}` : undefined, + options.height ? `h_${Math.floor(options.height)}` : undefined + ] + .filter((value?: string) => value !== undefined) + .join(','); +} + +export const getCloudinaryUrl = ( + cloudinaryId: string, + options?: CloudinaryOptions +) => { + return `${BASE_CLOUDINARY_URL}${FLAGS}${ + options ? `,${fillDimensionsTransform(options)}` : '' + }/${cloudinaryId}`; }; diff --git a/packages/donate-button-v4/src/public/index.html b/packages/donate-button-v4/src/public/index.html index 4a645e40..67c171e9 100644 --- a/packages/donate-button-v4/src/public/index.html +++ b/packages/donate-button-v4/src/public/index.html @@ -10,24 +10,39 @@
- Donate
+