fontdue-js 2.22.0 → 2.22.1

package/dist-cjs/components/Icons/CircledMinus.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CircledMinus = () => /*#__PURE__*/_react.default.createElement("span", {
+  className: "icon",
+  "data-label": "CircledMinus"
+}, /*#__PURE__*/_react.default.createElement("svg", {
+  viewBox: "0 0 23 23",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("path", {
+  d: "m11.5 23a11.5 11.5 0 1 1 11.5-11.5 11.513 11.513 0 0 1 -11.5 11.5zm0-22a10.5 10.5 0 1 0 10.5 10.5 10.512 10.512 0 0 0 -10.5-10.5z"
+}), /*#__PURE__*/_react.default.createElement("path", {
+  d: "m7 11h9v1h-9z"
+}))));
+var _default = CircledMinus;
+exports.default = _default;

package/dist-cjs/components/Icons/ColorPicker.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ColorPicker = () => /*#__PURE__*/_react.default.createElement("span", {
+  className: "icon",
+  "data-label": "ColorPicker"
+}, /*#__PURE__*/_react.default.createElement("svg", {
+  viewBox: "0 0 17 17",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "m0 8.5a8.5 8.5 0 0 0 8 8.475v.025h.5a8.5 8.5 0 0 0 0-17h-.5v.025a8.5 8.5 0 0 0 -8 8.475zm8-7.475v14.95a7.491 7.491 0 0 1 0-14.95z"
+})));
+var _default = ColorPicker;
+exports.default = _default;

package/dist-cjs/components/Icons/CreditCard.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CreditCard = () => /*#__PURE__*/_react.default.createElement("span", {
+  className: "icon",
+  "data-label": "CreditCard"
+}, /*#__PURE__*/_react.default.createElement("svg", {
+  viewBox: "0 0 31 21",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("path", {
+  d: "m27.5 0h-24a3.5 3.5 0 0 0 -3.5 3.5v14a3.5 3.5 0 0 0 3.5 3.5h24a3.5 3.5 0 0 0 3.5-3.5v-14a3.5 3.5 0 0 0 -3.5-3.5zm-24 1h24a2.5 2.5 0 0 1 2.5 2.5v.125h-29v-.125a2.5 2.5 0 0 1 2.5-2.5zm24 19h-24a2.5 2.5 0 0 1 -2.5-2.5v-9.875h29v9.875a2.5 2.5 0 0 1 -2.5 2.5z"
+}), /*#__PURE__*/_react.default.createElement("path", {
+  d: "m17.5 10h-13a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1z"
+}))));
+var _default = CreditCard;
+exports.default = _default;

package/dist-cjs/components/Icons/DownArrow.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DownArrow = () => /*#__PURE__*/_react.default.createElement("span", {
+  className: "icon",
+  "data-label": "DownArrow"
+}, /*#__PURE__*/_react.default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "11",
+  fill: "none",
+  viewBox: "0 0 16 11"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  fillRule: "evenodd",
+  d: "M8 10.895L.998.5h14.004L8 10.895zM13.123 1.5H2.877L8 9.105 13.123 1.5z",
+  clipRule: "evenodd"
+})));
+var _default = DownArrow;
+exports.default = _default;

package/dist-cjs/components/Icons/DownloadFonts.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DownloadFonts = () => /*#__PURE__*/_react.default.createElement("span", {
+  className: "icon",
+  "data-label": "DownloadFonts"
+}, /*#__PURE__*/_react.default.createElement("svg", {
+  viewBox: "0 0 30.5 79.875",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("path", {
+  d: "m29.5 69.625v9.25h-28.5v-9.25h-1v10.25h30.5v-10.25z"
+}), /*#__PURE__*/_react.default.createElement("path", {
+  d: "m14.75 18.75v48.942l-9.578-9.579-.707.708 10.785 10.785 10.783-10.784-.707-.707-9.576 9.577v-48.942z"
+}), /*#__PURE__*/_react.default.createElement("path", {
+  d: "m6.98 10.339h6.262l1.758 4.661h1.2l-5.458-14.222h-1.242l-5.459 14.222h1.18zm3.1-8.241h.08l2.721 7.221h-5.52z"
+}), /*#__PURE__*/_react.default.createElement("path", {
+  d: "m21.922 9.519c-2.3 0-3.781 1.2-3.781 2.961 0 1.64 1.3 2.8 3.22 2.8a3.424 3.424 0 0 0 3.1-1.56h.04v1.28h1.019v-6.221a3.1 3.1 0 0 0 -3.379-3.321 3.43 3.43 0 0 0 -3.581 2.461l1.041.14a2.4 2.4 0 0 1 2.46-1.7 2.225 2.225 0 0 1 2.379 2.48v1.22a5.548 5.548 0 0 0 -2.518-.54zm2.54 1.44v1.1c0 1.179-1.341 2.34-2.941 2.34a2.1 2.1 0 0 1 -2.3-2c0-1.221 1.02-2.04 2.8-2.04a4.945 4.945 0 0 1 2.441.6z"
+}))));
+var _default = DownloadFonts;
+exports.default = _default;

