From 5e3c884c3c6e97cf8278fef2b2b53298490cacf1 Mon Sep 17 00:00:00 2001
From: Yannick Goossens <yannick@ziroh.be>
Date: Fri, 27 Oct 2023 18:47:12 +0200
Subject: [PATCH] fix: different validation rules for the cover file

---
 src/components/form/FormFields.jsx | 30 +++++++++++++++++++++++++++++-
 src/constants.ts                   |  2 +-
 src/context/mintStore.ts           | 10 ++++++++++
 src/pages/mint/fields.js           |  2 +-
 4 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/components/form/FormFields.jsx b/src/components/form/FormFields.jsx
index c9254da80..d79aec7d9 100644
--- a/src/components/form/FormFields.jsx
+++ b/src/components/form/FormFields.jsx
@@ -4,7 +4,10 @@ import Select from '@atoms/select/Base'
 import styles from '@style'
 import { memo } from 'react'
 import { Upload } from '@components/upload/index'
-import { ALLOWED_FILETYPES_LABEL } from '@constants'
+import {
+  ALLOWED_FILETYPES_LABEL,
+  ALLOWED_COVER_FILETYPES_LABEL,
+} from '@constants'
 import { Controller } from 'react-hook-form'
 import classNames from 'classnames'
 
@@ -113,6 +116,31 @@ export const FormFields = ({ value, field, error, register, control }) => {
           )}
         />
       )
+
+    case 'cover-file':
+      return (
+        <Controller
+          control={control}
+          defaultValue={field.defaultValue}
+          name={name}
+          rules={field.rules}
+          render={({ field: { onChange, value, name, ref } }) => (
+            <Upload
+              ref={ref}
+              name={name}
+              file={value?.file}
+              label={field.label}
+              placeHolder={value ? value?.file?.name : field.placeHolder}
+              className={styles.field}
+              onChange={onChange}
+              allowedTypesLabel={ALLOWED_COVER_FILETYPES_LABEL}
+            >
+              {error && <FieldError error={error.message} />}
+            </Upload>
+          )}
+        />
+      )
+
     default:
       return (
         <p>
diff --git a/src/constants.ts b/src/constants.ts
index 42c9b0deb..1112b70fc 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -101,7 +101,7 @@ export const ALLOWED_COVER_MIMETYPES = [
   MIMETYPE.MP4,
 ]
 
-export const ALLOWED_COVER_FILETYPES_LABEL = ['jpeg, png, gif']
+export const ALLOWED_COVER_FILETYPES_LABEL = 'jpeg, png, gif, mp4'
 export const MAX_EDITIONS = 10000 // Limited by contract
 export const MIN_ROYALTIES = 10
 export const MAX_ROYALTIES = 25
diff --git a/src/context/mintStore.ts b/src/context/mintStore.ts
index 7b8805229..5a83f296f 100644
--- a/src/context/mintStore.ts
+++ b/src/context/mintStore.ts
@@ -9,6 +9,8 @@ import { useModalStore } from './modalStore'
 import {
   ALLOWED_FILETYPES_LABEL,
   ALLOWED_MIMETYPES,
+  ALLOWED_COVER_FILETYPES_LABEL,
+  ALLOWED_COVER_MIMETYPES,
   METADATA_ACCESSIBILITY_HAZARDS_PHOTOSENS,
   METADATA_CONTENT_RATING_MATURE,
   MIMETYPE,
@@ -128,6 +130,14 @@ export const useMintStore = create<MintState>()(
             return
           }
 
+          // check cover mime type
+          if (cover && !ALLOWED_COVER_MIMETYPES.includes(cover.mimeType)) {
+            show(
+              `Cover file format invalid. supported formats include: ${ALLOWED_COVER_FILETYPES_LABEL.toLocaleLowerCase()}`
+            )
+            return
+          }
+
           // check file size
           const filesize = parseInt(
             (artifact.file.size / 1024 / 1024).toFixed(4)
diff --git a/src/pages/mint/fields.js b/src/pages/mint/fields.js
index c17830ac3..a454d6b98 100644
--- a/src/pages/mint/fields.js
+++ b/src/pages/mint/fields.js
@@ -148,7 +148,7 @@ export const fields = [
     label: 'Cover Image',
     placeHolder: 'Upload Cover image',
     name: 'cover',
-    type: 'file',
+    type: 'cover-file',
     watch: true,
     enable_if: 'needsCover',
     rules: {