@wix/ditto-codegen-public 1.0.176 → 1.0.178
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 +30 -54
- 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
|
@@ -772,6 +772,24 @@ var require_status = __commonJS({
|
|
|
772
772
|
}
|
|
773
773
|
});
|
|
774
774
|
|
|
775
|
+
// ../codegen-types/dist/types/task.js
|
|
776
|
+
var require_task = __commonJS({
|
|
777
|
+
"../codegen-types/dist/types/task.js"(exports2) {
|
|
778
|
+
"use strict";
|
|
779
|
+
Object.defineProperty(exports2, "__esModule", { value: true });
|
|
780
|
+
exports2.TaskKind = void 0;
|
|
781
|
+
var TaskKind;
|
|
782
|
+
(function(TaskKind2) {
|
|
783
|
+
TaskKind2["INIT_CODEGEN"] = "INIT_CODEGEN";
|
|
784
|
+
TaskKind2["ITERATE_CODEGEN"] = "ITERATE_CODEGEN";
|
|
785
|
+
TaskKind2["VALIDATION"] = "VALIDATION";
|
|
786
|
+
TaskKind2["CODEGEN"] = "CODEGEN";
|
|
787
|
+
TaskKind2["FIX_CODE"] = "FIX_CODE";
|
|
788
|
+
TaskKind2["RUN_AGENT"] = "RUN_AGENT";
|
|
789
|
+
})(TaskKind || (exports2.TaskKind = TaskKind = {}));
|
|
790
|
+
}
|
|
791
|
+
});
|
|
792
|
+
|
|
775
793
|
// ../codegen-types/dist/types/generation.js
|
|
776
794
|
var require_generation = __commonJS({
|
|
777
795
|
"../codegen-types/dist/types/generation.js"(exports2) {
|
|
@@ -828,6 +846,7 @@ var require_dist = __commonJS({
|
|
|
828
846
|
Object.defineProperty(exports2, "__esModule", { value: true });
|
|
829
847
|
__exportStar2(require_errors(), exports2);
|
|
830
848
|
__exportStar2(require_status(), exports2);
|
|
849
|
+
__exportStar2(require_task(), exports2);
|
|
831
850
|
__exportStar2(require_generation(), exports2);
|
|
832
851
|
__exportStar2(require_ai(), exports2);
|
|
833
852
|
}
|
|
@@ -1393,7 +1412,8 @@ var require_CodeGenService = __commonJS({
|
|
|
1393
1412
|
name: task?.name || task?.kind || "unknown",
|
|
1394
1413
|
status: this.toEnumStatus(task?.status),
|
|
1395
1414
|
description: typeof task?.description === "string" ? task.description : task?.payload ? JSON.stringify(task.payload) : "",
|
|
1396
|
-
error: typeof task?.error === "string" ? task.error : void 0
|
|
1415
|
+
error: typeof task?.error === "string" ? task.error : void 0,
|
|
1416
|
+
agentName: task?.agentName || void 0
|
|
1397
1417
|
};
|
|
1398
1418
|
}
|
|
1399
1419
|
mapServerJob(job) {
|
|
@@ -64573,30 +64593,6 @@ var require_load_examples = __commonJS({
|
|
|
64573
64593
|
]
|
|
64574
64594
|
}
|
|
64575
64595
|
},
|
|
64576
|
-
MixPanelAnalystic: {
|
|
64577
|
-
path: "mixpanel-analytics",
|
|
64578
|
-
description: "An analytics integration app that embeds Mixpanel tracking scripts into websites and provides a dashboard interface for configuring analytics tokens",
|
|
64579
|
-
files: {
|
|
64580
|
-
[types_1.ExtensionType.DASHBOARD_PAGE]: [
|
|
64581
|
-
"mixpanel-analytics/src/dashboard/pages/page.tsx",
|
|
64582
|
-
"mixpanel-analytics/src/dashboard/components/ProjectToken.tsx",
|
|
64583
|
-
"mixpanel-analytics/src/dashboard/hooks/wix-embeds.ts",
|
|
64584
|
-
"mixpanel-analytics/src/dashboard/withProviders.tsx"
|
|
64585
|
-
],
|
|
64586
|
-
[types_1.ExtensionType.EMBEDDED_SCRIPT]: [
|
|
64587
|
-
"mixpanel-analytics/src/site/embedded-scripts/mixpanel-analytics/embedded.html"
|
|
64588
|
-
]
|
|
64589
|
-
}
|
|
64590
|
-
},
|
|
64591
|
-
MyLocationApp: {
|
|
64592
|
-
path: "my-locations-app",
|
|
64593
|
-
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",
|
|
64594
|
-
files: {
|
|
64595
|
-
[types_1.ExtensionType.DASHBOARD_PAGE]: [
|
|
64596
|
-
"my-locations-app/src/dashboard/pages/page.tsx"
|
|
64597
|
-
]
|
|
64598
|
-
}
|
|
64599
|
-
},
|
|
64600
64596
|
CustomElementWidget: {
|
|
64601
64597
|
path: "custom-element",
|
|
64602
64598
|
description: "A Custom Element that displays a countdown timer",
|
|
@@ -64628,22 +64624,6 @@ var require_load_examples = __commonJS({
|
|
|
64628
64624
|
]
|
|
64629
64625
|
}
|
|
64630
64626
|
},
|
|
64631
|
-
EventCountdown: {
|
|
64632
|
-
path: "event-countdown",
|
|
64633
|
-
description: "A dashboard app that allows administrators to create and manage countdown timers for events",
|
|
64634
|
-
files: {
|
|
64635
|
-
[types_1.ExtensionType.DASHBOARD_PAGE]: [
|
|
64636
|
-
"event-countdown/src/dashboard/pages/countdown-timer-settings/page.tsx",
|
|
64637
|
-
"event-countdown/src/components/countdown-timer-settings.tsx",
|
|
64638
|
-
"event-countdown/src/components/countdown-preview.tsx",
|
|
64639
|
-
"event-countdown/src/types.ts",
|
|
64640
|
-
"event-countdown/src/dashboard/withProviders.tsx"
|
|
64641
|
-
],
|
|
64642
|
-
[types_1.ExtensionType.EMBEDDED_SCRIPT]: [
|
|
64643
|
-
"event-countdown/src/site/embedded-scripts/countdown-timer/embedded.html"
|
|
64644
|
-
]
|
|
64645
|
-
}
|
|
64646
|
-
},
|
|
64647
64627
|
ProductCreatedLogger: {
|
|
64648
64628
|
path: "product-created-logger",
|
|
64649
64629
|
description: "A webhook that logs product changes",
|
|
@@ -64680,17 +64660,10 @@ var require_load_examples = __commonJS({
|
|
|
64680
64660
|
var examples = {
|
|
64681
64661
|
[types_1.ExtensionType.DASHBOARD_PAGE]: [
|
|
64682
64662
|
appsExamples.SurveyManager,
|
|
64683
|
-
appsExamples.EventCountdown,
|
|
64684
64663
|
appsExamples.CouponPopup,
|
|
64685
|
-
appsExamples.AIChatbot
|
|
64686
|
-
appsExamples.MixPanelAnalystic,
|
|
64687
|
-
appsExamples.MyLocationApp
|
|
64688
|
-
],
|
|
64689
|
-
[types_1.ExtensionType.EMBEDDED_SCRIPT]: [
|
|
64690
|
-
appsExamples.MixPanelAnalystic,
|
|
64691
|
-
appsExamples.CouponPopup,
|
|
64692
|
-
appsExamples.EventCountdown
|
|
64664
|
+
appsExamples.AIChatbot
|
|
64693
64665
|
],
|
|
64666
|
+
[types_1.ExtensionType.EMBEDDED_SCRIPT]: [appsExamples.CouponPopup],
|
|
64694
64667
|
[types_1.ExtensionType.SERVICE_PLUGIN]: [appsExamples.SPISExample],
|
|
64695
64668
|
[types_1.ExtensionType.SITE_COMPONENT]: [appsExamples.InventoryCountdown],
|
|
64696
64669
|
[types_1.ExtensionType.SITE_WIDGET]: [appsExamples.CustomElementWidget],
|
|
@@ -78261,10 +78234,11 @@ var require_fixFlow = __commonJS({
|
|
|
78261
78234
|
};
|
|
78262
78235
|
await codeGenerationService_12.codeGenerationService.addTask(parentContext.jobId, {
|
|
78263
78236
|
id: fixTaskId,
|
|
78264
|
-
kind:
|
|
78237
|
+
kind: ditto_codegen_types_12.TaskKind.FIX_CODE,
|
|
78265
78238
|
name: "Auto-Fixer",
|
|
78266
78239
|
status: ditto_codegen_types_12.Status.RUNNING,
|
|
78267
|
-
description: "Running automatic code fixes"
|
|
78240
|
+
description: "Running automatic code fixes",
|
|
78241
|
+
agentName: "NaiveFixerAgent"
|
|
78268
78242
|
});
|
|
78269
78243
|
console.log("\u{1F50D} Running validation and batch fix...");
|
|
78270
78244
|
const processFiles = async (fileEntries, lastRunErrors) => {
|
|
@@ -85618,6 +85592,7 @@ var require_codegen_flow_helpers = __commonJS({
|
|
|
85618
85592
|
var http_1 = require_http_impl();
|
|
85619
85593
|
var http_client_1 = require_index_node();
|
|
85620
85594
|
var orchestrator_1 = require_orchestrator();
|
|
85595
|
+
var AgentsFactory_1 = require_AgentsFactory();
|
|
85621
85596
|
var slugify = (str = "") => {
|
|
85622
85597
|
return str.toLowerCase().replace(/ /g, "-");
|
|
85623
85598
|
};
|
|
@@ -85630,11 +85605,12 @@ var require_codegen_flow_helpers = __commonJS({
|
|
|
85630
85605
|
const taskId = getTaskId(extension);
|
|
85631
85606
|
codeGenerationService_12.codeGenerationService.addTask(jobContext.jobId, {
|
|
85632
85607
|
id: taskId,
|
|
85633
|
-
kind:
|
|
85608
|
+
kind: ditto_codegen_types_12.TaskKind.RUN_AGENT,
|
|
85634
85609
|
status: ditto_codegen_types_12.Status.RUNNING,
|
|
85635
85610
|
name: "run_agent",
|
|
85636
85611
|
description: `Run agent for ${extension.name}`,
|
|
85637
|
-
payload: { extension }
|
|
85612
|
+
payload: { extension },
|
|
85613
|
+
agentName: new AgentsFactory_1.AgentsFactory().getAgent(extension).name
|
|
85638
85614
|
});
|
|
85639
85615
|
});
|
|
85640
85616
|
eventEmitter.onEvent("agent:done", ({ extension, files }) => {
|
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.178",
|
|
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": "d5724027b8c912830720b4abdda14f6a232e7dbf770df1d3b8b3f99c"
|
|
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
|
-
})
|