package/dist-cjs/components/Icons/FrowningFace.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const FrowningFace = () => /*#__PURE__*/_react.default.createElement("span", {
+  className: "icon",
+  "data-label": "FrowningFace"
+}, /*#__PURE__*/_react.default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 43.32 43.319"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M21.66,43.319A21.66,21.66,0,1,1,43.32,21.66,21.684,21.684,0,0,1,21.66,43.319Zm0-41.759a20.1,20.1,0,1,0,20.1,20.1A20.122,20.122,0,0,0,21.66,1.56Z"
+}), /*#__PURE__*/_react.default.createElement("path", {
+  d: "M18.3,16.08a3.24,3.24,0,1,1-3.24-3.24,3.24,3.24,0,0,1,3.24,3.24"
+}), /*#__PURE__*/_react.default.createElement("path", {
+  d: "M31.5,16.08a3.24,3.24,0,1,1-3.24-3.24,3.24,3.24,0,0,1,3.24,3.24"
+}), /*#__PURE__*/_react.default.createElement("path", {
+  d: "M12.39,31.648a.779.779,0,0,1-.611-1.264C14.617,26.8,17.664,25.2,21.66,25.2s7.04,1.6,9.881,5.186a.78.78,0,0,1-1.223.969c-2.516-3.178-5.186-4.6-8.658-4.6S15.517,28.175,13,31.352A.776.776,0,0,1,12.39,31.648Z"
+})));
+var _default = FrowningFace;
+exports.default = _default;

package/dist-cjs/components/Icons/License.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const License = () => /*#__PURE__*/_react.default.createElement("span", {
+  className: "icon",
+  "data-label": "License"
+}, /*#__PURE__*/_react.default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 31.621 30.826"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M20.967,11.907l-1.032-1.235,1.412-1.69L19.481,7.811l.82-2.044-2.135-.538.147-2.2-2.2.147-.538-2.134-2.044.819L12.364,0,10.673,1.411,8.982,0,7.811,1.864,5.768,1.045,5.229,3.179l-2.2-.147.148,2.2-2.135.538.819,2.044L0,8.982l1.411,1.69L0,12.362l1.865,1.172-.819,2.044,2.135.538-.148,2.2,2.2-.147.079.309V30.826l5.365-3.141,5.365,3.141V21.988l7.986,7.987L25.6,23.959l6.023-1.575ZM4.107,17.239l.126-1.888L2.4,14.888l.7-1.756L1.5,12.125l1.212-1.453L1.5,9.22,3.1,8.213,2.4,6.457l1.834-.463L4.107,4.106,6,4.233,6.457,2.4,8.214,3.1,9.221,1.5l1.452,1.211L12.126,1.5l1.007,1.6,1.757-.7.462,1.835,1.887-.127-.126,1.888,1.834.463-.7,1.756,1.6,1.007-1.212,1.452,1.212,1.453-1.6,1.007.7,1.756-1.834.463.126,1.888-1.887-.127-.306,1.212h-.008v.033l-.148.589-1.757-.7-1.007,1.6-1.453-1.213L9.221,19.844l-1.007-1.6-1.757.7-.149-.593v-.029H6.3L6,17.112Zm6.566,9.287L6.308,29.082v-9l1.5-.6,1.171,1.865,1.691-1.411,1.691,1.411,1.171-1.865,1.5.6v9Zm14.1-3.386L23.5,28.034l-7.46-7.46v-2.1l.079-.313,2.2.147-.147-2.2,2.135-.538-.82-2.044,1.046-.657,9.137,8.986Z"
+})));
+var _default = License;
+exports.default = _default;

