feat: Added previouly configured bottom Footered button

implerhq · Dec 20, 2024 · 0f5bb3f · 0f5bb3f
1 parent 1bf674d
commit 0f5bb3f
Showing 1 changed file with 78 additions and 74 deletions.
diff --git a/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/AutoImportPhase3.tsx b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/AutoImportPhase3.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
+import { Group, Text, Stack, Tabs, Radio, Container } from '@mantine/core';
 import { Controller, useForm } from 'react-hook-form';
-import { Group, Text, Stack, Tabs, Radio } from '@mantine/core';
 import { PhasesEnum, RecurrenceFormData } from '@types';
 import { DatePickerInput } from '@mantine/dates';
 import { IUserJob } from '@impler/shared';
@@ -52,88 +52,92 @@ export function AutoImportPhase3({ onNextClick }: IAutoImportPhase3Props) {
   };
 
   return (
-    <Stack p="xl" className={classes.stack} spacing="xs">
-      <form style={{ flexFlow: '1' }}>
-        <Controller
-          name="recurrenceType"
-          control={control}
-          render={({ field }) => (
-            <Tabs value={field.value} onTabChange={(val) => field.onChange(val)} classNames={{ tab: classes.tab }}>
-              <Tabs.List>
-                {autoImportSchedulerFrequency.map((type) => (
-                  <Tabs.Tab key={type} value={type}>
-                    {type.charAt(0).toUpperCase() + type.slice(1)}
-                  </Tabs.Tab>
-                ))}
-              </Tabs.List>
+    <>
+      <Container style={{ flexGrow: 1 }} px={0}>
+        <Stack p="sm" className={classes.stack}>
+          <form style={{ flexFlow: '1' }}>
+            <Controller
+              name="recurrenceType"
+              control={control}
+              render={({ field }) => (
+                <Tabs value={field.value} onTabChange={(val) => field.onChange(val)} classNames={{ tab: classes.tab }}>
+                  <Tabs.List>
+                    {autoImportSchedulerFrequency.map((type) => (
+                      <Tabs.Tab key={type} value={type}>
+                        {type.charAt(0).toUpperCase() + type.slice(1)}
+                      </Tabs.Tab>
+                    ))}
+                  </Tabs.List>
 
-              {autoImportSchedulerFrequency.map((schedularFrequency) => (
-                <Tabs.Panel key={schedularFrequency} value={schedularFrequency}>
-                  <SchedulerFrequency
-                    autoImportFrequency={schedularFrequency as AUTOIMPORTSCHEDULERFREQUENCY}
-                    control={control}
-                  />
-                </Tabs.Panel>
-              ))}
-            </Tabs>
-          )}
-        />
-        <Stack>
-          <Controller
-            name="endsNever"
-            control={control}
-            render={({ field }) => (
-              <Radio.Group value={field.value ? 'never' : 'on'} onChange={(val) => field.onChange(val === 'never')}>
-                <Stack mt="sm">
-                  <Radio
-                    value="never"
-                    label={<span style={{ color: colors.StrokeLight, fontWeight: 400 }}>Never ends</span>}
-                  />
-                  <Radio
-                    value="on"
-                    label={
-                      <Group align="center">
-                        <span>Ends on</span>
-                        {!field.value && (
-                          <Controller
-                            name="endsOn"
-                            control={control}
-                            render={({ field: dateField }) => (
-                              <DatePickerInput
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                //@ts-ignore
-                                placeholder="End Date"
-                                value={dateField.value ? new Date(dateField.value) : null}
-                                onChange={(date) => dateField.onChange(date?.toISOString())}
-                                minDate={new Date()}
-                                clearable
-                                maw={400}
+                  {autoImportSchedulerFrequency.map((schedularFrequency) => (
+                    <Tabs.Panel key={schedularFrequency} value={schedularFrequency}>
+                      <SchedulerFrequency
+                        autoImportFrequency={schedularFrequency as AUTOIMPORTSCHEDULERFREQUENCY}
+                        control={control}
+                      />
+                    </Tabs.Panel>
+                  ))}
+                </Tabs>
+              )}
+            />
+            <Stack>
+              <Controller
+                name="endsNever"
+                control={control}
+                render={({ field }) => (
+                  <Radio.Group value={field.value ? 'never' : 'on'} onChange={(val) => field.onChange(val === 'never')}>
+                    <Stack mt="sm">
+                      <Radio
+                        value="never"
+                        label={<span style={{ color: colors.StrokeLight, fontWeight: 400 }}>Never ends</span>}
+                      />
+                      <Radio
+                        value="on"
+                        label={
+                          <Group align="center">
+                            <span>Ends on</span>
+                            {!field.value && (
+                              <Controller
+                                name="endsOn"
+                                control={control}
+                                render={({ field: dateField }) => (
+                                  <DatePickerInput
+                                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                    //@ts-ignore
+                                    placeholder="End Date"
+                                    value={dateField.value ? new Date(dateField.value) : null}
+                                    onChange={(date) => dateField.onChange(date?.toISOString())}
+                                    minDate={new Date()}
+                                    clearable
+                                    maw={400}
+                                  />
+                                )}
                               />
                             )}
-                          />
-                        )}
-                      </Group>
-                    }
-                  />
-                </Stack>
-              </Radio.Group>
-            )}
-          />
+                          </Group>
+                        }
+                      />
+                    </Stack>
+                  </Radio.Group>
+                )}
+              />
 
-          <Stack mt="xl">
-            {cronExpression && (
-              <Text fw="bolder" color={colors.StrokeLight}>
-                Current Schedule: {parseCronExpression.toString(cronExpression)}
-              </Text>
-            )}
-          </Stack>
+              <Stack spacing="xl">
+                {cronExpression && (
+                  <Text fw="bolder" color={colors.StrokeLight}>
+                    Current Schedule: {parseCronExpression.toString(cronExpression)}
+                  </Text>
+                )}
+              </Stack>
+            </Stack>
+          </form>
         </Stack>
-      </form>
+      </Container>
       <Footer
         active={PhasesEnum.SCHEDULE}
         onNextClick={handleNextClick}
         primaryButtonLoading={isUpdateUserJobLoading}
       />
-    </Stack>
+    </>
   );
 }