@wix/ditto-codegen-public 1.0.0

package/dist/examples-apps/site-popup/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "site-popup",
+  "version": "1.0.0",
+  "dependencies": {
+    "@tanstack/react-query": "^4.36.1",
+    "@wix/app-management": "^1.0.0",
+    "@wix/dashboard": "^1.3.21",
+    "@wix/design-system": "^1.111.0",
+    "@wix/essentials": "^0.1.4",
+    "@wix/site-site": "^1.2.0",
+    "tailwindcss": "^3.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.0.0",
+    "@types/react-dom": "^16.0.0",
+    "@wix/cli": "^1.0.0",
+    "@wix/cli-app": "^1.0.0",
+    "@wix/sdk-types": "^1.0.0",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.35",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "typescript": "^5.3.3"
+  },
+  "scripts": {
+    "build": "wix app build",
+    "release": "wix app release",
+    "dev": "wix app dev",
+    "preview": "wix app preview",
+    "logs": "wix app logs",
+    "generate": "wix app generate",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/dist/examples-apps/site-popup/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  };
+  

package/dist/examples-apps/site-popup/src/components/activation-configuration.tsx

@@ -0,0 +1,49 @@
+import React, { type FC } from 'react';
+import { Box, RadioGroup } from '@wix/design-system';
+import { ActivationMode, ActivationOptions } from '../types.js';
+import { DataRangePicker } from './date-range-picker.js';
+
+interface Props {
+  activationOptions: ActivationOptions;
+  onChange: (activationOptions: ActivationOptions) => void;
+}
+
+export const ActivationConfiguration: FC<Props> = ({
+  onChange,
+  activationOptions,
+}) => {
+  return (
+    <Box gap={3} direction="vertical" marginTop={1}>
+      <RadioGroup
+        name="Popup Activation"
+        display="horizontal"
+        value={activationOptions.activationMode}
+        onChange={(val) =>
+          onChange({
+            ...activationOptions,
+            activationMode: val as ActivationMode,
+          })
+        }
+      >
+        <RadioGroup.Radio value="active">Active</RadioGroup.Radio>
+        <RadioGroup.Radio value="timed">Timed</RadioGroup.Radio>
+        <RadioGroup.Radio value="disabled">Disabled</RadioGroup.Radio>
+      </RadioGroup>
+      {activationOptions.activationMode == 'timed' && (
+        <DataRangePicker
+          startDate={Number(
+            activationOptions.startDate || new Date().getTime()
+          )}
+          endDate={Number(activationOptions.endDate || new Date().getTime())}
+          onChange={(startDate, endDate) =>
+            onChange({
+              activationMode: 'timed',
+              startDate: startDate.toString(),
+              endDate: endDate.toString(),
+            })
+          }
+        />
+      )}
+    </Box>
+  );
+};

package/dist/examples-apps/site-popup/src/components/close-button.tsx

@@ -0,0 +1,30 @@
+import React, { type FC } from 'react';
+
+interface Props {
+  onClick?: () => void;
+}
+
+export const CloseButton: FC<Props> = ({ onClick }) => {
+  return (
+    <div className="flex justify-end p-2">
+      <button
+        onClick={onClick}
+        type="button"
+        className="bg-transparent bg-gray-200 text-slate-200 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center"
+      >
+        <svg
+          className="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </button>
+    </div>
+  );
+};

package/dist/examples-apps/site-popup/src/components/date-range-picker.tsx

@@ -0,0 +1,49 @@
+import React, { type FC } from 'react';
+import { Box, Cell, DatePicker, FormField, Layout } from '@wix/design-system';
+
+interface Props {
+  startDate: number;
+  endDate: number;
+  onChange?: (startDate: number, endDate: number) => void;
+}
+
+export const DataRangePicker: FC<Props> = ({
+  onChange,
+  startDate,
+  endDate,
+}) => {
+  return (
+    <Layout>
+      <Cell span={6}>
+        <Box gap={2}>
+          <FormField label="Start date">
+            <Box marginTop={1}>
+              <DatePicker
+                width="100%"
+                placeholderText="Select"
+                value={new Date(startDate)}
+                onChange={(value: Date) => onChange?.(value.getTime(), endDate)}
+              />
+            </Box>
+          </FormField>
+        </Box>
+      </Cell>
+      <Cell span={6}>
+        <Box gap={2}>
+          <FormField label="End date">
+            <Box marginTop={1}>
+              <DatePicker
+                width="100%"
+                placeholderText="Select"
+                value={new Date(endDate)}
+                onChange={(value: Date) =>
+                  onChange?.(startDate, value.getTime())
+                }
+              />
+            </Box>
+          </FormField>
+        </Box>
+      </Cell>
+    </Layout>
+  );
+};

