feature/#33 Create step tree for sign-up process

intranet/src/core/common/customTabPanel.component.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+interface TapPanelProps {
+ children?: React.ReactNode;
+ index: number;
+ value: number;
+}
+
+export const CustomTabPanel = (props: TapPanelProps) => {
+ const { children, value, index, ...other } = props;
+
+ return (
+ <div
+ role="tabpanel"
+ hidden={value !== index}
+ id={`simple-tabpanel-${index}`}
+ aria-labelledby={`simple-tab-${index}`}
+ {...other}
+ >
+ {value === index && <Box>{children}</Box>}
+ </div>
+ );
+};
+
+export const allyProps = (index: number) => {
+ return {
+ id: `simple-tab-${index}`,
+ 'aria-controls': `simple-tabpanel-${index}`,
+ };
+};

intranet/src/core/model/index.ts

@@ -2,6 +2,7 @@ export interface Beer {
  id: string;
  name: string;
  alcohol: number;
+ country: string;
  volume: number;
  photoUrl: string;
 }

intranet/src/pods/sign-up/beer-list.mock.ts

@@ -1,44 +1,56 @@
 import { Beer } from '#core/model';
 
 export const beerListMock: Beer[] = [
- { id: '1', name: 'Duvel', alcohol: 8.5, volume: 33, photoUrl: '/duvel.png' },
+ { id: '1', name: 'Duvel', alcohol: 8.5, country: 'Bélgica', volume: 33, photoUrl: '/duvel.png' },
  {
  id: '2',
  name: 'Gulden Draak Classic',
  alcohol: 10.5,
+ country: 'Bélgica',
  volume: 33,
- photoUrl: '/gulden-draak-classic.png',
+ photoUrl: '/gulden-draak.png',
  },
  {
  id: '3',
  name: 'Weihenstephaner Hefeweissbier',
  alcohol: 5.4,
+ country: 'Alemania',
  volume: 50,
  photoUrl: '/weihenstephaner-hefeweissbier.png',
  },
  {
  id: '4',
  name: 'Gulden Draak Smoked',
  alcohol: 10.5,
+ country: 'Bélgica',
  volume: 33,
  photoUrl: '/gulden-draak-smoked.png',
  },
  {
  id: '5',
  name: 'Barbar Blonde Rubia Strong Ale',
  alcohol: 8,
+ country: 'Bélgica',
  volume: 33,
  photoUrl: '/barbar-blonde-rubia-strong-ale.png',
  },
- { id: '6', name: 'Judas', alcohol: 8.5, volume: 33, photoUrl: '/judas.png' },
- { id: '7', name: 'Hoppy Flower DIPA', alcohol: 7.5, volume: 33, photoUrl: '/hoppy-flower-dipa.png' },
- { id: '8', name: 'Paulaner', alcohol: 5.5, volume: 33, photoUrl: '/paulaner.png' },
- { id: '9', name: 'Cuvee des Trolls', alcohol: 7, volume: 33, photoUrl: '/cuvee-des-trolls.png' },
+ { id: '6', name: 'Judas', alcohol: 8.5, volume: 33, country: 'Bélgica', photoUrl: '/judas-beer.png' },
+ {
+ id: '7',
+ name: 'Hoppy Flower DIPA',
+ alcohol: 7.5,
+ volume: 33,
+ country: 'España',
+ photoUrl: '/hoppy-flower-double-ipa.png',
+ },
+ { id: '8', name: 'Paulaner', alcohol: 5.5, volume: 33, country: 'Alemania', photoUrl: '/paulaner-weissbier9.png' },
+ { id: '9', name: 'Cuvee des Trolls', alcohol: 7, volume: 33, country: 'Bélgica', photoUrl: '/cuvee-des-trolls.png' },
  {
  id: '10',
  name: 'Barbar Blonde Rubia Strong Ale',
  alcohol: 8,
  volume: 33,
+ country: 'Bélgica',
  photoUrl: '/barbar-blonde-rubia-strong-ale.png',
  },
 ];

intranet/src/pods/sign-up/components/sign-up-step3-yourSelection.component.tsx

