feat(envited.ascs.digital): Add offerings to form

apps/envited.ascs.digital/common/utils/index.ts

@@ -16,4 +16,5 @@ export {
   extractTypeFromCredential,
   slugify,
   createRandomString,
+  mapIndexed,
 } from './utils'

apps/envited.ascs.digital/common/utils/utils.ts

@@ -1,4 +1,4 @@
-import { pathOr, times } from 'ramda'
+import { addIndex, map, pathOr, times } from 'ramda'
 
 export const extractIdFromCredential = pathOr('', ['credentialSubject', 'id'])
 
@@ -21,3 +21,5 @@ export const createRandomString = (length: number) => {
 
   return result
 }
+
+export const mapIndexed = addIndex(map)

apps/envited.ascs.digital/modules/Profile/Profile.schema.ts

@@ -21,7 +21,17 @@ export const ProfileSchema = z.object({
   principalPhone: z.string(),
   principalEmail: z.string().email().optional().or(z.literal('')),
   website: z.string().url().optional().or(z.literal('')),
-  offerings: z.string().array().optional(),
+  offerings: z
+    .object({
+      name: z.string().max(100),
+      type: z.string().max(100),
+      functionalities: z.string().max(100),
+      supportedTools: z.string().max(200),
+      supportedStandards: z.string().max(200),
+    })
+    .array()
+    .max(5)
+    .optional(),
 })
 
 export const ValidateProfileForm = ProfileSchema.safeParse

apps/envited.ascs.digital/modules/Profile/Profile.tsx

@@ -1,21 +1,15 @@
 'use client'
 
-import {
-  Card,
-  Checkboxes,
-  DragAndDropField,
-  Heading,
-  TextField,
-  TextareaField,
-} from '@envited-marketplace/design-system'
+import { Card, DragAndDropField, Heading, TextField, TextareaField } from '@envited-marketplace/design-system'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { append, equals, includes, pathOr, prop, propOr, reject } from 'ramda'
+import { pathOr, prop, propOr } from 'ramda'
 import { FC } from 'react'
-import { Controller, SubmitHandler, useForm } from 'react-hook-form'
+import { Controller, SubmitHandler, useFieldArray, useForm } from 'react-hook-form'
 
 import { useTranslation } from '../../common/i18n'
 import { useNotification } from '../../common/notifications'
 import { File, Profile as ProfileType } from '../../common/types'
+import { mapIndexed } from '../../common/utils'
 import { updateProfileForm } from './Profile.actions'
 import { ProfileSchema } from './Profile.schema'
 
@@ -24,6 +18,14 @@ interface ProfileProps {
   memberCategories: any[]
 }
 
+interface OfferingItem {
+  name: string
+  type: string
+  functionalities: string
+  supportedTools: string
+  supportedStandards: string
+}
+
 type ProfileInputs = {
   name: string
   description: string
@@ -40,7 +42,7 @@ type ProfileInputs = {
   principalPhone: string
   principalEmail: string
   website: string
-  offerings: []
+  offerings: OfferingItem[] | []
 }
 
 export const Profile: FC<ProfileProps> = ({ profile, memberCategories }) => {
@@ -69,16 +71,19 @@ export const Profile: FC<ProfileProps> = ({ profile, memberCategories }) => {
       principalPhone: propOr('', 'principalPhone')(profile),
       principalEmail: propOr('', 'principalEmail')(profile),
       website: propOr('', 'website')(profile),
-      offerings: [],
+      offerings: propOr([], 'offerings')(profile),
     },
     mode: 'onChange',
   })
 