package/dist/examples-apps/site-popup/src/components/image-picker.tsx

@@ -0,0 +1,33 @@
+import React, { type FC } from 'react';
+import { Box, Input, TextButton } from '@wix/design-system';
+import { dashboard } from '@wix/dashboard';
+import * as Icons from '@wix/wix-ui-icons-common';
+
+interface Props {
+  imageUrl: string;
+  imageTitle: string;
+  onChange: (imageUrl: string, imageTitle: string) => void;
+}
+
+export const ImagePicker: FC<Props> = ({ onChange, imageTitle }) => {
+  return (
+    <Box gap={3} verticalAlign="middle" marginTop={1}>
+      <Input value={imageTitle} disabled />
+      <TextButton
+        prefixIcon={<Icons.Edit />}
+        onClick={() =>
+          dashboard.openMediaManager().then((response) => {
+            if (response?.items[0]) {
+              onChange(
+                response?.items[0].url || '',
+                response?.items[0].displayName || ''
+              );
+            }
+          })
+        }
+      >
+        Change image
+      </TextButton>
+    </Box>
+  );
+};

package/dist/examples-apps/site-popup/src/components/popup/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/dist/examples-apps/site-popup/src/components/popup/index.tsx

@@ -0,0 +1,71 @@
+import React, { type FC } from 'react';
+import { CloseButton } from '../close-button.js';
+import { SitePopupOptions } from '../../types.js';
+import './index.css';
+
+function formatDateWithLocale(dateInMillis: string, locale: string) {
+  const date = new Date(Number(dateInMillis));
+  const formatter = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+  return formatter.format(date);
+}
+
+export const Popup: FC<
+  SitePopupOptions & {
+  locale: string;
+  onClose?: (hideForever?: boolean) => void;
+}
+> = ({
+       headline,
+       text,
+       imageUrl,
+       imageTitle,
+       onClose,
+       startDate,
+       endDate,
+       locale,
+     }) => {
+  let formattedText = text;
+  if (startDate) {
+    formattedText = formattedText.replace(/{startDate}/g, formatDateWithLocale(startDate, locale));
+  }
+  if (endDate) {
+    formattedText = formattedText.replace(/{endDate}/g, formatDateWithLocale(endDate, locale));
+  }
+  return (
+    <div className="rounded-lg shadow-2xl grid md:grid md:grid-cols-2">
+      <div id="close-btn" className="absolute z-[1000]">
+        <CloseButton onClick={() => onClose?.()} />
+      </div>
+      <div className="p-4 text-center sm:p-6 md:col-span-1 lg:p-8 bg-gray-800 flex flex-col justify-between rounded-l-lg">
+        <div className="relative bottom-0 isolate overflow-hidden px-4 py-24 sm:px-12 xl:py-32">
+          <h4 className="mx-auto max-w-2xl text-center text-3xl font-bold tracking-tight sm:text-4xl text-white">
+            <span style={{font: 'var(--wst-font-style-h4)'}}>{headline}</span>
+          </h4>
+          <p className="mx-auto mt-2 max-w-xl text-center text-lg leading-8 text-gray-300">
+            <span style={{font: 'var(--wst-font-style-body-medium)'}}>{formattedText}</span>
+          </p>
+        </div>
+        <div className="flex justify-center items-center p-4">
+          <button
+            type="button"
+            className="flex-bottom text-sm text-white hover:underline"
+            onClick={() => onClose?.(true)}
+          >
+            <span style={{font: 'var(--wst-font-style-body-small)'}}>Don't show this again</span>
+          </button>
+        </div>
+      </div>
+      <img
+        width="50vw"
+        height="50vh"
+        src={imageUrl}
+        alt={imageTitle}
+        className="h-64 object-cover w-full md:h-full rounded-r-lg"
+      />
+    </div>
+  );
+};

