@asantemedia-org/edwardsvacuum-design-system 1.6.19 → 1.6.20

package/dist/index.js

@@ -753,10 +753,12 @@ var QrFormField = function (props) {
   }, []);
   var supportsValue = props.type !== "checkbox";
   return props.type ? /*#__PURE__*/React.createElement("div", {
-    className: "qr-form-filed-wrapper"
+    className: (props.hasError ? "error" : "") + " qr-form-filed-wrapper"
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: inputId
-  }, /*#__PURE__*/React.createElement("span", null, props.label, " ", props.required && /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "label"
+  }, props.label, " ", props.required && /*#__PURE__*/React.createElement("span", {
     className: "required-asterisk"
   }, "*")), /*#__PURE__*/React.createElement(FormFieldRenderer, _extends({
     key: props.value,
@@ -785,20 +787,37 @@ var QrFormField = function (props) {
 };
 
 var QrForm = function (props) {
-  var _a = React.useState(0),
-    currentPage = _a[0],
-    setCurrentPage = _a[1];
-  var _b = React.useState({}),
-    formValues = _b[0],
-    setFormValues = _b[1];
+  var _a;
+  var _b = React.useState(0),
+    currentPage = _b[0],
+    setCurrentPage = _b[1];
   var _c = React.useState({}),
-    errors = _c[0],
-    setErrors = _c[1];
-  var _d = React.useState(false);
-    _d[0];
-    var setShowErrors = _d[1];
+    formValues = _c[0],
+    setFormValues = _c[1];
+  var _d = React.useState({}),
+    errors = _d[0],
+    setErrors = _d[1];
+  var _e = React.useState(false);
+    _e[0];
+    var setShowErrors = _e[1];
+  var _f = React.useState(null),
+    countryOptions = _f[0],
+    setCountryOptions = _f[1];
+  var _g = React.useState(true);
+    _g[0];
+    var setIsLoadingCountries = _g[1];
   var i18n = props;
   var buttonProps = props;
+  var consentFields = ((_a = props.consents) === null || _a === void 0 ? void 0 : _a.map(function (consent, index) {
+    return {
+      type: "checkbox",
+      name: "consent_".concat(index + 1),
+      label: consent.policyText ? consent.policyText : consent.policyLink ? "I accept the policy: ".concat(consent.policyLink) : "Consent ".concat(index + 1),
+      value: "true",
+      required: !!consent.policyMandatory,
+      errorMessage: consent.policyMandatory ? "Please acknowledge this consent" : ""
+    };
+  })) || [];
   React.useEffect(function () {
     var initialValues = {};
     props.fields.forEach(function (field) {
@@ -806,6 +825,95 @@ var QrForm = function (props) {
     });
     setFormValues(initialValues);
   }, [props.fields]);
+  React.useEffect(function () {
+    function loadCountries() {
+      return __awaiter(this, void 0, void 0, function () {
+        var fallbackCountries, res, data, err_1;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              fallbackCountries = [{
+                value: "us",
+                label: "United States"
+              }, {
+                value: "gb",
+                label: "United Kingdom"
+              }, {
+                value: "de",
+                label: "Germany"
+              }, {
+                value: "fr",
+                label: "France"
+              }, {
+                value: "cn",
+                label: "China"
+              }, {
+                value: "other",
+                label: "Other"
+              }];
+              _a.label = 1;
+            case 1:
+              _a.trys.push([1, 4, 5, 6]);
+              return [4 /*yield*/, fetch("/etc.clientlibs/vtba/clientlibs/resources/countries.json")];
+            case 2:
+              res = _a.sent();
+              if (!res.ok) throw new Error("HTTP ".concat(res.status));
+              return [4 /*yield*/, res.json()];
+            case 3:
+              data = _a.sent();
+              setCountryOptions((data === null || data === void 0 ? void 0 : data.options) || fallbackCountries);
+              return [3 /*break*/, 6];
+            case 4:
+              err_1 = _a.sent();
+              console.warn("Could not fetch countries.json, using fallback:", err_1);
+              setCountryOptions(fallbackCountries);
+              return [3 /*break*/, 6];
+            case 5:
+              setIsLoadingCountries(false);
+              return [7 /*endfinally*/];
+            case 6:
+              return [2 /*return*/];
+          }
+        });
+      });
+    }
+    loadCountries();
+  }, []);
+  React.useEffect(function () {
+    function fetchCity() {
+      return __awaiter(this, void 0, void 0, function () {
+        var res, data_1, err_2;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              _a.trys.push([0, 3,, 4]);
+              return [4 /*yield*/, fetch('https://ipapi.co/json/')];
+            case 1:
+              res = _a.sent();
+              if (!res.ok) throw new Error('IP lookup failed');
+              return [4 /*yield*/, res.json()];
+            case 2:
+              data_1 = _a.sent();
+              if (data_1.city) {
+                setFormValues(function (prev) {
+                  return __assign(__assign({}, prev), {
+                    ip_location: data_1.city
+                  });
+                });
+              }
+              return [3 /*break*/, 4];
+            case 3:
+              err_2 = _a.sent();
+              console.warn('Could not resolve city from IP:', err_2);
+              return [3 /*break*/, 4];
+            case 4:
+              return [2 /*return*/];
+          }
+        });
+      });
+    }
+    fetchCity();
+  }, []);
   var pages = [__spreadArray(__spreadArray([], props.fields, true), [{
     type: "select",
     name: "how_can_we_help",
@@ -845,15 +953,17 @@ var QrForm = function (props) {
     name: "firstname",
     label: "First Name",
     placeholder: "First Name"
+  }, {
+    type: "text",
+    name: "company",
+    label: "Company",
+    placeholder: "Company"
   }], /*page 3*/
   [{
     type: "select",
     name: "country",
     label: "Country",
-    options: [{
-      value: 'poland',
-      label: 'Poland'
-    }]
+    options: countryOptions || []
   }, {
     type: "email",
     name: "email",
@@ -861,15 +971,25 @@ var QrForm = function (props) {
     placeholder: "Email",
     required: true,
     errorMessage: "Error"
-  }], /*Page 4*/
-  [{
-    type: "checkbox",
-    name: "consent1",
-    label: "I have read and accepted the privacy policy",
-    value: "true",
-    required: true,
-    errorMessage: "Please acknowledge the T&Cs"
-  }]];
+  }, {
+    type: "tel",
+    name: "phone",
+    label: "Phone",
+    placeholder: "Phone",
+    required: false
+  }, {
+    type: "text",
+    name: "city",
+    label: "City",
+    placeholder: "City",
+    required: false
+  }, {
+    type: "text",
+    name: "postcode",
+    label: "Postcode / ZIP",
+    placeholder: "Postcode / ZIP",
+    required: false
+  }], __spreadArray([], consentFields, true)];
   var handleChange = function (name, value) {
     setFormValues(function (prevValues) {
       var _a;
@@ -1066,6 +1186,10 @@ var QrForm = function (props) {
   }), renderFormSection({
     pageIndex: 3,
     sectionTitle: "Form consent"
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    name: "ip_location",
+    value: formValues.ip_location || ''
   })) : /*#__PURE__*/React.createElement("div", {
     className: "qr-form-thank-you-page"
   }, /*#__PURE__*/React.createElement("h2", null, props.thankYouTitle), /*#__PURE__*/React.createElement("p", null, props.thankYouText), /*#__PURE__*/React.createElement(Button, {