package/dist-cjs/components/Icons/Receipt.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Receipt = () => /*#__PURE__*/_react.default.createElement("span", {
+  className: "icon",
+  "data-label": "Receipt"
+}, /*#__PURE__*/_react.default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 21.791 25.333"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M0,25.333V3.79A3.794,3.794,0,0,1,3.79,0h18V1A2.792,2.792,0,0,0,19,3.79V25.333l-3.5-3.5-3,3-3-3-3,3-3-3Zm9.5-4.914,3,3,3-3,2.5,2.5V3.79A3.784,3.784,0,0,1,19.229,1H3.79A2.793,2.793,0,0,0,1,3.79V22.919l2.5-2.5,3,3Z"
+}), /*#__PURE__*/_react.default.createElement("rect", {
+  x: "3.669",
+  y: "6.084",
+  width: "9.235",
+  height: "1"
+}), /*#__PURE__*/_react.default.createElement("rect", {
+  x: "3.669",
+  y: "9.228",
+  width: "11.024",
+  height: "1"
+}), /*#__PURE__*/_react.default.createElement("rect", {
+  x: "3.669",
+  y: "12.372",
+  width: "9.235",
+  height: "1"
+})));
+var _default = Receipt;
+exports.default = _default;

package/dist-cjs/components/Icons/User.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const User = () => /*#__PURE__*/_react.default.createElement("span", {
+  className: "icon",
+  "data-label": "User"
+}, /*#__PURE__*/_react.default.createElement("svg", {
+  viewBox: "0 0 20.127 21.771",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "m20.127 21.771h-20.127v-2.542c0-2.643.691-3.621 3.521-4.984a23.853 23.853 0 0 1 3.252-1.245 8.539 8.539 0 0 1 -2.39-6.47c0-4.151 2.071-6.53 5.68-6.53 3.579 0 5.631 2.379 5.631 6.527a8.54 8.54 0 0 1 -2.394 6.473 26.633 26.633 0 0 1 3.3 1.242c2.8 1.3 3.529 2.323 3.529 4.987zm-19.127-1h18.127v-1.542c0-2.136-.366-2.884-2.947-4.079a24.342 24.342 0 0 0 -4.141-1.463l-.124-.923c1.74-.958 2.779-3.289 2.779-6.237 0-2.521-.8-5.527-4.631-5.527-3.863 0-4.68 3.006-4.68 5.527 0 2.948 1.039 5.279 2.78 6.237l-.124.923a22.383 22.383 0 0 0 -4.085 1.46c-2.606 1.253-2.954 1.953-2.954 4.082z"
+})));
+var _default = User;
+exports.default = _default;

package/dist-cjs/components/Icons/X.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const X = () => /*#__PURE__*/_react.default.createElement("span", {
+  className: "icon",
+  "data-label": "X"
+}, /*#__PURE__*/_react.default.createElement("svg", {
+  viewBox: "0 0 19.552 19.552",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "m19.552.707-.707-.707-9.069 9.069-9.069-9.069-.707.707 9.069 9.069-9.069 9.069.707.707 9.069-9.069 9.069 9.069.707-.707-9.069-9.069z"
+})));
+var _default = X;
+exports.default = _default;