package/dist/examples-apps/site-popup/src/components/site-popup-settings.tsx

@@ -0,0 +1,120 @@
+import React, { type FC } from 'react';
+import {
+  Input,
+  Text,
+  Box,
+  InputArea,
+  Card,
+  FormField,
+  FormFieldProps,
+} from '@wix/design-system';
+import { SitePopupOptions } from '../types.js';
+import { ActivationConfiguration } from './activation-configuration.js';
+import { ImagePicker } from './image-picker.js';
+
+interface Props {
+  options: SitePopupOptions;
+  onChange: (options: SitePopupOptions) => void;
+}
+
+export const SitePopupSettings: FC<Props> = ({ options, onChange }) => {
+  const getFieldStatus = (
+    field: keyof SitePopupOptions
+  ): Partial<FormFieldProps> => {
+    return !options[field]
+      ? {
+          status: 'error',
+          statusMessage: 'Required.',
+        }
+      : {};
+  };
+
+  return (
+    <Box direction="vertical">
+      <Box gap={10} direction="vertical">
+        <Card>
+          <Card.Header
+            title="Settings"
+            subtitle={
+              <Box direction="horizontal">
+                <Text secondary>Customize your site popup appearance.</Text>
+              </Box>
+            }
+          />
+          <Card.Divider />
+          <Card.Content>
+            <Box gap={3} direction="vertical">
+              <Box gap={3} direction="vertical" width={'50%'}>
+                <FormField
+                  labelSize="small"
+                  label="Headline"
+                  {...getFieldStatus('headline')}
+                >
+                  <Input
+                    placeholder="Sale 20% Off"
+                    value={options?.headline}
+                    onChange={(e) =>
+                      onChange({
+                        ...options,
+                        headline: e.currentTarget.value,
+                      })
+                    }
+                  />
+                </FormField>
+                <FormField
+                  labelSize="small"
+                  label="Text"
+                  infoContent={
+                    options.activationMode == 'timed'
+                      ? 'Include the placeholders {startDate} and {endDate} to show the start and end dates, formatted according to the site\'s regional settings.'
+                      : undefined
+                  }
+                  {...getFieldStatus('text')}
+                >
+                  <InputArea
+                    placeholder="Sign up and get 20% off on our Winter Sale"
+                    value={options?.text}
+                    onChange={(e) =>
+                      onChange({
+                        ...options,
+                        text: e.currentTarget.value,
+                      })
+                    }
+                  />
+                </FormField>
+                <FormField labelSize="small" label="Popup Activation">
+                  <ActivationConfiguration
+                    activationOptions={{
+                      activationMode: options.activationMode,
+                      startDate: options.startDate,
+                      endDate: options.endDate,
+                    }}
+                    onChange={(activationOptions) =>
+                      onChange({
+                        ...options,
+                        ...activationOptions,
+                      })
+                    }
+                  />
+                </FormField>
+                <FormField labelSize="small" label="Popup Image">
+                  <ImagePicker
+                    imageTitle={options.imageTitle}
+                    imageUrl={options.imageUrl}
+                    onChange={(imageUrl, imageTitle) =>
+                      onChange({
+                        ...options,
+                        imageUrl,
+                        imageTitle,
+                      })
+                    }
+                  />
+                </FormField>
+              </Box>
+            </Box>
+          </Card.Content>
+        </Card>
+      </Box>
+    </Box>
+  );
+};

package/dist/examples-apps/site-popup/src/dashboard/hooks/wix-embeds.ts

@@ -0,0 +1,33 @@
+import { embeddedScripts } from '@wix/app-management';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+
+export const QUERY_EMBEDS = 'queryEmbeds';
+export const MUTATE_EMBEDS = 'mutateEmbeds';
+
+export const useEmbeds = <T extends Record<string, string>>() => {
+  const queryClient = useQueryClient();
+
+  const getEmbeddedScript = useQuery<unknown, unknown, T>({
+    queryKey: [QUERY_EMBEDS],
+    refetchOnWindowFocus: false,
+    queryFn: async () => {
+      // https://dev.wix.com/docs/sdk/backend-modules/app-management/embedded-scripts/get-embedded-script
+      const embeddedScript = await embeddedScripts.getEmbeddedScript();
+      return embeddedScript.parameters || {};
+    },
+  });
+
+  const embedScript = useMutation<unknown, unknown, T>({
+    mutationKey: [MUTATE_EMBEDS],
+    mutationFn: async (parameters) => {
+      // https://dev.wix.com/docs/sdk/backend-modules/app-management/embedded-scripts/embed-script
+      await embeddedScripts.embedScript({ parameters });
+      return parameters;
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData([QUERY_EMBEDS], data);
+    },
+  });
+
+  return { embedScript, getEmbeddedScript };
+};

