Merge pull request #80 from helsingborg-stad/feature/private-public-o…

…rganisations

Feature/private-public-organisations

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/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/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/Auth/CreateAccount/components/CreateAccountForm/CreateAccountForm.tsx

@@ -1,10 +1,10 @@
-import { Input, Button } from 'components';
+import { Input, Button, RadioButton } from 'components';
 import * as Styled from './styled';
 import { useCreateAccountForm } from '../../hooks';
 
 export const CreateAccountForm = () => {
   const {
-    setFieldValue, formFields, errors, submitForm, isLoading,
+    setFieldValue, formFields, errors, submitForm, isLoading, setRadioButtonValue,
   } = useCreateAccountForm();
 
   return (
@@ -82,6 +82,15 @@ export const CreateAccountForm = () => {
           error={errors.pinCode}
           info="För att logga in i appen används en pinkod. Bestäm vilken pinkod din verksamhet ska använda. Koden ska bestå av 6 siffror med minst 3 unika siffror och där högst 2 siffror i följd är lika."
         />
+        <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}>Skapa konto</Button>
         </Styled.ButtonContainer>

src/modules/Auth/CreateAccount/components/CreateAccountForm/styled.ts

@@ -38,3 +38,10 @@ export const Link = styled.a`
   font-weight: var(--font-weight-400);
   text-decoration: underline;
 `;
+
+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/Auth/CreateAccount/hooks/useCreateAccountForm/createAccount.validation.ts

@@ -21,6 +21,7 @@ export const CreateAccountValidation = z.object({
   pinCode: z.string().regex(pinCodeRegex, { message: 'Fel format för pinkod - välj en pinkod som följer reglerna.' }),
   contactPerson: z.string(),
   mobileNumber: z.string(),
+  isPublic: z.boolean(),
 });
 
 export type CreateAccountType = z.infer<typeof CreateAccountValidation>;

src/modules/Auth/CreateAccount/hooks/useCreateAccountForm/useCreateAccountForm.ts

@@ -31,6 +31,7 @@ export const useCreateAccountForm = () => {
     pinCode: '',
     contactPerson: '',
     mobileNumber: '',
+    isPublic: true,
   });
 
   const setFieldValue = (name: string) => ({
@@ -42,6 +43,13 @@ export const useCreateAccountForm = () => {
     });
   };
 
+  const setRadioButtonValue = (name: string, value: boolean) => {
+    setFormFields({
+      ...formFields,
+      [name]: value,
+    });
+  };
+
   const submitForm = (e: React.SyntheticEvent) => {
     e.preventDefault();
     setIsLoading(true);
@@ -90,5 +98,6 @@ export const useCreateAccountForm = () => {
     formFields,
     errors,
     isLoading,
+    setRadioButtonValue,
   };
 };

src/modules/Delivery/components/DeliveryList/components/FilterList/FilterList.tsx

@@ -7,6 +7,8 @@ import {
 } from 'types';
 import { ButtonSize } from 'components/Button/types';
 import { FC } from 'react';
+import { Lock } from '@mui/icons-material';
+import { useAuth } from 'hooks/useAuth';
 import * as Styled from './styled';
 import { AreaFilter } from './AreaFilter';
 import { NameFilter } from './NameFilter';
@@ -30,6 +32,7 @@ export const FilterList: FC<FilterListProps> = ({
   filters, checkFilter, resetFilters, triggerReload, showExportButton,
   filterOptions, activeFilters, setDateTimeFilter, exportEventsToExcel,
 }) => {
+  const { organisation } = useAuth();
   if (!filters || !filterOptions) {
     return null;
   }
@@ -75,14 +78,16 @@ export const FilterList: FC<FilterListProps> = ({
           triggerReload={triggerReload}
           activeFilters={activeFilters.areas}
         />
-        <OrganisationFilter
-          organisationFilter={filters.organisations}
-          filterOptions={filterOptions.organisations}
-          checkFilter={checkFilter}
-          resetFilters={resetFilters}
-          triggerReload={triggerReload}
-          activeFilters={activeFilters.organisations}
-        />
+        {organisation?.isPublic && (
+          <OrganisationFilter
+            organisationFilter={filters.organisations}
+            filterOptions={filterOptions.organisations}
+            checkFilter={checkFilter}
+            resetFilters={resetFilters}
+            triggerReload={triggerReload}
+            activeFilters={activeFilters.organisations}
+          />
+        )}
         <DistributorFilter
           distributorFilter={filters.distributors}
           filterOptions={filterOptions.distributors}
@@ -104,15 +109,24 @@ export const FilterList: FC<FilterListProps> = ({
       }
 
       </Styled.FilterContainer>
-      {showExportButton && (
-      <Button
-        onClick={() => exportEventsToExcel()}
-        type="button"
-        buttonSize={ButtonSize.SMALL}
-      >
-        Exportera till excel
-      </Button>
-      )}
+      <Styled.TopRightContainer>
+        {!organisation?.isPublic && (
+        <Styled.TopRightContainer>
+          <Lock />
+          {' '}
+          <p style={{ alignContent: 'center' }}>Konto är privat, ingen data delas</p>
+        </Styled.TopRightContainer>
+        )}
+        {showExportButton && (
+        <Button
+          onClick={() => exportEventsToExcel()}
+          type="button"
+          buttonSize={ButtonSize.SMALL}
+        >
+          Exportera till excel
+        </Button>
+        )}
+      </Styled.TopRightContainer>
 
     </Styled.Container>
   );

src/modules/Delivery/components/DeliveryList/components/FilterList/styled.ts

@@ -9,3 +9,9 @@ export const Container = styled.div`
   display: flex;
   justify-content: space-between;
 `;
+
+export const TopRightContainer = styled.div`
+  display: flex;
+  align-content: end;
+  gap: 10px;
+`;

src/types/organisation.ts

@@ -5,6 +5,7 @@ export type Organisation = {
   mobileNumber: string;
   name: string;
   email: string;
+  isPublic: boolean;
   createdAt: string;
   updatedAt?: string;
 };
@@ -19,6 +20,7 @@ export type OrganisationDTO = {
   token?: string;
   createdAt: Date;
   updatedAt?: Date;
+  isPublic: boolean;
 };
 
 export enum OrganisationFields {