package/dist-cjs/components/Icons/index.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ArrowDownRight", {
+  enumerable: true,
+  get: function () {
+    return _ArrowDownRight.default;
+  }
+});
+Object.defineProperty(exports, "ArrowLeft", {
+  enumerable: true,
+  get: function () {
+    return _ArrowLeft.default;
+  }
+});
+Object.defineProperty(exports, "ArrowRight", {
+  enumerable: true,
+  get: function () {
+    return _ArrowRight.default;
+  }
+});
+Object.defineProperty(exports, "CarrotDown", {
+  enumerable: true,
+  get: function () {
+    return _CarrotDown.default;
+  }
+});
+Object.defineProperty(exports, "CarrotUp", {
+  enumerable: true,
+  get: function () {
+    return _CarrotUp.default;
+  }
+});
+Object.defineProperty(exports, "Cart", {
+  enumerable: true,
+  get: function () {
+    return _Cart.default;
+  }
+});
+Object.defineProperty(exports, "CartNew", {
+  enumerable: true,
+  get: function () {
+    return _CartNew.default;
+  }
+});
+Object.defineProperty(exports, "Check", {
+  enumerable: true,
+  get: function () {
+    return _Check.default;
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _Checkbox.default;
+  }
+});
+Object.defineProperty(exports, "CheckboxChecked", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxChecked.default;
+  }
+});
+Object.defineProperty(exports, "CheckboxCrossed", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxCrossed.default;
+  }
+});
+Object.defineProperty(exports, "CircledCheck", {
+  enumerable: true,
+  get: function () {
+    return _CircledCheck.default;
+  }
+});
+Object.defineProperty(exports, "CircledInfo", {
+  enumerable: true,
+  get: function () {
+    return _CircledInfo.default;
+  }
+});
+Object.defineProperty(exports, "CircledMinus", {
+  enumerable: true,
+  get: function () {
+    return _CircledMinus.default;
+  }
+});
+Object.defineProperty(exports, "ColorPicker", {
+  enumerable: true,
+  get: function () {
+    return _ColorPicker.default;
+  }
+});
+Object.defineProperty(exports, "CreditCard", {
+  enumerable: true,
+  get: function () {
+    return _CreditCard.default;
+  }
+});
+Object.defineProperty(exports, "DownArrow", {
+  enumerable: true,
+  get: function () {
+    return _DownArrow.default;
+  }
+});
+Object.defineProperty(exports, "DownloadFonts", {
+  enumerable: true,
+  get: function () {
+    return _DownloadFonts.default;
+  }
+});
+Object.defineProperty(exports, "FrowningFace", {
+  enumerable: true,
+  get: function () {
+    return _FrowningFace.default;
+  }
+});
+Object.defineProperty(exports, "License", {
+  enumerable: true,
+  get: function () {
+    return _License.default;
+  }
+});
+Object.defineProperty(exports, "Receipt", {
+  enumerable: true,
+  get: function () {
+    return _Receipt.default;
+  }
+});
+Object.defineProperty(exports, "User", {
+  enumerable: true,
+  get: function () {
+    return _User.default;
+  }
+});
+Object.defineProperty(exports, "X", {
+  enumerable: true,
+  get: function () {
+    return _X.default;
+  }
+});
+var _ArrowDownRight = _interopRequireDefault(require("./ArrowDownRight"));
+var _ArrowLeft = _interopRequireDefault(require("./ArrowLeft"));
+var _ArrowRight = _interopRequireDefault(require("./ArrowRight"));
+var _CarrotDown = _interopRequireDefault(require("./CarrotDown"));
+var _CarrotUp = _interopRequireDefault(require("./CarrotUp"));
+var _Cart = _interopRequireDefault(require("./Cart"));
+var _CartNew = _interopRequireDefault(require("./CartNew"));
+var _Check = _interopRequireDefault(require("./Check"));
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+var _CheckboxChecked = _interopRequireDefault(require("./CheckboxChecked"));
+var _CheckboxCrossed = _interopRequireDefault(require("./CheckboxCrossed"));
+var _CircledCheck = _interopRequireDefault(require("./CircledCheck"));
+var _CircledInfo = _interopRequireDefault(require("./CircledInfo"));
+var _CircledMinus = _interopRequireDefault(require("./CircledMinus"));
+var _ColorPicker = _interopRequireDefault(require("./ColorPicker"));
+var _CreditCard = _interopRequireDefault(require("./CreditCard"));
+var _DownArrow = _interopRequireDefault(require("./DownArrow"));
+var _DownloadFonts = _interopRequireDefault(require("./DownloadFonts"));
+var _FrowningFace = _interopRequireDefault(require("./FrowningFace"));
+var _License = _interopRequireDefault(require("./License"));
+var _Receipt = _interopRequireDefault(require("./Receipt"));
+var _User = _interopRequireDefault(require("./User"));
+var _X = _interopRequireDefault(require("./X"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist-cjs/components/NewsletterSignup/NewsletterSignupElement.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NewsletterSignupElement;
+var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("./index"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function NewsletterSignupElement(props) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, _extends({}, props, {
+    optInCheckboxChecked: props.optInCheckboxChecked === 'true'
+  }));
+}

package/dist-cjs/components/NewsletterSignup/index.js

@@ -0,0 +1,192 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NewsletterSignupPreloadedQueryRenderer = NewsletterSignupPreloadedQueryRenderer;
+exports.default = NewsletterSignup;
+var _NewsletterSignupQuery2 = _interopRequireDefault(require("../../__generated__/NewsletterSignupQuery.graphql"));
+var _NewsletterSignupUpdateCustomerMutation2 = _interopRequireDefault(require("../../__generated__/NewsletterSignupUpdateCustomerMutation.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _reactGoogleRecaptcha = _interopRequireDefault(require("react-google-recaptcha"));
+var _TextField = _interopRequireDefault(require("../TextField"));
+var _Check = _interopRequireDefault(require("../Icons/Check"));
+var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const updateCustomerMutation = (_NewsletterSignupUpdateCustomerMutation2.default.hash && _NewsletterSignupUpdateCustomerMutation2.default.hash !== "769087891b6f263122bbb630b3f2ca6c" && console.error("The definition of 'NewsletterSignupUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupUpdateCustomerMutation2.default);
+const query = (_NewsletterSignupQuery2.default.hash && _NewsletterSignupQuery2.default.hash !== "24b303198a6038318723fc0124548862" && console.error("The definition of 'NewsletterSignupQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupQuery2.default);
+function NewsletterSignupComponent({
+  optInLabel: optInLabelProp,
+  successLabel: successLabelProp,
+  buttonLabel = 'Subscribe',
+  optInCheckboxChecked = false,
+  title,
+  intro,
+  data
+}) {
+  const [name, setName] = (0, _react.useState)('');
+  const [email, setEmail] = (0, _react.useState)('');
+  const [newsletterOptIn, setNewsletterOptIn] = (0, _react.useState)(optInCheckboxChecked);
+  const [error, setError] = (0, _react.useState)(null);
+  const [submitting, setSubmitting] = (0, _react.useState)(false);
+  const [submitted, setSubmitted] = (0, _react.useState)(false);
+  const [recaptchaToken, setRecaptchaToken] = (0, _react.useState)(null);
+  const [pendingSubmit, setPendingSubmit] = (0, _react.useState)(false);
+  const recaptchaRef = (0, _react.useRef)(null);
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const recaptchaEnabled = data.viewer?.settings?.recaptchaEnabled ?? false;
+  const recaptchaSiteKey = data.viewer?.settings?.recaptchaSiteKey;
+  const submitForm = (0, _react.useCallback)(token => {
+    setSubmitting(true);
+    setPendingSubmit(false);
+    setError(null);
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: updateCustomerMutation,
+      variables: {
+        input: {
+          name,
+          email,
+          newsletterOptIn,
+          recaptchaToken: token ?? undefined
+        }
+      },
+      onCompleted: (_res, errors) => {
+        if (errors && errors.length > 0) {
+          setError(errors[0].message);
+          setSubmitting(false);
+          // Reset reCAPTCHA on error so user can retry
+          recaptchaRef.current?.reset();
+          setRecaptchaToken(null);
+        } else {
+          setSubmitted(true);
+          setSubmitting(false);
+          setError(null);
+        }
+      },
+      onError: ({
+        message
+      }) => {
+        setError(message);
+        setSubmitting(false);
+        // Reset reCAPTCHA on error so user can retry
+        recaptchaRef.current?.reset();
+        setRecaptchaToken(null);
+      }
+    });
+  }, [environment, name, email, newsletterOptIn]);
+  const handleRecaptchaChange = (0, _react.useCallback)(token => {
+    setRecaptchaToken(token);
+    // If we were waiting for a token to submit, do it now
+    if (token && pendingSubmit) {
+      submitForm(token);
+    }
+  }, [pendingSubmit, submitForm]);
+  const handleRecaptchaExpired = (0, _react.useCallback)(() => {
+    setRecaptchaToken(null);
+  }, []);
+  const handleSubmit = e => {
+    e.preventDefault();
+
+    // If reCAPTCHA is enabled but no token, execute it and wait for callback
+    if (recaptchaEnabled && recaptchaSiteKey && !recaptchaToken) {
+      setPendingSubmit(true);
+      setError(null);
+      recaptchaRef.current?.execute();
+      return;
+    }
+    submitForm(recaptchaToken);
+  };
+
+  // Button is disabled only while actively submitting or waiting for reCAPTCHA
+  const disabled = !newsletterOptIn || !email || !name;
+  const optInLabel = optInLabelProp || data.viewer?.settings?.newsletterOptInLabel;
+  const successLabel = (successLabelProp || data.viewer?.settings?.newsletterSuccessLabel) ?? 'Success!';
+  if (submitted) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "newsletter-signup"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "newsletter-signup__success",
+      dangerouslySetInnerHTML: {
+        __html: successLabel
+      }
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "newsletter-signup"
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "newsletter-signup__title"
+  }, title), /*#__PURE__*/_react.default.createElement("p", {
+    className: "newsletter-signup__intro"
+  }, intro), error && /*#__PURE__*/_react.default.createElement("p", {
+    className: "newsletter-signup__error"
+  }, error), /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: handleSubmit
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "newsletter-signup__section"
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "Name *",
+    placeholder: "Your name",
+    autocomplete: "name",
+    value: name,
+    onChange: value => setName(value)
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "newsletter-signup__section"
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "Email *",
+    placeholder: "Your email",
+    type: "email",
+    autocomplete: "email",
+    value: email,
+    onChange: value => setEmail(value)
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "newsletter-signup__section newsletter-signup__checkbox-field"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkbox"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    id: "customer-newsletter-opt-in",
+    checked: newsletterOptIn,
+    onChange: e => setNewsletterOptIn(e.target.checked)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkbox__icon"
+  }, /*#__PURE__*/_react.default.createElement(_Check.default, null))), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "customer-newsletter-opt-in",
+    dangerouslySetInnerHTML: {
+      __html: optInLabel ?? ''
+    }
+  })), recaptchaEnabled && recaptchaSiteKey && /*#__PURE__*/_react.default.createElement(_reactGoogleRecaptcha.default, {
+    ref: recaptchaRef,
+    sitekey: recaptchaSiteKey,
+    size: "invisible",
+    onChange: handleRecaptchaChange,
+    onExpired: handleRecaptchaExpired
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "newsletter-signup__section"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "submit-button",
+    disabled: submitting || pendingSubmit || disabled
+  }, submitting || pendingSubmit ? 'Submitting...' : buttonLabel, ' ', /*#__PURE__*/_react.default.createElement("span", {
+    className: "submit-button__arrow"
+  }, ' →')))));
+}
+function NewsletterSignupPreloadedQueryRenderer({
+  preloadedQuery,
+  ...props
+}) {
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
+  return /*#__PURE__*/_react.default.createElement(NewsletterSignupComponent, _extends({
+    data: data
+  }, props));
+}
+function NewsletterSignup(props) {
+  const data = (0, _reactRelay.useLazyLoadQuery)(query, {});
+  return /*#__PURE__*/_react.default.createElement(NewsletterSignupComponent, _extends({}, props, {
+    data: data
+  }));
+}

package/dist-cjs/components/NewsletterSignup/index.server.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NewsletterSignup;
+var _react = _interopRequireDefault(require("react"));
+var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
+var _index = require("./index");
+var _NewsletterSignupQuery = _interopRequireDefault(require("../../__generated__/NewsletterSignupQuery.graphql"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+async function NewsletterSignup(props) {
+  const preloadedQuery = await (0, _loadSerializableQuery.default)(_NewsletterSignupQuery.default, {});
+  return /*#__PURE__*/_react.default.createElement(_index.NewsletterSignupPreloadedQueryRenderer, _extends({}, props, {
+    preloadedQuery: preloadedQuery
+  }));
+}