@@ -0,0 +1,66 @@
+import { ChangeEvent, FC } from 'react';
+import { selectedBeer } from './sign-up-step3.model';
+import { Card, CardContent, CardMedia, Checkbox, Typography } from '@mui/material';
+import * as classes from './sign-up-step3.styles';
+import { mapSelectedBeerToBeerModel } from './sign-up-step3.mapper';
+import { Beer } from '#core/model/index.js';
+
+interface Props {
+ selectedBeers: selectedBeer[];
+ setFilterBeers: (selectedBeers: selectedBeer[]) => void;
+ setBeers: (beers: Beer[]) => void;
+ onDeSelectedBeer: (e: ChangeEvent<HTMLInputElement>, id: string) => void;
+}
+
+export const YourSelection: FC<Props> = props => {
+ const { selectedBeers, setFilterBeers, onDeSelectedBeer, setBeers } = props;
+
+ const handleChange = (e: ChangeEvent<HTMLInputElement>, id: string) => {
+ const arrayUnSelectedBeers = selectedBeers.map(value =>
+ value.id === id && value.isSelected ? { ...value, isSelected: e.target.checked } : value
+ );
+ setFilterBeers(arrayUnSelectedBeers);
+ handleFilteredBeers(arrayUnSelectedBeers);
+
+ if (!e.target.checked) {
+ onDeSelectedBeer(e, id);
+ }
+ };
+
+ const handleFilteredBeers = (beers: selectedBeer[]) => {
+ const filteredUnSelectedBeers = beers.filter(beer => beer.isSelected);
+ const mapper = mapSelectedBeerToBeerModel(filteredUnSelectedBeers);
+ setFilterBeers(filteredUnSelectedBeers);
+ setBeers(mapper);
+ };
+
+ return (
+ <>
+ <Card>
+ <CardContent>
+ {selectedBeers.map(beer => (
+ <main key={beer.id} className={classes.container}>
+ <Checkbox
+ key={beer.id}
+ name={beer.name}
+ value={beer.name}
+ checked={beer.isSelected}
+ onChange={e => handleChange(e, beer.id)}
+ color="info"
+ />
+ <CardMedia sx={{ width: 120 }} component="img" src={beer.photoUrl} alt={beer.name} />
+
+ <aside>
+ <Typography variant="body1">{beer.name}</Typography>
+
+ <Typography mt={5} variant="body1">
+ {beer.country} {`${'/'}`} {beer.volume} {`${' '}`}Cl
+ </Typography>
+ </aside>
+ </main>
+ ))}
+ </CardContent>
+ </Card>
+ </>
+ );
+};

intranet/src/pods/sign-up/components/sign-up-step3.component.tsx

