fontdue-js 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.5.0
+
+- NewsletterSignup improvements
+  - Added `successLabel` prop to customize success message
+  - Success label can also be set via "Labels" settings in CMS
+
 ## 1.4.0
 
 - StoreModal precart improvements
@@ -6,7 +12,7 @@
 
 ## 1.3.1
 
-- Adjusts StoreModal layouts
+- Adjusted StoreModal layouts
 
 ## 1.3.0
 

package/dist/__generated__/NewsletterSignup_Query.graphql.d.ts

@@ -0,0 +1,14 @@
+import { ConcreteRequest } from "relay-runtime";
+import { FragmentRefs } from "relay-runtime";
+export declare type NewsletterSignup_QueryVariables = {};
+export declare type NewsletterSignup_QueryResponse = {
+    readonly viewer: {
+        readonly " $fragmentRefs": FragmentRefs<"NewsletterSignup_viewer">;
+    } | null;
+};
+export declare type NewsletterSignup_Query = {
+    readonly response: NewsletterSignup_QueryResponse;
+    readonly variables: NewsletterSignup_QueryVariables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/NewsletterSignup_Query.graphql.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/* tslint:disable */
+
+/* eslint-disable */
+// @ts-nocheck
+
+/*
+query NewsletterSignup_Query {
+  viewer {
+    ...NewsletterSignup_viewer
+    id
+  }
+}
+
+fragment NewsletterSignup_viewer on Viewer {
+  settings {
+    newsletterOptInLabel(format: HTML)
+    newsletterSuccessLabel(format: HTML)
+  }
+}
+*/
+const node = function () {
+  var v0 = [{
+    "kind": "Literal",
+    "name": "format",
+    "value": "HTML"
+  }];
+  return {
+    "fragment": {
+      "argumentDefinitions": [],
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "NewsletterSignup_Query",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "args": null,
+          "kind": "FragmentSpread",
+          "name": "NewsletterSignup_viewer"
+        }],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": [],
+      "kind": "Operation",
+      "name": "NewsletterSignup_Query",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "concreteType": "Settings",
+          "kind": "LinkedField",
+          "name": "settings",
+          "plural": false,
+          "selections": [{
+            "alias": null,
+            "args": v0
+            /*: any*/
+            ,
+            "kind": "ScalarField",
+            "name": "newsletterOptInLabel",
+            "storageKey": "newsletterOptInLabel(format:\"HTML\")"
+          }, {
+            "alias": null,
+            "args": v0
+            /*: any*/
+            ,
+            "kind": "ScalarField",
+            "name": "newsletterSuccessLabel",
+            "storageKey": "newsletterSuccessLabel(format:\"HTML\")"
+          }],
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "id",
+          "storageKey": null
+        }],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "c2ac1f4cd512a8382e6abc76847214aa",
+      "id": null,
+      "metadata": {},
+      "name": "NewsletterSignup_Query",
+      "operationKind": "query",
+      "text": "query NewsletterSignup_Query {\n  viewer {\n    ...NewsletterSignup_viewer\n    id\n  }\n}\n\nfragment NewsletterSignup_viewer on Viewer {\n  settings {\n    newsletterOptInLabel(format: HTML)\n    newsletterSuccessLabel(format: HTML)\n  }\n}\n"
+    }
+  };
+}();
+
+node.hash = 'ede23ce8fe999201dacb066fcef009af';
+var _default = node;
+exports.default = _default;

package/dist/__generated__/NewsletterSignup_viewer.graphql.d.ts

@@ -0,0 +1,16 @@
+import { ReaderFragment } from "relay-runtime";
+import { FragmentRefs } from "relay-runtime";
+export declare type NewsletterSignup_viewer = {
+    readonly settings: {
+        readonly newsletterOptInLabel: string | null;
+        readonly newsletterSuccessLabel: string | null;
+    } | null;
+    readonly " $refType": "NewsletterSignup_viewer";
+};
+export declare type NewsletterSignup_viewer$data = NewsletterSignup_viewer;
+export declare type NewsletterSignup_viewer$key = {
+    readonly " $data"?: NewsletterSignup_viewer$data;
+    readonly " $fragmentRefs": FragmentRefs<"NewsletterSignup_viewer">;
+};
+declare const node: ReaderFragment;
+export default node;

package/dist/__generated__/NewsletterSignup_viewer.graphql.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/* tslint:disable */
+
+/* eslint-disable */
+// @ts-nocheck
+const node = function () {
+  var v0 = [{
+    "kind": "Literal",
+    "name": "format",
+    "value": "HTML"
+  }];
+  return {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "NewsletterSignup_viewer",
+    "selections": [{
+      "alias": null,
+      "args": null,
+      "concreteType": "Settings",
+      "kind": "LinkedField",
+      "name": "settings",
+      "plural": false,
+      "selections": [{
+        "alias": null,
+        "args": v0
+        /*: any*/
+        ,
+        "kind": "ScalarField",
+        "name": "newsletterOptInLabel",
+        "storageKey": "newsletterOptInLabel(format:\"HTML\")"
+      }, {
+        "alias": null,
+        "args": v0
+        /*: any*/
+        ,
+        "kind": "ScalarField",
+        "name": "newsletterSuccessLabel",
+        "storageKey": "newsletterSuccessLabel(format:\"HTML\")"
+      }],
+      "storageKey": null
+    }],
+    "type": "Viewer",
+    "abstractKey": null
+  };
+}();
+
+node.hash = '05823550a311988e999fd9b95cc39dac';
+var _default = node;
+exports.default = _default;

