@wix/ditto-codegen-public 1.0.136 → 1.0.138

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

@@ -1,31 +0,0 @@
-import React, { type FC } from 'react';
-import './close-button.css';
-
-interface Props {
-  onClick?: () => void;
-}
-
-export const CloseButton: FC<Props> = ({ onClick }) => {
-  return (
-    <div className="close-button-wrapper">
-      <button
-        onClick={onClick}
-        type="button"
-        className="close-button"
-      >
-        <svg
-          className="close-icon"
-          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

@@ -1,49 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,133 +0,0 @@
-.popup-card {
-  border-radius: 0.5rem;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  display: grid;
-  position: relative;
-}
-
-@media (min-width: 768px) {
-  .popup-card {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-.close-btn-container {
-  position: absolute;
-  z-index: 1000;
-}
-
-.popup-content {
-  padding: 1rem;
-  text-align: center;
-  background-color: #1f2937;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  border-top-left-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
-}
-
-@media (min-width: 640px) {
-  .popup-content {
-    padding: 1.5rem;
-  }
-}
-
-@media (min-width: 768px) {
-  .popup-content {
-    grid-column: span 1;
-  }
-}
-
-@media (min-width: 1024px) {
-  .popup-content {
-    padding: 2rem;
-  }
-}
-
-.popup-text-container {
-  position: relative;
-  bottom: 0;
-  isolation: isolate;
-  overflow: hidden;
-  padding: 6rem 1rem;
-}
-
-@media (min-width: 640px) {
-  .popup-text-container {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-}
-
-@media (min-width: 1280px) {
-  .popup-text-container {
-    padding-top: 8rem;
-    padding-bottom: 8rem;
-  }
-}
-
-.popup-headline {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 42rem;
-  text-align: center;
-  font-size: 1.875rem;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  color: white;
-}
-
-@media (min-width: 640px) {
-  .popup-headline {
-    font-size: 2.25rem;
-  }
-}
-
-.popup-text {
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 0.5rem;
-  max-width: 36rem;
-  text-align: center;
-  font-size: 1.125rem;
-  line-height: 2rem;
-  color: #d1d5db;
-}
-
-.popup-button-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem;
-}
-
-.popup-dont-show-button {
-  font-size: 0.875rem;
-  color: white;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0.5rem 1rem;
-  transition: opacity 0.2s ease;
-}
-
-.popup-dont-show-button:hover {
-  opacity: 0.8;
-  text-decoration: underline;
-}
-
-.popup-image {
-  height: 16rem;
-  object-fit: cover;
-  width: 100%;
-  border-top-right-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-}
-
-@media (min-width: 768px) {
-  .popup-image {
-    height: 100%;
-  }
-}
-

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

@@ -1,71 +0,0 @@
-import React, { type FC } from 'react';
-import { CloseButton } from '../close-button.js';
-import type { 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="popup-card">
-      <div id="close-btn" className="close-btn-container">
-        <CloseButton onClick={() => onClose?.()} />
-      </div>
-      <div className="popup-content">
-        <div className="popup-text-container">
-          <h4 className="popup-headline">
-            <span style={{font: 'var(--wst-font-style-h4)'}}>{headline}</span>
-          </h4>
-          <p className="popup-text">
-            <span style={{font: 'var(--wst-font-style-body-medium)'}}>{formattedText}</span>
-          </p>
-        </div>
-        <div className="popup-button-container">
-          <button
-            type="button"
-            className="popup-dont-show-button"
-            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="popup-image"
-      />
-    </div>
-  );
-};

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

@@ -1,120 +0,0 @@
-import React, { type FC } from 'react';
-import {
-  Input,
-  Text,
-  Box,
-  InputArea,
-  Card,
-  FormField,
-  type FormFieldProps,
-} from '@wix/design-system';
-import { ActivationConfiguration } from './activation-configuration.js';
-import { ImagePicker } from './image-picker.js';
-import type { SitePopupOptions } from '../types.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,
-                      ...(options.startDate != null && { startDate: options.startDate }),
-                      ...(options.endDate != null && { 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

@@ -1,33 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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 { useEmbeds } from '../hooks/wix-embeds.js';
-import type { SitePopupOptions } from '../../types.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 })}
-          >
-            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

@@ -1,22 +0,0 @@
-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 default 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>
-    );
-  };
-}
-
-// Also export as named export for backwards compatibility
-export { withProviders };

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

@@ -1,20 +0,0 @@
-import { app, extensions } from '@wix/astro/builders';
-
-export default app()
-  .use(
-    extensions.embeddedScript({
-      id: '2c43c310-939b-451d-b488-805f7ebba6ab',
-      name: 'Site Popup',
-      scriptType: 'FUNCTIONAL',
-      placement: 'BODY_START',
-      source: './site/embedded-scripts/site-popup/embedded.html',
-    })
-  )
-  .use(
-    extensions.dashboardPage({
-      id: '57512654-b94e-460b-91e4-88624b5afea3',
-      component: './dashboard/pages/page.tsx',
-      routePath: 'hello',
-      title: 'Site popup',
-    })
-  );

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

@@ -1,13 +0,0 @@
-<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/popup-overlay/index.css

@@ -1,21 +0,0 @@
-.popup-overlay {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-  background-color: rgba(209, 213, 219, 0.75);
-}
-
-.popup-overlay.hidden {
-  display: none;
-}
-
-.popup-container {
-  width: 75%;
-}
-

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

@@ -1,57 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import React, { useEffect, useState } from 'react';
-import { site } from '@wix/site-site';
-import './index.css';
-import type { SitePopupOptions } from '../../../../types';
-import { Popup } from '../../../../components/popup';
-
-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() ? 'popup-overlay' : 'popup-overlay hidden'
-      }
-    >
-      <div className="popup-container">
-        <Popup {...popupParams} locale={regionalSettings} onClose={closePopup} />
-      </div>
-    </div>
-  );
-};
-
-const root = createRoot(document.getElementById('site-popup')!);
-root.render(<PopupOverlay />);