Integration with Stripe for premium features + some new features

app/atoms/custom-fields.new.ts

@@ -0,0 +1,9 @@
+import type { ChangeEvent } from "react";
+import { atom } from "jotai";
+
+export const titleAtom = atom("Untitled custom field");
+export const updateTitleAtom = atom(
+  null,
+  (_get, set, event: ChangeEvent<HTMLInputElement>) =>
+    set(titleAtom, event.target.value)
+);

app/components/assets/custom-fields-inputs.tsx

@@ -0,0 +1,83 @@
+import type { CustomField } from "@prisma/client";
+import { Link, useLoaderData, useNavigation } from "@remix-run/react";
+import type { Zorm } from "react-zorm";
+import type { z } from "zod";
+import type { loader } from "~/routes/_layout+/assets.$assetId_.edit";
+import { isFormProcessing } from "~/utils";
+import { zodFieldIsRequired } from "~/utils/zod";
+import FormRow from "../forms/form-row";
+import Input from "../forms/input";
+import { SearchIcon } from "../icons";
+import { Button } from "../shared";
+
+export default function AssetCustomFields({
+  zo,
+  schema,
+}: {
+  zo: Zorm<z.ZodObject<any, any, any>>;
+  schema: z.ZodObject<any, any, any>;
+}) {
+  /** Get the custom fields from the loader */
+  const { customFields } = useLoaderData();
+
+  const { customFields: customFieldsValues } =
+    useLoaderData<typeof loader>()?.asset || [];
+
+  const navigation = useNavigation();
+  const disabled = isFormProcessing(navigation.state);
+
+  return (
+    <div className="border-b pb-6">
+      <div className="mb-6 border-b pb-5">
+        <h2 className="mb-1 text-[18px] font-semibold">Custom Fields</h2>
+        <Link
+          to="/settings/custom-fields"
+          className="font-medium text-primary-600"
+        >
+          Manage custom fields
+        </Link>
+      </div>
+      {customFields.length > 0 ? (
+        customFields.map((field: CustomField) => (
+          <FormRow
+            key={field.id}
+            rowLabel={field.name}
+            subHeading={field.helpText ? <p>{field.helpText}</p> : undefined}
+            className="border-b-0"
+            required={zodFieldIsRequired(schema.shape[`cf-${field.id}`])}
+          >
+            <Input
+              hideLabel
+              type={field.type.toLowerCase()}
+              label={field.name}
+              name={`cf-${field.id}`}
+              error={zo.errors[`cf-${field.id}`]()?.message}
+              disabled={disabled}
+              defaultValue={
+                customFieldsValues?.find(
+                  (cfv) => cfv.customFieldId === field.id
+                )?.value || ""
+              }
+              className="w-full"
+              required={zodFieldIsRequired(schema.shape[`cf-${field.id}`])}
+            />
+          </FormRow>
+        ))
+      ) : (
+        <div>
+          <div className=" mx-auto max-w-[640px] rounded-xl border border-gray-300 bg-white px-5 py-10 text-center">
+            <div>
+              <div className="mb-4 inline-flex items-center justify-center rounded-full border-8 border-solid border-gray-50 bg-gray-100 p-2 text-gray-600">
+                <SearchIcon />
+              </div>
+              <h4 className="mb-6 text-base">No active custom fields</h4>
+              <Button to="/settings/custom-fields/new" variant="primary">
+                Create custom fields
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/components/assets/export-button.tsx

@@ -0,0 +1,29 @@
+import { useLoaderData } from "@remix-run/react";
+import type { loader } from "~/routes/_layout+/assets._index";
+import { PremiumFeatureButton } from "../subscription/premium-feature-button";
+
+export const ExportButton = ({
+  canExportAssets,
+}: {
+  canExportAssets: boolean;
+}) => {
+  const { totalItems } = useLoaderData<typeof loader>();
+  return (
+    <PremiumFeatureButton
+      canUseFeature={canExportAssets}
+      buttonContent={{
+        title: "Export",
+        message: "Exporting is not available on the free tier of shelf.",
+      }}
+      buttonProps={{
+        to: `export/assets-${new Date().toISOString().slice(0, 10)}.csv`,
+        variant: "secondary",
+        role: "link",
+        download: true,
+        reloadDocument: true,
+        disabled: !canExportAssets || totalItems === 0,
+        title: totalItems === 0 ? "No assets to export" : "Export assets",
+      }}
+    />
+  );
+};

app/components/assets/form.tsx

@@ -1,13 +1,17 @@
-import type { Asset, Qr } from "@prisma/client";
-import { Form, Link, useNavigation } from "@remix-run/react";
+import type { Asset, CustomField, Qr } from "@prisma/client";
+import { Form, Link, useLoaderData, useNavigation } from "@remix-run/react";
 import { useAtom, useAtomValue } from "jotai";
 import type { Tag } from "react-tag-autocomplete";
 import { useZorm } from "react-zorm";
 import { z } from "zod";
 import { updateTitleAtom } from "~/atoms/assets.new";
 import { fileErrorAtom, validateFileAtom } from "~/atoms/file";
 import { isFormProcessing } from "~/utils";
+
+import { mergedSchema } from "~/utils/custom-field-schema";
 import { zodFieldIsRequired } from "~/utils/zod";
+import AssetCustomFields from "./custom-fields-inputs";
+
 import { CategorySelect } from "../category/category-select";
 import FormRow from "../forms/form-row";
 import Input from "../forms/input";
@@ -47,7 +51,27 @@ export const AssetForm = ({
   tags,
 }: Props) => {
   const navigation = useNavigation();
-  const zo = useZorm("NewQuestionWizardScreen", NewAssetFormSchema);
+
+  const { customFields } = useLoaderData();
+
+  // console.log(customFields);
+
+  const FormSchema = mergedSchema({
+    baseSchema: NewAssetFormSchema,
+    customFields: customFields.map(
+      (cf: CustomField) =>
+        cf.active && {
+          id: cf.id,
+          name: cf.name,
+          helpText: cf?.helpText || "",
+          required: cf.required,
+          type: cf.type.toLowerCase() as "text" | "number" | "date" | "boolean",
+        }
+    ),
+  });
+
+  const zo = useZorm("NewQuestionWizardScreen", FormSchema);
+
   const disabled = isFormProcessing(navigation.state);
 
   const fileError = useAtomValue(fileErrorAtom);
@@ -67,7 +91,7 @@ export const AssetForm = ({
       <FormRow
         rowLabel={"Name"}
         className="border-b-0 pb-[10px]"
-        required={zodFieldIsRequired(NewAssetFormSchema.shape.title)}
+        required={zodFieldIsRequired(FormSchema.shape.title)}
       >
         <Input
           label="Name"
@@ -79,7 +103,7 @@ export const AssetForm = ({
           onChange={updateTitle}
           className="w-full"
           defaultValue={title || ""}
-          required={zodFieldIsRequired(NewAssetFormSchema.shape.title)}
+          required={zodFieldIsRequired(FormSchema.shape.title)}
         />
       </FormRow>
 
@@ -111,7 +135,7 @@ export const AssetForm = ({
           </p>
         }
         className="border-b-0 pb-[10px]"
-        required={zodFieldIsRequired(NewAssetFormSchema.shape.category)}
+        required={zodFieldIsRequired(FormSchema.shape.category)}
       >
         <CategorySelect defaultValue={category || undefined} />
       </FormRow>
@@ -127,7 +151,7 @@ export const AssetForm = ({
           </p>
         }
         className="border-b-0 py-[10px]"
-        required={zodFieldIsRequired(NewAssetFormSchema.shape.tags)}
+        required={zodFieldIsRequired(FormSchema.shape.tags)}
       >
         <TagsAutocomplete existingTags={tags || []} />
       </FormRow>
@@ -144,7 +168,7 @@ export const AssetForm = ({
           </p>
         }
         className="pt-[10px]"
-        required={zodFieldIsRequired(NewAssetFormSchema.shape.newLocationId)}
+        required={zodFieldIsRequired(FormSchema.shape.newLocationId)}
       >
         <LocationSelect />
       </FormRow>
@@ -158,7 +182,8 @@ export const AssetForm = ({
               asset’s overview page. You can always change it.
             </p>
           }
-          required={zodFieldIsRequired(NewAssetFormSchema.shape.description)}
+          className="border-b-0"
+          required={zodFieldIsRequired(FormSchema.shape.description)}
         >
           <Input
             inputType="textarea"
@@ -169,12 +194,14 @@ export const AssetForm = ({
             disabled={disabled}
             data-test-id="assetDescription"
             className="w-full"
-            required={zodFieldIsRequired(NewAssetFormSchema.shape.description)}
+            required={zodFieldIsRequired(FormSchema.shape.description)}
           />
         </FormRow>
       </div>
 
-      <div className="text-right">
+      <AssetCustomFields zo={zo} schema={FormSchema} />
+
+      <div className="pt-6 text-right">
         <Button type="submit" disabled={disabled}>
           {disabled ? <Spinner /> : "Save"}
         </Button>

app/components/assets/import-button.tsx

@@ -0,0 +1,20 @@
+import { PremiumFeatureButton } from "../subscription/premium-feature-button";
+
+export const ImportButton = ({
+  canImportAssets,
+}: {
+  canImportAssets: boolean;
+}) => (
+  <PremiumFeatureButton
+    canUseFeature={canImportAssets}
+    buttonContent={{
+      title: "Import",
+      message: "Importing is not available on the free tier of shelf.",
+    }}
+    buttonProps={{
+      to: `import`,
+      variant: "secondary",
+      role: "link",
+    }}
+  />
+);