Merge pull request #103 from MAGICGrants/perk-fixes

Perk fixes

.env.example

@@ -4,6 +4,7 @@ DATABASE_URL="postgresql://magic:magic@magic-postgres:5432/magic?schema=public"
 NEXT_PUBLIC_STRAPI_URL="http://172.17.0.1:1337"
 STRAPI_API_URL="http://172.17.0.1:1337/api"
 STRAPI_API_TOKEN=""
+STRAPI_CDN_HOST=""
 
 NEXTAUTH_URL="http://localhost:3000"
 NEXTAUTH_URL_INTERNAL="http://localhost:3000"

components/DonationFormModal.tsx

@@ -60,6 +60,7 @@ const DonationFormModal: React.FC<Props> = ({ project, openRegisterModal, close
       name: '',
       amount: '' as unknown as number, // a trick to get trigger to work when amount is empty
       taxDeductible: 'no',
+      givePointsBack: 'no',
     },
     mode: 'all',
   })
@@ -251,49 +252,51 @@ const DonationFormModal: React.FC<Props> = ({ project, openRegisterModal, close
             )}
           />
 
-          <FormField
-            control={form.control}
-            name="givePointsBack"
-            render={({ field }) => (
-              <FormItem className="space-y-3 leading-5">
-                <FormLabel>
-                  Would you like to receive MAGIC Grants points back for your donation? The points
-                  can be redeemed for various donation perks as a thank you for supporting our
-                  mission.
-                </FormLabel>
+          {isAuthed && (
+            <FormField
+              control={form.control}
+              name="givePointsBack"
+              render={({ field }) => (
+                <FormItem className="space-y-3 leading-5">
+                  <FormLabel>
+                    Would you like to receive MAGIC Grants points back for your donation? The points
+                    can be redeemed for various donation perks as a thank you for supporting our
+                    mission.
+                  </FormLabel>
 
-                <FormControl>
-                  <RadioGroup
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                    className="flex flex-col"
-                  >
-                    <FormItem className="flex items-start space-x-3 space-y-0">
-                      <FormControl className="flex-shrink-0">
-                        <RadioGroupItem value="yes" />
-                      </FormControl>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                      className="flex flex-col"
+                    >
+                      <FormItem className="flex items-start space-x-3 space-y-0">
+                        <FormControl className="flex-shrink-0">
+                          <RadioGroupItem value="yes" />
+                        </FormControl>
 
-                      <FormLabel className="font-normal text-gray-700">
-                        Yes, give me perks! This will reduce the donation amount by 10%, the
-                        approximate value of the points when redeemed for goods/services.
-                      </FormLabel>
-                    </FormItem>
+                        <FormLabel className="font-normal text-gray-700">
+                          Yes, give me perks! This will reduce the donation amount by 10%, the
+                          approximate value of the points when redeemed for goods/services.
+                        </FormLabel>
+                      </FormItem>
 
-                    <FormItem className="flex items-start space-x-3 space-y-0">
-                      <FormControl>
-                        <RadioGroupItem value="no" />
-                      </FormControl>
+                      <FormItem className="flex items-start space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="no" />
+                        </FormControl>
 
-                      <FormLabel className="font-normal text-gray-700">
-                        No, use my full contribution toward your mission.
-                      </FormLabel>
-                    </FormItem>
-                  </RadioGroup>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+                        <FormLabel className="font-normal text-gray-700">
+                          No, use my full contribution toward your mission.
+                        </FormLabel>
+                      </FormItem>
+                    </RadioGroup>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
 
           {amount > 500 && taxDeductible === 'yes' && (
             <Alert>

components/PerkCard.tsx

@@ -31,7 +31,11 @@ const PerkCard: React.FC<Props> = ({ perk, balance }) => {
         <div className="flex h-52 w-full">
           <Image
             alt={perk.name}
-            src={env.NEXT_PUBLIC_STRAPI_URL + perk.images[0]!.formats.medium.url}
+            src={
+              process.env.NODE_ENV !== 'production'
+                ? env.NEXT_PUBLIC_STRAPI_URL + perk.images[0].formats.medium.url
+                : perk.images[0].formats.medium.url
+            }
             width={400}
             height={400}
             style={{ objectFit: 'contain' }}

components/PerkPurchaseFormModal.tsx

@@ -35,6 +35,7 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from './ui/carousel'
+import CustomLink from './CustomLink'
 
 type Props = { perk: StrapiPerkPopulated; balance: number; close: () => void }
 
@@ -268,6 +269,11 @@ function PerkPurchaseFormModal({ perk, balance, close }: Props) {
               <div className="flex flex-col">
                 <h1 className="font-semibold">{perk.name}</h1>
                 {!costEstimate && <p className="text-muted-foreground">{perk.description}</p>}
+                {!costEstimate && perk.productDetailsUrl && (
+                  <CustomLink className="text-xs" href={perk.productDetailsUrl}>
+                    View product details
+                  </CustomLink>
+                )}
                 {!!costEstimate && printfulSyncVariantId && (
                   <p className="text-muted-foreground">
                     {

env.mjs

@@ -15,10 +15,7 @@ export const env = createEnv({
 
     STRAPI_API_URL: z.string().url(),
     STRAPI_API_TOKEN: z.string().length(256),
-    STRAPI_CDN_PROTOCOL: z.string().min(1),
-    STRAPI_CDN_HOST: z.string().min(1),
-    STRAPI_CDN_PORT: z.string().min(1),
-    STRAPI_CDN_PATHNAME: z.string().min(1),
+    STRAPI_CDN_HOST: z.string().min(1).optional(),
 
     SMTP_HOST: z.string().min(1),
     SMTP_PORT: z.string().min(1),
@@ -83,6 +80,7 @@ export const env = createEnv({
     NEXT_PUBLIC_STRAPI_URL: process.env.NEXT_PUBLIC_STRAPI_URL,
     STRAPI_API_URL: process.env.STRAPI_API_URL,
     STRAPI_API_TOKEN: process.env.STRAPI_API_TOKEN,
+    STRAPI_CDN_HOST: process.env.STRAPI_CDN_HOST,
 
     SMTP_HOST: process.env.SMTP_HOST,
     SMTP_PORT: process.env.SMTP_PORT,

next.config.js

@@ -4,10 +4,7 @@ const nextConfig = {
   output: 'standalone',
   images: {
     remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'magic-strapi.nbg1.your-objectstorage.com',
-      },
+      { hostname: process.env.STRAPI_CDN_HOST || 'magic-strapi.nbg1.your-objectstorage.com' },
     ],
   },
   webpack: (config, options) => {

server/types.ts

@@ -83,6 +83,7 @@ export type StrapiPerk = {
   fundSlugWhitelist: string | null
   needsShippingAddress: boolean
   printfulProductId: string | null
+  productDetailsUrl: string | null
 }
 
 export type StrapiPerkPopulated = StrapiPerk & {