From 6f4afe7b18d9eb95eb7fcaf798f2a9e38aea23b4 Mon Sep 17 00:00:00 2001
From: runarvestmann <runar@stefna.is>
Date: Tue, 14 Jan 2025 15:42:50 +0000
Subject: [PATCH] Move formprovider to top

---
 .../Forms/StandardForm/StandardForm.tsx       | 418 +++++++++---------
 1 file changed, 205 insertions(+), 213 deletions(-)

diff --git a/apps/web/components/ServiceWeb/Forms/StandardForm/StandardForm.tsx b/apps/web/components/ServiceWeb/Forms/StandardForm/StandardForm.tsx
index ffbb0de1e941..da841bbd00ca 100644
--- a/apps/web/components/ServiceWeb/Forms/StandardForm/StandardForm.tsx
+++ b/apps/web/components/ServiceWeb/Forms/StandardForm/StandardForm.tsx
@@ -773,7 +773,7 @@ export const StandardForm = ({
     .sort(sortAlpha('label'))
 
   return (
-    <>
+    <FormProvider {...useFormMethods}>
       <GridContainer>
         <GridRow marginTop={6} marginBottom={4}>
           <GridColumn span={['12/12', '12/12', '12/12', '8/12']}>
@@ -927,254 +927,246 @@ export const StandardForm = ({
       </GridContainer>
 
       {called && (
-        <FormProvider {...useFormMethods}>
-          <form onSubmit={handleSubmit(submitWithMessage)}>
-            <GridContainer>
-              {institutionSlugBelongsToMannaudstorg && (
-                <GridRow marginTop={8}>
-                  <GridColumn
-                    paddingBottom={3}
-                    span={['12/12', '12/12', '12/12', '8/12']}
-                  >
-                    <Controller
-                      control={control}
-                      name="rikisadili"
-                      defaultValue=""
-                      rules={{
-                        required: {
-                          value: true,
-                          message: fn(
-                            'rikisadili',
-                            'requiredMessage',
-                            'Vinsamlegast veldu stofnun',
-                          ),
-                        },
-                      }}
-                      render={({ field: { onChange } }) => (
-                        <Select
-                          backgroundColor="blue"
-                          icon="chevronDown"
-                          isSearchable
-                          label={fn('rikisadili', 'label', 'Ríkisaðili')}
-                          name="rikisadili"
-                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                          // @ts-ignore make web strict
-                          onChange={({ label }: Option) => {
-                            onChange(label)
-                          }}
-                          hasError={errors?.rikisadili !== undefined}
-                          errorMessage={errors?.rikisadili?.message?.toString()}
-                          options={stateEntityOptions}
-                          placeholder={fn(
-                            'rikisadili',
-                            'requiredMessage',
-                            'Leitaðu að þinni stofnun',
-                          )}
-                          size="md"
-                          required
-                        />
-                      )}
-                    />
-                  </GridColumn>
-                </GridRow>
-              )}
-              <GridRow marginTop={institutionSlugBelongsToMannaudstorg ? 5 : 8}>
+        <form onSubmit={handleSubmit(submitWithMessage)}>
+          <GridContainer>
+            {institutionSlugBelongsToMannaudstorg && (
+              <GridRow marginTop={8}>
                 <GridColumn
                   paddingBottom={3}
                   span={['12/12', '12/12', '12/12', '8/12']}
                 >
                   <Controller
                     control={control}
-                    name="nafn"
+                    name="rikisadili"
                     defaultValue=""
                     rules={{
                       required: {
                         value: true,
-                        message: fn('nafn', 'requiredMessage', 'Nafn vantar'),
+                        message: fn(
+                          'rikisadili',
+                          'requiredMessage',
+                          'Vinsamlegast veldu stofnun',
+                        ),
                       },
                     }}
-                    render={({ field: { onChange, onBlur, value, name } }) => (
-                      <Input
+                    render={({ field: { onChange } }) => (
+                      <Select
                         backgroundColor="blue"
-                        name={name}
-                        onBlur={onBlur}
-                        label={fn('nafn', 'label', 'Nafn')}
-                        value={value}
-                        hasError={errors?.nafn !== undefined}
-                        errorMessage={errors?.nafn?.message as string}
-                        onChange={onChange}
+                        icon="chevronDown"
+                        isSearchable
+                        label={fn('rikisadili', 'label', 'Ríkisaðili')}
+                        name="rikisadili"
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore make web strict
+                        onChange={({ label }: Option) => {
+                          onChange(label)
+                        }}
+                        hasError={errors?.rikisadili !== undefined}
+                        errorMessage={errors?.rikisadili?.message?.toString()}
+                        options={stateEntityOptions}
+                        placeholder={fn(
+                          'rikisadili',
+                          'requiredMessage',
+                          'Leitaðu að þinni stofnun',
+                        )}
+                        size="md"
                         required
                       />
                     )}
                   />
                 </GridColumn>
-                <GridColumn span={['12/12', '12/12', '12/12', '8/12']}>
-                  <GridRow>
-                    <GridColumn paddingBottom={3} span="12/12">
-                      <Controller
-                        control={useFormMethods.control}
-                        name="email"
-                        defaultValue=""
-                        rules={{
-                          required: {
-                            value: true,
-                            message: fn(
-                              'email',
-                              'requiredMessage',
-                              'Netfang vantar',
-                            ),
-                          },
-                          pattern: {
-                            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                            message: fn(
-                              'email',
-                              'patternMessage',
-                              'Netfang er mögulega rangt skrifað',
-                            ),
-                          },
-                        }}
-                        render={({
-                          field: { onChange, onBlur, value, name },
-                        }) => (
-                          <Input
-                            backgroundColor="blue"
-                            name={name}
-                            onBlur={onBlur}
-                            label={fn('email', 'label', 'Tölvupóstfang')}
-                            value={value}
-                            hasError={errors?.email !== undefined}
-                            errorMessage={errors?.email?.message as string}
-                            onChange={onChange}
-                            required
-                          />
-                        )}
-                      />
-                    </GridColumn>
-                  </GridRow>
-                  {addonFields}
-                  <GridRow>
-                    <GridColumn span="12/12" paddingTop={5}>
+              </GridRow>
+            )}
+            <GridRow marginTop={institutionSlugBelongsToMannaudstorg ? 5 : 8}>
+              <GridColumn
+                paddingBottom={3}
+                span={['12/12', '12/12', '12/12', '8/12']}
+              >
+                <Controller
+                  control={control}
+                  name="nafn"
+                  defaultValue=""
+                  rules={{
+                    required: {
+                      value: true,
+                      message: fn('nafn', 'requiredMessage', 'Nafn vantar'),
+                    },
+                  }}
+                  render={({ field: { onChange, onBlur, value, name } }) => (
+                    <Input
+                      backgroundColor="blue"
+                      name={name}
+                      onBlur={onBlur}
+                      label={fn('nafn', 'label', 'Nafn')}
+                      value={value}
+                      hasError={errors?.nafn !== undefined}
+                      errorMessage={errors?.nafn?.message as string}
+                      onChange={onChange}
+                      required
+                    />
+                  )}
+                />
+              </GridColumn>
+              <GridColumn span={['12/12', '12/12', '12/12', '8/12']}>
+                <GridRow>
+                  <GridColumn paddingBottom={3} span="12/12">
+                    <Controller
+                      control={useFormMethods.control}
+                      name="email"
+                      defaultValue=""
+                      rules={{
+                        required: {
+                          value: true,
+                          message: fn(
+                            'email',
+                            'requiredMessage',
+                            'Netfang vantar',
+                          ),
+                        },
+                        pattern: {
+                          value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                          message: fn(
+                            'email',
+                            'patternMessage',
+                            'Netfang er mögulega rangt skrifað',
+                          ),
+                        },
+                      }}
+                      render={({
+                        field: { onChange, onBlur, value, name },
+                      }) => (
+                        <Input
+                          backgroundColor="blue"
+                          name={name}
+                          onBlur={onBlur}
+                          label={fn('email', 'label', 'Tölvupóstfang')}
+                          value={value}
+                          hasError={errors?.email !== undefined}
+                          errorMessage={errors?.email?.message as string}
+                          onChange={onChange}
+                          required
+                        />
+                      )}
+                    />
+                  </GridColumn>
+                </GridRow>
+                {addonFields}
+                <GridRow>
+                  <GridColumn span="12/12" paddingTop={5}>
+                    <Controller
+                      control={control}
+                      name="erindi"
+                      defaultValue=""
+                      rules={{
+                        required: {
+                          value: true,
+                          message: fn(
+                            'erindi',
+                            'requiredMessage',
+                            'Erindi vantar',
+                          ),
+                        },
+                      }}
+                      render={({
+                        field: { onChange, onBlur, value, name },
+                      }) => (
+                        <Input
+                          backgroundColor="blue"
+                          name={name}
+                          onBlur={onBlur}
+                          label={fn('erindi', 'label', 'Erindi')}
+                          value={value}
+                          hasError={errors?.erindi !== undefined}
+                          errorMessage={errors?.erindi?.message as string}
+                          onChange={onChange}
+                          rows={10}
+                          textarea
+                          required
+                        />
+                      )}
+                    />
+                  </GridColumn>
+                </GridRow>
+                <GridRow marginTop={8}>
+                  <GridColumn
+                    span={['12/12', '12/12', '6/12', '6/12']}
+                    paddingBottom={3}
+                  >
+                    {institutionSlug === 'syslumenn' && (
                       <Controller
                         control={control}
-                        name="erindi"
+                        name="syslumadur"
                         defaultValue=""
                         rules={{
                           required: {
                             value: true,
                             message: fn(
-                              'erindi',
+                              'syslumadur',
                               'requiredMessage',
-                              'Erindi vantar',
+                              'Vinsamlegast veldu sýslumannsembætti',
                             ),
                           },
                         }}
-                        render={({
-                          field: { onChange, onBlur, value, name },
-                        }) => (
-                          <Input
+                        render={({ field: { onChange } }) => (
+                          <Select
                             backgroundColor="blue"
-                            name={name}
-                            onBlur={onBlur}
-                            label={fn('erindi', 'label', 'Erindi')}
-                            value={value}
-                            hasError={errors?.erindi !== undefined}
-                            errorMessage={errors?.erindi?.message as string}
-                            onChange={onChange}
-                            rows={10}
-                            textarea
+                            icon="chevronDown"
+                            isSearchable
+                            label={fn('syslumadur', 'label', 'Þinn sýslumaður')}
+                            name="syslumadur"
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore make web strict
+                            onChange={({ label, value }: Option) => {
+                              onChange(label)
+                              setSyslumadurId(value)
+                            }}
+                            hasError={errors?.syslumadur !== undefined}
+                            errorMessage={errors?.syslumadur?.message as string}
+                            options={(syslumenn ?? []).map((x) => ({
+                              label: x.title,
+                              value: x.id,
+                            }))}
+                            placeholder={fn(
+                              'syslumadur',
+                              'placeholder',
+                              'Veldu sýslumannsembætti',
+                            )}
+                            size="sm"
                             required
                           />
                         )}
                       />
-                    </GridColumn>
-                  </GridRow>
-                  <GridRow marginTop={8}>
-                    <GridColumn
-                      span={['12/12', '12/12', '6/12', '6/12']}
-                      paddingBottom={3}
+                    )}
+                  </GridColumn>
+                  <GridColumn span={['12/12', '12/12', '6/12', '6/12']}>
+                    <Box
+                      display="flex"
+                      flexDirection="column"
+                      justifyContent="flexEnd"
+                      alignItems="flexEnd"
                     >
-                      {institutionSlug === 'syslumenn' && (
-                        <Controller
-                          control={control}
-                          name="syslumadur"
-                          defaultValue=""
-                          rules={{
-                            required: {
-                              value: true,
-                              message: fn(
-                                'syslumadur',
-                                'requiredMessage',
-                                'Vinsamlegast veldu sýslumannsembætti',
-                              ),
-                            },
-                          }}
-                          render={({ field: { onChange } }) => (
-                            <Select
-                              backgroundColor="blue"
-                              icon="chevronDown"
-                              isSearchable
-                              label={fn(
-                                'syslumadur',
-                                'label',
-                                'Þinn sýslumaður',
-                              )}
-                              name="syslumadur"
-                              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                              // @ts-ignore make web strict
-                              onChange={({ label, value }: Option) => {
-                                onChange(label)
-                                setSyslumadurId(value)
-                              }}
-                              hasError={errors?.syslumadur !== undefined}
-                              errorMessage={
-                                errors?.syslumadur?.message as string
-                              }
-                              options={(syslumenn ?? []).map((x) => ({
-                                label: x.title,
-                                value: x.id,
-                              }))}
-                              placeholder={fn(
-                                'syslumadur',
-                                'placeholder',
-                                'Veldu sýslumannsembætti',
-                              )}
-                              size="sm"
-                              required
-                            />
-                          )}
-                        />
-                      )}
-                    </GridColumn>
-                    <GridColumn span={['12/12', '12/12', '6/12', '6/12']}>
-                      <Box
-                        display="flex"
-                        flexDirection="column"
-                        justifyContent="flexEnd"
-                        alignItems="flexEnd"
+                      <Button
+                        type="submit"
+                        variant="primary"
+                        icon="arrowForward"
+                        loading={loading}
+                        disabled={!canSubmit}
                       >
-                        <Button
-                          type="submit"
-                          variant="primary"
-                          icon="arrowForward"
-                          loading={loading}
-                          disabled={!canSubmit}
-                        >
-                          {n(
-                            'submitServiceWebForm',
-                            activeLocale === 'is'
-                              ? 'Senda fyrirspurn'
-                              : 'Submit inquiry',
-                          )}
-                        </Button>
-                      </Box>
-                    </GridColumn>
-                  </GridRow>
-                </GridColumn>
-              </GridRow>
-            </GridContainer>
-          </form>
-        </FormProvider>
+                        {n(
+                          'submitServiceWebForm',
+                          activeLocale === 'is'
+                            ? 'Senda fyrirspurn'
+                            : 'Submit inquiry',
+                        )}
+                      </Button>
+                    </Box>
+                  </GridColumn>
+                </GridRow>
+              </GridColumn>
+            </GridRow>
+          </GridContainer>
+        </form>
       )}
-    </>
+    </FormProvider>
   )
 }