@anker-in/ui 0.1.18 → 0.1.19

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/index.js CHANGED
@@ -1798,6 +1798,16 @@ var QuestionnaireForm = ({
1798
1798
  }
1799
1799
  });
1800
1800
  onSubmit?.(finalResponses);
1801
+ } else {
1802
+ setTimeout(() => {
1803
+ const firstErrorElement = document.querySelector('[data-has-error="true"]');
1804
+ if (firstErrorElement) {
1805
+ firstErrorElement.scrollIntoView({
1806
+ behavior: "smooth",
1807
+ block: "center"
1808
+ });
1809
+ }
1810
+ }, 100);
1801
1811
  }
1802
1812
  };
1803
1813
  const renderQuestion = (question) => {
@@ -2058,62 +2068,78 @@ var QuestionnaireForm = ({
2058
2068
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[80px] light", children: [
2059
2069
  questions && questions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8 dark:bg-white dark:border-[#E4E5E6] l:p-4", children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions.map((question) => {
2060
2070
  const questionId = getQuestionId(question);
2061
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
2062
- /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block", children: [
2063
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
2064
- question.label,
2065
- question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
2066
- ] }),
2067
- question.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: question.description }),
2068
- question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: pageData.emailDescription })
2069
- ] }),
2070
- renderQuestion(question),
2071
- question.hint && !errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
2072
- errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx(
2073
- "p",
2074
- {
2075
- className: "text-sm font-bold",
2076
- style: { color: "#FF4D4D" },
2077
- children: errors[questionId]
2078
- }
2079
- )
2080
- ] }, questionId);
2071
+ const hasError = !!errors[questionId];
2072
+ return /* @__PURE__ */ jsxRuntime.jsxs(
2073
+ "div",
2074
+ {
2075
+ className: "space-y-2",
2076
+ "data-has-error": hasError ? "true" : "false",
2077
+ children: [
2078
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block", children: [
2079
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
2080
+ question.label,
2081
+ question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
2082
+ ] }),
2083
+ question.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: question.description }),
2084
+ question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: pageData.emailDescription })
2085
+ ] }),
2086
+ renderQuestion(question),
2087
+ question.hint && !errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
2088
+ errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx(
2089
+ "p",
2090
+ {
2091
+ className: "text-sm font-bold",
2092
+ style: { color: "#FF4D4D" },
2093
+ children: errors[questionId]
2094
+ }
2095
+ )
2096
+ ]
2097
+ },
2098
+ questionId
2099
+ );
2081
2100
  }) }) }),
