Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into reuse-colors-from-the-theme
Browse files Browse the repository at this point in the history
igoychev authored Sep 20, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents affe4bd + abcb6c6 commit 56bed6b
Showing 10 changed files with 82 additions and 72 deletions.
2 changes: 1 addition & 1 deletion public/locales/bg/campaigns.json
Original file line number Diff line number Diff line change
@@ -100,7 +100,7 @@
"type": "Тип кампания",
"state": "Статус",
"from": "от",
"noCommissionInfo": "Подкрепи.бг работи с 0% комисиона. Заплащат се единствено банкови такси, които изрично се упоменават преди да направите дарението си.",
"noCommissionInfo": "Подкрепи.бг работи с 0% комисиона. Възможни са единствено изрично упоменати банкови такси.",
"donors": "дарители",
"documents": "документи",
"guarantor": "гарант",
2 changes: 1 addition & 1 deletion public/locales/en/campaigns.json
Original file line number Diff line number Diff line change
@@ -83,7 +83,7 @@
"type": "Campaign type",
"state": "Campaign state",
"from": "from",
"noCommissionInfo": "Podkrepi.bg works with 0% commission. Only bank charges are paid, which are explicitly mentioned before you make your donation.",
"noCommissionInfo": "Podkrepi.bg works with 0% commission. Only expressly mentioned bank charges are possible.",
"donors": "donors",
"documents": "documents",
"guarantor": "guarantor",
5 changes: 3 additions & 2 deletions src/common/hooks/bank-transactions.ts
Original file line number Diff line number Diff line change
@@ -4,17 +4,18 @@ import { useSession } from 'next-auth/react'
import { useQuery } from '@tanstack/react-query'

import { endpoints } from 'service/apiEndpoints'
import { PaginationData, FilterData } from 'gql/types'
import { PaginationData, FilterData, SortData } from 'gql/types'
import { authQueryFnFactory } from 'service/restRequests'

