feat: partners showroom section

chain4travel · Oct 24, 2023 · 9ab2041 · 9ab2041
1 parent dc6e944
commit 9ab2041
Show file tree

Hide file tree

Showing 27 changed files with 1,697 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
         "axios": "^1.1.3",
         "babel-loader": "^8.2.2",
         "copy-webpack-plugin": "^11.0.0",
+        "cypress": "12.5.1",
         "cypress-file-upload": "^4.0.7",
         "dotenv-webpack": "^8.0.1",
         "eslint": "^8.34.0",
@@ -78,11 +79,11 @@
         "webpack-cli": "^5.0.0",
         "webpack-dev-server": "^4.3.1",
         "webpack-merge": "^5.8.0",
-        "yup": "^0.32.11",
-        "cypress": "12.5.1"
+        "yup": "^0.32.11"
     },
     "dependencies": {
         "react": "^18.2.0",
+        "react-circle-flags": "^0.0.18",
         "react-dom": "^18.2.0"
     }
 }
diff --git a/src/@types/partners.ts b/src/@types/partners.ts
@@ -0,0 +1,148 @@
+export interface PartnerDataType {
+    id?: number
+    attributes?: AttributesType
+}
+
+export interface AttributesType {
+    contactEmail?: string
+    companyName?: string
+    companyCountry?: string
+    companyWebsite?: string
+    contactFirstname?: string
+    contactLastname?: string
+    contactPhone?: string
+    companyShortDescription?: string
+    companyLongDescription?: string
+    isConsortiumMember?: boolean
+    createdAt?: string
+    updatedAt?: string
+    publishedAt?: string
+    logoBox?: string
+    companyLinkedin?: string
+    companyTwitter?: string
+    companyLogoColor?: CompanyLogoColorType
+    business_fields?: BusinessFieldsType
+    company_size?: CompanySizeType
+    companyLogoDark?: CompanyLogoDarkType
+    companyLogoLight?: CompanyLogoLightType
+    country_flag?: CountryFlagType
+}
+
+export interface CompanyLogoColorType {
+    data?: LogoDataType
+}
+
+export interface LogoDataType {
+    id?: number
+    attributes?: LogoAttributesType
+}
+
+export interface LogoAttributesType {
+    name?: string
+    alternativeText?: string
+    caption?: string
+    width?: number
+    height?: number
+    formats?: FormatsType
+    hash?: string
+    ext?: string
+    mime?: string
+    size?: number
+    url?: string
+    previewUrl?: string
+    provider?: string
+    provider_metadata?: string
+    createdAt?: string
+    updatedAt?: string
+}
+
+export interface FormatsType {
+    large?: FormatDetailType
+    small?: FormatDetailType
+    medium?: FormatDetailType
+    thumbnail?: FormatDetailType
+}
+
+export interface FormatDetailType {
+    ext?: string
+    url?: string
+    hash?: string
+    mime?: string
+    name?: string
+    path?: string
+    size?: number
+    width?: number
+    height?: number
+}
+
+export interface BusinessFieldsType {
+    data?: BusinessFieldType[]
+}
+
+export interface BusinessFieldType {
+    id?: number
+    attributes?: BusinessFieldAttributesType
+}
+
+export interface BusinessFieldAttributesType {
+    BusinessField?: string
+    createdAt?: string
+    updatedAt?: string
+}
+
+export interface CompanySizeType {
+    data?: CompanySizeDataType
+}
+
+export interface CompanySizeDataType {
+    id?: number
+    attributes?: CompanySizeAttributesType
+}
+
+export interface CompanySizeAttributesType {
+    companyNumberOfEmployees?: string
+    createdAt?: string
+    updatedAt?: string
+    publishedAt?: string
+}
+
+export interface CompanyLogoDarkType {
+    data?: LogoDataType
+}
+
+export interface CompanyLogoLightType {
+    data?: LogoDataType
+}
+
+export interface CountryFlagType {
+    data?: CountryFlagDataType
+}
+
+export interface CountryFlagDataType {
+    id?: number
+    attributes?: CountryFlagAttributesType
+}
+
+export interface CountryFlagAttributesType {
+    countryIdentifier?: string
+    countryName?: string
+    createdAt?: string
+    updatedAt?: string
+    publishedAt?: string
+}
+
+export interface PartnersResponseType {
+    data?: PartnerDataType[]
+    meta?: MetaType
+}
+
+export interface MetaType {
+    pagination?: PaginationType
+}
+
+export interface PaginationType {
+    page: number
+    pageSize: number
+    pageCount: number
+    total: number
+}
diff --git a/src/components/Partners/BusinessFieldFilter.tsx b/src/components/Partners/BusinessFieldFilter.tsx
@@ -0,0 +1,81 @@
+import React from 'react'
+
+import { mdiCheckCircle } from '@mdi/js'
+import Icon from '@mdi/react'
+import { Typography } from '@mui/material'
+import ListItemText from '@mui/material/ListItemText'
+import MenuItem from '@mui/material/MenuItem'
+import Select, { SelectChangeEvent } from '@mui/material/Select'
+import { ActionType, StatePartnersType, partnersActions } from '../../helpers/partnersReducer'
+interface BusinessFieldFilterProps {
+    state: StatePartnersType
+    dispatchPartnersActions: React.Dispatch<ActionType>
+}
+
+const BusinessFieldFilter: React.FC<BusinessFieldFilterProps> = ({
+    state,
+    dispatchPartnersActions,
+}) => {
+    const handleChange = (event: SelectChangeEvent<typeof state.businessField>) => {
+        const {
+            target: { value },
+        } = event
+        dispatchPartnersActions({ type: partnersActions.UPDATE_BUSINESS_FIELD, payload: value[1] })
+    }
+
+    return (
+        <Select
+            multiple
+            value={['default']}
+            onChange={handleChange}
+            sx={{
+                flex: '1 1 400px',
+                padding: '0',
+                maxWidth: '400px',
+                borderRadius: '12px',
+                color: theme => theme.palette.text.primary,
+                '.MuiSelect-select ': {
+                    boxSizing: 'border-box',
+                    height: '40px',
+                    padding: '10px 16px 10px 16px',
+                    borderRadius: '12px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    border: theme => `solid 2px ${theme.palette.card.border}`,
+                },
+                '.MuiOutlinedInput-notchedOutline': {
+                    border: 'none !important',
+                },
+                '& [aria-expanded=true]': {
+                    background: theme => theme.palette.grey[600],
+                    boxSizing: 'border-box',
+                    height: '40px',
+                },
+            }}
+            renderValue={() => <Typography variant="body1">Business fields</Typography>}
+            MenuProps={{
+                PaperProps: {
+                    style: {
+                        maxHeight: '400px',
+                        overflow: 'auto',
+                    },
+                },
+            }}
+        >
+            <MenuItem sx={{ display: 'none' }} value={'default'}>
+                <Typography variant="body1">Business fields</Typography>
+            </MenuItem>
+            {state.businessField.map((businessField, index) => (
+                <MenuItem key={index} value={businessField.name}>
+                    <ListItemText
+                        sx={[{ color: !businessField.active ? '#CBD4E2' : '#ffffff' }]}
+                        primary={businessField.name}
+                    />
+                    {businessField.active && <Icon path={mdiCheckCircle} size={1} />}
+                </MenuItem>
+            ))}
+        </Select>
+    )
+}
+
+export default BusinessFieldFilter
diff --git a/src/components/Partners/PartnerBusinessFields.tsx b/src/components/Partners/PartnerBusinessFields.tsx
@@ -0,0 +1,56 @@
+import { Box, Chip } from '@mui/material'
+import React from 'react'
+
+type PartnerBusinessFieldsProps = { business_fields: any; isPartnerView?: boolean }
+
+const PartnerBusinessFields = ({ business_fields, isPartnerView }: PartnerBusinessFieldsProps) => {
+    const content =
+        business_fields.data.length <= 2 || isPartnerView ? (
+            business_fields.data.map((elem, key) => (
+                <Chip
+                    key={key}
+                    sx={{
+                        backgroundColor: 'transparent',
+                        border: '1px solid',
+                        borderColor: theme => theme.palette.grey['700'],
+                    }}
+                    label={elem.attributes.BusinessField}
+                />
+            ))
+        ) : (
+            <>
+                <Chip
+                    sx={{
+                        backgroundColor: 'transparent',
+                        border: '1px solid',
+                        borderColor: theme => theme.palette.grey['700'],
+                    }}
+                    label={business_fields.data[0].attributes.BusinessField}
+                />
+                <Chip
+                    sx={{
+                        backgroundColor: 'transparent',
+                        border: '1px solid',
+                        borderColor: theme => theme.palette.grey['700'],
+                    }}
+                    label={`+${business_fields.data.length - 1}`}
+                />
+            </>
+        )
+    return (
+        <Box
+            sx={{
+                whiteSpace: 'wrap',
+                width: '100%',
+                display: 'flex',
+                gap: '0.4rem',
+                alignItems: 'center',
+                flexWrap: 'wrap',
+            }}
+        >
+            {content}
+        </Box>
+    )
+}
+
+export default PartnerBusinessFields