@@ -0,0 +1,103 @@
+import { Button, Card, CardContent, CardMedia, Checkbox, Tab, Tabs, TextField, Typography } from '@mui/material';
+import * as classes from './sign-up-step3.styles';
+import { ChangeEvent, SyntheticEvent, useState } from 'react';
+import { selectedBeer } from './sign-up-step3.model';
+import { YourSelection } from './sign-up-step3-yourSelection.component';
+import { useSignUpContext } from '#core/providers/index.js';
+import { CustomTabPanel, allyProps } from '#core/common/customTabPanel.component.js';
+import { mapBeerToSelectedBeerModel, mapSelectedBeerToBeerModel } from './sign-up-step3.mapper';
+import { beerListMock } from '../beer-list.mock';
+
+export const BeerListComponent: React.FC = () => {
+ const [tab, setTab] = useState(0);
+
+ const { setBeers } = useSignUpContext();
+ const [selectedBeer, setSelectedBeer] = useState<selectedBeer[]>(mapBeerToSelectedBeerModel(beerListMock));
+ const [filter, setFilter] = useState<selectedBeer[]>([]);
+
+ const handleChangeChecked = (e: ChangeEvent<HTMLInputElement>, id: string) => {
+ const arraySelectedBeers = selectedBeer.map(beer =>
+ beer.id === id ? { ...beer, isSelected: e.target.checked } : beer
+ );
+
+ setSelectedBeer(arraySelectedBeers);
+ handleFilteredSelectedBeers(arraySelectedBeers);
+ };
+
+ const handleFilteredSelectedBeers = (newBeers: selectedBeer[]) => {
+ const filteredBeers = newBeers.filter(value => value.isSelected);
+ const mapper = mapSelectedBeerToBeerModel(filteredBeers);
+ setFilter(filteredBeers);
+ setBeers(mapper);
+ };
+
+ const handleDeselectedBeer = (e: ChangeEvent<HTMLInputElement>, id: string) => {
+ const arrayUnSelectedBeers = selectedBeer.map(value =>
+ value.id === id && value.isSelected ? { ...value, isSelected: e.target.checked } : value
+ );
+ setSelectedBeer(arrayUnSelectedBeers);
+ };
+
+ const handleChangeTab = (event: SyntheticEvent, newValue: number) => {
+ event.preventDefault();
+ setTab(newValue);
+ };
+
+ return (
+ <>
+ <Typography sx={{ textAlign: 'center' }} variant="h5" component="h1">
+ Paso 3 - Elije cervezas
+ </Typography>
+
+ <Typography sx={{ margin: '1rem 0 1rem 0' }} variant="body1">
+ ¿Qué cervezas sueles ofrecer? Vamos a elegirlas (mas adelante podrás añadir y quitar)
+ </Typography>
+ <Tabs variant="fullWidth" sx={{ marginBottom: 2 }} value={tab} onChange={handleChangeTab}>
+ <Tab label="Lista" {...allyProps(0)} />
+ <Tab label="Tu selección" {...allyProps(1)} />
+ </Tabs>
+ <CustomTabPanel value={tab} index={0}>
+ <Card>
+ <section className={classes.section}>
+ <TextField sx={{ width: 290 }} size="small" />
+ <Button sx={{ marginLeft: 2 }} variant="contained">
+ filtrar
+ </Button>
+ </section>
+ <CardContent sx={{ marginTop: 0 }}>
+ {selectedBeer.map(beer => (
+ <main key={beer.id} className={classes.container}>
+ <Checkbox
+ key={beer.id}
+ name={beer.name}
+ value={beer.name}
+ checked={beer.isSelected}
+ onChange={e => handleChangeChecked(e, beer.id)}
+ color="info"
+ />
+ <CardMedia sx={{ width: 120 }} component="img" src={beer.photoUrl} alt={beer.name} />
+
+ <aside>
+ <Typography variant="body1">{beer.name}</Typography>
+
+ <Typography mt={5} variant="body1">
+ {beer.country} {`${'/'}`} {beer.volume} {`${' '}`}Cl
+ </Typography>
+ </aside>
+ </main>
+ ))}
+ </CardContent>
+ </Card>
+ </CustomTabPanel>
+
+ <CustomTabPanel value={tab} index={1}>
+ <YourSelection
+ selectedBeers={filter}
+ setFilterBeers={setFilter}
+ onDeSelectedBeer={handleDeselectedBeer}
+ setBeers={setBeers}
+ />
+ </CustomTabPanel>
+ </>
+ );
+};

intranet/src/pods/sign-up/components/sign-up-step3.mapper.ts

@@ -0,0 +1,13 @@
+import { Beer } from '#core/model/index.js';
+import { selectedBeer } from './sign-up-step3.model';
+
+export const mapBeerToSelectedBeerModel = (beers: Beer[]): selectedBeer[] => {
+ return beers.map(beer => ({
+ ...beer,
+ isSelected: false,
+ }));
+};
+
+export const mapSelectedBeerToBeerModel = (beers: selectedBeer[]): Beer[] => {
+ return beers.map(({ isSelected, ...rest }) => rest);
+};

intranet/src/pods/sign-up/components/sign-up-step3.model.ts

@@ -0,0 +1,5 @@
+import { Beer } from '#core/model/index.js';
+
+export interface selectedBeer extends Beer {
+ isSelected: boolean;
+}

intranet/src/pods/sign-up/components/sign-up-step3.styles.ts

@@ -0,0 +1,13 @@
+import { css } from '@emotion/css';
+
+export const container = css`
+ display: flex;
+ align-items: center;
+`;
+
+export const section = css`
+ display: flex;
+ flex-direction: row;
+ margin: 1rem 1rem 0;
+ width: 90%;
+`;

intranet/src/pods/sign-up/sign-up.component.tsx

@@ -1,14 +1,15 @@
 import { Button, Typography } from '@mui/material';
 
 import * as classes from './sign-up.styles';
+import { BeerListComponent } from './components/sign-up-step3.component';
 
 export const SignUpComponent: React.FC = () => {
  return (
  <>
  <Typography variant="h4" component="h1">
  Crea tu cuenta
  </Typography>
- <div className={classes.steps}>{/* Components for diferents estates of sign-in */}</div>
+ <div className={classes.steps}>{<BeerListComponent />}</div>
  <div className={classes.buttons}>
  <Button color="secondary" variant="contained">
  Anterior