export function useBankTransactionsList(
paginationData?: PaginationData,
filterData?: FilterData,
sort?: SortData,
searchData?: string,
) {
const { data: session } = useSession()
return useQuery<BankTransactionsHistoryResponse>(
[endpoints.bankTransactions.transactionsList(paginationData, filterData, searchData).url],
[endpoints.bankTransactions.transactionsList(paginationData, filterData, sort, searchData).url],
{
queryFn: authQueryFnFactory(session?.accessToken),
},
10 changes: 8 additions & 2 deletions src/components/admin/bank-transactions/grid/Grid.tsx
Original file line number Diff line number Diff line change
@@ -3,16 +3,16 @@ import { UseQueryResult } from '@tanstack/react-query'
import { useTranslation } from 'next-i18next'
import { Box } from '@mui/material'
import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
import theme from 'common/theme'
import { observer } from 'mobx-react'

import { getExactDateTime } from 'common/util/date'

import { money } from 'common/util/money'

import { useStores } from '../../../../common/hooks/useStores'
import { BankTransactionsHistoryResponse } from 'gql/bank-transactions'
import { useBankTransactionsList } from 'common/hooks/bank-transactions'
import theme from 'common/theme'
import { SortData } from 'gql/types'
import RenderBankDonationStatusCell from './RenderEditBankDonationStatusCell'

interface RenderCellProps {
@@ -26,6 +26,11 @@ export default observer(function Grid() {
pageSize: 20,
})

const defaultSort: SortData = {
sortBy: 'transactionDate',
sortOrder: 'desc',
}

const { t } = useTranslation()

const {
@@ -35,6 +40,7 @@ export default observer(function Grid() {
}: UseQueryResult<BankTransactionsHistoryResponse> = useBankTransactionsList(
{ pageIndex: paginationModel.page, pageSize: paginationModel.pageSize },
bankTransactionsStore.bankTransactionsFilter,
defaultSort,
bankTransactionsStore.bankTransactionSearch,
)

9 changes: 7 additions & 2 deletions src/components/client/campaign-news/CampaignNewsList.tsx
Original file line number Diff line number Diff line change
@@ -29,10 +29,9 @@ const classes = {
}

const ArticleSection = styled(Grid)(({ theme }) => ({
paddingLeft: theme.spacing(7),
paddingRight: theme.spacing(7),
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),

[`& .${classes.articlepublishedDate}`]: {
fontSize: theme.typography.pxToRem(14),
fontWeight: 400,
@@ -97,6 +96,12 @@ export default function CampaignNewsList({ articles }: Props) {
backgroundColor: index % 2 === 0 ? theme.palette.common.white : '#E3E3E3',
borderBottom: 1,
borderColor: index % 2 === 0 ? theme.palette.common.white : '#C4C4C4',
justifyContent: 'center',
padding: theme.spacing(0, 2),

[theme.breakpoints.up('sm')]: {
padding: theme.spacing(0, 5),
},
}}>
<ArticleSection id={article.id}>
<Grid container columnGap={2} rowGap={1} className={classes.dateAndAuthorContainer}>
50 changes: 22 additions & 28 deletions src/components/client/campaign-news/CampaignNewsPage.tsx
Original file line number Diff line number Diff line change
@@ -27,40 +27,20 @@ const classes = {
support: `${PREFIX}-support`,
applyButton: `${PREFIX}-applyButton`,
arrowIcon: `${PREFIX}-arrowIcon`,
defaultPadding: `${PREFIX}-defaultPadding`,
}

const Root = styled(Layout)(({ theme }) => ({
[theme.breakpoints.up('sm')]: {
padding: 0,
margin: 0,
paddingTop: theme.spacing(1),
maxWidth: theme.spacing(300),
},

[theme.breakpoints.up(2000)]: {
paddingTop: theme.spacing(1),
},

[`& .${classes.defaultPadding}`]: {
paddingLeft: theme.spacing(7),
paddingRight: theme.spacing(7),
[theme.breakpoints.down('sm')]: {
paddingLeft: theme.spacing(0),
paddingRight: theme.spacing(0),
},
},

[theme.breakpoints.down('sm')]: {
paddingLeft: 0,
paddingRight: 0,
},

[`& .${classes.title}`]: {
fontWeight: 500,
fontSize: theme.typography.pxToRem(45),
lineHeight: theme.typography.pxToRem(60),
letterSpacing: theme.typography.pxToRem(-1.5),
marginBottom: theme.spacing(1),
},

'.ql-video, img': {
margin: '0 auto',
display: 'block',
},
}))

@@ -87,6 +67,8 @@ export default function CampaignNewsPage({ page, slug = null }: Props) {

return (
<Root
maxWidth={false}
style={{ padding: theme.spacing(0) }}
prevPage={
data?.pagination.prevPage
? `${baseUrl}${routes.campaigns.news.listNewsPaginated(data?.pagination.prevPage, slug)}`
@@ -98,12 +80,24 @@ export default function CampaignNewsPage({ page, slug = null }: Props) {
: undefined
}>
<Grid>
<Grid className={classes.defaultPadding}>
<Grid
sx={{
padding: theme.spacing(0, 3),
margin: '0 auto',

[theme.breakpoints.up('sm')]: {
padding: theme.spacing(0, 5),
},

[theme.breakpoints.up('lg')]: {
maxWidth: '1280px',
},
}}>
<Typography variant="h1" component="p" className={classes.title}>
{t('news')}
</Typography>
<BreadcrumbWrapper crumb={breadcumbData} />
<Divider orientation="horizontal" />
<Divider orientation="horizontal" sx={{ marginBottom: theme.spacing(4) }} />
</Grid>
{data && data?.campaign.campaignNews.length > 0 && (
<CampaignNewsList articles={data.campaign.campaignNews} />
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Slider from 'react-slick'

import { Link, Grid, Box, Typography } from '@mui/material'
import { Grid, Box, Typography } from '@mui/material'
import DoneIcon from '@mui/icons-material/Done'
import styled from '@emotion/styled'

@@ -37,18 +37,18 @@ export const CardWrapper = styled(Grid)(() => ({
margin: theme.spacing(0, 1.25),
paddingRight: theme.spacing(2.5),
},

'&:hover': {
opacity: 0.9,
},
}))

export const CompletedCampaignLink = styled(Link)(() => ({
export const CompletedCampaignImage = styled(Grid)(() => ({
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
height: theme.spacing(37.5),
backgroundSize: 'cover',

'&:hover': {
opacity: 0.9,
},
}))

export const CampaignTitle = styled('h6')(() => ({
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { useTranslation, i18n } from 'next-i18next'
import Image from 'next/image'
import Link from 'next/link'
import { CampaignResponse } from 'gql/campaigns'

import 'slick-carousel/slick/slick-theme.css'
@@ -17,7 +19,7 @@ import {
CarouselWrapper,
Sum,
CampaignTitle,
CompletedCampaignLink,
CompletedCampaignImage,
CardWrapper,
SuccessfulCampaignLabel,
CompletedSumWrapper,
@@ -26,8 +28,6 @@ import {
SuccessfullCampiagnText,
} from './CompletedCampaignsSection.styled'

import Image from 'next/image'

export default function CompletedCampaignsSection() {
const { t } = useTranslation('campaigns')
const { data } = useCampaignList()
@@ -50,31 +50,32 @@ export default function CompletedCampaignsSection() {
<CarouselWrapper {...settings}>
{completedCampaigns?.map((campaign, index) => (
<CardWrapper key={index} data-testid={`completed-campaign-${index}`}>
<CompletedCampaignLink
onMouseDown={onLinkMouseDown}
href={routes.campaigns.viewCampaignBySlug(campaign.slug)}
sx={{ position: 'relative', width: '100%', aspectRatio: 1 }}>
<Image
fill
alt={campaign.title}
src={campaignListPictureUrl(campaign)}
sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
style={{ objectFit: 'cover' }}
/>
</CompletedCampaignLink>
<CompletedSumWrapper>
<Sum>
{i18n.language === 'bg'
? moneyPublic(campaign.summary.reachedAmount).split(',')[0] + ' лв.'
: moneyPublic(campaign.summary.reachedAmount).split('.')[0]}
</Sum>
<SuccessfulCampaignLabel>
<SuccessfullCampaignIcon />
<SuccessfullCampiagnText>{t('successfull-label')}</SuccessfullCampiagnText>
</SuccessfulCampaignLabel>
</CompletedSumWrapper>
<CampaignProgressWrapper width={1} />
<CampaignTitle>{campaign.title}</CampaignTitle>
<Link href={routes.campaigns.viewCampaignBySlug(campaign.slug)}>
<CompletedCampaignImage
onMouseDown={onLinkMouseDown}
sx={{ position: 'relative', width: '100%', aspectRatio: 1 }}>
<Image
fill
alt={campaign.title}
src={campaignListPictureUrl(campaign)}
sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
style={{ objectFit: 'cover' }}
/>
</CompletedCampaignImage>
<CompletedSumWrapper>
<Sum>
{i18n.language === 'bg'
? moneyPublic(campaign.summary.reachedAmount).split(',')[0] + ' лв.'
: moneyPublic(campaign.summary.reachedAmount).split('.')[0]}
</Sum>
<SuccessfulCampaignLabel>
<SuccessfullCampaignIcon />
<SuccessfullCampiagnText>{t('successfull-label')}</SuccessfullCampiagnText>
</SuccessfulCampaignLabel>
</CompletedSumWrapper>
<CampaignProgressWrapper width={1} />
<CampaignTitle>{campaign.title}</CampaignTitle>
</Link>
</CardWrapper>
))}
</CarouselWrapper>
3 changes: 2 additions & 1 deletion src/components/common/QuillStyleWrapper.tsx
Original file line number Diff line number Diff line change
@@ -15,7 +15,8 @@ export const QuillStypeWrapper = styled(Grid)(({ theme }) => ({
['.ql-editor, .ql-video']: {
maxWidth: '100%',
},
['.ql-video']: {

['.ql-video, iframe']: {
maxWidth: '100%',
marginInline: 'auto',
},
4 changes: 3 additions & 1 deletion src/service/apiEndpoints.ts
Original file line number Diff line number Diff line change
@@ -148,14 +148,16 @@ export const endpoints = {
transactionsList: (
paginationData?: PaginationData,
filterData?: FilterData,
sort?: SortData,
searchData?: string,
) => {
const { pageIndex, pageSize } = (paginationData as PaginationData) || {}
const { status, date } = (filterData as FilterData) || {}
const { sortBy, sortOrder } = (sort as SortData) || {}
const { from, to } = date || {}

return <Endpoint>{
url: `/bank-transaction/list?pageindex=${pageIndex}&pagesize=${pageSize}&status=${status}&from=${from}&to=${to}&search=${searchData}`,
url: `/bank-transaction/list?pageindex=${pageIndex}&pagesize=${pageSize}&status=${status}&from=${from}&to=${to}&search=${searchData}&sortBy=${sortBy}&sortOrder=${sortOrder}`,
method: 'GET',
}
},

0 comments on commit 56bed6b

Please sign in to comment.