package/dist/examples-apps/site-popup/src/dashboard/pages/page.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import { i18n } from '@wix/essentials';
+import { Box, Button, Cell, Layout, Loader, Page } from '@wix/design-system';
+import '@wix/design-system/styles.global.css';
+import { withProviders } from '../withProviders';
+import { SitePopupSettings } from '../../components/site-popup-settings.js';
+import { SitePopupOptions } from '../../types.js';
+import { useEmbeds } from '../hooks/wix-embeds.js';
+import { Popup } from '../../components/popup/index.js';
+
+const sitePopupDefaultOptions: SitePopupOptions = {
+  headline: 'Sale 20% Off',
+  text: 'Sign up and get 20% off on our Winter Sale',
+  imageUrl:
+    'https://static.wixstatic.com/media/11062b_db81bbf678b641ff9e00b768cb155a49~mv2.jpg',
+  imageTitle: 'Clothes For Sale',
+  activationMode: 'active',
+};
+
+function SitePopup() {
+  const locale = i18n.getLocale();
+
+  const { embedScript, getEmbeddedScript } =
+    useEmbeds<Partial<SitePopupOptions>>();
+
+  const [sitePopupOptions, setSitePopupOptions] = useState<SitePopupOptions>(
+    sitePopupDefaultOptions
+  );
+
+  useEffect(() => {
+    setSitePopupOptions((prevOptions) => ({
+      ...prevOptions,
+      ...getEmbeddedScript.data,
+      imageUrl: (
+        getEmbeddedScript.data?.imageUrl || prevOptions.imageUrl
+      ).replace(/\\/g, ''),
+    }));
+  }, [getEmbeddedScript.data]);
+
+  return (
+    <Page height="100vh">
+      <Page.Header
+        title="Site Popup"
+        subtitle="Configure site popup setting & preview as it will appear on your site."
+        actionsBar={
+          <Button
+            skin="inverted"
+            disabled={!sitePopupOptions.headline || !sitePopupOptions.text}
+            onClick={() => embedScript.mutate({ ...sitePopupOptions })}
+          >
+            {embedScript.isLoading ? <Loader size="tiny" /> : 'Save'}
+          </Button>
+        }
+      />
+      <Page.Content>
+        {getEmbeddedScript.isLoading ? (
+          <Box align="center" verticalAlign="middle" height="50vh">
+            <Loader text="Loading..." />
+          </Box>
+        ) : (
+          <Layout>
+            <Cell>
+              <SitePopupSettings
+                options={sitePopupOptions}
+                onChange={(options) => setSitePopupOptions(options)}
+              />
+            </Cell>
+            <Cell>
+              <Popup {...sitePopupOptions} locale={locale} />
+            </Cell>
+          </Layout>
+        )}
+      </Page.Content>
+    </Page>
+  );
+}
+
+export default withProviders(SitePopup);

package/dist/examples-apps/site-popup/src/dashboard/withProviders.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { WixDesignSystemProvider } from '@wix/design-system';
+import { i18n } from '@wix/essentials';
+
+const queryClient = new QueryClient();
+
+export function withProviders<P extends {} = {}>(Component: React.FC<P>) {
+  return function DashboardProviders(props: P) {
+    const locale = i18n.getLocale();
+    return (
+      <WixDesignSystemProvider locale={locale} features={{ newColorsBranding: true }}>
+        <QueryClientProvider client={queryClient}>
+          <Component {...props} />
+        </QueryClientProvider>
+      </WixDesignSystemProvider>
+    );
+  };
+}

package/dist/examples-apps/site-popup/src/env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="@wix/cli-app/client" />
+/// <reference types="@wix/sdk-types/client" />
+
+// NOTE: This file should not be edited. This is an auto-generated file.

package/dist/examples-apps/site-popup/src/site/embedded-scripts/site-popup/embedded.html

