feat(partners) : add partners showroom section (#138)

* feat : add partner showroom section * fix fonts in partners section * style: update the responisivity of the partners showroom page * fix checking offer creator state * fix: set partner as selected app if route is /partners * Ref: Improve the responsiveness of the partner cards and enhance accessibility * add format on save * refactor: update SVG attribute naming to camelCase * feat: update favicon * style: color variables * feat: update suite's footer * Update MUI dependencies to version 5.15.11 and TypeScript to version 5.3.3 * feat: update MUI breakpoints, theme, and default components * feat: adjust camino suite theme * ref: background colors change * fix: open in new tab * adjsut witdh of cards in responsive --------- Co-authored-by: Ayagoumi <[email protected]>
chain4travel · Feb 29, 2024 · 38d3024 · 38d3024
1 parent 3eb1296
commit 38d3024
Show file tree

Hide file tree

Showing 36 changed files with 1,785 additions and 84 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": "explicit",
+      "source.fixAll": "explicit",
+      "source.fixAll.eslint": "explicit"
+    }
+}
diff --git a/bun.lockb b/bun.lockb
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,100 @@
+import { ActionType, StatePartnersType, partnersActions } from '../../helpers/partnersReducer'
+import Select, { SelectChangeEvent } from '@mui/material/Select'
+
+import Icon from '@mdi/react'
+import ListItemText from '@mui/material/ListItemText'
+import MenuItem from '@mui/material/MenuItem'
+import React from 'react'
+import { Typography } from '@mui/material'
+import { mdiCheckCircle } from '@mdi/js'
+
+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
+            // @ts-ignore
+            value={['default']}
+            onChange={handleChange}
+            sx={{
+                flex: '1 1 250px',
+                padding: '0',
+                borderRadius: '12px',
+                paddingRight: '0px !important',
+                maxWidth: { xs: '100%', sm: '50%', md: '250px' },
+                overflow: 'hidden',
+                '.MuiSelect-select ': {
+                    boxSizing: 'border-box',
+                    height: '40px',
+                    padding: '10px 16px 10px 16px',
+                    borderRadius: '12px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    border: theme => `solid 1px ${theme.palette.card.border}`,
+                },
+                '& .MuiPopover-paper ul': {
+                    paddingRight: 'unset !important',
+                    width: '100% !important',
+                },
+                '.MuiOutlinedInput-notchedOutline': {
+                    border: 'none !important',
+                },
+                '& [aria-expanded=true]': {
+                    background: theme =>
+                        theme.palette.mode === 'dark'
+                            ? theme.palette.grey[600]
+                            : theme.palette.grey[200],
+                    boxSizing: 'border-box',
+                    height: '40px',
+                },
+            }}
+            renderValue={() => <Typography variant="caption">Business fields</Typography>}
+            MenuProps={{
+                PaperProps: {
+                    style: {
+                        maxHeight: '400px',
+                        overflow: 'auto',
+                    },
+                },
+            }}
+        >
+            <MenuItem sx={{ display: 'none' }} value={'default'}>
+                <Typography variant="caption">Business fields</Typography>
+            </MenuItem>
+            {state.businessField.map((businessField, index) => (
+                <MenuItem key={index} value={businessField.name}>
+                    <ListItemText
+                        // sx={{ color: !businessField.active ? '#CBD4E2' : '#ffffff' }}
+                        primary={
+                            <Typography
+                                variant="caption"
+                                sx={{ fontWeight: !businessField.active ? 500 : 600 }}
+                            >
+                                {businessField.name}
+                            </Typography>
+                        }
+                    />
+                    {businessField.active && (
+                        <Icon path={mdiCheckCircle} size={1} color="#B5E3FD" />
+                    )}
+                </MenuItem>
+            ))}
+        </Select>
+    )
+}
+
+export default BusinessFieldFilter
diff --git a/src/components/Partners/PartnerBusinessFields.tsx b/src/components/Partners/PartnerBusinessFields.tsx
@@ -0,0 +1,59 @@
+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',
+                        fontSize: '12px',
+                        borderColor: theme => theme.palette.grey['700'],
+                    }}
+                    label={elem.attributes.BusinessField}
+                />
+            ))
+        ) : (
+            <>
+                <Chip
+                    sx={{
+                        backgroundColor: 'transparent',
+                        border: '1px solid',
+                        fontSize: '12px',
+                        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'],
+                        fontSize: '12px',
+                    }}
+                    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