2082
2101
  !!selectedTimeslotId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [
2083
- pageData?.agrees && pageData.agrees.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 mt-8", children: [
2084
- pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
2085
- /* @__PURE__ */ jsxRuntime.jsx(
2086
- "input",
2087
- {
2088
- type: "checkbox",
2089
- id: `agreement-${index}`,
2090
- checked: agreements[index] || false,
2091
- onChange: (e) => handleAgreementChange(index, e.target.checked),
2092
- className: "w-5 h-5 rounded text-[#3ADB67] focus:ring-[#3ADB67] cursor-pointer flex-shrink-0",
2093
- style: {
2094
- accentColor: "#3ADB67"
2102
+ pageData?.agrees && pageData.agrees.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
2103
+ "div",
2104
+ {
2105
+ className: "space-y-4 mt-8",
2106
+ "data-has-error": agreementError ? "true" : "false",
2107
+ children: [
2108
+ pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
2109
+ /* @__PURE__ */ jsxRuntime.jsx(
2110
+ "input",
2111
+ {
2112
+ type: "checkbox",
2113
+ id: `agreement-${index}`,
2114
+ checked: agreements[index] || false,
2115
+ onChange: (e) => handleAgreementChange(index, e.target.checked),
2116
+ className: "w-5 h-5 rounded text-[#3ADB67] focus:ring-[#3ADB67] cursor-pointer flex-shrink-0",
2117
+ style: {
2118
+ accentColor: "#3ADB67"
2119
+ }
2120
+ }
2121
+ ),
2122
+ /* @__PURE__ */ jsxRuntime.jsx(
2123
+ "label",
2124
+ {
2125
+ htmlFor: `agreement-${index}`,
2126
+ className: "text-sm text-gray-700 dark:text-gray-700 font-bold cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
2127
+ dangerouslySetInnerHTML: { __html: agreeContent },
2128
+ "aria-label": `Agreement ${index + 1}`
2129
+ }
2130
+ )
2131
+ ] }, index)),
2132
+ agreementError && /* @__PURE__ */ jsxRuntime.jsx(
2133
+ "p",
2134
+ {
2135
+ className: "text-sm font-bold mt-2",
2136
+ style: { color: "#FF4D4D" },
2137
+ children: agreementError
2095
2138
  }
2096
- }
2097
- ),
2098
- /* @__PURE__ */ jsxRuntime.jsx(
2099
- "label",
2100
- {
2101
- htmlFor: `agreement-${index}`,
2102
- className: "text-sm text-gray-700 dark:text-gray-700 font-bold cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
2103
- dangerouslySetInnerHTML: { __html: agreeContent },
2104
- "aria-label": `Agreement ${index + 1}`
2105
- }
2106
- )
2107
- ] }, index)),
2108
- agreementError && /* @__PURE__ */ jsxRuntime.jsx(
2109
- "p",
2110
- {
2111
- className: "text-sm font-bold mt-2",
2112
- style: { color: "#FF4D4D" },
2113
- children: agreementError
2114
- }
2115
- )
2116
- ] }),
2139
+ )
2140
+ ]
2141
+ }
2142
+ ),
2117
2143
  /* @__PURE__ */ jsxRuntime.jsx(
2118
2144
  "button",
2119
2145
  {
@@ -8943,23 +8969,23 @@ var BookingSuccess = ({
8943
8969
  return null;
8944
8970
  }
8945
8971
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen l:py-0 l:px-0 py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto", children: [
8946
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: pageData.yourAppointment }),
8972
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[48px] xxl:text-[32px] font-bold text-[#080A0F] mb-8", children: pageData.yourAppointment }),
8947
8973
  isCancelled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-[16px] l:items-start p-6 mb-4 l:gap-2 flex l:flex-col items-center justify-between", children: [
8948
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-700", children: pageData.appointmentCanceled }),
8974
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-[#080A0F]", children: pageData.appointmentCanceled }),
8949
8975
  onScheduleAgain && bookingData && /* @__PURE__ */ jsxRuntime.jsx(
8950
8976
  "button",
8951
8977
  {
8952
8978
  onClick: () => onScheduleAgain(bookingData.demoroom_code),
8953
- className: "px-6 py-3 bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
8979
+ className: "px-6 py-3 text-[16px] bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
8954
8980
  children: pageData.scheduleAgain
8955
8981
  }
8956
8982
  )
8957
8983
  ] }),
8958
8984
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8 bg-white px-[48px] l:px-[16px] l:py-[16px] py-[32px] rounded-[16px]", children: [
8959
8985
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8960
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.location }),
8986
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.location }),
8961
8987
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
8962
- bookingData.demoroom_name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_name }),
8988
+ bookingData.demoroom_name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.demoroom_name }),
8963
8989
  bookingData.address && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
8964
8990
  bookingData.latitude && bookingData.longitude && /* @__PURE__ */ jsxRuntime.jsx(
8965
8991
  "a",
@@ -8974,25 +9000,25 @@ var BookingSuccess = ({
8974
9000
  ] })
8975
9001
  ] }),
8976
9002
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8977
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.dateAndTime }),
8978
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base text-gray-900", children: [
9003
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.dateAndTime }),
9004
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base text-[#4A4C56]", children: [
8979
9005
  bookingData.booking_date,
8980
9006
  bookingData.time_slot && `, ${bookingData.time_slot}`,
8981
9007
  !bookingData.time_slot && bookingData.booking_time && `, ${bookingData.booking_time}`
8982
9008
  ] })
8983
9009
  ] }),
8984
9010
  bookingData.equipment && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8985
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.event }),
8986
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
9011
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.event }),
9012
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-[#4A4C56]", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
8987
9013
  ] }),
8988
9014
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8989
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.demoRoom }),
8990
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
9015
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.demoRoom }),
9016
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.demoroom_code })
8991
9017
  ] }),
8992
9018
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8993
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.visitorInfo }),
9019
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.visitorInfo }),
8994
9020
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
8995
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
9021
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.customer_name }),
8996
9022
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
8997
9023
  /* @__PURE__ */ jsxRuntime.jsx(
8998
9024
  "svg",
@@ -9105,7 +9131,7 @@ var BookingSuccess = ({
9105
9131
  }
9106
9132
  ) }) }),
9107
9133
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-8", children: [
9108
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[18px] text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
9134
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[18px] text-[#4A4C56] mb-2", children: pageData.cancelDialog?.title }),
9109
9135
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] text-gray-600", children: pageData.cancelDialog?.description })
9110
9136
  ] }),
9111
9137
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-center", children: [