@@ -0,0 +1,12 @@
+<div
+  id="popup-data"
+  data-headline="{{headline}}"
+  data-text="{{text}}"
+  data-activation-mode="{{activationMode}}"
+  data-start-date="{{startDate}}"
+  data-end-date="{{endDate}}"
+  data-image-url="{{imageUrl}}"
+  data-image-title="{{imageTitle}}"
+></div>
+<div id="site-popup"></div>
+<script type="module" src="./popup-overlay/index.tsx"></script>

package/dist/examples-apps/site-popup/src/site/embedded-scripts/site-popup/embedded.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "https://dev.wix.com/wix-cli/schemas/embedded-script.json",
+    "id": "2c43c310-939b-451d-b488-805f7ebba6ab",
+    "name": "Site Popup",
+    "scriptType": "FUNCTIONAL",
+    "placement": "BODY_START"
+}

package/dist/examples-apps/site-popup/src/site/embedded-scripts/site-popup/params.dev.json

@@ -0,0 +1,7 @@
+{
+    "headline": "Sale 20% Off",
+    "text": "Sign up and get 20% off on our Winter Sale",
+    "imageUrl": "https://static.wixstatic.com/media/11062b_db81bbf678b641ff9e00b768cb155a49~mv2.jpg",
+    "imageTitle": "Clothes For Sale",
+    "activationMode": "active"
+}

package/dist/examples-apps/site-popup/src/site/embedded-scripts/site-popup/popup-overlay/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/dist/examples-apps/site-popup/src/site/embedded-scripts/site-popup/popup-overlay/index.tsx

@@ -0,0 +1,58 @@
+import ReactDOM from 'react-dom';
+import React, { useEffect, useState } from 'react';
+import { Popup } from '../../../../components/popup/index.js';
+import { SitePopupOptions } from '../../../../types.js';
+import './index.css';
+import { site } from '@wix/site-site';
+
+const PopupOverlay = () => {
+  const [shown, setShown] = useState<boolean>(false);
+  const el = document.querySelector('#popup-data') as HTMLElement;
+  const popupParams = el?.dataset as SitePopupOptions;
+
+  const [regionalSettings, setRegionalSettings] = useState<string>('en-us');
+
+  useEffect(() => {
+    site.regionalSettings().then(setRegionalSettings);
+  }, []);
+
+  useEffect(() => {
+    const isPopupShownStorage = localStorage.getItem('isPopupShown');
+    setShown(isPopupShownStorage !== 'false');
+  }, []);
+
+  const closePopup = (hideForever?: boolean) => {
+    setShown(false);
+    if (hideForever) {
+      localStorage.setItem('isPopupShown', 'false');
+    }
+  };
+
+  const shouldShowPopup = () => {
+    if (popupParams.activationMode === 'timed') {
+      return (
+        Date.now() > new Date(Number(popupParams.startDate)).getTime() &&
+        Date.now() < new Date(Number(popupParams.endDate)).getTime()
+      );
+    } else if (popupParams.activationMode === 'active') {
+      return true;
+    }
+    return false;
+  };
+
+  return (
+    <div
+      className={
+        shown && shouldShowPopup()
+          ? 'fixed flex justify-center items-center inset-0 z-[1000] bg-gray-300 bg-opacity-75'
+          : 'hidden'
+      }
+    >
+      <div className="w-9/12">
+        <Popup {...popupParams} locale={regionalSettings} onClose={closePopup} />
+      </div>
+    </div>
+  );
+};
+
+ReactDOM.render(<PopupOverlay />, document.getElementById('site-popup'));

package/dist/examples-apps/site-popup/src/types.ts

@@ -0,0 +1,14 @@
+export type ActivationMode = 'active' | 'timed' | 'disabled';
+
+export type ActivationOptions = {
+  activationMode: ActivationMode;
+  startDate?: string;
+  endDate?: string;
+};
+
+export type SitePopupOptions = {
+  headline: string;
+  text: string;
+  imageUrl: string;
+  imageTitle: string;
+} & ActivationOptions;

package/dist/examples-apps/site-popup/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/dist/examples-apps/site-popup/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@wix/cli-app/tsconfig.app.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "rootDir": "src",
+    "types": ["react"]
+  },
+  "include": ["src"]
+}