New widget fixes (#312)

* Added cssId * Domain verification logic changed, Other fixes --------- Co-authored-by: Rajat Saxena <[email protected]>
codelitdev · Jan 31, 2024 · 4662d8c · 4662d8c
1 parent 4504035
commit 4662d8c
Show file tree

Hide file tree

Showing 47 changed files with 860 additions and 359 deletions.
diff --git a/apps/web/middlewares/verify-domain.ts b/apps/web/middlewares/verify-domain.ts
@@ -21,23 +21,25 @@ const getDomainBasedOnCustomDomain = async (
     return await DomainModel.findOne({ customDomain, deleted: false });
 };
 
-const getDomain = async ({
-    hostName,
-    domainName,
-}: {
-    hostName: string;
-    domainName: string;
-}): Promise<Domain | null> => {
-    const domainBoundToLiveWebsite = new RegExp(`${process.env.DOMAIN}$`);
-
-    if (
-        process.env.NODE_ENV === "production" &&
-        !domainBoundToLiveWebsite.test(hostName)
-    ) {
-        return await getDomainBasedOnCustomDomain(hostName);
-    } else {
-        return await getDomainBasedOnSubdomain(domainName);
+const getDomain = async (hostName: string): Promise<Domain | null> => {
+    const isProduction = process.env.NODE_ENV === "production";
+    const isSubdomain = hostName.endsWith(`.${process.env.DOMAIN}`);
+    console.log(
+        "getDomain:1",
+        isProduction,
+        isSubdomain,
+        hostName,
+        process.env.DOMAIN,
+    );
+
+    if (isProduction && (hostName === process.env.DOMAIN || !isSubdomain)) {
+        console.log("getDomain:2", "getDomainBasedOnCustomDomain");
+        return getDomainBasedOnCustomDomain(hostName);
     }
+
+    console.log("getDomain:2", "getDomainBasedOnSubdomain");
+    const [subdomain] = hostName?.split(".");
+    return getDomainBasedOnSubdomain(subdomain);
 };
 
 const hasValidSubscription = async (email: string): Promise<boolean> => {
@@ -62,30 +64,27 @@ export default async function verifyDomain(
     let domain: Domain | null;
 
     if (process.env.MULTITENANT === "true") {
-        const domainName = req.headers.host?.split(".")[0];
+        const { host } = req.headers;
 
-        if (!domainName) {
+        if (!host) {
             throw new Error(responses.domain_missing);
         }
 
-        domain = await getDomain({
-            hostName: req.headers.host || "",
-            domainName,
-        });
+        domain = await getDomain(host);
 
         if (!domain) {
             return res.status(404).json({
-                message: `${responses.domain_doesnt_exist}: ${domainName}`,
+                message: `${responses.domain_doesnt_exist}: ${host?.split(
+                    ".",
+                )[0]}`,
             });
-            //throw new Error(`${responses.domain_doesnt_exist}: ${domainName}`);
         }
 
         const validSubscription = await hasValidSubscription(domain.email);
         if (!validSubscription) {
             return res
                 .status(404)
                 .json({ message: responses.not_valid_subscription });
-            //throw new Error(responses.not_valid_subscription);
         }
     } else {
         domain = await DomainModel.findOne({

diff --git a/packages/common-widgets/src/content/admin-widget.tsx b/packages/common-widgets/src/content/admin-widget.tsx
@@ -9,7 +9,13 @@ import {
     TextEditor,
     Form,
     FormField,
+    ContentPaddingSelector,
+    CssIdField,
 } from "@courselit/components-library";
+import {
+    verticalPadding as defaultVerticalPadding,
+    horizontalPadding as defaultHorizontalPadding,
+} from "./defaults";
 
 interface AdminWidgetProps {
     settings: Settings;
@@ -33,6 +39,13 @@ export default function AdminWidget({ settings, onChange }: AdminWidgetProps) {
     const [badgeForegroundColor, setBadgeForegroundColor] = useState(
         settings.badgeForegroundColor,
     );
+    const [horizontalPadding, setHorizontalPadding] = useState<number>(
+        settings.horizontalPadding || defaultHorizontalPadding,
+    );
+    const [verticalPadding, setVerticalPadding] = useState<number>(
+        settings.verticalPadding || defaultVerticalPadding,
+    );
+    const [cssId, setCssId] = useState(settings.cssId);
 
     useEffect(() => {
         onChange({
@@ -43,6 +56,9 @@ export default function AdminWidget({ settings, onChange }: AdminWidgetProps) {
             foregroundColor,
             badgeBackgroundColor,
             badgeForegroundColor,
+            horizontalPadding,
+            verticalPadding,
+            cssId,
         });
     }, [
         title,
@@ -52,68 +68,78 @@ export default function AdminWidget({ settings, onChange }: AdminWidgetProps) {
         foregroundColor,
         badgeBackgroundColor,
         badgeForegroundColor,
+        horizontalPadding,
+        verticalPadding,
+        cssId,
     ]);
 
     return (
-        <div className="flex flex-col">
-            <div className="mb-4">
+        <div className="flex flex-col gap-4 mb-4">
+            <AdminWidgetPanel title="Header">
                 <Form>
-                    <AdminWidgetPanel title="Header">
-                        <FormField
-                            label="Title"
-                            value={title}
-                            onChange={(e) => setTitle(e.target.value)}
-                        />
-                        <div>
-                            <p className="mb-1 font-medium">Description</p>
-                            <TextEditor
-                                initialContent={description}
-                                onChange={(state: any) => setDescription(state)}
-                                showToolbar={false}
-                            />
-                        </div>
-                        <Select
-                            title="Header alignment"
-                            value={headerAlignment}
-                            options={[
-                                { label: "Left", value: "left" },
-                                { label: "Center", value: "center" },
-                            ]}
-                            onChange={(value: Alignment) =>
-                                setHeaderAlignment(value)
-                            }
-                        />
-                    </AdminWidgetPanel>
-                </Form>
-            </div>
-            <div className="mb-4">
-                <AdminWidgetPanel title="Design">
-                    <ColorSelector
-                        title="Background color"
-                        value={backgroundColor || "inherit"}
-                        onChange={(value?: string) => setBackgroundColor(value)}
+                    <FormField
+                        label="Title"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
                     />
-                    <ColorSelector
-                        title="Text color"
-                        value={foregroundColor || "inherit"}
-                        onChange={(value?: string) => setForegroundColor(value)}
-                    />
-                    <ColorSelector
-                        title="Badge color"
-                        value={badgeBackgroundColor || "inherit"}
-                        onChange={(value?: string) =>
-                            setBadgeBackgroundColor(value)
-                        }
-                    />
-                    <ColorSelector
-                        title="Badge text color"
-                        value={badgeForegroundColor || "inherit"}
-                        onChange={(value?: string) =>
-                            setBadgeForegroundColor(value)
-                        }
+                </Form>
+                <div>
+                    <p className="mb-1 font-medium">Description</p>
+                    <TextEditor
+                        initialContent={description}
+                        onChange={(state: any) => setDescription(state)}
+                        showToolbar={false}
                     />
-                </AdminWidgetPanel>
-            </div>
+                </div>
+                <Select
+                    title="Header alignment"
+                    value={headerAlignment}
+                    options={[
+                        { label: "Left", value: "left" },
+                        { label: "Center", value: "center" },
+                    ]}
+                    onChange={(value: Alignment) => setHeaderAlignment(value)}
+                />
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Design">
+                <ColorSelector
+                    title="Background color"
+                    value={backgroundColor || "inherit"}
+                    onChange={(value?: string) => setBackgroundColor(value)}
+                />
+                <ColorSelector
+                    title="Text color"
+                    value={foregroundColor || "inherit"}
+                    onChange={(value?: string) => setForegroundColor(value)}
+                />
+                <ColorSelector
+                    title="Badge color"
+                    value={badgeBackgroundColor || "inherit"}
+                    onChange={(value?: string) =>
+                        setBadgeBackgroundColor(value)
+                    }
+                />
+                <ColorSelector
+                    title="Badge text color"
+                    value={badgeForegroundColor || "inherit"}
+                    onChange={(value?: string) =>
+                        setBadgeForegroundColor(value)
+                    }
+                />
+                <ContentPaddingSelector
+                    value={horizontalPadding}
+                    min={50}
+                    onChange={setHorizontalPadding}
+                />
+                <ContentPaddingSelector
+                    variant="vertical"
+                    value={verticalPadding}
+                    onChange={setVerticalPadding}
+                />
+            </AdminWidgetPanel>
+            <AdminWidgetPanel title="Advanced">
+                <CssIdField value={cssId} onChange={setCssId} />
+            </AdminWidgetPanel>
         </div>
     );
 }
diff --git a/packages/common-widgets/src/content/defaults.ts b/packages/common-widgets/src/content/defaults.ts
@@ -0,0 +1,2 @@
+export const horizontalPadding = 100;
+export const verticalPadding = 16;
diff --git a/packages/common-widgets/src/content/settings.ts b/packages/common-widgets/src/content/settings.ts
@@ -8,4 +8,7 @@ export default interface Settings extends WidgetDefaultSettings {
     foregroundColor?: string;
     badgeBackgroundColor?: string;
     badgeForegroundColor?: string;
+    horizontalPadding: number;
+    verticalPadding: number;
+    cssId?: string;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const horizontalPadding = 100;
		export const verticalPadding = 16;