feat: prompting private message on checkout

geyserfund · Oct 9, 2024 · 5510407 · 5510407
1 parent 0cadb01
commit 5510407
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 10 deletions.
diff --git a/src/modules/project/funding/state/fundingFormAtom.ts b/src/modules/project/funding/state/fundingFormAtom.ts
@@ -37,6 +37,7 @@ export type FundFormType = {
   email: string
   media: string
   comment: string
+  privateComment: string
   rewardsByIDAndCount?: { [key: string]: number } | undefined
   rewardCurrency: RewardCurrency
   needsShipping: boolean
@@ -51,6 +52,7 @@ const initialState: FundFormType = {
   shippingCost: 0,
   totalAmount: 0,
   comment: '',
+  privateComment: '',
   email: '',
   media: '',
   rewardsByIDAndCount: undefined,
@@ -254,7 +256,6 @@ export const isFundingInputAmountValidAtom = atom((get) => {
     }
   }
 
-  console.log('checking totalAmount', totalAmount)
   if (!isException && walletLimits?.max && totalAmount >= walletLimits.max) {
     return {
       title: `Amount above the project wallet limit: ${commaFormatted(walletLimits.max)} sats.`,

diff --git a/src/modules/project/pages1/projectFunding/views/fundingDetails/FundingDetails.tsx b/src/modules/project/pages1/projectFunding/views/fundingDetails/FundingDetails.tsx
@@ -5,6 +5,7 @@ import { useFundingFormAtom } from '@/modules/project/funding/hooks/useFundingFo
 import { getPath } from '@/shared/constants'
 
 import { FundingLayout } from '../../layouts/FundingLayout'
+import { FundingDetailsPrivateCommentPrompt } from './sections/FundingDetailsPrivateCommentPrompt'
 import { FundingDetailsBottomContent, FundingDetailsSideContent } from './sections/FundingDetailsSideContent'
 import { FundingDetailsUserComment } from './sections/FundingDetailsUserComment'
 import { FundingDetailsUserEmail } from './sections/FundingDetailsUserEmail'
@@ -27,6 +28,7 @@ export const FundingDetails = () => {
       containerProps={{ spacing: 6 }}
     >
       <FundingDetailsUserComment />
+      <FundingDetailsPrivateCommentPrompt />
       <FundingDetailsUserEmail />
     </FundingLayout>
   )

diff --git a/...ages1/projectFunding/views/fundingDetails/sections/FundingDetailsPrivateCommentPrompt.tsx b/...ages1/projectFunding/views/fundingDetails/sections/FundingDetailsPrivateCommentPrompt.tsx
@@ -0,0 +1,69 @@
+import { ListItem, UnorderedList } from '@chakra-ui/react'
+import { t } from 'i18next'
+
+import { TextArea } from '@/components/ui'
+import { useFundingFormAtom } from '@/modules/project/funding/hooks/useFundingFormAtom'
+import { useRewardsAtom } from '@/modules/project/hooks/useProjectAtom'
+import { CardLayout } from '@/shared/components/layouts'
+import { Body, H1 } from '@/shared/components/typography'
+import { PrivateCommentPrompt } from '@/types'
+
+const privateCommentPromptMap: Record<PrivateCommentPrompt, string> = {
+  [PrivateCommentPrompt.NostrNpub]: t('Provide your Nostr public address (npub)'),
+  [PrivateCommentPrompt.ProjectRewardSpecs]: t(
+    'Specify your desired options for each reward, as mentioned on the rewards page.',
+  ),
+}
+
+export const FundingDetailsPrivateCommentPrompt = () => {
+  const { rewards } = useRewardsAtom()
+
+  const {
+    formState: { privateComment, rewardsByIDAndCount },
+    setTarget,
+  } = useFundingFormAtom()
+
+  const selectedRewards = rewards.filter((reward) => rewardsByIDAndCount && rewardsByIDAndCount[reward.id])
+
+  const mergedPrivateCommentPrompts = Array.from(
+    new Set(selectedRewards.flatMap((reward) => reward.privateCommentPrompts || [])),
+  )
+
+  return (
+    <CardLayout width="100%" mobileDense>
+      <H1 size="2xl" bold>
+        {t('Private message')}
+      </H1>
+      <Body size="md" light>
+        {t(
+          'Send a private message to the creator with a thank you note, feedback, or special requests. Sometimes, if you don’t provide these creator won’t be able to send you your reward.',
+        )}
+      </Body>
+      {mergedPrivateCommentPrompts.length > 0 && (
+        <>
+          <Body size="md">
+            {t('The creator has requested the following information from you. Make sure you add in the message box:')}
+          </Body>
+
+          <UnorderedList>
+            {mergedPrivateCommentPrompts.map((prompt) => (
+              <ListItem key={prompt}>{privateCommentPromptMap[prompt]}</ListItem>
+            ))}
+          </UnorderedList>
+        </>
+      )}
+      <TextArea
+        data-testid="funding-private-comment-input"
+        placeholder={t('Enter your message here...')}
+        fontSize="14px"
+        resize="none"
+        value={privateComment}
+        maxLength={280}
+        minHeight="128px"
+        name="privateComment"
+        backgroundColor={'utils.pbg'}
+        onChange={setTarget}
+      />
+    </CardLayout>
+  )
+}
diff --git a/src/modules/project/pages1/projectView/views/rewards/hooks/useProjectRewardForm.ts b/src/modules/project/pages1/projectView/views/rewards/hooks/useProjectRewardForm.ts
@@ -46,15 +46,7 @@ const rewardFormSchema = (soldAmount: number) =>
       .typeError('Price is required')
       .required('Price is required')
       .min(0.01, 'Price must be greater than 0'),
-    maxClaimable: yup
-      .number()
-      .nullable()
-      .transform((value) => (isNaN(value) ? null : value))
-      .min(0, 'Limited Edition must be greater than or equal to 0')
-      .test('min-sold-amount', 'Limited edition must be at minimum the amount sold', function (value) {
-        return value !== null && value !== undefined && value >= soldAmount
-      })
-      .transform((value) => (value === null ? null : Math.round(value))),
+    maxClaimable: yup.number().nullable(),
     images: yup.array().of(yup.string()).max(MAX_REWARD_IMAGES, `Maximum ${MAX_REWARD_IMAGES} images allowed`),
     hasShipping: yup.boolean(),
     isAddon: yup.boolean(),