@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.mjs CHANGED
@@ -1784,6 +1784,16 @@ var QuestionnaireForm = ({
1784
1784
  }
1785
1785
  });
1786
1786
  onSubmit?.(finalResponses);
1787
+ } else {
1788
+ setTimeout(() => {
1789
+ const firstErrorElement = document.querySelector('[data-has-error="true"]');
1790
+ if (firstErrorElement) {
1791
+ firstErrorElement.scrollIntoView({
1792
+ behavior: "smooth",
1793
+ block: "center"
1794
+ });
1795
+ }
1796
+ }, 100);
1787
1797
  }
1788
1798
  };
1789
1799
  const renderQuestion = (question) => {
@@ -2044,62 +2054,78 @@ var QuestionnaireForm = ({
2044
2054
  return /* @__PURE__ */ jsxs("div", { className: "pb-[80px] light", children: [
2045
2055
  questions && questions.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8 dark:bg-white dark:border-[#E4E5E6] l:p-4", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions.map((question) => {
2046
2056
  const questionId = getQuestionId(question);
2047
- return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
2048
- /* @__PURE__ */ jsxs("label", { className: "block", children: [
2049
- /* @__PURE__ */ jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
2050
- question.label,
2051
- question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
2052
- ] }),
2053
- question.description && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: question.description }),
2054
- question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: pageData.emailDescription })
2055
- ] }),
2056
- renderQuestion(question),
2057
- question.hint && !errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
2058
- errors[questionId] && /* @__PURE__ */ jsx(
2059
- "p",
2060
- {
2061
- className: "text-sm font-bold",
2062
- style: { color: "#FF4D4D" },
2063
- children: errors[questionId]
2064
- }
2065
- )
2066
- ] }, questionId);
2057
+ const hasError = !!errors[questionId];
2058
+ return /* @__PURE__ */ jsxs(
2059
+ "div",
2060
+ {
2061
+ className: "space-y-2",
2062
+ "data-has-error": hasError ? "true" : "false",
2063
+ children: [
2064
+ /* @__PURE__ */ jsxs("label", { className: "block", children: [
2065
+ /* @__PURE__ */ jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
2066
+ question.label,
2067
+ question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
2068
+ ] }),
2069
+ question.description && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: question.description }),
2070
+ question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: pageData.emailDescription })
2071
+ ] }),
2072
+ renderQuestion(question),
2073
+ question.hint && !errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
2074
+ errors[questionId] && /* @__PURE__ */ jsx(
2075
+ "p",
2076
+ {
2077
+ className: "text-sm font-bold",
2078
+ style: { color: "#FF4D4D" },
2079
+ children: errors[questionId]
2080
+ }
2081
+ )
2082
+ ]
2083
+ },
2084
+ questionId
2085
+ );
2067
2086
  }) }) }),
2068
2087
  !!selectedTimeslotId && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
