feat: add choice services

ctrlmais · Jan 10, 2023 · 5d17e4e · 5d17e4e
1 parent 368df6b
commit 5d17e4e
Show file tree

Hide file tree

Showing 2 changed files with 145 additions and 1 deletion.
diff --git a/src/pages/Schedule/Schedule.module.scss b/src/pages/Schedule/Schedule.module.scss
@@ -85,6 +85,93 @@
   margin-top: 24px;
 }
 
+.wrapperService {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.containerService {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0px, 1fr));
+  gap: 1rem;
+  margin-top: 12px;
+}
+
+.service {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  aspect-ratio: 1 / 1;
+  cursor: pointer;
+  width: 100%;
+  gap: 1rem;
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+  border-width: 5px;
+}
+
+.serviceSelected {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  aspect-ratio: 1 / 1;
+  cursor: pointer;
+  width: 100%;
+  gap: 1rem;
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+  border-width: 5px;
+  border: 1px solid var(--orange);
+}
+
+.containerInfo {
+  display: flex;
+  position: absolute;
+  width: 80%;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.imageService {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.5rem;
+  top: 0px;
+  left: 0px;
+  position: absolute;
+  max-width: 100%;
+  background: var(--gray-hard);
+}
+
+.containerServiceInfo {
+  display: flex;
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.698);
+  padding: 0.313rem 0.625rem;
+}
+
+.textService {
+  overflow: hidden;
+  line-break: anywhere;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-height: 0.75rem;
+  font-size: 0.75rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @media screen and (min-width: 839px) {
   .home {
     background: var(--background);

diff --git a/src/pages/Schedule/index.tsx b/src/pages/Schedule/index.tsx
@@ -1,7 +1,9 @@
 import { DayPicker } from 'react-day-picker';
-import { FiCheck } from 'react-icons/fi';
+import { FiCheck, FiInfo } from 'react-icons/fi';
 import { SiWhatsapp } from 'react-icons/si';
 
+import { Skeleton, Tooltip } from '@mui/material';
+import { imgRasgLight } from 'assets';
 import ptBR from 'date-fns/locale/pt-BR';
 
 import { Button } from 'components/Button';
@@ -31,6 +33,8 @@ export function Schedule() {
     postShedule,
     verificaDataEHoraSelecionada,
     status,
+    selectedService,
+    setSelectedService,
   } = useUser();
 
   const {
@@ -40,6 +44,9 @@ export function Schedule() {
     getHorariosTardeBarbeiro,
     getHorariosNoiteBarbeiro,
     disableSchedules,
+    servicesBarber,
+    savePhotoServices,
+    loading,
   } = useSchedule();
 
   const { contactBarbeiro } = useOverlay();
@@ -103,6 +110,56 @@ export function Schedule() {
 
           <div className={styles.containerTitle}>
             <>
+              <h2 className={styles.title}>Escolha o serviço</h2>
+
+              <div className={styles.wrapperService}>
+                <div className={styles.containerService}>
+                  {loading ? (
+                    Array.from(new Array(3)).map((_, index) => (
+                      <Skeleton
+                        variant="rounded"
+                        width={106}
+                        height={106}
+                        animation="wave"
+                        key={index}
+                      />
+                    ))
+                  ) : (
+                    <>
+                      {servicesBarber.map((service, index) => (
+                        <div
+                          key={service.cdServico}
+                          className={
+                            selectedService?.cdServico === service.cdServico
+                              ? styles.serviceSelected
+                              : styles.service
+                          }
+                          onClick={() => {
+                            setSelectedService(service);
+                          }}
+                        >
+                          <img
+                            src={savePhotoServices[index] || imgRasgLight}
+                            alt={service.deServico}
+                            className={styles.imageService}
+                          />
+                          <Tooltip title={service.deServico} placement="top">
+                            <div className={styles.containerInfo}>
+                              <FiInfo color="#FF9000" size={16} />
+                            </div>
+                          </Tooltip>
+                          <div className={styles.containerServiceInfo}>
+                            <b className={styles.textService}>
+                              {service.nmServico}
+                            </b>
+                          </div>
+                        </div>
+                      ))}
+                    </>
+                  )}
+                </div>
+              </div>
+
               <h2 className={styles.title}>Escolha o horário</h2>
 
               {getHorariosManhaBarbeiro().length > 0 && <p>Manhã</p>}