Next release

src/components/common/cart/CartAuthMode.tsx

@@ -50,11 +50,9 @@ export const CartAuthMode: Component<Props> = (props) => {
                     <button
                         class="btn-secondary max-w-1/2 inline"
                         onclick={props.checkoutAsGuest}
-                        // TODO: INTERNATIONALIZE
-                        aria-label="checkout as guest"
+                        aria-label={t("buttons.checkoutAsGuest")}
                     >
-                        {/* TODO: Internationalize*/}
-                        Checkout as Guest
+                        {t("buttons.checkoutAsGuest")}
                     </button>
                     <form class="max-w-1/2 inline">
                         <button

src/components/home/Home.tsx

@@ -51,6 +51,7 @@ export const Home: Component = () => {
             .select("*")
             .order("id", { ascending: true })
             .eq("listing_status", true)
+            .eq("draft_status", false)
             .limit(8);
         if (!data) {
             alert("No posts available.");
@@ -89,6 +90,7 @@ export const Home: Component = () => {
             .from("sellerposts")
             .select("*")
             .eq("listing_status", true)
+            .eq("draft_status", false)
             .order("id", { ascending: false })
             .limit(8);
 

src/components/posts/CreateNewPost.tsx

@@ -21,6 +21,7 @@ import stripe from "../../lib/stripe";
 import Dropdown from "@components/common/Dropdown";
 import { UploadFiles } from "@components/posts/UploadResource";
 import tinymce from "tinymce";
+import { sortResourceTypes } from "@lib/utils/resourceSort";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
@@ -194,6 +195,7 @@ export const CreateNewPost: Component = () => {
     const [isAdmin, setIsAdmin] = createSignal<boolean>(false);
     const [isHosted, setIsHosted] = createSignal<boolean>(false);
     const [resourceLinks, setResourceLinks] = createSignal<string>("");
+    const [draftStatus, setDraftStatus] = createSignal<boolean>(false);
 
     onMount(() => {
         window.addEventListener("storage", (event) => {
@@ -290,6 +292,7 @@ export const CreateNewPost: Component = () => {
                 if (error) {
                     console.log("supabase error: " + error.message);
                 } else {
+                    sortResourceTypes(resourceType);
                     resourceType.forEach((type) => {
                         setResourceTypes([
                             ...resourceTypes(),
@@ -380,12 +383,25 @@ export const CreateNewPost: Component = () => {
         }
     });
 
+    function saveAsDraft(e: Event) {
+        e.preventDefault();
+        setDraftStatus(true);
+
+        const button = e.currentTarget as HTMLFormElement;
+        const form = button.closest("form") as HTMLFormElement;
+
+        if (form) {
+            form.requestSubmit();
+        }
+    }
+
     async function submit(e: SubmitEvent) {
         e.preventDefault();
 
         const formData = new FormData(e.target as HTMLFormElement);
         formData.append("access_token", session()?.access_token!);
         formData.append("refresh_token", session()?.refresh_token!);
+        formData.append("draft_status", JSON.stringify(draftStatus()));
         formData.append("lang", lang);
         if (isFree()) {
             setPrice("0");
@@ -1338,6 +1354,17 @@ export const CreateNewPost: Component = () => {
 
                 <br />
                 <div class="flex justify-center">
+                    <button
+                        id="save-as-draft"
+                        class={`btn-primary text-2xl`}
+                        onclick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            saveAsDraft(e);
+                        }}
+                    >
+                        Save as Draft
+                    </button>
                     <button
                         id="post"
                         disabled={!allRequirementsMet()}

src/components/posts/EditPost.tsx

@@ -17,6 +17,7 @@ import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 import { TinyComp } from "./TinyComp";
 import { createStore } from "solid-js/store";
 import type { Post } from "@lib/types";
+import { sortResourceTypes } from "@lib/utils/resourceSort";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
@@ -74,6 +75,9 @@ export const EditPost: Component<Props> = (props: Props) => {
     const [resourceExpanded, setResourceExpanded] =
         createSignal<boolean>(false);
     const [secular, setSecular] = createSignal<boolean>(false);
+    const [draftStatus, setDraftStatus] = createSignal<boolean>(false);
+    const [startDraftStatus, setStartDraftStatus] =
+        createSignal<boolean>(false);
 
     onMount(async () => {
         console.log(props.post);
@@ -94,6 +98,8 @@ export const EditPost: Component<Props> = (props: Props) => {
         setSubjectPick(props.post.product_subject);
         setResourceTypesPick(props.post?.resource_types!);
         setSecular(props.post.secular);
+        setDraftStatus(props.post.draft_status);
+        setStartDraftStatus(props.post.draft_status);
 
         if (props.post?.image_urls) {
             setImageUrl(props.post?.image_urls.split(","));
@@ -136,6 +142,7 @@ export const EditPost: Component<Props> = (props: Props) => {
                 if (error) {
                     console.log("supabase error: " + error.message);
                 } else {
+                    sortResourceTypes(resourceType);
                     resourceType.forEach((type) => {
                         setResourceTypes([
                             ...resourceTypes(),
@@ -199,6 +206,32 @@ export const EditPost: Component<Props> = (props: Props) => {
         }
     });
 
+    function saveAsDraft(e: Event) {
+        e.preventDefault();
+        e.stopPropagation();
+        setDraftStatus(true);
+
+        const button = e.currentTarget as HTMLFormElement;
+        const form = button.closest("form") as HTMLFormElement;
+
+        if (form) {
+            form.requestSubmit();
+        }
+    }
+
+    function listResourcePost(e: Event) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const button = e.currentTarget as HTMLFormElement;
+        const form = button.closest("form") as HTMLFormElement;
+
+        if (form) {
+            setDraftStatus(false);
+            form.requestSubmit();
+        }
+    }
+
     async function submit(e: SubmitEvent) {
         e.preventDefault();
 
@@ -217,6 +250,7 @@ export const EditPost: Component<Props> = (props: Props) => {
         tmpDiv.innerHTML = formData.get("Content") as string;
         let description = tmpDiv.textContent || tmpDiv.innerText || "";
         formData.append("description", description);
+        formData.append("draft_status", JSON.stringify(draftStatus()));
 
         if (subjectPick() !== undefined) {
             formData.append("subject", JSON.stringify(subjectPick()));
@@ -440,6 +474,49 @@ export const EditPost: Component<Props> = (props: Props) => {
         }
     }
 
+    function postButton() {
+        if (startDraftStatus() === false) {
+            return (
+                <>
+                    <button
+                        id="post"
+                        disabled={!allRequirementsMet()}
+                        class={`text-2xl ${
+                            allRequirementsMet()
+                                ? "btn-primary"
+                                : "btn-disabled"
+                        }`}
+                    >
+                        {t("buttons.updateResource")}
+                    </button>
+                </>
+            );
+        } else if (startDraftStatus() === true) {
+            return (
+                <>
+                    <button
+                        id="post"
+                        disabled={!allRequirementsMet()}
+                        class={`text-2xl ${
+                            allRequirementsMet()
+                                ? "btn-primary"
+                                : "btn-disabled"
+                        }`}
+                        onclick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            listResourcePost(e);
+                        }}
+                    >
+                        {t("buttons.listResource")}
+                    </button>
+                </>
+            );
+        } else {
+            return <></>;
+        }
+    }
+
     return (
         <div>
             <form onSubmit={submit}>
@@ -1064,16 +1141,17 @@ export const EditPost: Component<Props> = (props: Props) => {
                 <br />
                 <div class="flex justify-center">
                     <button
-                        id="post"
-                        disabled={!allRequirementsMet()}
-                        class={`text-2xl ${
-                            allRequirementsMet()
-                                ? "btn-primary"
-                                : "btn-disabled"
-                        }`}
+                        id="save-as-draft"
+                        class={`btn-primary text-2xl`}
+                        onclick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            saveAsDraft(e);
+                        }}
                     >
-                        {t("buttons.updateResource")}
+                        Save as Draft
                     </button>
+                    {postButton()}
                 </div>
             </form>
         </div>