2069
- pageData?.agrees && pageData.agrees.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-4 mt-8", children: [
2070
- pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
2071
- /* @__PURE__ */ jsx(
2072
- "input",
2073
- {
2074
- type: "checkbox",
2075
- id: `agreement-${index}`,
2076
- checked: agreements[index] || false,
2077
- onChange: (e) => handleAgreementChange(index, e.target.checked),
2078
- className: "w-5 h-5 rounded text-[#3ADB67] focus:ring-[#3ADB67] cursor-pointer flex-shrink-0",
2079
- style: {
2080
- accentColor: "#3ADB67"
2088
+ pageData?.agrees && pageData.agrees.length > 0 && /* @__PURE__ */ jsxs(
2089
+ "div",
2090
+ {
2091
+ className: "space-y-4 mt-8",
2092
+ "data-has-error": agreementError ? "true" : "false",
2093
+ children: [
2094
+ pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
2095
+ /* @__PURE__ */ jsx(
2096
+ "input",
2097
+ {
2098
+ type: "checkbox",
2099
+ id: `agreement-${index}`,
2100
+ checked: agreements[index] || false,
2101
+ onChange: (e) => handleAgreementChange(index, e.target.checked),
2102
+ className: "w-5 h-5 rounded text-[#3ADB67] focus:ring-[#3ADB67] cursor-pointer flex-shrink-0",
2103
+ style: {
2104
+ accentColor: "#3ADB67"
2105
+ }
2106
+ }
2107
+ ),
2108
+ /* @__PURE__ */ jsx(
2109
+ "label",
2110
+ {
2111
+ htmlFor: `agreement-${index}`,
2112
+ 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",
2113
+ dangerouslySetInnerHTML: { __html: agreeContent },
2114
+ "aria-label": `Agreement ${index + 1}`
2115
+ }
2116
+ )
2117
+ ] }, index)),
2118
+ agreementError && /* @__PURE__ */ jsx(
2119
+ "p",
2120
+ {
2121
+ className: "text-sm font-bold mt-2",
2122
+ style: { color: "#FF4D4D" },
2123
+ children: agreementError
2081
2124
  }
2082
- }
2083
- ),
2084
- /* @__PURE__ */ jsx(
2085
- "label",
2086
- {
2087
- htmlFor: `agreement-${index}`,
2088
- 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",
2089
- dangerouslySetInnerHTML: { __html: agreeContent },
2090
- "aria-label": `Agreement ${index + 1}`
2091
- }
2092
- )
2093
- ] }, index)),
2094
- agreementError && /* @__PURE__ */ jsx(
2095
- "p",
2096
- {
2097
- className: "text-sm font-bold mt-2",
2098
- style: { color: "#FF4D4D" },
2099
- children: agreementError
2100
- }
2101
- )
2102
- ] }),
2125
+ )
2126
+ ]
2127
+ }
2128
+ ),
2103
2129
  /* @__PURE__ */ jsx(
2104
2130
  "button",
2105
2131
  {
@@ -8929,23 +8955,23 @@ var BookingSuccess = ({
8929
8955
  return null;
8930
8956
  }
8931
8957
  return /* @__PURE__ */ jsx("div", { className: `min-h-screen l:py-0 l:px-0 py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto", children: [
8932
- /* @__PURE__ */ jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: pageData.yourAppointment }),
8958
+ /* @__PURE__ */ jsx("h1", { className: "text-[48px] xxl:text-[32px] font-bold text-[#080A0F] mb-8", children: pageData.yourAppointment }),
8933
8959
  isCancelled && /* @__PURE__ */ 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: [
8934
- /* @__PURE__ */ jsx("p", { className: "text-base text-gray-700", children: pageData.appointmentCanceled }),
8960
+ /* @__PURE__ */ jsx("p", { className: "text-base text-[#080A0F]", children: pageData.appointmentCanceled }),
8935
8961
  onScheduleAgain && bookingData && /* @__PURE__ */ jsx(
8936
8962
  "button",
8937
8963
  {
8938
8964
  onClick: () => onScheduleAgain(bookingData.demoroom_code),
8939
- className: "px-6 py-3 bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
8965
+ className: "px-6 py-3 text-[16px] bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
8940
8966
  children: pageData.scheduleAgain
8941
8967
  }
8942
8968
  )
8943
8969
  ] }),
8944
8970
  /* @__PURE__ */ jsxs("div", { className: "space-y-8 bg-white px-[48px] l:px-[16px] l:py-[16px] py-[32px] rounded-[16px]", children: [
8945
8971
  /* @__PURE__ */ jsxs("div", { children: [
8946
- /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.location }),
8972
+ /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.location }),
8947
8973
  /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
8948
- bookingData.demoroom_name && /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_name }),
8974
+ bookingData.demoroom_name && /* @__PURE__ */ jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.demoroom_name }),
8949
8975
  bookingData.address && /* @__PURE__ */ jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
8950
8976
  bookingData.latitude && bookingData.longitude && /* @__PURE__ */ jsx(
8951
8977
  "a",
@@ -8960,25 +8986,25 @@ var BookingSuccess = ({
8960
8986
  ] })
8961
8987
  ] }),
8962
8988
  /* @__PURE__ */ jsxs("div", { children: [
8963
- /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.dateAndTime }),
8964
- /* @__PURE__ */ jsxs("p", { className: "text-base text-gray-900", children: [
8989
+ /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.dateAndTime }),
8990
+ /* @__PURE__ */ jsxs("p", { className: "text-base text-[#4A4C56]", children: [
8965
8991
  bookingData.booking_date,
8966
8992
  bookingData.time_slot && `, ${bookingData.time_slot}`,
8967
8993
  !bookingData.time_slot && bookingData.booking_time && `, ${bookingData.booking_time}`
8968
8994
  ] })
8969
8995
  ] }),
8970
8996
  bookingData.equipment && /* @__PURE__ */ jsxs("div", { children: [
8971
- /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.event }),
8972
- /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
8997
+ /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.event }),
8998
+ /* @__PURE__ */ jsx("p", { className: "text-base text-[#4A4C56]", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
8973
8999
  ] }),
8974
9000
  /* @__PURE__ */ jsxs("div", { children: [
8975
- /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.demoRoom }),
8976
- /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
9001
+ /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.demoRoom }),
9002
+ /* @__PURE__ */ jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.demoroom_code })
8977
9003
  ] }),
8978
9004
  /* @__PURE__ */ jsxs("div", { children: [
8979
- /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.visitorInfo }),
9005
+ /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.visitorInfo }),
8980
9006
  /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
8981
- /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
9007
+ /* @__PURE__ */ jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.customer_name }),
8982
9008
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
8983
9009
  /* @__PURE__ */ jsx(
8984
9010
  "svg",
@@ -9091,7 +9117,7 @@ var BookingSuccess = ({
9091
9117
  }
9092
9118
  ) }) }),
9093
9119
  /* @__PURE__ */ jsxs("div", { className: "text-center mb-8", children: [
9094
- /* @__PURE__ */ jsx("h3", { className: "text-[18px] text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
9120
+ /* @__PURE__ */ jsx("h3", { className: "text-[18px] text-[#4A4C56] mb-2", children: pageData.cancelDialog?.title }),
9095
9121
  /* @__PURE__ */ jsx("p", { className: "text-[14px] text-gray-600", children: pageData.cancelDialog?.description })
9096
9122
  ] }),
9097
9123
  /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [