Created new mailing page, refactor select component, minor fixes

src/app/store/reducers/ambassadors/model/constants.ts

@@ -10,13 +10,13 @@ const initialAmbassador: IAmbassadorById = {
   tg_acc: '',
   status: 'Active',
   created: '',
-  gender: '',
+  gender: 'Male',
   phone: '',
   email: '',
   purpose: '',
   education: '',
   work: '',
-  achievement: '',
+  achievement: 'new',
   address: {
     country: '',
     city: '',

src/app/store/reducers/programms/index.ts

@@ -0,0 +1,3 @@
+import programmsReducer from './model/programmsSlice';
+
+export { programmsReducer };

src/app/store/reducers/programms/model/programmsSlice.ts

@@ -0,0 +1,46 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import {
+  getMerchAmbassadorsHistory,
+  getMerchTypes,
+} from 'src/shared/api/merch';
+import { getProgramms } from 'src/shared/api/programms';
+import { TProgramm } from 'src/shared/api/programms/dtos';
+
+interface IProgrammsState {
+  programms: TProgramm[];
+  isLoading: boolean;
+  error: string | unknown | null;
+}
+
+const initialState: IProgrammsState = {
+  programms: [],
+  isLoading: false,
+  error: null,
+};
+
+const programmsSlice = createSlice({
+  name: 'programms',
+  initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder
+      .addCase(getProgramms.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.error = null;
+        state.programms = action.payload;
+      })
+      .addCase(getProgramms.pending, state => {
+        state.isLoading = true;
+      })
+      .addCase(getProgramms.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.payload;
+      });
+  },
+});
+
+export const selectProgramms = (state: { programms: IProgrammsState }) =>
+  state.programms;
+
+export default programmsSlice.reducer;

src/app/store/store.ts

@@ -4,11 +4,12 @@ import { ambassadorsReducer } from './reducers/ambassadors';
 import { contentsReducer } from './reducers/contents';
 import { merchReducer } from './reducers/merch';
 import { promocodesReducer } from './reducers/promocodes';
-import { ordersReducer } from './reducers/orders/imdex';
+import { ordersReducer } from './reducers/orders';
 import { questionnaireReducer } from './reducers/questionnaire';
 import { notificationsReducer } from './reducers/notifications';
 import { modalReducer } from './reducers/modal';
 import { userReducer } from './reducers/user';
+import { programmsReducer } from './reducers/programms';
 
 export const store = configureStore({
   reducer: {
@@ -21,6 +22,7 @@ export const store = configureStore({
     questionnaire: questionnaireReducer,
     modal: modalReducer,
     user: userReducer,
+    programms: programmsReducer,
   },
 });
 

src/entities/Button/types/types.ts

@@ -1,8 +1,9 @@
-interface ButtonProps {
-  label: string,
-  width: number,
-  height: number,
-  onClick: React.MouseEventHandler,
+import { ButtonProps } from '@mui/material';
+
+interface AppButtonProps extends ButtonProps {
+  label: string;
+  width: number;
+  height: number;
 }
 
-export type { ButtonProps }
+export type { AppButtonProps };

src/entities/Button/ui/Button.tsx

@@ -1,16 +1,16 @@
 import Button from '@mui/material/Button';
 
 import type { FC } from 'react';
-import type { ButtonProps } from '../types/types';
+import type { AppButtonProps } from '../types/types';
 
-const ButtonComponent: FC<ButtonProps> = ({
+const ButtonComponent: FC<AppButtonProps> = ({
   width,
   height,
   label,
-  onClick,
+  ...props
 }) => (
   <Button
-    onClick={onClick}
+    {...props}
     sx={{
       background: '#512da8',
       textTransform: 'none',

src/entities/OrderForm/ui/OrderForm.tsx

@@ -51,7 +51,7 @@ const OrderForm: FC<TOrderFormProps> = ({ ambassador }) => {
         </div>
         <div className={style.row}>
           <FieldsetContainer title="Тип мерча">
-            <OrderMerch index={0} required />
+            <OrderMerch index={0} />
             {watch('merch.0') && <OrderMerch index={1} />}
             {watch('merch.1') && <OrderMerch index={2} />}
           </FieldsetContainer>

src/entities/OrderMerch/types/types.ts

@@ -1,6 +1,5 @@
 type TOrderMerchProps = {
   index: number;
-  required?: boolean;
 };
 
 export type { TOrderMerchProps };

src/entities/OrderMerch/ui/OrderMerch.tsx

@@ -5,6 +5,7 @@ import { type FC } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
 import { ErrorMessage } from '@hookform/error-message';
+import { TextField } from '@mui/material';
 
 import { useAppSelector } from 'src/app/store/hooks';
 
@@ -17,11 +18,10 @@ import type { TOrderMerchProps } from '../types/types';
 import type { TMerchItem } from 'src/shared/api/merch/dtos';
 import type { RootState } from 'src/app/store/store';
 
-const OrderMerch: FC<TOrderMerchProps> = ({ index, required }) => {
+const OrderMerch: FC<TOrderMerchProps> = ({ index }) => {
   const types = useAppSelector((state: RootState) => state.merch.merchType);
   const {
     setValue,
-    control,
     formState: { errors },
   } = useFormContext();
   const [merch, setMerch] = useState<TMerchItem | null>(null);
@@ -46,39 +46,33 @@ const OrderMerch: FC<TOrderMerchProps> = ({ index, required }) => {
           </p>
         )}
       />
-      <Controller
-        name={`merch.${index}`}
-        control={control}
-        shouldUnregister
-        rules={{
-          required,
-        }}
-        render={({ field }) => (
-          <div className={style.rowTogether}>
-            <Select
-              onChange={(value: TMerchItem) => handleChange(value)}
-              options={uniqueObjects}
-              optionLabel={option => option.name}
-              label="Выберите мерч"
-              width="333px"
-              height="40px"
-            />
-            {merch && merch.size && (
-              <Select
-                defaultValue={merch}
-                onChange={(value: TMerchItem) => handleChange(value)}
-                options={types.filter(
-                  obj => obj.name === merch.name && obj.size !== null
-                )}
-                optionLabel={option => option.size}
-                label="Выберите размер"
-                width="150px"
-                height="40px"
-              />
+      <div className={style.rowTogether}>
+        <Select
+          onChange={(_, value: TMerchItem) => handleChange(value)}
+          options={uniqueObjects}
+          getOptionLabel={option => option.name}
+          renderInput={params => (
+            <TextField {...params} label="Выберите мерч" size="small" />
+          )}
+          width="333px"
+          height="40px"
+        />
+        {merch && merch.size && (
+          <Select
+            value={merch}
+            onChange={(_, value: TMerchItem) => handleChange(value)}
+            options={types.filter(
+              obj => obj.name === merch.name && obj.size !== null
+            )}
+            getOptionLabel={option => option.size}
+            renderInput={params => (
+              <TextField {...params} label="Выберите размер" size="small" />
             )}
-          </div>
+            width="150px"
+            height="40px"
+          />
         )}
-      />
+      </div>
     </>
   );
 };