Merge pull request #83 from helsingborg-stad/staging

Staging

src/api/auth/types.ts

@@ -13,6 +13,7 @@ export type LoginResponse = {
   mobileNumber: string;
   createdAt: Date;
   updatedAt?: Date;
+  isPublic: boolean;
 };
 
 export type SignUpRequest = {
@@ -21,6 +22,7 @@ export type SignUpRequest = {
   email: string;
   password: string;
   pinCode: string;
+  isPublic: boolean;
 };
 
 export type SignUpResponse = {
@@ -33,6 +35,7 @@ export type SignUpResponse = {
   mobileNumber: string;
   createdAt: Date;
   updatedAt?: Date;
+  isPublic: boolean;
 };
 
 export type ForgotPasswordRequest = {

src/api/event/event.ts

@@ -1,8 +1,8 @@
-import { Event } from 'types/event';
+import { Event, EventGroup } from 'types/event';
 import { client } from '../baseAxios';
 
 export const getEvents = (filter?: string) => client.get<Event[]>(`/zones/events${filter !== '' ? `?${filter}` : ''}`);
-export const getGroupedEvents = (filter?: string) => client.get<Event[][]>(`/zones/events/grouped${filter !== '' ? `?${filter}` : ''}`);
+export const getGroupedEvents = (filter?: string) => client.get<EventGroup[]>(`/zones/events/grouped${filter !== '' ? `?${filter}` : ''}`);
 export const exportEvents = (filter?: string) => client.get<Blob>(
   `/zones/events/export${filter !== '' ? `?${filter}` : ''}`,
   {

src/components/Menu/Menu.tsx

@@ -46,6 +46,7 @@ export const Menu = () => {
           <Styled.Text onClick={() => navigate('/account/zones')}>Hantera zoner</Styled.Text>
           <Styled.Text onClick={() => navigate('/account/zones/create')}>Lägg till zoner</Styled.Text>
           <Styled.Text onClick={() => navigate('/account/events/import')}>Importera data</Styled.Text>
+          <Styled.Text onClick={() => navigate('/account/about')}>Om Sam</Styled.Text>
         </Styled.SectionTwo>
         <Styled.SectionThree>
           <Styled.Text onClick={() => logOutAndRedirect()}>Logga ut</Styled.Text>

src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { RadioButtonChecked, RadioButtonUnchecked } from '@mui/icons-material';
+import * as Styled from './styled';
+
+type RadioButtonProps = {
+  label: string;
+  checked: boolean;
+  onClick: () => void;
+};
+
+export const RadioButton: FC<RadioButtonProps> = ({ checked, onClick, label }) => (
+  <Styled.Container onClick={onClick}>
+    {checked ? <RadioButtonChecked /> : <RadioButtonUnchecked />}
+    <Styled.Input type="radio" />
+    <Styled.Label checked={checked}>{label}</Styled.Label>
+  </Styled.Container>
+);

src/components/RadioButton/index.ts

@@ -0,0 +1 @@
+export * from './RadioButton';

src/components/RadioButton/styled.ts

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  cursor: pointer;
+`;
+
+type LabelProps = {
+  checked: boolean;
+};
+
+export const Label = styled.p<LabelProps>`
+  color: var(--color-gray-10);
+  font-size: var(--font-size-body-xs);
+  line-height: var(--line-height-xxxs);
+
+  ${({ checked }) => checked
+    && css`
+     color: var(--color-black);
+  `}
+`;
+
+export const Input = styled.input`
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+`;

src/components/SideBar/SideBar.tsx

@@ -46,6 +46,15 @@ export const SideBar = () => {
       >
         Importera data
       </Button>
+      <Button
+        onClick={handleNavigate('/account/about')}
+        buttonSize={ButtonSize.SMALL}
+        secondary={activePath === '/account/about'}
+        tertiary={activePath !== '/account/about'}
+        type="button"
+      >
+        Om Sam
+      </Button>
     </Styled.SideBarContainer>
   );
 };

src/components/index.ts

@@ -1,6 +1,6 @@
 export * from './Button';
 export * from './Checkbox';
-export * from './FilteButtonDate';
+export * from './FilterButtonDate';
 export * from './FilterButton';
 export * from './Input';
 export * from './InputTime';
@@ -10,3 +10,4 @@ export * from './Menu';
 export * from './SideBar';
 export * from './Select';
 export * from './ClickOutsideCloser';
+export * from './RadioButton';

src/modules/Account/About/About.tsx

@@ -0,0 +1,73 @@
+import { SideBar } from 'components/SideBar';
+import { Link } from 'components/Link';
+import * as Styled from './styled';
+
+export const About = () => (
+  <Styled.ContentContainer>
+    <SideBar />
+    <Styled.InfoContainer>
+      <Styled.Header>Om Sam</Styled.Header>
+      <Styled.Text>
+        Sam samlar in transportdata för att kunna dela
+        datan mellan olika aktörer i transportkedjan.
+        Genom tillgänglig data kan beställaren få bättre förståelse för hur
+        transporterna inom olika områden går och kan använda datan för
+        att bli smartare beställare. Leverantörer och transportörer kan använda datan för att
+        hitta samarbeten och samlastning. Målet med Sam är smartare
+        logistik kring transporter och minskade
+        körningar för klimatets skull.
+        <br />
+        <br />
+        <Link label="Läs mer om Sam" href="https://helsingborg.se/trafik-och-stadsplanering/planering-och-utveckling/trafikplanering/godstransporter/sam-ett-steg-pa-vagen-for-hallbara-transporter/" />
+
+      </Styled.Text>
+      <h2 style={{ marginBottom: '10px', marginTop: '60px' }}>Så här fungerar Sam</h2>
+      <Styled.Text>
+        Tjänsten Sam består av en mobilapp som används av förare,
+        och den här webbsidan där alla spårade leveranser samlas.
+        Just nu är tjänsten så pass utvecklad att vi kan beskriva transporter
+        som går till och från olika verksamheter i staden, via geofencing*.
+        Det betyder att endast leveranser till geofencade adresser registreras - andra stopp
+        på vägen kommer inte registreras på webbsidan.
+
+      </Styled.Text>
+      <br />
+      <Styled.Text>
+        <i>
+          *Geofence är en internationell fackterm.
+          Den kan översättas med ”geostaket”
+          och är ett geografiskt avgränsat eller definierat område som bestämts
+          och som ”inhägnats” med en programvara
+        </i>
+      </Styled.Text>
+      <h2 style={{ marginBottom: '10px', marginTop: '60px' }}>Leverera transportdata till Sam</h2>
+      <Styled.Text style={{ marginBottom: '8px' }}>
+        Det finns två sätt att leverera data till Sam.
+      </Styled.Text>
+      <ol style={{ paddingLeft: '20px' }}>
+        <li>
+          <Styled.Text>
+            Använd appen Sam
+            <br />
+            Föraren laddar ner appen till sin telefon.
+            Föraren startar spårningen i appen vid start av en körning.
+            Varje gång transporten befinner sig inom ett geofencat område blir det en
+            datapunkt som sparas och blir synlig på webbsidan.
+          </Styled.Text>
+        </li>
+        <li>
+          <Styled.Text>
+            Leverera en rapport
+            <br />
+            Istället för att använda appen Sam kan
+            leverantör eller transportör hämta motsvarande data från sitt
+            logistiksystem/TMS (Transport Management System) och skicka
+            rapport till kontaktperson enligt överenskommet intervall
+            {' '}
+            <Link href="/Template.xlsx" download="mall.xlsx" label="[Mall för rapport]" />
+          </Styled.Text>
+        </li>
+      </ol>
+    </Styled.InfoContainer>
+  </Styled.ContentContainer>
+);

src/modules/Account/About/index.ts

@@ -0,0 +1,3 @@
+import { About } from './About';
+
+export default About;

src/modules/Account/About/styled.ts

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+export const ContentContainer = styled.div`
+  padding: 36px 32px;
+  padding-bottom: 64px;
+`;
+
+export const InfoContainer = styled.div`
+  width: 600px;
+  margin: 24px auto 32px;
+  @media (max-width: 768px) {
+    width: 450px;
+  }
+`;
+
+export const Header = styled.h1`
+  font-size: var(--font-size-heading-lg);
+  font-weight: var(--font-weight-800);
+  line-height: var(--line-height-xxxl);
+  margin-bottom: var(--spacing-md);
+  font-family: var(--font-family);
+`;
+
+export const Text = styled.p`
+  font-size: 16px;
+  line-height: 150%;
+  letter-spacing: 0.25%;
+  font-weight: 500;
+`;

src/modules/Account/AccountRouter.tsx

@@ -7,6 +7,7 @@ const ZonesSettings = lazy(() => import('./ZonesSettings'));
 const CreateZones = lazy(() => import('./CreateZones'));
 const EditZone = lazy(() => import('./EditZone'));
 const ImportEvents = lazy(() => import('./ImportEvents'));
+const About = lazy(() => import('./About'));
 
 export const AccountRouter = () => (
   <DeliveryLayout>
@@ -15,6 +16,7 @@ export const AccountRouter = () => (
       <Route path="/zones/:id/edit" element={<EditZone />} />
       <Route path="/zones" element={<ZonesSettings />} />
       <Route path="/events/import" element={<ImportEvents />} />
+      <Route path="/about" element={<About />} />
       <Route path="/" element={<AccountSettings />} />
     </Routes>
   </DeliveryLayout>

src/modules/Account/AccountSettings/components/EditAccountForm/EditAccountForm.tsx

@@ -1,4 +1,6 @@
-import { Button, Input, Checkbox } from 'components';
+import {
+  Button, Input, Checkbox, RadioButton,
+} from 'components';
 import { useAuth } from 'hooks/useAuth';
 import * as Styled from './styled';
 import { TogglabelContent } from '../TogglableContent';
@@ -17,6 +19,7 @@ export const EditAccountForm = () => {
     submitForm,
     setDeleteAccountValue,
     submitDeleteAccountForm,
+    setRadioButtonValue,
   } = useEditAccountForm();
 
   return (
@@ -136,6 +139,30 @@ export const EditAccountForm = () => {
           </Styled.Form>
           )}
       />
+      <TogglabelContent
+        label="Synlighet"
+        value={organisation?.isPublic ? 'Publik' : 'Privat'}
+        showComponent={inEdit.isPublic}
+        onClick={toggleEditFieldValue(EditableFields.isPublic)}
+        component={(
+          <Styled.Form onSubmit={submitForm(EditableFields.isPublic)}>
+            <RadioButton label="Publikt konto - data delas med andra" onClick={() => setRadioButtonValue('isPublic', true)} checked={formFields.isPublic} />
+            <RadioButton label="Privat konto - datan delas inte med andra" onClick={() => setRadioButtonValue('isPublic', false)} checked={!formFields.isPublic} />
+            <Styled.Info>
+              Med publikt konto delar ni er data med andra som har skapat
+              publikt konto i Sam och skapar
+              därmed förutsättningar
+              för att hitta samlastningoch bidrar till smartare beställningsbeteende.
+              Med privata konto kan ni bara se er egen
+              insamlade data och ni delar inte den med andra.
+              Ni ser heller inte datan från publika konton.
+            </Styled.Info>
+            <Styled.ButtonContainer>
+              <Button type="submit" disabled={isLoading} onClick={() => submitForm}>Ändra synlighet</Button>
+            </Styled.ButtonContainer>
+          </Styled.Form>
+        )}
+      />
       <TogglabelContent
         label="Kontostatus"
         value="Aktiv"

src/modules/Account/AccountSettings/components/EditAccountForm/styled.ts

@@ -30,3 +30,10 @@ export const Label = styled.span`
   line-height: var(--line-height-xs);
   font-weight: var(--font-weight-400);
 `;
+
+export const Info = styled.p`
+  font-size: var(--font-size-body-xs);
+  color: var(--color-gray-4);
+  line-height: var(--line-height-xxs);
+  font-weight: var(--font-weight-500);
+`;

src/modules/Account/AccountSettings/hooks/useEditAccountForm/editAccount.validation.ts

@@ -15,11 +15,12 @@ export const UpdateAccountValidation = z.object({
     .string()
     .regex(passwordRegex, { message: 'Fel format för lösenord - välj ett lösenord som följer reglerna.' }),
   pinCode: z.string().regex(pinCodeRegex, { message: 'Fel format för pinkod - välj en pinkod som följer reglerna.' }),
-  contactPerson: z.string().min(1, { message: 'Ange ett kontakt-namn' }),
-  mobileNumber: z.string().min(1, { message: 'Ange ett mobilnummer för kontakt' }),
+  contactPerson: z.string(),
+  mobileNumber: z.string(),
   deleteAccountConfirmation: z.boolean().refine((val) => val === true, {
     message: 'Du måste bekräfta att du vill radera ditt konto',
   }),
+  isPublic: z.boolean(),
 });
 
 export type UpdateAccountType = z.infer<typeof UpdateAccountValidation>;

src/modules/Account/AccountSettings/hooks/useEditAccountForm/useEditAccountForm.ts

@@ -12,6 +12,7 @@ type ErrorMessage = {
   contactPerson?: string;
   mobileNumber?: string;
   deleteAccountConfirmation?: string;
+  isPublic?: string;
 };
 
 type InEditType = {
@@ -21,6 +22,7 @@ type InEditType = {
   contactPerson: boolean;
   mobileNumber: boolean;
   deleteAccountConfirmation: boolean;
+  isPublic: boolean;
 };
 
 enum EditableFields {
@@ -30,6 +32,7 @@ enum EditableFields {
   contactPerson = 'contactPerson',
   mobileNumber = 'mobileNumber',
   deleteAccountConfirmation = 'deleteAccountConfirmation',
+  isPublic = 'isPublic',
 }
 
 export const useEditAccountForm = () => {
@@ -45,6 +48,7 @@ export const useEditAccountForm = () => {
     contactPerson: organisation?.contactPerson || '',
     mobileNumber: organisation?.mobileNumber || '',
     deleteAccountConfirmation: false,
+    isPublic: organisation?.isPublic || true,
   });
   const [inEdit, setInEdit] = useState<InEditType>({
     email: false,
@@ -53,6 +57,7 @@ export const useEditAccountForm = () => {
     contactPerson: false,
     mobileNumber: false,
     deleteAccountConfirmation: false,
+    isPublic: false,
   });
 
   const setFieldValue = (name: string) => ({
@@ -64,6 +69,13 @@ export const useEditAccountForm = () => {
     });
   };
 
+  const setRadioButtonValue = (name: string, value: boolean) => {
+    setFormFields({
+      ...formFields,
+      [name]: value,
+    });
+  };
+
   const setDeleteAccountValue = (checked: boolean) => {
     setFormFields({
       ...formFields,
@@ -83,6 +95,11 @@ export const useEditAccountForm = () => {
           ...formFields,
           [name]: false,
         });
+      } else if (name === 'isPublic') {
+        setFormFields({
+          ...formFields,
+          [name]: organisation?.isPublic || false,
+        });
       } else {
         setFormFields({
           ...formFields,
@@ -154,5 +171,6 @@ export const useEditAccountForm = () => {
     submitForm,
     setDeleteAccountValue,
     submitDeleteAccountForm,
+    setRadioButtonValue,
   };
 };