package/dist/components/NewsletterSignup/index.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-interface NewsletterSignup_props {
+interface NewsletterSignup_baseProps {
     optInLabel?: string;
+    successLabel?: string;
     buttonLabel?: string;
     optInCheckboxChecked?: boolean;
     title?: string;
     intro?: string;
 }
-declare const NewsletterSignup: React.FC<NewsletterSignup_props>;
-export default NewsletterSignup;
+declare const NewsletterSignupFetcher: React.FC<NewsletterSignup_baseProps>;
+export default NewsletterSignupFetcher;

package/dist/components/NewsletterSignup/index.js

@@ -13,7 +13,7 @@ var _TextField = _interopRequireDefault(require("../TextField"));
 
 var _Check = _interopRequireDefault(require("../Icons/Check"));
 
-var _NewsletterSignupUpdateCustomerMutation;
+var _NewsletterSignupUpdateCustomerMutation, _NewsletterSignup_viewer, _NewsletterSignup_Query;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -21,16 +21,23 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const updateCustomerMutation = _NewsletterSignupUpdateCustomerMutation !== void 0 ? _NewsletterSignupUpdateCustomerMutation : (_NewsletterSignupUpdateCustomerMutation = require("../../__generated__/NewsletterSignupUpdateCustomerMutation.graphql"), _NewsletterSignupUpdateCustomerMutation.hash && _NewsletterSignupUpdateCustomerMutation.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."), _NewsletterSignupUpdateCustomerMutation);
 
 const NewsletterSignup = _ref => {
+  var _data$settings, _ref3, _data$settings2;
+
   let {
-    optInLabel,
+    optInLabel: optInLabelProp,
+    successLabel: successLabelProp,
     buttonLabel = 'Subscribe',
     optInCheckboxChecked = false,
     title,
-    intro
+    intro,
+    viewer
   } = _ref;
+  const data = (0, _reactRelay.useFragment)(_NewsletterSignup_viewer !== void 0 ? _NewsletterSignup_viewer : (_NewsletterSignup_viewer = require("../../__generated__/NewsletterSignup_viewer.graphql"), _NewsletterSignup_viewer.hash && _NewsletterSignup_viewer.hash !== "05823550a311988e999fd9b95cc39dac" && console.error("The definition of 'NewsletterSignup_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignup_viewer), viewer);
   const [name, setName] = (0, _react.useState)('');
   const [email, setEmail] = (0, _react.useState)('');
   const [newsletterOptIn, setNewsletterOptIn] = (0, _react.useState)(optInCheckboxChecked);
@@ -76,10 +83,19 @@ const NewsletterSignup = _ref => {
     });
   };
 
+  const disabled = submitting || !newsletterOptIn || !email || !name;
+  const optInLabel = optInLabelProp || (data === null || data === void 0 ? void 0 : (_data$settings = data.settings) === null || _data$settings === void 0 ? void 0 : _data$settings.newsletterOptInLabel);
+  const successLabel = (_ref3 = successLabelProp || (data === null || data === void 0 ? void 0 : (_data$settings2 = data.settings) === null || _data$settings2 === void 0 ? void 0 : _data$settings2.newsletterSuccessLabel)) !== null && _ref3 !== void 0 ? _ref3 : 'Success!';
+
   if (submitted) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "newsletter-signup"
-    }, "Success!");
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "newsletter-signup__success",
+      dangerouslySetInnerHTML: {
+        __html: successLabel
+      }
+    }));
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -121,16 +137,46 @@ const NewsletterSignup = _ref => {
   }), /*#__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"
-  }, optInLabel)), /*#__PURE__*/_react.default.createElement("div", {
+    htmlFor: "customer-newsletter-opt-in",
+    dangerouslySetInnerHTML: {
+      __html: optInLabel !== null && optInLabel !== void 0 ? optInLabel : ''
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "newsletter-signup__section"
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "submit-button",
-    disabled: submitting || !newsletterOptIn
+    disabled: disabled
   }, submitting ? 'Submitting...' : buttonLabel, /*#__PURE__*/_react.default.createElement("span", {
     className: "submit-button__arrow"
   }, ' →')))));
 };
 
-var _default = NewsletterSignup;
+const NewsletterSignupFetcher = params => {
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
+    environment: environment,
+    query: _NewsletterSignup_Query !== void 0 ? _NewsletterSignup_Query : (_NewsletterSignup_Query = require("../../__generated__/NewsletterSignup_Query.graphql"), _NewsletterSignup_Query.hash && _NewsletterSignup_Query.hash !== "ede23ce8fe999201dacb066fcef009af" && console.error("The definition of 'NewsletterSignup_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignup_Query),
+    variables: {},
+    render: _ref4 => {
+      let {
+        props,
+        error
+      } = _ref4;
+
+      if (error) {
+        console.error(error); // TODO: centralize error component, report to sentry
+
+        return null;
+      }
+
+      if (props) {
+        return /*#__PURE__*/_react.default.createElement(NewsletterSignup, _extends({}, params, props));
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", null, "Loading...");
+    }
+  });
+};
+
+var _default = NewsletterSignupFetcher;
 exports.default = _default;

package/dist/components/TestFontsForm/index.js

@@ -118,7 +118,7 @@ const TestFontsFormBase = _ref2 => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "test-fonts__section"
   }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "Name*",
+    label: "Name *",
     value: name,
     onChange: value => setName(value),
     autocomplete: "name",
@@ -126,7 +126,8 @@ const TestFontsFormBase = _ref2 => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "test-fonts__section"
   }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    label: "Email*",
+    label: "Email *",
+    type: "email",
     value: email,
     onChange: value => setEmail(value),
     autocomplete: "email",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "main": "index.js",
   "scripts": {
     "build": "run-p build-js build-css build-ts-declarations",