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

package/dist/index.css

@@ -1413,7 +1413,7 @@
   border-radius: 50%;
 }
 .qr-journey-form-wrapper section .progress-indicator .progress-visual {
-  --percent:30%;
+  --percent: 30%;
   position: absolute;
   background: conic-gradient(rgb(196, 38, 46) var(--percent), transparent 0);
   width: 51px;
@@ -1453,18 +1453,34 @@
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=text], .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=email], .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=number], .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel], .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=text], .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=email], .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=number], .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel], .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=text], .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=email], .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=number], .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel] {
   line-height: 1em;
-  padding: 10px 18px;
+  padding: 20px 18px 2px 18px;
   box-sizing: content-box;
 }
+.qr-journey-form-wrapper .qr-form-filed-wrapper label input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:focus-visible {
+  border: 2px solid #678B3B;
+  outline: none;
+}
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea {
   line-height: 1em;
-  padding: 10px 18px;
+  padding: 20px 18px 2px 18px;
   box-sizing: content-box;
 }
-.qr-journey-form-wrapper .qr-form-filed-wrapper label > span {
-  opacity: 0;
+.qr-journey-form-wrapper .qr-form-filed-wrapper label > .label {
+  position: relative;
+  top: 10px;
+  left: 10px;
+  font-size: 12px;
   line-height: 0;
 }
+.qr-journey-form-wrapper .qr-form-filed-wrapper.error label input {
+  border: 2px solid rgb(196, 38, 46);
+}
+.qr-journey-form-wrapper .qr-form-filed-wrapper.error .formfield-error {
+  position: relative;
+  top: -10px;
+  font-size: 16px;
+  line-height: 18px;
+}
 .qr-journey-form-wrapper .disabled-product-fields-section {
   background-color: rgb(233, 233, 233);
   padding: 5px 18px;
@@ -1498,7 +1514,7 @@
   flex: 0.5 1;
   min-width: 50%;
 }
-.qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper label span {
+.qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper label .label {
   height: 1em;
   opacity: 1;
   font-weight: 900;

package/dist/index.esm.css

@@ -1413,7 +1413,7 @@
   border-radius: 50%;
 }
 .qr-journey-form-wrapper section .progress-indicator .progress-visual {
-  --percent:30%;
+  --percent: 30%;
   position: absolute;
   background: conic-gradient(rgb(196, 38, 46) var(--percent), transparent 0);
   width: 51px;
@@ -1453,18 +1453,34 @@
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=text], .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=email], .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=number], .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel], .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=text], .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=email], .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=number], .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel], .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=text], .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=email], .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=number], .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel] {
   line-height: 1em;
-  padding: 10px 18px;
+  padding: 20px 18px 2px 18px;
   box-sizing: content-box;
 }
+.qr-journey-form-wrapper .qr-form-filed-wrapper label input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:focus-visible {
+  border: 2px solid #678B3B;
+  outline: none;
+}
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea {
   line-height: 1em;
-  padding: 10px 18px;
+  padding: 20px 18px 2px 18px;
   box-sizing: content-box;
 }
-.qr-journey-form-wrapper .qr-form-filed-wrapper label > span {
-  opacity: 0;
+.qr-journey-form-wrapper .qr-form-filed-wrapper label > .label {
+  position: relative;
+  top: 10px;
+  left: 10px;
+  font-size: 12px;
   line-height: 0;
 }
+.qr-journey-form-wrapper .qr-form-filed-wrapper.error label input {
+  border: 2px solid rgb(196, 38, 46);
+}
+.qr-journey-form-wrapper .qr-form-filed-wrapper.error .formfield-error {
+  position: relative;
+  top: -10px;
+  font-size: 16px;
+  line-height: 18px;
+}
 .qr-journey-form-wrapper .disabled-product-fields-section {
   background-color: rgb(233, 233, 233);
   padding: 5px 18px;
@@ -1498,7 +1514,7 @@
   flex: 0.5 1;
   min-width: 50%;
 }
-.qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper label span {
+.qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper label .label {
   height: 1em;
   opacity: 1;
   font-weight: 900;

package/dist/index.esm.js

@@ -751,10 +751,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,
@@ -783,20 +785,37 @@ var QrFormField = function (props) {
 };
 
 var QrForm = function (props) {
-  var _a = useState(0),
-    currentPage = _a[0],
-    setCurrentPage = _a[1];
-  var _b = useState({}),
-    formValues = _b[0],
-    setFormValues = _b[1];
+  var _a;
+  var _b = useState(0),
+    currentPage = _b[0],
+    setCurrentPage = _b[1];
   var _c = useState({}),
-    errors = _c[0],
-    setErrors = _c[1];
-  var _d = useState(false);
-    _d[0];
-    var setShowErrors = _d[1];
+    formValues = _c[0],
+    setFormValues = _c[1];
+  var _d = useState({}),
+    errors = _d[0],
+    setErrors = _d[1];
+  var _e = useState(false);
+    _e[0];
+    var setShowErrors = _e[1];
+  var _f = useState(null),
+    countryOptions = _f[0],
+    setCountryOptions = _f[1];
+  var _g = 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" : ""
+    };
+  })) || [];
   useEffect(function () {
     var initialValues = {};
     props.fields.forEach(function (field) {
@@ -804,6 +823,95 @@ var QrForm = function (props) {
     });
     setFormValues(initialValues);
   }, [props.fields]);
+  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();
+  }, []);
+  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",
@@ -843,15 +951,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",
@@ -859,15 +969,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;
@@ -925,7 +1045,6 @@ var QrForm = function (props) {
       return __generator(this, function (_a) {
         ev.preventDefault();
         setShowErrors(true); // Attempting to submit, so show errors
-        debugger;
         if (validatePage(currentPage)) {
           if (props.onSubmit) {
             props.onSubmit(formValues);
@@ -1037,8 +1156,7 @@ var QrForm = function (props) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "qr-journey-form-wrapper"
-  }, props.formHeader && /*#__PURE__*/React.createElement("h1", null, props.formHeader), "Show thank you:", props.showThankYou, /*#__PURE__*/React.createElement("form", {
-    hidden: props.showThankYou,
+  }, props.formHeader && /*#__PURE__*/React.createElement("h1", null, props.formHeader), "Show thank you:", props.showThankYou, !props.showThankYou ? /*#__PURE__*/React.createElement("form", {
     action: "".concat(props.formAction, "/").concat(props.hubspotAppId, "/").concat(props.hubspotId),
     onSubmit: handleSubmit
   }, currentPage === 0 && /*#__PURE__*/React.createElement("section", {
@@ -1066,9 +1184,12 @@ var QrForm = function (props) {
   }), renderFormSection({
     pageIndex: 3,
     sectionTitle: "Form consent"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "qr-form-thank-you-page",
-    hidden: !props.showThankYou
+  }), /*#__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, {
     label: buttonProps.buttonText,
     href: buttonProps.url,