fontdue-js 2.21.0 → 2.22.1

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

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _AddToCartBannerQuery2 = _interopRequireDefault(require("../../__generated__/AddToCartBannerQuery.graphql"));
+var _AddToCartBanner_order2 = _interopRequireDefault(require("../../__generated__/AddToCartBanner_order.graphql"));
+var _AddToCartBanner_item2 = _interopRequireDefault(require("../../__generated__/AddToCartBanner_item.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
+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 }; }
+const getOrderItemName = item => {
+  const product = item?.sku?.product;
+  if (!product) return null;
+  if (product.__typename === 'FontStyle') {
+    return `${product.family?.name} ${product.name}`;
+  }
+  if (product.__typename === 'Bundle' || product.__typename === 'CollectionBundle') {
+    const familyName = product.fontCollection?.name;
+    if (familyName && !product.name.startsWith(familyName)) return `${familyName} ${product.name}`;
+    return product.name;
+  }
+  if ('name' in product) return product.name;
+  return null;
+};
+_AddToCartBanner_item2.default.hash && _AddToCartBanner_item2.default.hash !== "93905c08206c30255368dbb06f59ccec" && console.error("The definition of 'AddToCartBanner_item' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AddToCartBanner_item2.default;
+function AddToCartBanner({
+  order: orderKey
+}) {
+  const order = (0, _reactRelay.useFragment)((_AddToCartBanner_order2.default.hash && _AddToCartBanner_order2.default.hash !== "29516fe27686b4937b1856979f13d22b" && console.error("The definition of 'AddToCartBanner_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AddToCartBanner_order2.default), orderKey);
+  const [active, setActive] = (0, _react.useState)(false);
+  const prevOrderItemIds = (0, _react.useRef)(order?.orderItems?.map(item => item.id));
+  const newOrderItemIds = (0, _react.useRef)([]);
+  const newOrderItems = order?.orderItems?.filter(item => newOrderItemIds.current?.includes(item.id));
+  const timeoutRef = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(() => {
+    document.body.dataset.addToCartBannerOpen = `${active}`;
+  }, [active]);
+  (0, _react.useEffect)(() => {
+    function setInactive() {
+      setActive(false);
+    }
+    const orderItemIds = order?.orderItems?.map(item => item.id);
+    if ((0, _fastDeepEqual.default)(orderItemIds, prevOrderItemIds.current)) return;
+    if ((order?.orderItems?.length ?? 0) > (prevOrderItemIds.current?.length ?? 0)) {
+      setActive(true);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(setInactive, 2000);
+      newOrderItemIds.current = orderItemIds?.filter(id => !prevOrderItemIds.current?.includes(id)) ?? [];
+    }
+    prevOrderItemIds.current = orderItemIds;
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [order?.orderItems]);
+  const itemText = newOrderItems?.length === 1 ? getOrderItemName(newOrderItems[0]) : `${newOrderItems?.length} items`;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "add-to-cart-banner",
+    "data-active": active
+  }, "You added ", itemText, " to your cart");
+}
+function AddToCartBannerQueryRenderer() {
+  const {
+    viewer
+  } = (0, _reactRelay.useLazyLoadQuery)((_AddToCartBannerQuery2.default.hash && _AddToCartBannerQuery2.default.hash !== "0ece6678652384f7938caf18b2a40be9" && console.error("The definition of 'AddToCartBannerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AddToCartBannerQuery2.default), {});
+  return /*#__PURE__*/_react.default.createElement(AddToCartBanner, {
+    order: viewer.currentOrder
+  });
+}
+var _default = AddToCartBannerQueryRenderer;
+exports.default = _default;

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

@@ -0,0 +1,124 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BuyButtonPreloadedIDQueryRenderer = BuyButtonPreloadedIDQueryRenderer;
+exports.BuyButtonPreloadedSlugQueryRenderer = BuyButtonPreloadedSlugQueryRenderer;
+exports.default = BuyButton;
+var _BuyButtonSlugQuery2 = _interopRequireDefault(require("../../__generated__/BuyButtonSlugQuery.graphql"));
+var _BuyButtonIDQuery2 = _interopRequireDefault(require("../../__generated__/BuyButtonIDQuery.graphql"));
+var _BuyButton_collection2 = _interopRequireDefault(require("../../__generated__/BuyButton_collection.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _reactRedux = require("react-redux");
+var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
+var _productState = require("../Root/productState");
+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); }
+function BuyButtonComponent({
+  collection: collectionKey,
+  label,
+  collectionName
+}) {
+  const collection = (0, _reactRelay.useFragment)((_BuyButton_collection2.default.hash && _BuyButton_collection2.default.hash !== "9c47030d7450494449d4aa5bda16e27e" && console.error("The definition of 'BuyButton_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButton_collection2.default), collectionKey);
+  const store = (0, _reactRedux.useStore)();
+  const components = (0, _react.useContext)(_ComponentsContext.default);
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const handleClick = (0, _react.useCallback)(() => {
+    if (!collection) return;
+    dispatch({
+      type: 'STORE_MODAL_NAVIGATE',
+      route: 'product',
+      variables: {
+        productId: collection.id
+      }
+    });
+    dispatch({
+      type: 'OPEN_CART'
+    });
+  }, [dispatch, collection]);
+  (0, _react.useEffect)(() => {
+    if (!collection) return;
+    // populate as soon as BuyButton mounts. this prepares the StoreModal
+    // to be able to apply discounts as soon as the user clicks "BUY" on
+    // a style. (this is necessary if the bundle price is <= single style price)
+    (0, _productState.populateProductState)(store, environment, collection.id);
+  }, [collection?.id]);
+  if (components.BuyButton) {
+    return /*#__PURE__*/_react.default.createElement(components.BuyButton, {
+      innerProps: {
+        onClick: handleClick
+      }
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement("button", {
+    className: "buy-button",
+    onClick: handleClick,
+    type: "button"
+  }, label ? label : `Buy ${collectionName ?? ''}`);
+}
+const idQuery = (_BuyButtonIDQuery2.default.hash && _BuyButtonIDQuery2.default.hash !== "4fbf1dbf9e6c530a5d38c697b174d8b0" && console.error("The definition of 'BuyButtonIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonIDQuery2.default);
+function BuyButtonIDQueryRenderer({
+  collectionId,
+  ...rest
+}) {
+  const data = (0, _reactRelay.useLazyLoadQuery)(idQuery, {
+    collectionId
+  });
+  return /*#__PURE__*/_react.default.createElement(BuyButtonComponent, _extends({}, rest, data));
+}
+function BuyButtonPreloadedIDQueryRenderer({
+  preloadedQuery,
+  ...rest
+}) {
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(idQuery, queryRef);
+  return /*#__PURE__*/_react.default.createElement(BuyButtonComponent, _extends({}, rest, data));
+}
+const slugQuery = (_BuyButtonSlugQuery2.default.hash && _BuyButtonSlugQuery2.default.hash !== "6e750adea09698f7cb61f435cd88fd26" && console.error("The definition of 'BuyButtonSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonSlugQuery2.default);
+function BuyButtonSlugQueryRenderer({
+  collectionSlug,
+  ...rest
+}) {
+  const data = (0, _reactRelay.useLazyLoadQuery)(slugQuery, {
+    collectionSlug
+  });
+  return /*#__PURE__*/_react.default.createElement(BuyButtonComponent, _extends({}, rest, {
+    collection: data.viewer?.slug?.collection ?? null
+  }));
+}
+function BuyButtonPreloadedSlugQueryRenderer({
+  preloadedQuery,
+  ...rest
+}) {
+  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
+  const data = (0, _reactRelay.usePreloadedQuery)(slugQuery, queryRef);
+  return /*#__PURE__*/_react.default.createElement(BuyButtonComponent, _extends({}, rest, {
+    collection: data.viewer?.slug?.collection ?? null
+  }));
+}
+
+// default client export
+function BuyButton({
+  collectionId,
+  collectionSlug,
+  ...rest
+}) {
+  if (collectionId) {
+    return /*#__PURE__*/_react.default.createElement(BuyButtonIDQueryRenderer, _extends({
+      collectionId: collectionId
+    }, rest));
+  }
+  if (collectionSlug) {
+    return /*#__PURE__*/_react.default.createElement(BuyButtonSlugQueryRenderer, _extends({
+      collectionSlug: collectionSlug
+    }, rest));
+  }
+  throw new Error('BuyButton expected either a collectionId or collectionSlug prop');
+}

package/{dist/components/BuyButton/BuyButton.server.js → dist-cjs/components/BuyButton/index.server.js}

@@ -9,21 +9,19 @@ var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSer
 var _index = require("./index");
 var _BuyButtonIDQuery = _interopRequireDefault(require("../../__generated__/BuyButtonIDQuery.graphql"));
 var _BuyButtonSlugQuery = _interopRequireDefault(require("../../__generated__/BuyButtonSlugQuery.graphql"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-async function BuyButton(_ref) {
-  let {
-    collectionId,
-    collectionSlug,
-    ...rest
-  } = _ref;
+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 BuyButton({
+  collectionId,
+  collectionSlug,
+  ...rest
+}) {
   if (collectionId) {
     const preloadedQuery = await (0, _loadSerializableQuery.default)(_BuyButtonIDQuery.default, {
       collectionId
     });
     return /*#__PURE__*/_react.default.createElement(_index.BuyButtonPreloadedIDQueryRenderer, _extends({
-      preloadedQuery: preloadedQuery,
-      collectionId: collectionId
+      preloadedQuery: preloadedQuery
     }, rest));
   }
   if (collectionSlug) {
@@ -31,8 +29,7 @@ async function BuyButton(_ref) {
       collectionSlug
     });
     return /*#__PURE__*/_react.default.createElement(_index.BuyButtonPreloadedSlugQueryRenderer, _extends({
-      preloadedQuery: preloadedQuery,
-      collectionSlug: collectionSlug
+      preloadedQuery: preloadedQuery
     }, rest));
   }
   return null;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BuyingOptions = ({
+  onPrecartOpen
+}) => /*#__PURE__*/_react.default.createElement("button", {
+  type: "button",
+  className: "buying-options buy-family__options__button",
+  onClick: onPrecartOpen
+}, "Buying options");
+const mapDispatchToProps = dispatch => ({
+  onPrecartOpen: () => dispatch({
+    type: 'OPEN_PRECART'
+  })
+});
+var _default = (0, _reactRedux.connect)(null, mapDispatchToProps)(BuyingOptions);
+exports.default = _default;

package/dist-cjs/components/Cart/AddressFields.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _AddressFields_viewer2 = _interopRequireDefault(require("../../__generated__/AddressFields_viewer.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _TextField = _interopRequireDefault(require("../TextField"));
+var _AddressFieldsRefetchQuery = _interopRequireDefault(require("../../__generated__/AddressFieldsRefetchQuery.graphql"));
+var _utils = require("../../utils");
+var _reactStripeJs = require("@stripe/react-stripe-js");
+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 }; }
+const MAPS_API_KEY = 'AIzaSyB9rSjGVPZYcRkPl1PDezIuAp3XCUs2Crk';
+const AddressFields = ({
+  viewer: viewerKey,
+  value,
+  onChange,
+  identityType,
+  errorsObject,
+  allowedCountries
+}) => {
+  const [refetching, setRefetching] = (0, _react.useState)(false);
+  const [viewer, refetch] = (0, _reactRelay.useRefetchableFragment)((_AddressFields_viewer2.default.hash && _AddressFields_viewer2.default.hash !== "2369fc95f554723701a8294b4522137a" && console.error("The definition of 'AddressFields_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _AddressFields_viewer2.default), viewerKey);
+  const countryData = viewer.countryData?.response;
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  (0, _react.useEffect)(() => {
+    setRefetching(true);
+
+    // refetch after using fetchQuery to avoid triggering Suspense
+    const subscription = (0, _reactRelay.fetchQuery)(environment, _AddressFieldsRefetchQuery.default, {
+      countryCode: value.country,
+      includeCountryCode: true
+    }).subscribe({
+      complete: () => {
+        setRefetching(false);
+        refetch({
+          countryCode: value.country,
+          includeCountryCode: true
+        }, {
+          fetchPolicy: 'store-only'
+        });
+      },
+      error: () => {
+        setRefetching(false);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [value.country]);
+  const getErrors = field => errorsObject?.[field]?.filter(_utils.notEmpty);
+  const lines = value.street?.split('\n');
+
+  // Use consolidated phone settings
+  const phoneCollection = viewer.settings?.checkoutPhoneNumberCollection;
+  const phoneFieldConfig = phoneCollection === 'never' ? {
+    phone: 'never'
+  } : {
+    phone: 'always'
+  };
+  const phoneValidationConfig = phoneCollection === 'required' ? {
+    phone: {
+      required: 'always'
+    }
+  } : phoneCollection === 'never' ? {} : {
+    phone: {
+      required: 'never'
+    }
+  };
+
+  // Only include phone in defaultValues if phone field is shown
+  const defaultValues = {
+    name: value.name,
+    ...(phoneCollection !== 'never' && {
+      phone: value.phone
+    }),
+    address: {
+      country: value.country,
+      line1: lines?.[0],
+      line2: lines?.[1],
+      postal_code: value.zip,
+      city: value.locality,
+      state: value.administrativeArea
+    }
+  };
+  const handleAddressElementChange = (0, _react.useCallback)(e => {
+    // Always update country immediately, regardless of form completeness
+    const country = e.value.address.country;
+    const value = {
+      name: e.value.name,
+      phone: e.value.phone ?? '',
+      country,
+      street: e.value.address.line1 + (e.value.address.line2 ? `\n${e.value.address.line2}` : ''),
+      locality: e.value.address.city,
+      sublocality: '',
+      administrativeArea: e.value.address.state,
+      zip: e.value.address.postal_code
+    };
+    onChange(value, e.complete);
+  }, [onChange]);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__section"
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "Organization",
+    value: value.organization || '',
+    onChange: v => onChange({
+      organization: v
+    })
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__section"
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: identityType === 'licensee' ? 'Contact email' : 'Email',
+    autocomplete: "email",
+    type: "email",
+    value: value.email || '',
+    onChange: v => onChange({
+      email: v
+    }),
+    errors: getErrors('email')
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__section"
+  }, /*#__PURE__*/_react.default.createElement(_reactStripeJs.AddressElement, {
+    key: allowedCountries?.join(',') || 'all',
+    options: {
+      mode: identityType === 'billing' ? 'billing' : 'shipping',
+      autocomplete: {
+        mode: 'google_maps_api',
+        apiKey: MAPS_API_KEY
+      },
+      fields: phoneFieldConfig,
+      validation: phoneValidationConfig,
+      display: {
+        name: 'full'
+      },
+      ...(allowedCountries && allowedCountries.length > 0 ? {
+        allowedCountries
+      } : {}),
+      defaultValues
+    },
+    onChange: handleAddressElementChange
+  })), identityType === 'billing' ? countryData && !refetching ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, (countryData.isEuCountry || value.country === 'GB') && /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__section"
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "VAT number",
+    autocomplete: "vat",
+    placeholder: "12345678",
+    value: value.vatNumber || '',
+    onChange: v => onChange({
+      vatNumber: v
+    }),
+    errors: getErrors('vatNumber'),
+    prefix: `${countryData.vatCountryCode} `
+  }))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__section"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__field-placeholder"
+  })) : null);
+};
+var _default = AddressFields;
+exports.default = _default;

package/dist-cjs/components/Cart/CartItem/CartItemAdditionalLicenses.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CartItemAdditionalLicenses;
+var _CartItemAdditionalLicenses_orderItem2 = _interopRequireDefault(require("../../../__generated__/CartItemAdditionalLicenses_orderItem.graphql"));
+var _CartItemAdditionalLicenses_licenses2 = _interopRequireDefault(require("../../../__generated__/CartItemAdditionalLicenses_licenses.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRelay = require("react-relay");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function CartItemAdditionalLicenses({
+  licenses: licensesKey,
+  orderItem: orderItemKey,
+  onAddLicense
+}) {
+  const licenses = (0, _reactRelay.useFragment)((_CartItemAdditionalLicenses_licenses2.default.hash && _CartItemAdditionalLicenses_licenses2.default.hash !== "a00d0c8ac3643f7c12911fad6f62ec4e" && console.error("The definition of 'CartItemAdditionalLicenses_licenses' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemAdditionalLicenses_licenses2.default), licensesKey);
+  const orderItem = (0, _reactRelay.useFragment)((_CartItemAdditionalLicenses_orderItem2.default.hash && _CartItemAdditionalLicenses_orderItem2.default.hash !== "3358a415bba3d69844b42bab6f71b551" && console.error("The definition of 'CartItemAdditionalLicenses_orderItem' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemAdditionalLicenses_orderItem2.default), orderItemKey);
+  if (!licenses) return null;
+  const licenseIds = orderItem.licenseSelections?.map(({
+    license
+  }) => license.id);
+  const additionalLicenses = licenses.filter(license => !licenseIds?.some(id => id === license.id));
+  if (additionalLicenses.length < 1) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart-item__additional-licenses"
+  }, "+ Add:", ' ', additionalLicenses.map(license => /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "cart-item__additional-licenses__item",
+    key: license.id,
+    onClick: () => onAddLicense(license.id)
+  }, license.name)));
+}

package/dist-cjs/components/Cart/CartItem/CartItemLicense.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CartItemLicense;
+var _CartItemLicense_selection2 = _interopRequireDefault(require("../../../__generated__/CartItemLicense_selection.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _Icons = require("../../Icons");
+var _CartItemVariable = _interopRequireDefault(require("./CartItemVariable"));
+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 CartItemLicense({
+  onChange,
+  onRemoveLicense,
+  closeButtonMouseEnter: parentCloseButtonMouseEnter,
+  closeButtonMouseLeave: parentCloseButtonMouseLeave,
+  selections: selectionsKey
+}) {
+  const selections = (0, _reactRelay.useFragment)((_CartItemLicense_selection2.default.hash && _CartItemLicense_selection2.default.hash !== "8a249e2954a1c0d5279a28d666abe1c0" && console.error("The definition of 'CartItemLicense_selection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemLicense_selection2.default), selectionsKey);
+  if (selections.length === 0) return null;
+  const license = selections[0].license;
+  if (!license) return null;
+  const [closeButtonIsHovered, setCloseButtonIsHovered] = (0, _react.useState)(false);
+  const closeButtonMouseEnter = () => {
+    parentCloseButtonMouseEnter();
+    setCloseButtonIsHovered(true);
+  };
+  const closeButtonMouseLeave = () => {
+    parentCloseButtonMouseLeave();
+    setCloseButtonIsHovered(false);
+  };
+  const handleClickRemove = () => {
+    closeButtonMouseLeave();
+    onRemoveLicense(license.id);
+  };
+  return /*#__PURE__*/_react.default.createElement("li", {
+    key: license.id,
+    className: "cart-item__license",
+    "data-close-button-hovered": closeButtonIsHovered
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "cart-item__license__delete-button",
+    "aria-label": "Remove license",
+    onClick: handleClickRemove,
+    onMouseEnter: closeButtonMouseEnter,
+    onMouseLeave: closeButtonMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_Icons.X, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart-item__license-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart-item__license-name"
+  }, license.name), (selections.filter(selection => selection.licenseVariable)?.length ?? 0) > 0 && /*#__PURE__*/_react.default.createElement("ul", {
+    className: "cart-item__license-variables"
+  }, selections.map(selection => /*#__PURE__*/_react.default.createElement("li", {
+    className: "cart-item__license-variable",
+    key: selection.id
+  }, /*#__PURE__*/_react.default.createElement(_CartItemVariable.default, {
+    selection: selection,
+    onChange: onChange,
+    variable: license.licenseVariables?.find(({
+      id
+    }) => id === selection.licenseVariable?.id)
+  }))))));
+}

package/dist-cjs/components/Cart/CartItem/CartItemProduct.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CartItemProduct;
+var _CartItemProduct_product2 = _interopRequireDefault(require("../../../__generated__/CartItemProduct_product.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _CollectionAa = require("../../CollectionAa");
+var _FontStyle = _interopRequireDefault(require("../../FontStyle"));
+var _reactRelay = require("react-relay");
+var _utils = require("../../../utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function CartItemProduct({
+  product: productKey
+}) {
+  const product = (0, _reactRelay.useFragment)((_CartItemProduct_product2.default.hash && _CartItemProduct_product2.default.hash !== "a3931102e3ec08c57abd262038b5d74a" && console.error("The definition of 'CartItemProduct_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemProduct_product2.default), productKey);
+  let productName = product?.name ?? '??';
+  if (product?.__typename === 'FontStyle' && product.family) productName = `${product.family.name} ${product.name}`;
+  if ((product?.__typename === 'Bundle' || product?.__typename === 'CollectionBundle') && product.fontCollection && !product.name?.startsWith(product.fontCollection.name)) productName = `${product.fontCollection.name} ${product.name}`;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart-item__aa"
+  }, product ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ['FontCollection', 'Bundle', 'CollectionBundle'].indexOf(product.__typename) >= 0 ? /*#__PURE__*/_react.default.createElement(_CollectionAa.CollectionAa, {
+    product: product
+  }) : /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+    fontStyle: product
+  }, /*#__PURE__*/_react.default.createElement("span", null, "A"), /*#__PURE__*/_react.default.createElement("span", null, "a"))) : '??'), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart-item__product"
+  }, /*#__PURE__*/_react.default.createElement("h3", {
+    className: "cart-item__name"
+  }, productName), product?.isVariableFont || product?.variableInstances?.length ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart-item__label"
+  }, "Variable font") : (product?.__typename === 'FontCollection' || product?.__typename === 'CollectionBundle') && /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart-item__label"
+  }, "(", (0, _utils.pluralize)(product.totalStyles ?? 0, 'style'), ")")));
+}

package/dist-cjs/components/Cart/CartItem/CartItemVariable.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CartItemVariable;
+var _CartItemVariable_variable2 = _interopRequireDefault(require("../../../__generated__/CartItemVariable_variable.graphql"));
+var _CartItemVariable_selection2 = _interopRequireDefault(require("../../../__generated__/CartItemVariable_selection.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _VariableTableAmounts = _interopRequireDefault(require("../../VariableTableAmounts"));
+var _VariableTextInput = _interopRequireDefault(require("./VariableTextInput"));
+var _Icons = require("../../Icons");
+var _reactRelay = require("react-relay");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function CartItemVariable({
+  // selection may contain *deleted* licenseVariable and/or licenseOptions
+  selection: selectionKey,
+  // variable is the "public"-facing list of variables/options which do NOT included deleted stuff
+  variable: variableKey,
+  onChange
+}) {
+  const selection = (0, _reactRelay.useFragment)((_CartItemVariable_selection2.default.hash && _CartItemVariable_selection2.default.hash !== "9a658e82957a12990886e5e14dae37bc" && console.error("The definition of 'CartItemVariable_selection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemVariable_selection2.default), selectionKey);
+  const variable = (0, _reactRelay.useFragment)((_CartItemVariable_variable2.default.hash && _CartItemVariable_variable2.default.hash !== "4f53aadeee4ad6e8d84a087459ba2343" && console.error("The definition of 'CartItemVariable_variable' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItemVariable_variable2.default), variableKey);
+  if (!selection.licenseVariable) return null;
+  let variableOptions = variable?.licenseOptions ?? [];
+  if (variableOptions && selection.licenseOption && !variableOptions?.find(option => option.id === selection.licenseOption?.id)) {
+    // show option even if it's soft-deleted (it's not found in the list of
+    //   variable.variableOptions, but it is available on the selection)
+    variableOptions = [selection.licenseOption, ...variableOptions];
+  }
+  const handleSelectChange = e => {
+    onChange({
+      id: selection.id,
+      licenseId: selection.license.id,
+      licenseVariableId: selection.licenseVariable?.id,
+      licenseOptionId: e.target.value
+    });
+  };
+  const handleTextChange = value => {
+    onChange({
+      id: selection.id,
+      licenseId: selection.license.id,
+      licenseVariableId: selection.licenseVariable?.id,
+      variableText: value
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("label", {
+    className: "cart-item__license-variable__option",
+    "data-variable-type": selection.licenseVariable.variableType
+  }, selection.licenseVariable.variableType === 'select' || selection.licenseVariable.variableType === 'table' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selection.licenseVariable.variableType === 'table' ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart-item__license-variable__option-name"
+  }, selection.licenseOption?.name), /*#__PURE__*/_react.default.createElement(_VariableTableAmounts.default, {
+    variable: selection.licenseVariable,
+    option: selection.licenseOption
+  })) : selection.licenseOption?.amount, /*#__PURE__*/_react.default.createElement(_Icons.CarrotDown, null), /*#__PURE__*/_react.default.createElement("select", {
+    value: selection.licenseOption?.id,
+    onChange: handleSelectChange
+  }, variableOptions?.map((option, i) => /*#__PURE__*/_react.default.createElement("option", {
+    key: i,
+    value: option.id
+  }, selection.licenseVariable?.variableType === 'table' ? option.name : option.amount)))) : /*#__PURE__*/_react.default.createElement(_VariableTextInput.default, {
+    defaultValue: selection.variableText,
+    placeholder: `${selection.licenseVariable.name} *`,
+    onChange: handleTextChange
+  }));
+}