-  const handleCheckbox = (checkId: string) => {
-    const { offerings: ids } = getValues()
-
-    return includes(checkId)(ids) ? reject(equals(checkId))(ids) : append(checkId)(ids)
-  }
+  const {
+    fields: offeringFields,
+    append: appendOffering,
+    remove: removeOffering,
+  } = useFieldArray({
+    control,
+    name: 'offerings',
+  })
 
   const updateProfileAction: SubmitHandler<ProfileInputs> = async data => {
     try {
@@ -124,24 +129,6 @@ export const Profile: FC<ProfileProps> = ({ profile, memberCategories }) => {
                 />
               </div>
 
-              <div className="col-span-full">
-                <Controller
-                  name="offerings"
-                  control={control}
-                  render={({ field: { ref, value, ...field } }) => (
-                    <Checkboxes
-                      label={t('[Label] offerings')}
-                      inputRef={ref}
-                      items={memberCategories}
-                      values={value}
-                      handleCheckbox={handleCheckbox}
-                      {...field}
-                      error={pathOr('', ['offerings', 'message'])(errors)}
-                    />
-                  )}
-                />
-              </div>
-
               <div className="col-span-full">
                 <Controller
                   name="logo"
@@ -369,6 +356,120 @@ export const Profile: FC<ProfileProps> = ({ profile, memberCategories }) => {
               </div>
             </div>
           </div>
+          <div className="border-b border-gray-900/10 dark:border-white/10 pb-12">
+            <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
+              {t('[Heading] offerings')}
+            </h2>
+            <p className="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">{t('[Description] offerings')}</p>
+
+            <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8">
+              {mapIndexed((field: any, index: number) => (
+                <div key={field.id} className="border-t">
+                  <div className="flex justify-between py-4">
+                    <h3 className="font-bold text-gray-400">
+                      {t('[Label] offering')} {index + 1}
+                    </h3>
+                    <button
+                      type="button"
+                      className="underline text-blue-800 hover:text-blue-900"
+                      onClick={() => removeOffering(index)}
+                    >
+                      {t('[Button] remove')}
+                    </button>
+                  </div>
+                  <div className="pt-4">
+                    <Controller
+                      name={`offerings.${index}.name`}
+                      control={control}
+                      render={({ field: { ref, ...field } }) => (
+                        <TextField
+                          label={t('[Label] offering name')}
+                          inputRef={ref}
+                          {...field}
+                          error={pathOr('', ['offerings', index, 'name', 'message'])(errors)}
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className="pt-4">
+                    <Controller
+                      name={`offerings.${index}.type`}
+                      control={control}
+                      render={({ field: { ref, ...field } }) => (
+                        <TextField
+                          label={t('[Label] offering type')}
+                          inputRef={ref}
+                          {...field}
+                          error={pathOr('', ['offerings', index, 'type', 'message'])(errors)}
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className="pt-4">
+                    <Controller
+                      name={`offerings.${index}.functionalities`}
+                      control={control}
+                      render={({ field: { ref, ...field } }) => (
+                        <TextField
+                          label={t('[Label] offering functionalities')}
+                          inputRef={ref}
+                          {...field}
+                          error={pathOr('', ['offerings', index, 'functionalities', 'message'])(errors)}
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className="pt-4">
+                    <Controller
+                      name={`offerings.${index}.supportedTools`}
+                      control={control}
+                      render={({ field: { ref, ...field } }) => (
+                        <TextareaField
+                          label={t('[Label] offering supported tools')}
+                          description={t('[Description] offering supported tools')}
+                          inputRef={ref}
+                          {...field}
+                          error={pathOr('', ['offerings', index, 'supportedTools', 'message'])(errors)}
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className="pt-4">
+                    <Controller
+                      name={`offerings.${index}.supportedStandards`}
+                      control={control}
+                      render={({ field: { ref, ...field } }) => (
+                        <TextareaField
+                          label={t('[Label] offering supported standards')}
+                          description={t('[Description] offering supported standards')}
+                          inputRef={ref}
+                          {...field}
+                          error={pathOr('', ['offerings', index, 'supportedStandards', 'message'])(errors)}
+                        />
+                      )}
+                    />
+                  </div>
+                </div>
+              ))(offeringFields)}
+              {offeringFields.length < 5 && (
+                <button
+                  type="button"
+                  className="underline text-blue-800 hover:text-blue-900"
+                  onClick={() =>
+                    appendOffering({
+                      name: '',
+                      type: '',
+                      functionalities: '',
+                      supportedTools: '',
+                      supportedStandards: '',
+                    })
+                  }
+                >
+                  {t('[Button] add further offerings')}
+                </button>
+              )}
+            </div>
+          </div>
         </div>
 
         <div className="mt-6 flex items-center justify-end gap-x-6">

apps/envited.ascs.digital/modules/Profile/locales/de_DE.json

@@ -3,13 +3,22 @@
   "[Description] profile": "This information will be displayed publicly so be careful what you share.",
   "[Heading] principal contact": "Principal Contact Information",
   "[Description] principal contact": "This contact information will be displayed publicly so be careful what you share.",
-  "[Heading] sales contact": "Profile",
+  "[Heading] sales contact": "Sales Contact Information",
   "[Description] sales contact": "This contact information will be displayed publicly so be careful what you share.",
+  "[Heading] offerings": "ENVITED data space related offerings",
+  "[Description] offerings": "Max. 5 entries possible",
   "[Label] company name": "Company name",
   "[Label] about": "About",
   "[Label] about description": "Write a few sentences about the company.",
   "[Label] logo": "Logo",
   "[Label] offerings": "Offerings",
+  "[Label] offering name": "Name of offering",
+  "[Label] offering type": "Type",
+  "[Label] offering functionalities": "Functionalities",
+  "[Label] offering supported tools": "Supported Tools",
+  "[Description] offering supported tools": "max. 200 characters",
+  "[Label] offering supported standards": "Supported Standards",
+  "[Description] offering supported standards": "max. 200 characters",
   "[Label] website": "Website",
   "[Label] street": "Street",
   "[Label] postal code": "Postal code",
@@ -18,5 +27,8 @@
   "[Label] name": "Name",
   "[Label] phone": "Phone",
   "[Label] email": "Email address",
+  "[Label] offering": "Offering",
+  "[Button] remove": "Remove offering",
+  "[Button] add further offerings": "+ add further offerings",
   "[Button] update profile": "Update profile"
 }

apps/envited.ascs.digital/modules/Profile/locales/en_GB.json

@@ -3,13 +3,22 @@
   "[Description] profile": "This information will be displayed publicly so be careful what you share.",
   "[Heading] principal contact": "Principal Contact Information",
   "[Description] principal contact": "This contact information will be displayed publicly so be careful what you share.",
-  "[Heading] sales contact": "Profile",
+  "[Heading] sales contact": "Sales Contact Information",
   "[Description] sales contact": "This contact information will be displayed publicly so be careful what you share.",
+  "[Heading] offerings": "ENVITED data space related offerings",
+  "[Description] offerings": "Max. 5 entries possible",
   "[Label] company name": "Company name",
   "[Label] about": "About",
   "[Label] about description": "Write a few sentences about the company.",
   "[Label] logo": "Logo",
   "[Label] offerings": "Offerings",
+  "[Label] offering name": "Name of offering",
+  "[Label] offering type": "Type",
+  "[Label] offering functionalities": "Functionalities",
+  "[Label] offering supported tools": "Supported Tools",
+  "[Description] offering supported tools": "max. 200 characters",
+  "[Label] offering supported standards": "Supported Standards",
+  "[Description] offering supported standards": "max. 200 characters",
   "[Label] website": "Website",
   "[Label] street": "Street",
   "[Label] postal code": "Postal code",
@@ -18,5 +27,8 @@
   "[Label] name": "Name",
   "[Label] phone": "Phone",
   "[Label] email": "Email address",
+  "[Label] offering": "Offering",
+  "[Button] remove": "Remove offering",
+  "[Button] add further offerings": "+ add further offerings",
   "[Button] update profile": "Update profile"
 }