@wix/ditto-codegen-public 1.0.177 → 1.0.179
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/out.js +16 -63
- package/package.json +2 -2
- package/dist/examples-apps/event-countdown/README.md +0 -13
- package/dist/examples-apps/event-countdown/astro.config.mjs +0 -31
- package/dist/examples-apps/event-countdown/package.json +0 -51
- package/dist/examples-apps/event-countdown/src/components/countdown-preview.tsx +0 -164
- package/dist/examples-apps/event-countdown/src/components/countdown-timer-settings.tsx +0 -199
- package/dist/examples-apps/event-countdown/src/dashboard/pages/countdown-timer-settings/extensions.ts +0 -7
- package/dist/examples-apps/event-countdown/src/dashboard/pages/countdown-timer-settings/page.tsx +0 -142
- package/dist/examples-apps/event-countdown/src/dashboard/withProviders.tsx +0 -22
- package/dist/examples-apps/event-countdown/src/extensions.ts +0 -12
- package/dist/examples-apps/event-countdown/src/index.ts +0 -2
- package/dist/examples-apps/event-countdown/src/site/embedded-scripts/countdown-timer/embedded.html +0 -328
- package/dist/examples-apps/event-countdown/src/site/embedded-scripts/countdown-timer/extensions.ts +0 -8
- package/dist/examples-apps/event-countdown/src/types.ts +0 -11
- package/dist/examples-apps/event-countdown/tsconfig.json +0 -9
- package/dist/examples-apps/event-countdown/wix.config.json +0 -4
- package/dist/examples-apps/mixpanel-analytics/.nvmrc +0 -1
- package/dist/examples-apps/mixpanel-analytics/README.md +0 -21
- package/dist/examples-apps/mixpanel-analytics/package-lock.json +0 -6357
- package/dist/examples-apps/mixpanel-analytics/package.json +0 -31
- package/dist/examples-apps/mixpanel-analytics/src/dashboard/components/ProjectToken.tsx +0 -60
- package/dist/examples-apps/mixpanel-analytics/src/dashboard/hooks/wix-embeds.ts +0 -33
- package/dist/examples-apps/mixpanel-analytics/src/dashboard/pages/page.tsx +0 -39
- package/dist/examples-apps/mixpanel-analytics/src/dashboard/withProviders.tsx +0 -19
- package/dist/examples-apps/mixpanel-analytics/src/env.d.ts +0 -4
- package/dist/examples-apps/mixpanel-analytics/src/site/embedded-scripts/mixpanel-analytics/embedded.html +0 -13
- package/dist/examples-apps/mixpanel-analytics/tsconfig.json +0 -8
- package/dist/examples-apps/mixpanel-analytics/wix.config.json +0 -5
- package/dist/examples-apps/my-locations-app/.nvmrc +0 -1
- package/dist/examples-apps/my-locations-app/README.md +0 -21
- package/dist/examples-apps/my-locations-app/package-lock.json +0 -6351
- package/dist/examples-apps/my-locations-app/package.json +0 -31
- package/dist/examples-apps/my-locations-app/src/dashboard/pages/page.json +0 -5
- package/dist/examples-apps/my-locations-app/src/dashboard/pages/page.tsx +0 -89
- package/dist/examples-apps/my-locations-app/src/dashboard/pages/wix_logo.svg +0 -18
- package/dist/examples-apps/my-locations-app/src/env.d.ts +0 -4
- package/dist/examples-apps/my-locations-app/tsconfig.json +0 -8
- package/dist/examples-apps/my-locations-app/wix.config.json +0 -5
package/dist/out.js
CHANGED
|
@@ -64593,30 +64593,6 @@ var require_load_examples = __commonJS({
|
|
|
64593
64593
|
]
|
|
64594
64594
|
}
|
|
64595
64595
|
},
|
|
64596
|
-
MixPanelAnalystic: {
|
|
64597
|
-
path: "mixpanel-analytics",
|
|
64598
|
-
description: "An analytics integration app that embeds Mixpanel tracking scripts into websites and provides a dashboard interface for configuring analytics tokens",
|
|
64599
|
-
files: {
|
|
64600
|
-
[types_1.ExtensionType.DASHBOARD_PAGE]: [
|
|
64601
|
-
"mixpanel-analytics/src/dashboard/pages/page.tsx",
|
|
64602
|
-
"mixpanel-analytics/src/dashboard/components/ProjectToken.tsx",
|
|
64603
|
-
"mixpanel-analytics/src/dashboard/hooks/wix-embeds.ts",
|
|
64604
|
-
"mixpanel-analytics/src/dashboard/withProviders.tsx"
|
|
64605
|
-
],
|
|
64606
|
-
[types_1.ExtensionType.EMBEDDED_SCRIPT]: [
|
|
64607
|
-
"mixpanel-analytics/src/site/embedded-scripts/mixpanel-analytics/embedded.html"
|
|
64608
|
-
]
|
|
64609
|
-
}
|
|
64610
|
-
},
|
|
64611
|
-
MyLocationApp: {
|
|
64612
|
-
path: "my-locations-app",
|
|
64613
|
-
description: "The Locations app allows site owners to easily manage their business locations and hours of operation. The app will contain a dashboard page with a list of the site owner's business locations, and a button to edit the hours for each location",
|
|
64614
|
-
files: {
|
|
64615
|
-
[types_1.ExtensionType.DASHBOARD_PAGE]: [
|
|
64616
|
-
"my-locations-app/src/dashboard/pages/page.tsx"
|
|
64617
|
-
]
|
|
64618
|
-
}
|
|
64619
|
-
},
|
|
64620
64596
|
CustomElementWidget: {
|
|
64621
64597
|
path: "custom-element",
|
|
64622
64598
|
description: "A Custom Element that displays a countdown timer",
|
|
@@ -64648,22 +64624,6 @@ var require_load_examples = __commonJS({
|
|
|
64648
64624
|
]
|
|
64649
64625
|
}
|
|
64650
64626
|
},
|
|
64651
|
-
EventCountdown: {
|
|
64652
|
-
path: "event-countdown",
|
|
64653
|
-
description: "A dashboard app that allows administrators to create and manage countdown timers for events",
|
|
64654
|
-
files: {
|
|
64655
|
-
[types_1.ExtensionType.DASHBOARD_PAGE]: [
|
|
64656
|
-
"event-countdown/src/dashboard/pages/countdown-timer-settings/page.tsx",
|
|
64657
|
-
"event-countdown/src/components/countdown-timer-settings.tsx",
|
|
64658
|
-
"event-countdown/src/components/countdown-preview.tsx",
|
|
64659
|
-
"event-countdown/src/types.ts",
|
|
64660
|
-
"event-countdown/src/dashboard/withProviders.tsx"
|
|
64661
|
-
],
|
|
64662
|
-
[types_1.ExtensionType.EMBEDDED_SCRIPT]: [
|
|
64663
|
-
"event-countdown/src/site/embedded-scripts/countdown-timer/embedded.html"
|
|
64664
|
-
]
|
|
64665
|
-
}
|
|
64666
|
-
},
|
|
64667
64627
|
ProductCreatedLogger: {
|
|
64668
64628
|
path: "product-created-logger",
|
|
64669
64629
|
description: "A webhook that logs product changes",
|
|
@@ -64700,17 +64660,10 @@ var require_load_examples = __commonJS({
|
|
|
64700
64660
|
var examples = {
|
|
64701
64661
|
[types_1.ExtensionType.DASHBOARD_PAGE]: [
|
|
64702
64662
|
appsExamples.SurveyManager,
|
|
64703
|
-
appsExamples.EventCountdown,
|
|
64704
|
-
appsExamples.CouponPopup,
|
|
64705
|
-
appsExamples.AIChatbot,
|
|
64706
|
-
appsExamples.MixPanelAnalystic,
|
|
64707
|
-
appsExamples.MyLocationApp
|
|
64708
|
-
],
|
|
64709
|
-
[types_1.ExtensionType.EMBEDDED_SCRIPT]: [
|
|
64710
|
-
appsExamples.MixPanelAnalystic,
|
|
64711
64663
|
appsExamples.CouponPopup,
|
|
64712
|
-
appsExamples.
|
|
64664
|
+
appsExamples.AIChatbot
|
|
64713
64665
|
],
|
|
64666
|
+
[types_1.ExtensionType.EMBEDDED_SCRIPT]: [appsExamples.CouponPopup],
|
|
64714
64667
|
[types_1.ExtensionType.SERVICE_PLUGIN]: [appsExamples.SPISExample],
|
|
64715
64668
|
[types_1.ExtensionType.SITE_COMPONENT]: [appsExamples.InventoryCountdown],
|
|
64716
64669
|
[types_1.ExtensionType.SITE_WIDGET]: [appsExamples.CustomElementWidget],
|
|
@@ -65359,12 +65312,12 @@ var require_dashboard_page_prompt = __commonJS({
|
|
|
65359
65312
|
"use strict";
|
|
65360
65313
|
Object.defineProperty(exports2, "__esModule", { value: true });
|
|
65361
65314
|
exports2.dashboardPagePrompt = void 0;
|
|
65362
|
-
var
|
|
65315
|
+
var types_1 = require_types_impl();
|
|
65363
65316
|
var dashboard_page_instructions_1 = require_dashboard_page_instructions();
|
|
65364
65317
|
var CodeGenerationSystemPromptBuilder_1 = require_CodeGenerationSystemPromptBuilder();
|
|
65365
65318
|
var dashboardPagePrompt = async ({ useData, useApiSpec, useDynamicParameters, apiNames, useIteration }) => {
|
|
65366
65319
|
const systemPrompt = (0, CodeGenerationSystemPromptBuilder_1.codeGenerationSystemPromptBuilder)({
|
|
65367
|
-
agentType:
|
|
65320
|
+
agentType: types_1.ExtensionType.DASHBOARD_PAGE,
|
|
65368
65321
|
apiNames,
|
|
65369
65322
|
useData,
|
|
65370
65323
|
useIteration
|
|
@@ -65761,12 +65714,12 @@ var require_site_component_prompt = __commonJS({
|
|
|
65761
65714
|
"use strict";
|
|
65762
65715
|
Object.defineProperty(exports2, "__esModule", { value: true });
|
|
65763
65716
|
exports2.siteComponentPrompt = void 0;
|
|
65764
|
-
var
|
|
65717
|
+
var types_1 = require_types_impl();
|
|
65765
65718
|
var site_component_instructions_1 = require_site_component_instructions();
|
|
65766
65719
|
var CodeGenerationSystemPromptBuilder_1 = require_CodeGenerationSystemPromptBuilder();
|
|
65767
65720
|
var siteComponentPrompt = (apiNames, useData, useIteration) => {
|
|
65768
65721
|
const siteComponentPromptBuilder = (0, CodeGenerationSystemPromptBuilder_1.codeGenerationSystemPromptBuilder)({
|
|
65769
|
-
agentType:
|
|
65722
|
+
agentType: types_1.ExtensionType.SITE_COMPONENT,
|
|
65770
65723
|
apiNames,
|
|
65771
65724
|
useData,
|
|
65772
65725
|
useIteration
|
|
@@ -65888,12 +65841,12 @@ var require_custom_element_prompt = __commonJS({
|
|
|
65888
65841
|
"use strict";
|
|
65889
65842
|
Object.defineProperty(exports2, "__esModule", { value: true });
|
|
65890
65843
|
exports2.customElementPrompt = void 0;
|
|
65891
|
-
var
|
|
65844
|
+
var types_1 = require_types_impl();
|
|
65892
65845
|
var custom_element_instructions_1 = require_custom_element_instructions();
|
|
65893
65846
|
var CodeGenerationSystemPromptBuilder_1 = require_CodeGenerationSystemPromptBuilder();
|
|
65894
65847
|
var customElementPrompt = (apiNames, useData, useIteration) => {
|
|
65895
65848
|
const systemPrompt = (0, CodeGenerationSystemPromptBuilder_1.codeGenerationSystemPromptBuilder)({
|
|
65896
|
-
agentType:
|
|
65849
|
+
agentType: types_1.ExtensionType.SITE_WIDGET,
|
|
65897
65850
|
apiNames,
|
|
65898
65851
|
useData,
|
|
65899
65852
|
useIteration
|
|
@@ -66122,12 +66075,12 @@ var require_service_plugin_prompt = __commonJS({
|
|
|
66122
66075
|
exports2.servicePluginPrompt = void 0;
|
|
66123
66076
|
var servicePluginDocLoader_1 = require_servicePluginDocLoader();
|
|
66124
66077
|
var service_plugin_instructions_1 = require_service_plugin_instructions();
|
|
66125
|
-
var
|
|
66078
|
+
var types_1 = require_types_impl();
|
|
66126
66079
|
var CodeGenerationSystemPromptBuilder_1 = require_CodeGenerationSystemPromptBuilder();
|
|
66127
66080
|
var servicePluginPrompt = ({ apiNames, useData, useIteration, spiNames = [] }) => {
|
|
66128
66081
|
const servicePluginDocs = (0, servicePluginDocLoader_1.loadServicePluginDocumentation)(spiNames);
|
|
66129
66082
|
const servicePluginPromptBuilder = (0, CodeGenerationSystemPromptBuilder_1.codeGenerationSystemPromptBuilder)({
|
|
66130
|
-
agentType:
|
|
66083
|
+
agentType: types_1.ExtensionType.SERVICE_PLUGIN,
|
|
66131
66084
|
apiNames,
|
|
66132
66085
|
useData,
|
|
66133
66086
|
useIteration
|
|
@@ -66241,12 +66194,12 @@ var require_backend_event_prompt = __commonJS({
|
|
|
66241
66194
|
"use strict";
|
|
66242
66195
|
Object.defineProperty(exports2, "__esModule", { value: true });
|
|
66243
66196
|
exports2.backendEventPrompt = void 0;
|
|
66244
|
-
var
|
|
66197
|
+
var types_1 = require_types_impl();
|
|
66245
66198
|
var backend_event_instructions_1 = require_backend_event_instructions();
|
|
66246
66199
|
var CodeGenerationSystemPromptBuilder_1 = require_CodeGenerationSystemPromptBuilder();
|
|
66247
66200
|
var backendEventPrompt = (apiNames, useData, useIteration) => {
|
|
66248
66201
|
const backendEventPromptBuilder = (0, CodeGenerationSystemPromptBuilder_1.codeGenerationSystemPromptBuilder)({
|
|
66249
|
-
agentType:
|
|
66202
|
+
agentType: types_1.ExtensionType.BACKEND_EVENT,
|
|
66250
66203
|
apiNames,
|
|
66251
66204
|
useData,
|
|
66252
66205
|
useIteration
|
|
@@ -66398,12 +66351,12 @@ var require_backend_api_prompt = __commonJS({
|
|
|
66398
66351
|
"use strict";
|
|
66399
66352
|
Object.defineProperty(exports2, "__esModule", { value: true });
|
|
66400
66353
|
exports2.backendApiPrompt = void 0;
|
|
66401
|
-
var
|
|
66354
|
+
var types_1 = require_types_impl();
|
|
66402
66355
|
var backend_api_instructions_1 = require_backend_api_instructions();
|
|
66403
66356
|
var CodeGenerationSystemPromptBuilder_1 = require_CodeGenerationSystemPromptBuilder();
|
|
66404
66357
|
var backendApiPrompt = (apiNames, useData, useIteration) => {
|
|
66405
66358
|
const systemPrompt = (0, CodeGenerationSystemPromptBuilder_1.codeGenerationSystemPromptBuilder)({
|
|
66406
|
-
agentType:
|
|
66359
|
+
agentType: types_1.ExtensionType.BACKEND_API,
|
|
66407
66360
|
apiNames,
|
|
66408
66361
|
useData,
|
|
66409
66362
|
useIteration
|
|
@@ -66670,14 +66623,14 @@ var require_embedded_script_prompt = __commonJS({
|
|
|
66670
66623
|
Object.defineProperty(exports2, "__esModule", { value: true });
|
|
66671
66624
|
exports2.embeddedScriptPrompt = void 0;
|
|
66672
66625
|
var dynamicParameters_1 = require_dynamicParameters2();
|
|
66673
|
-
var
|
|
66626
|
+
var types_1 = require_types_impl();
|
|
66674
66627
|
var embedded_script_instructions_1 = require_embedded_script_instructions();
|
|
66675
66628
|
var CodeGenerationSystemPromptBuilder_1 = require_CodeGenerationSystemPromptBuilder();
|
|
66676
66629
|
var embeddedScriptPrompt = (hasDynamicParameters, apiNames, useData, useIteration) => {
|
|
66677
66630
|
const embeddedScriptImplementationGuidelines = hasDynamicParameters ? `${embedded_script_instructions_1.embeddedScriptInstructions.embeddedScriptImplementationGuidelines}
|
|
66678
66631
|
${(0, dynamicParameters_1.dynamicParametersPrompt)()}` : embedded_script_instructions_1.embeddedScriptInstructions.embeddedScriptImplementationGuidelines;
|
|
66679
66632
|
const systemPrompt = (0, CodeGenerationSystemPromptBuilder_1.codeGenerationSystemPromptBuilder)({
|
|
66680
|
-
agentType:
|
|
66633
|
+
agentType: types_1.ExtensionType.EMBEDDED_SCRIPT,
|
|
66681
66634
|
apiNames,
|
|
66682
66635
|
useData,
|
|
66683
66636
|
useIteration
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/ditto-codegen-public",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.179",
|
|
4
4
|
"description": "AI-powered Wix CLI app generator - standalone executable",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "node build.mjs",
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
"@wix/ditto-codegen": "1.0.0",
|
|
25
25
|
"esbuild": "^0.25.9"
|
|
26
26
|
},
|
|
27
|
-
"falconPackageHash": "
|
|
27
|
+
"falconPackageHash": "600908bee71034cf80b10a10f6bcd2217c1f7b4f901a769ef4c58757"
|
|
28
28
|
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
# Wix Astro Blank Template
|
|
2
|
-
|
|
3
|
-
Our Astro templates are still in development and subject to change.
|
|
4
|
-
|
|
5
|
-
To use a template, follow the [Wix CLI for Headless Quick Start](https://dev.wix.com/docs/go-headless/develop-your-project/wix-managed-headless/get-started/quick-start), and select the desired template during the setup process.
|
|
6
|
-
|
|
7
|
-
## Need help?
|
|
8
|
-
|
|
9
|
-
For documentation and support, check out:
|
|
10
|
-
|
|
11
|
-
- [Wix Headless Documentation](https://dev.wix.com/docs/go-headless)
|
|
12
|
-
- [Wix SDK Documentation](https://dev.wix.com/docs/sdk)
|
|
13
|
-
- [Community on Discord](https://discord.gg/n6TBrSnYTp)
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
// @ts-check
|
|
2
|
-
import { defineConfig } from 'astro/config';
|
|
3
|
-
import wix from "@wix/astro";
|
|
4
|
-
|
|
5
|
-
import react from "@astrojs/react";
|
|
6
|
-
import cloudflare from "@astrojs/cloudflare";
|
|
7
|
-
|
|
8
|
-
// https://astro.build/config
|
|
9
|
-
export default defineConfig({
|
|
10
|
-
integrations: [wix(), react()],
|
|
11
|
-
|
|
12
|
-
adapter: cloudflare({
|
|
13
|
-
platformProxy: {
|
|
14
|
-
enabled: false,
|
|
15
|
-
},
|
|
16
|
-
}),
|
|
17
|
-
|
|
18
|
-
image: {
|
|
19
|
-
domains: ["static.wixstatic.com"],
|
|
20
|
-
},
|
|
21
|
-
security: {
|
|
22
|
-
checkOrigin: false
|
|
23
|
-
},
|
|
24
|
-
vite: {
|
|
25
|
-
server: {
|
|
26
|
-
allowedHosts: ['.wix-code.com']
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
devToolbar: { enabled: false },
|
|
30
|
-
output: "server",
|
|
31
|
-
});
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "my-custom-app",
|
|
3
|
-
"version": "1.0.0",
|
|
4
|
-
"scripts": {
|
|
5
|
-
"astro": "astro",
|
|
6
|
-
"dev": "wix dev",
|
|
7
|
-
"build": "wix build",
|
|
8
|
-
"wix": "wix",
|
|
9
|
-
"preview": "wix preview",
|
|
10
|
-
"release": "wix release",
|
|
11
|
-
"generate": "wix generate",
|
|
12
|
-
"env": "wix env"
|
|
13
|
-
},
|
|
14
|
-
"dependencies": {
|
|
15
|
-
"@astrojs/cloudflare": "^12.5.3",
|
|
16
|
-
"@astrojs/react": "^4.3.0",
|
|
17
|
-
"@tanstack/react-query": "^5.90.5",
|
|
18
|
-
"@types/react": "^18.3.1",
|
|
19
|
-
"@types/react-dom": "^18.3.1",
|
|
20
|
-
"@wix/app-management": "^1.0.122",
|
|
21
|
-
"@wix/astro": "^2.12.0",
|
|
22
|
-
"@wix/auto-patterns": "^1.44.0",
|
|
23
|
-
"@wix/cli": "^1.1.92",
|
|
24
|
-
"@wix/crm": "^1.0.1071",
|
|
25
|
-
"@wix/dashboard": "^1.3.40",
|
|
26
|
-
"@wix/data": "^1.0.290",
|
|
27
|
-
"@wix/design-system": "^1.217.0",
|
|
28
|
-
"@wix/ecom": "^1.0.1354",
|
|
29
|
-
"@wix/essentials": "^0.1.23",
|
|
30
|
-
"@wix/patterns": "^1.290.0",
|
|
31
|
-
"@wix/sdk": "^1.15.23",
|
|
32
|
-
"@wix/sdk-types": "^1.0.0",
|
|
33
|
-
"@wix/site-site": "^1.26.0",
|
|
34
|
-
"@wix/stores": "^1.0.533",
|
|
35
|
-
"@wix/wix-ui-icons-common": "^3.90.0",
|
|
36
|
-
"astro": "^5.8.0",
|
|
37
|
-
"react": "18.3.1",
|
|
38
|
-
"react-dom": "18.3.1",
|
|
39
|
-
"react-router-dom": "^6.0.0",
|
|
40
|
-
"typescript": "^5.8.3"
|
|
41
|
-
},
|
|
42
|
-
"devDependencies": {
|
|
43
|
-
"@astrojs/cloudflare": "^12.5.3",
|
|
44
|
-
"@astrojs/react": "^4.3.0",
|
|
45
|
-
"@types/react": "^18.3.1",
|
|
46
|
-
"@types/react-dom": "^18.3.1",
|
|
47
|
-
"@wix/cli": "^1.1.92",
|
|
48
|
-
"react": "18.3.1",
|
|
49
|
-
"react-dom": "18.3.1"
|
|
50
|
-
}
|
|
51
|
-
}
|
|
@@ -1,164 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect, type FC } from 'react';
|
|
2
|
-
import { Card } from '@wix/design-system';
|
|
3
|
-
import type { CountdownTimerOptions } from '../types';
|
|
4
|
-
|
|
5
|
-
interface TimeLeft {
|
|
6
|
-
days: number;
|
|
7
|
-
hours: number;
|
|
8
|
-
minutes: number;
|
|
9
|
-
seconds: number;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
interface Props extends CountdownTimerOptions {
|
|
13
|
-
className?: string;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export const CountdownPreview: FC<Props> = ({
|
|
17
|
-
eventTitle,
|
|
18
|
-
eventDescription,
|
|
19
|
-
targetDateTime,
|
|
20
|
-
completionMessage,
|
|
21
|
-
backgroundColor,
|
|
22
|
-
textColor,
|
|
23
|
-
position,
|
|
24
|
-
autoHide,
|
|
25
|
-
timerSize,
|
|
26
|
-
}) => {
|
|
27
|
-
const [timeLeft, setTimeLeft] = useState<TimeLeft>({
|
|
28
|
-
days: 0,
|
|
29
|
-
hours: 0,
|
|
30
|
-
minutes: 0,
|
|
31
|
-
seconds: 0,
|
|
32
|
-
});
|
|
33
|
-
const [isComplete, setIsComplete] = useState(false);
|
|
34
|
-
|
|
35
|
-
useEffect(() => {
|
|
36
|
-
const calculateTimeLeft = () => {
|
|
37
|
-
const difference = +new Date(targetDateTime) - +new Date();
|
|
38
|
-
|
|
39
|
-
if (difference > 0) {
|
|
40
|
-
setTimeLeft({
|
|
41
|
-
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
|
|
42
|
-
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
|
|
43
|
-
minutes: Math.floor((difference / 1000 / 60) % 60),
|
|
44
|
-
seconds: Math.floor((difference / 1000) % 60),
|
|
45
|
-
});
|
|
46
|
-
setIsComplete(false);
|
|
47
|
-
} else {
|
|
48
|
-
setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
|
|
49
|
-
setIsComplete(true);
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
calculateTimeLeft();
|
|
54
|
-
const timer = setInterval(calculateTimeLeft, 1000);
|
|
55
|
-
|
|
56
|
-
return () => clearInterval(timer);
|
|
57
|
-
}, [targetDateTime]);
|
|
58
|
-
|
|
59
|
-
const getSizeStyles = () => {
|
|
60
|
-
switch (timerSize) {
|
|
61
|
-
case 'small':
|
|
62
|
-
return { fontSize: '14px', padding: '12px' };
|
|
63
|
-
case 'large':
|
|
64
|
-
return { fontSize: '24px', padding: '24px' };
|
|
65
|
-
default:
|
|
66
|
-
return { fontSize: '18px', padding: '18px' };
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
if (isComplete && autoHide) {
|
|
71
|
-
return null;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
const sizeStyles = getSizeStyles();
|
|
75
|
-
|
|
76
|
-
return (
|
|
77
|
-
<Card>
|
|
78
|
-
<Card.Header title="Preview" subtitle="How your countdown timer will appear on the site" />
|
|
79
|
-
<Card.Divider />
|
|
80
|
-
<Card.Content>
|
|
81
|
-
<div
|
|
82
|
-
style={{
|
|
83
|
-
position: 'relative',
|
|
84
|
-
minHeight: '400px',
|
|
85
|
-
backgroundColor: '#e8e8e8',
|
|
86
|
-
borderRadius: '8px',
|
|
87
|
-
padding: '20px',
|
|
88
|
-
display: 'flex',
|
|
89
|
-
alignItems: position.includes('top') ? 'flex-start' : position.includes('bottom') ? 'flex-end' : 'center',
|
|
90
|
-
justifyContent: position.includes('left') ? 'flex-start' : position.includes('right') ? 'flex-end' : 'center',
|
|
91
|
-
}}
|
|
92
|
-
>
|
|
93
|
-
<div
|
|
94
|
-
style={{
|
|
95
|
-
backgroundColor,
|
|
96
|
-
color: textColor,
|
|
97
|
-
padding: sizeStyles.padding,
|
|
98
|
-
borderRadius: '8px',
|
|
99
|
-
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
|
100
|
-
display: 'inline-flex',
|
|
101
|
-
flexDirection: 'column',
|
|
102
|
-
gap: '12px',
|
|
103
|
-
alignItems: 'center',
|
|
104
|
-
}}
|
|
105
|
-
>
|
|
106
|
-
<h3 style={{ color: textColor, margin: 0, fontSize: sizeStyles.fontSize, fontWeight: 'bold' }}>
|
|
107
|
-
{eventTitle}
|
|
108
|
-
</h3>
|
|
109
|
-
|
|
110
|
-
{eventDescription && (
|
|
111
|
-
<p style={{ color: textColor, textAlign: 'center', margin: 0, fontSize: '14px' }}>
|
|
112
|
-
{eventDescription}
|
|
113
|
-
</p>
|
|
114
|
-
)}
|
|
115
|
-
|
|
116
|
-
{isComplete ? (
|
|
117
|
-
<div style={{ color: textColor, fontWeight: 'bold', fontSize: sizeStyles.fontSize }}>
|
|
118
|
-
{completionMessage}
|
|
119
|
-
</div>
|
|
120
|
-
) : (
|
|
121
|
-
<div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
|
|
122
|
-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
|
|
123
|
-
<div style={{ color: textColor, fontWeight: 'bold', fontSize: sizeStyles.fontSize }}>
|
|
124
|
-
{timeLeft.days.toString().padStart(2, '0')}
|
|
125
|
-
</div>
|
|
126
|
-
<div style={{ color: textColor, fontSize: '12px' }}>
|
|
127
|
-
Days
|
|
128
|
-
</div>
|
|
129
|
-
</div>
|
|
130
|
-
<div style={{ color: textColor, fontSize: sizeStyles.fontSize, fontWeight: 'bold' }}>:</div>
|
|
131
|
-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
|
|
132
|
-
<div style={{ color: textColor, fontWeight: 'bold', fontSize: sizeStyles.fontSize }}>
|
|
133
|
-
{timeLeft.hours.toString().padStart(2, '0')}
|
|
134
|
-
</div>
|
|
135
|
-
<div style={{ color: textColor, fontSize: '12px' }}>
|
|
136
|
-
Hours
|
|
137
|
-
</div>
|
|
138
|
-
</div>
|
|
139
|
-
<div style={{ color: textColor, fontSize: sizeStyles.fontSize, fontWeight: 'bold' }}>:</div>
|
|
140
|
-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
|
|
141
|
-
<div style={{ color: textColor, fontWeight: 'bold', fontSize: sizeStyles.fontSize }}>
|
|
142
|
-
{timeLeft.minutes.toString().padStart(2, '0')}
|
|
143
|
-
</div>
|
|
144
|
-
<div style={{ color: textColor, fontSize: '12px' }}>
|
|
145
|
-
Minutes
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
<div style={{ color: textColor, fontSize: sizeStyles.fontSize, fontWeight: 'bold' }}>:</div>
|
|
149
|
-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
|
|
150
|
-
<div style={{ color: textColor, fontWeight: 'bold', fontSize: sizeStyles.fontSize }}>
|
|
151
|
-
{timeLeft.seconds.toString().padStart(2, '0')}
|
|
152
|
-
</div>
|
|
153
|
-
<div style={{ color: textColor, fontSize: '12px' }}>
|
|
154
|
-
Seconds
|
|
155
|
-
</div>
|
|
156
|
-
</div>
|
|
157
|
-
</div>
|
|
158
|
-
)}
|
|
159
|
-
</div>
|
|
160
|
-
</div>
|
|
161
|
-
</Card.Content>
|
|
162
|
-
</Card>
|
|
163
|
-
);
|
|
164
|
-
};
|
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
import React, { type FC } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
Input,
|
|
4
|
-
InputArea,
|
|
5
|
-
Card,
|
|
6
|
-
FormField,
|
|
7
|
-
ColorInput,
|
|
8
|
-
Dropdown,
|
|
9
|
-
Checkbox,
|
|
10
|
-
Box,
|
|
11
|
-
type FormFieldProps,
|
|
12
|
-
} from '@wix/design-system';
|
|
13
|
-
import type { CountdownTimerOptions } from '../types';
|
|
14
|
-
|
|
15
|
-
interface Props {
|
|
16
|
-
options: CountdownTimerOptions;
|
|
17
|
-
onChange: (options: CountdownTimerOptions) => void;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export const CountdownTimerSettings: FC<Props> = ({ options, onChange }) => {
|
|
21
|
-
const getFieldStatus = (
|
|
22
|
-
field: keyof CountdownTimerOptions,
|
|
23
|
-
required: boolean = false
|
|
24
|
-
): Partial<FormFieldProps> => {
|
|
25
|
-
return required && !options[field]
|
|
26
|
-
? {
|
|
27
|
-
status: 'error',
|
|
28
|
-
statusMessage: 'Required.',
|
|
29
|
-
}
|
|
30
|
-
: {};
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
const positionOptions = [
|
|
34
|
-
{ id: 'top-left', value: 'Top Left' },
|
|
35
|
-
{ id: 'top-right', value: 'Top Right' },
|
|
36
|
-
{ id: 'bottom-left', value: 'Bottom Left' },
|
|
37
|
-
{ id: 'bottom-right', value: 'Bottom Right' },
|
|
38
|
-
{ id: 'center', value: 'Center' },
|
|
39
|
-
];
|
|
40
|
-
|
|
41
|
-
const sizeOptions = [
|
|
42
|
-
{ id: 'small', value: 'Small' },
|
|
43
|
-
{ id: 'medium', value: 'Medium' },
|
|
44
|
-
{ id: 'large', value: 'Large' },
|
|
45
|
-
];
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<Box direction="vertical" gap="24px">
|
|
49
|
-
<Card>
|
|
50
|
-
<Card.Header
|
|
51
|
-
title="Event Details"
|
|
52
|
-
subtitle="Configure the basic information for your countdown event"
|
|
53
|
-
/>
|
|
54
|
-
<Card.Divider />
|
|
55
|
-
<Card.Content>
|
|
56
|
-
<Box gap="18px" direction="vertical">
|
|
57
|
-
<FormField
|
|
58
|
-
label="Event Title"
|
|
59
|
-
required
|
|
60
|
-
{...getFieldStatus('eventTitle', true)}
|
|
61
|
-
>
|
|
62
|
-
<Input
|
|
63
|
-
placeholder="Upcoming Event"
|
|
64
|
-
value={options.eventTitle}
|
|
65
|
-
onChange={(e) =>
|
|
66
|
-
onChange({
|
|
67
|
-
...options,
|
|
68
|
-
eventTitle: e.currentTarget.value,
|
|
69
|
-
})
|
|
70
|
-
}
|
|
71
|
-
/>
|
|
72
|
-
</FormField>
|
|
73
|
-
|
|
74
|
-
<FormField label="Event Description">
|
|
75
|
-
<InputArea
|
|
76
|
-
placeholder="Additional details about the event"
|
|
77
|
-
value={options.eventDescription || ''}
|
|
78
|
-
onChange={(e) =>
|
|
79
|
-
onChange({
|
|
80
|
-
...options,
|
|
81
|
-
eventDescription: e.currentTarget.value,
|
|
82
|
-
})
|
|
83
|
-
}
|
|
84
|
-
rows={3}
|
|
85
|
-
/>
|
|
86
|
-
</FormField>
|
|
87
|
-
|
|
88
|
-
<FormField
|
|
89
|
-
label="Target Date and Time"
|
|
90
|
-
required
|
|
91
|
-
{...getFieldStatus('targetDateTime', true)}
|
|
92
|
-
>
|
|
93
|
-
<Input
|
|
94
|
-
type="datetime-local"
|
|
95
|
-
value={options.targetDateTime}
|
|
96
|
-
onChange={(e) =>
|
|
97
|
-
onChange({
|
|
98
|
-
...options,
|
|
99
|
-
targetDateTime: e.currentTarget.value,
|
|
100
|
-
})
|
|
101
|
-
}
|
|
102
|
-
/>
|
|
103
|
-
</FormField>
|
|
104
|
-
|
|
105
|
-
<FormField label="Completion Message">
|
|
106
|
-
<Input
|
|
107
|
-
placeholder="Event has started!"
|
|
108
|
-
value={options.completionMessage}
|
|
109
|
-
onChange={(e) =>
|
|
110
|
-
onChange({
|
|
111
|
-
...options,
|
|
112
|
-
completionMessage: e.currentTarget.value,
|
|
113
|
-
})
|
|
114
|
-
}
|
|
115
|
-
/>
|
|
116
|
-
</FormField>
|
|
117
|
-
</Box>
|
|
118
|
-
</Card.Content>
|
|
119
|
-
</Card>
|
|
120
|
-
|
|
121
|
-
<Card>
|
|
122
|
-
<Card.Header
|
|
123
|
-
title="Visual Customization"
|
|
124
|
-
subtitle="Customize the appearance and behavior of your countdown timer"
|
|
125
|
-
/>
|
|
126
|
-
<Card.Divider />
|
|
127
|
-
<Card.Content>
|
|
128
|
-
<Box gap="18px" direction="vertical">
|
|
129
|
-
<FormField label="Background Color">
|
|
130
|
-
<ColorInput
|
|
131
|
-
value={options.backgroundColor}
|
|
132
|
-
onChange={(color) =>
|
|
133
|
-
onChange({
|
|
134
|
-
...options,
|
|
135
|
-
backgroundColor: color,
|
|
136
|
-
})
|
|
137
|
-
}
|
|
138
|
-
/>
|
|
139
|
-
</FormField>
|
|
140
|
-
|
|
141
|
-
<FormField label="Text Color">
|
|
142
|
-
<ColorInput
|
|
143
|
-
value={options.textColor}
|
|
144
|
-
onChange={(color) =>
|
|
145
|
-
onChange({
|
|
146
|
-
...options,
|
|
147
|
-
textColor: color,
|
|
148
|
-
})
|
|
149
|
-
}
|
|
150
|
-
/>
|
|
151
|
-
</FormField>
|
|
152
|
-
|
|
153
|
-
<FormField label="Display Position">
|
|
154
|
-
<Dropdown
|
|
155
|
-
placeholder="Select position"
|
|
156
|
-
options={positionOptions}
|
|
157
|
-
selectedId={options.position}
|
|
158
|
-
onSelect={(option) =>
|
|
159
|
-
onChange({
|
|
160
|
-
...options,
|
|
161
|
-
position: option.id as CountdownTimerOptions['position'],
|
|
162
|
-
})
|
|
163
|
-
}
|
|
164
|
-
/>
|
|
165
|
-
</FormField>
|
|
166
|
-
|
|
167
|
-
<FormField label="Timer Size">
|
|
168
|
-
<Dropdown
|
|
169
|
-
placeholder="Select size"
|
|
170
|
-
options={sizeOptions}
|
|
171
|
-
selectedId={options.timerSize}
|
|
172
|
-
onSelect={(option) =>
|
|
173
|
-
onChange({
|
|
174
|
-
...options,
|
|
175
|
-
timerSize: option.id as CountdownTimerOptions['timerSize'],
|
|
176
|
-
})
|
|
177
|
-
}
|
|
178
|
-
/>
|
|
179
|
-
</FormField>
|
|
180
|
-
|
|
181
|
-
<FormField label="Auto Hide When Complete">
|
|
182
|
-
<Checkbox
|
|
183
|
-
checked={options.autoHide}
|
|
184
|
-
onChange={(e) =>
|
|
185
|
-
onChange({
|
|
186
|
-
...options,
|
|
187
|
-
autoHide: e.target.checked,
|
|
188
|
-
})
|
|
189
|
-
}
|
|
190
|
-
>
|
|
191
|
-
Automatically hide the countdown timer when it reaches zero
|
|
192
|
-
</Checkbox>
|
|
193
|
-
</FormField>
|
|
194
|
-
</Box>
|
|
195
|
-
</Card.Content>
|
|
196
|
-
</Card>
|
|
197
|
-
</Box>
|
|
198
|
-
);
|
|
199
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { extensions } from '@wix/astro/builders';
|
|
2
|
-
export const dashboardpagecountdownTimerSettings = extensions.dashboardPage({
|
|
3
|
-
"id": "55494b14-6385-41a3-af6b-c165b0961f5f",
|
|
4
|
-
"title": "Countdown Timer Settings",
|
|
5
|
-
"routePath": "countdown-timer-settings",
|
|
6
|
-
"component": "./dashboard/pages/countdown-timer-settings/page.tsx"
|
|
7
|
-
})
|