fontdue-js 2.24.0 → 2.25.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 2.25.0
+
+- Added `storeModal.hideAllCollections` config option (default `false`). When `true`, the store modal skips the "All collections" landing page — the modal opens directly to the cart route, the cart button always opens the cart regardless of item count, the empty-cart "Continue shopping" button closes the modal, and the product/checkout back button becomes "Close" when there's no history. Useful for stores that drive purchases from "Add to Cart" buttons on product pages.
+- Improved the empty-cart layout: added a "Your cart is empty." message and the modal now collapses to its default 800px width when empty (instead of staying at the wider cart width).
+
 ## 2.24.0
 
 - The cart's licensee picker now reads its button labels and per-option descriptions from tenant settings, so admins can rename "Yourself" / "Your client" and add explainer text without a code change.

package/dist/components/CartButton/index.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactRedux = require("react-redux");
 var _reactRelay = require("react-relay");
 var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
 var _Icons = require("../Icons");
 var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
 var _Price = _interopRequireWildcard(require("../Price"));
@@ -40,6 +41,9 @@ function CartButtonComponent(_ref) {
   const orderData = (0, _reactRelay.useFragment)((_CartButton_order2.default.hash && _CartButton_order2.default.hash !== "26a092d7efb579c98adda18413349b3b" && console.error("The definition of 'CartButton_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartButton_order2.default), orderKey);
   const [count, setCount] = (0, _react.useState)(0);
   const dispatch = (0, _reactRedux.useDispatch)();
+  const {
+    storeModal: storeModalConfig
+  } = (0, _react.useContext)(_ConfigContext.default);
   const formatSuffix = (0, _react.useCallback)(() => {
     if (!suffix) return null;
 
@@ -77,14 +81,14 @@ function CartButtonComponent(_ref) {
     return nodes.length > 0 ? nodes : null;
   }, [suffix, count, orderData === null || orderData === void 0 ? void 0 : orderData.subtotal]);
   const handleClick = (0, _react.useCallback)(() => {
-    if (count > 0) {
+    if (count > 0 || storeModalConfig.hideAllCollections) {
       dispatch({
         type: 'STORE_MODAL_REPLACE',
         route: 'cart'
       });
     }
     dispatch(openCart());
-  }, [count, dispatch]);
+  }, [count, dispatch, storeModalConfig.hideAllCollections]);
   (0, _react.useEffect)(() => {
     // set count only on the client, because on the server it's always gonna be zero
     setCount(cartButtonCount(orderData));

package/dist/components/ConfigContext.d.ts

@@ -90,6 +90,7 @@ export declare const makeConfig: (config?: Config) => {
         indexLayout: "styled-aa" | "styled-font-names";
         indexExcludeTags: string[] | undefined;
         productLicensesPosition: "top" | "bottom";
+        hideAllCollections: boolean;
     };
     stripe: {
         appearance: Appearance | null;
@@ -161,6 +162,7 @@ declare const _default: React.Context<{
         indexLayout: "styled-aa" | "styled-font-names";
         indexExcludeTags: string[] | undefined;
         productLicensesPosition: "top" | "bottom";
+        hideAllCollections: boolean;
     };
     stripe: {
         appearance: Appearance | null;

package/dist/components/ConfigContext.js

@@ -59,7 +59,7 @@ const makeTypeTesterConfig = config => {
   };
 };
 const makeConfig = config => {
-  var _config$form, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4;
+  var _config$form, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4;
   return {
     typeTester: makeTypeTesterConfig(config === null || config === void 0 ? void 0 : config.typeTester),
     form: {
@@ -68,7 +68,8 @@ const makeConfig = config => {
     storeModal: {
       indexLayout: (config === null || config === void 0 ? void 0 : (_config$storeModal = config.storeModal) === null || _config$storeModal === void 0 ? void 0 : _config$storeModal.indexLayout) ?? 'styled-aa',
       indexExcludeTags: config === null || config === void 0 ? void 0 : (_config$storeModal2 = config.storeModal) === null || _config$storeModal2 === void 0 ? void 0 : _config$storeModal2.indexExcludeTags,
-      productLicensesPosition: (config === null || config === void 0 ? void 0 : (_config$storeModal3 = config.storeModal) === null || _config$storeModal3 === void 0 ? void 0 : _config$storeModal3.productLicensesPosition) ?? 'top'
+      productLicensesPosition: (config === null || config === void 0 ? void 0 : (_config$storeModal3 = config.storeModal) === null || _config$storeModal3 === void 0 ? void 0 : _config$storeModal3.productLicensesPosition) ?? 'top',
+      hideAllCollections: (config === null || config === void 0 ? void 0 : (_config$storeModal4 = config.storeModal) === null || _config$storeModal4 === void 0 ? void 0 : _config$storeModal4.hideAllCollections) ?? false
     },
     stripe: {
       appearance: (config === null || config === void 0 ? void 0 : (_config$stripe = config.stripe) === null || _config$stripe === void 0 ? void 0 : _config$stripe.appearance) ?? null

package/dist/components/StoreModal/StoreModalContainer.js

@@ -31,8 +31,14 @@ const getPageTitle = name => {
       return 'Review';
   }
 };
-const getBackLink = (history, currentRoute) => {
-  if (currentRoute !== 'index' && history.length === 0) return 'All collections';
+const getBackLink = (history, currentRoute, hideAllCollections) => {
+  if (history.length === 0) {
+    if (hideAllCollections) {
+      return currentRoute === 'cart' ? null : 'Close';
+    }
+    if (currentRoute !== 'index') return 'All collections';
+    return null;
+  }
   const previous = history[history.length - 1];
   if (!previous) return null;
   return getPageTitle(previous.name);
@@ -61,17 +67,23 @@ const StoreModalContainer = _ref => {
   }, [dispatch]);
   const currentRoute = (0, _reactRedux.useSelector)(state => state.storeModalRoute.name);
   const history = (0, _reactRedux.useSelector)(state => state.storeModalHistory);
-  const link = getBackLink(history, currentRoute);
   const config = (0, _react.useContext)(_ConfigContext.default);
+  const link = getBackLink(history, currentRoute, config.storeModal.hideAllCollections);
   const handleBack = () => {
     if (history.length === 0) {
-      dispatch({
-        type: 'STORE_MODAL_REPLACE',
-        route: 'index',
-        variables: {
-          excludeTags: config.storeModal.indexExcludeTags
-        }
-      });
+      if (config.storeModal.hideAllCollections) {
+        dispatch({
+          type: 'CLOSE_CART'
+        });
+      } else {
+        dispatch({
+          type: 'STORE_MODAL_REPLACE',
+          route: 'index',
+          variables: {
+            excludeTags: config.storeModal.indexExcludeTags
+          }
+        });
+      }
     } else {
       dispatch({
         type: 'STORE_MODAL_BACK'

package/dist/components/StoreModal/types.d.ts

@@ -2,4 +2,5 @@ export interface StoreModalConfig {
     indexLayout?: 'styled-aa' | 'styled-font-names';
     indexExcludeTags?: string[] | undefined;
     productLicensesPosition?: 'bottom' | 'top';
+    hideAllCollections?: boolean;
 }

package/dist/components/elements/EmptyCart/index.js

@@ -14,16 +14,30 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const EmptyCart = () => {
   const dispatch = (0, _reactRedux.useDispatch)();
   const config = (0, _react.useContext)(_ConfigContext.default);
+  const {
+    hideAllCollections
+  } = config.storeModal;
+  const handleContinueShopping = () => {
+    if (hideAllCollections) {
+      dispatch({
+        type: 'CLOSE_CART'
+      });
+    } else {
+      dispatch({
+        type: 'STORE_MODAL_NAVIGATE',
+        route: 'index',
+        variables: {
+          excludeTags: config.storeModal.indexExcludeTags
+        }
+      });
+    }
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "empty-cart__container"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => dispatch({
-      type: 'STORE_MODAL_NAVIGATE',
-      route: 'index',
-      variables: {
-        excludeTags: config.storeModal.indexExcludeTags
-      }
-    })
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "empty-cart__message"
+  }, "Your cart is empty."), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: handleContinueShopping
   }, "Continue shopping"));
 };
 var _default = EmptyCart;

package/dist/fontdue.css

@@ -1272,6 +1272,17 @@ body[data-fontdue-store-modal=open] {
   grid-column: 1/span 2;
 }
 
+.store-modal__cart__items {
+  --gutter: 20px;
+}
+@media (min-width: 900px) {
+  .store-modal__cart__items {
+    display: grid;
+    grid-template-columns: [name] 300fr [licenses] 700fr [price] minmax(80px, auto) [end];
+    column-gap: var(--gutter);
+  }
+}
+
 .store-modal__cart__button {
   background: none;
   color: inherit;
@@ -1780,6 +1791,12 @@ body[data-fontdue-store-modal=open] {
   font-size: 20px;
 }
 
+.store-modal__page__body:has(> .store-modal__index-item__button) {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  column-gap: 16px;
+}
+
 .store-modal__index-item__button {
   background: none;
   color: inherit;
@@ -1803,24 +1820,19 @@ body[data-fontdue-store-modal=open] {
   width: 100%;
   border: 1px solid var(--secondary_text_color);
   padding: 20px;
-  display: flex;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
   align-items: center;
   margin-bottom: 20px;
 }
 
 .store-modal__index-item__text-container {
-  display: block;
-  vertical-align: baseline;
+  display: contents;
 }
 
 .store-modal__index-item__aa {
   font-size: 60px;
-  margin-right: 16px;
-  display: inline-block;
-}
-
-.store-modal__index-item__description {
-  display: inline-block;
 }
 
 .store-modal__index-item__name {
@@ -1828,10 +1840,23 @@ body[data-fontdue-store-modal=open] {
   line-height: 30px;
 }
 
-.store-modal__index-item__buy {
-  margin-left: auto;
+@media (max-width: 899px) {
+  .store-modal__page__body:has(> .store-modal__index-item__button) {
+    display: block;
+  }
+  .store-modal__index-item__button {
+    display: flex;
+    align-items: last baseline;
+  }
+  .store-modal__index-item__text-container,
+  .store-modal__index-item__aa,
+  .store-modal__index-item__description {
+    display: block;
+  }
+  .store-modal__index-item__buy {
+    margin-left: auto;
+  }
 }
-
 .store-modal__license-selection__container[data-disabled=true] {
   opacity: 0.2;
   pointer-events: none;
@@ -2347,9 +2372,32 @@ body[data-fontdue-store-modal=open] {
   font-size: 20px;
 }
 
+@media (max-width: 899px) {
+  .store-modal__family__bundle-button .store-modal__style-button__container {
+    flex-wrap: wrap;
+  }
+  .store-modal__family__bundle-button .store-modal__style-button__feature-glyphs {
+    flex: 0 0 100%;
+  }
+  .store-modal__family__bundle-button .store-modal__style-button__style-name {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .store-modal__family__bundle-button .store-modal__style-button__price {
+    align-self: flex-end;
+  }
+}
+.empty-cart__container {
+  padding: 40px 0;
+}
+
 .empty-cart__message {
   font-size: 20px;
-  margin-bottom: 60px;
+  margin: 0 0 32px;
+}
+
+[data-route=cart]:has(.empty-cart__container) .store-modal__container__container {
+  max-width: 800px;
 }
 
 .cart-additions__form {
@@ -2496,7 +2544,6 @@ body[data-fontdue-store-modal=open] {
   padding-right: var(--StoreModalPageContainer-padding);
   padding-bottom: 40px;
   line-height: 20px;
-  --gutter: 20px;
 }
 .cart-item + .cart-item {
   border-top: 1px solid var(--horizontal_rule_color);
@@ -2519,9 +2566,8 @@ body[data-fontdue-store-modal=open] {
   .cart-item {
     display: grid;
     align-items: baseline;
-    grid-template-columns: 300fr 700fr 80px;
-    grid-template-areas: "name licenses price";
-    grid-column-gap: var(--gutter);
+    grid-template-columns: subgrid;
+    grid-column: 1/-1;
     padding-bottom: 30px;
     margin-bottom: 0;
   }

package/dist/reducer.js

@@ -269,6 +269,14 @@ const reducer = (state, action) => {
 };
 function createDefaultStore(config) {
   const configValue = (0, _ConfigContext.makeConfig)(config);
+  const initialRoute = configValue.storeModal.hideAllCollections ? {
+    name: 'cart'
+  } : {
+    name: 'index',
+    variables: {
+      excludeTags: configValue.storeModal.indexExcludeTags
+    }
+  };
   return (0, _redux.createStore)(reducer, {
     selectedSkuIds: {},
     // { [skuId]: Boolean }
@@ -279,12 +287,7 @@ function createDefaultStore(config) {
     skuPrices: {},
     collectionSkus: {},
     fetchedCollectionIds: [],
-    storeModalRoute: {
-      name: 'index',
-      variables: {
-        excludeTags: configValue.storeModal.indexExcludeTags
-      }
-    },
+    storeModalRoute: initialRoute,
     storeModalHistory: [],
     orderVariableSelections: [],
     licenseeIsBillingIdentity: null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.24.0",
+  "version": "2.25.0",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",