@pelcro/react-pelcro-js 3.48.0 → 3.50.0

package/dist/index.cjs.js

@@ -3970,6 +3970,10 @@ var labels$V = {
 	},
 	subCancellation: {
 		goBack: "Go back"
+	},
+	emailPreferences: {
+		label: "Email Notifications",
+		description: "Select which email updates you would like to receive:"
 	}
 };
 var messages$W = {
@@ -4866,6 +4870,10 @@ var labels$E = {
 	},
 	subCancellation: {
 		goBack: "Retourner"
+	},
+	emailPreferences: {
+		label: "Notifications par courriel",
+		description: "Sélectionnez les mises à jour par courriel que vous souhaitez recevoir:"
 	}
 };
 var messages$E = {
@@ -17265,6 +17273,9 @@ class TapGateway {
   }
 }
 
+/**
+ * Cybersource gateway strategy
+ */
 /**
  * Cybersource gateway strategy
  */
@@ -17311,7 +17322,9 @@ class CybersourceGateway {
           quantity = 1,
           addressId,
           isExistingSource,
-          fingerprint_session_id
+          fingerprint_session_id,
+          cardExpirationMonth,
+          cardExpirationYear
         } = options;
         const params = isExistingSource ? {
           source_id: token
@@ -17327,6 +17340,8 @@ class CybersourceGateway {
           coupon_code: couponCode,
           address_id: product.address_required ? addressId : null,
           fingerprint_session_id: fingerprint_session_id,
+          card_expiration_month: cardExpirationMonth,
+          card_expiration_year: cardExpirationYear,
           ...params
         }, (err, res) => {
           callback(err, res);
@@ -17343,7 +17358,9 @@ class CybersourceGateway {
           couponCode,
           product,
           addressId,
-          isExistingSource
+          isExistingSource,
+          cardExpirationMonth,
+          cardExpirationYear
         } = options;
         const params = isExistingSource ? {
           source_id: token
@@ -17358,6 +17375,8 @@ class CybersourceGateway {
           campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
           subscription_id: subscriptionIdToRenew,
           address_id: product.address_required ? addressId : null,
+          card_expiration_month: cardExpirationMonth,
+          card_expiration_year: cardExpirationYear,
           ...params
         }, (err, res) => {
           callback(err, res);
@@ -17375,7 +17394,9 @@ class CybersourceGateway {
           giftRecipient,
           quantity = 1,
           addressId,
-          isExistingSource
+          isExistingSource,
+          cardExpirationMonth,
+          cardExpirationYear
         } = options;
         const params = isExistingSource ? {
           source_id: token
@@ -17395,6 +17416,8 @@ class CybersourceGateway {
           gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
           gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
           address_id: product.address_required ? addressId : null,
+          card_expiration_month: cardExpirationMonth,
+          card_expiration_year: cardExpirationYear,
           ...params
         }, (err, res) => {
           callback(err, res);
@@ -17411,7 +17434,9 @@ class CybersourceGateway {
           plan,
           couponCode,
           addressId,
-          isExistingSource
+          isExistingSource,
+          cardExpirationMonth,
+          cardExpirationYear
         } = options;
         const params = isExistingSource ? {
           source_id: token
@@ -17425,6 +17450,8 @@ class CybersourceGateway {
           coupon_code: couponCode,
           subscription_id: subscriptionIdToRenew,
           address_id: product.address_required ? addressId : null,
+          card_expiration_month: cardExpirationMonth,
+          card_expiration_year: cardExpirationYear,
           ...params
         }, (err, res) => {
           callback(err, res);
@@ -17439,7 +17466,9 @@ class CybersourceGateway {
           items,
           couponCode,
           addressId,
-          isExistingSource
+          isExistingSource,
+          cardExpirationMonth,
+          cardExpirationYear
         } = options;
         const params = isExistingSource ? {
           source_id: token
@@ -17454,7 +17483,9 @@ class CybersourceGateway {
           ...params,
           ...(addressId && {
             address_id: addressId
-          })
+          }),
+          card_expiration_month: cardExpirationMonth,
+          card_expiration_year: cardExpirationYear
         }, (err, res) => {
           callback(err, res);
         });
@@ -17861,7 +17892,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
       }
-      handleCybersourcePayment(response.token, state);
+      handleCybersourcePayment(response, state);
     });
   };
   function handleCybersourcePayment(paymentRequest, state) {
@@ -17879,7 +17910,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       window.Pelcro.source.create({
         auth_token: window.Pelcro.user.read().auth_token,
         token: paymentRequest,
-        gateway: "cybersource"
+        gateway: "cybersource",
+        cardExpirationMonth: state.month,
+        cardExpirationYear: state.year
       }, (err, res) => {
         dispatch({
           type: DISABLE_SUBMIT,
@@ -17907,6 +17940,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             content: t("messages.sourceUpdated")
           }
         });
+
+        // Reinitialize Cybersource microform after successful payment
+        setTimeout(() => {
+          cybersourceInstanceRef.current = null;
+          initCybersourceScript();
+        }, 1000);
         onSuccess(res);
       } //
       );
@@ -17930,11 +17969,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           product,
           isExistingSource: isUsingExistingPaymentMethod,
           subscriptionIdToRenew,
-          addressId: selectedAddressId
+          addressId: selectedAddressId,
+          cardExpirationMonth: state.month,
+          cardExpirationYear: state.year
         }, (err, res) => {
           if (err) {
             return handlePaymentError(err);
           }
+
+          // Reinitialize Cybersource microform after successful payment
+          setTimeout(() => {
+            cybersourceInstanceRef.current = null;
+            initCybersourceScript();
+          }, 1000);
           onSuccess(res);
         });
       } else if (giftSubscriprition) {
@@ -17947,11 +17994,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           product,
           isExistingSource: isUsingExistingPaymentMethod,
           giftRecipient,
-          addressId: selectedAddressId
+          addressId: selectedAddressId,
+          cardExpirationMonth: state.month,
+          cardExpirationYear: state.year
         }, (err, res) => {
           if (err) {
             return handlePaymentError(err);
           }
+
+          // Reinitialize Cybersource microform after successful payment
+          setTimeout(() => {
+            cybersourceInstanceRef.current = null;
+            initCybersourceScript();
+          }, 1000);
           onSuccess(res);
         });
       } else if (renewSubscription) {
@@ -17964,11 +18019,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           product,
           isExistingSource: isUsingExistingPaymentMethod,
           subscriptionIdToRenew,
-          addressId: selectedAddressId
+          addressId: selectedAddressId,
+          cardExpirationMonth: state.month,
+          cardExpirationYear: state.year
         }, (err, res) => {
           if (err) {
             return handlePaymentError(err);
           }
+
+          // Reinitialize Cybersource microform after successful payment
+          setTimeout(() => {
+            cybersourceInstanceRef.current = null;
+            initCybersourceScript();
+          }, 1000);
           onSuccess(res);
         });
       } else if (createSubscription) {
@@ -17981,22 +18044,27 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           product,
           isExistingSource: isUsingExistingPaymentMethod,
           addressId: selectedAddressId,
-          fingerprint_session_id: state.cyberSourceSessionId
+          fingerprint_session_id: state.cyberSourceSessionId,
+          cardExpirationMonth: state.month,
+          cardExpirationYear: state.year
         }, (err, res) => {
           if (err) {
             return handlePaymentError(err);
           }
+
+          // Reinitialize Cybersource microform after successful payment
+          setTimeout(() => {
+            cybersourceInstanceRef.current = null;
+            initCybersourceScript();
+          }, 1000);
           onSuccess(res);
         });
       }
     }
   }
-  const tokenizeCard = (error, microformInstance) => {
-    if (error) {
-      return;
-    }
-    cybersourceInstanceRef.current = microformInstance;
-  };
+
+  // No longer needed - microform instance is stored directly in initCybersourceScript
+
   const appendCybersourceFingerprintScripts = () => {
     var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4;
     const uniqueId = crypto.randomUUID();
@@ -18020,6 +18088,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
   };
   const initCybersourceScript = () => {
+    // Clear existing card number field before reinitializing
+    const cardNumberElement = document.querySelector("#cybersourceCardNumber");
+    if (cardNumberElement) {
+      cardNumberElement.innerHTML = "";
+    }
+
     // jwk api call
     window.Pelcro.payment.getJWK({
       auth_token: window.Pelcro.user.read().auth_token,
@@ -18044,34 +18118,56 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         });
       }
       const {
-        key: jwk
+        key: jwk,
+        captureContext,
+        js_client
       } = res;
-      // SETUP MICROFORM
-      FLEX.microform({
-        keyId: jwk.kid,
-        keystore: jwk,
-        container: "#cybersourceCardNumber",
-        placeholder: "Card Number",
-        styles: {
-          input: {
-            "font-size": "14px",
-            "font-family": "helvetica, tahoma, calibri, sans-serif",
-            color: "#555"
-          },
-          ":focus": {
-            color: "blue"
-          },
-          ":disabled": {
-            cursor: "not-allowed"
-          },
-          valid: {
-            color: "#3c763d"
-          },
-          invalid: {
-            color: "#a94442"
+
+      // Load the SDK from the dynamic URL (if not already loaded)
+      const existingScript = document.querySelector(`script[src="${js_client}"]`);
+      if (!existingScript) {
+        window.Pelcro.helpers.loadSDK(js_client, "cybersource-cdn");
+      }
+      const initializeMicroform = () => {
+        // SETUP MICROFORM
+        // eslint-disable-next-line no-undef
+        const flex = new Flex(captureContext);
+        const microform = flex.microform({
+          styles: {
+            input: {
+              "font-size": "14px",
+              "font-family": "helvetica, tahoma, calibri, sans-serif",
+              color: "#555"
+            },
+            ":focus": {
+              color: "blue"
+            },
+            ":disabled": {
+              cursor: "not-allowed"
+            },
+            valid: {
+              color: "#3c763d"
+            },
+            invalid: {
+              color: "#a94442"
+            }
           }
-        }
-      }, tokenizeCard);
+        });
+        const number = microform.createField("number", {
+          placeholder: "Enter your card number"
+        });
+        number.load("#cybersourceCardNumber");
+        cybersourceInstanceRef.current = microform;
+      };
+
+      // Wait for SDK to load then initialize microform
+      if (existingScript) {
+        // Script already loaded, initialize immediately
+        initializeMicroform();
+      } else {
+        // Wait for new script to load
+        document.querySelector(`script[src="${js_client}"]`).addEventListener("load", initializeMicroform);
+      }
     });
   };
 
@@ -19185,13 +19281,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
         initTapScript();
       }
-      if (cardProcessor === "cybersource" && !selectedPaymentMethodId && !window.FLEX) {
-        window.Pelcro.helpers.loadSDK("https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js", "cybersource-cdn");
-        document.querySelector('script[src="https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js"]').addEventListener("load", () => {
-          initCybersourceScript();
-        });
-      }
-      if (cardProcessor === "cybersource" && !selectedPaymentMethodId && window.FLEX) {
+      if (cardProcessor === "cybersource" && !selectedPaymentMethodId) {
         initCybersourceScript();
       }
       if (cardProcessor === "cybersource") {
@@ -19707,7 +19797,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
         gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
         gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
-        address_id: product.address_required ? selectedAddressId : null
+        address_id: product.address_required ? selectedAddressId : null,
+        metadata: props === null || props === void 0 ? void 0 : props.subCreateMetadata,
+        cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
+        cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
       }, (err, res) => {
         var _res$data;
         if (res !== null && res !== void 0 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data.setup_intent) {
@@ -19882,7 +19975,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       isExistingSource: Boolean(selectedPaymentMethodId),
       items: mappedOrderItems,
       addressId: selectedAddressId,
-      couponCode
+      couponCode,
+      cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
+      cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
     }, (err, orderResponse) => {
       var _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$;
       if (err) {
@@ -20163,7 +20258,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
         ...(selectedAddressId && {
           address_id: selectedAddressId
-        })
+        }),
+        cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
+        cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
       }, (err, res) => {
         if (err) {
           return handlePaymentError(err);
@@ -31567,6 +31664,123 @@ function getMemberShipStatus(status) {
   };
 }
 
+const EmailPreferencesMenu = props => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  const [options, setOptions] = React.useState([]);
+  const [loading, setLoading] = React.useState({});
+  const [alert, setAlert] = React.useState({});
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
+    var _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$user$r, _window$Pelcro$user$r2;
+    const options = ((_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.newsletters) || [];
+    const email = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.email) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : window.Pelcro.helpers.getURLParameter("email");
+    setIsLoading(true);
+    window.Pelcro.newsletter.getByEmail(email, (err, res) => {
+      var _res$data$lists$split, _res$data, _res$data$lists;
+      if (err) {
+        setIsLoading(false);
+        setError(t("messages.error") || "Failed to load preferences.");
+        return;
+      }
+      const selectedIds = (_res$data$lists$split = res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$lists = _res$data.lists) === null || _res$data$lists === void 0 ? void 0 : _res$data$lists.split(",")) !== null && _res$data$lists$split !== void 0 ? _res$data$lists$split : [];
+      setOptions(options.map(opt => ({
+        ...opt,
+        id: String(opt.id),
+        selected: selectedIds.includes(String(opt.id))
+      })));
+      setIsLoading(false);
+      setError(null);
+    });
+  }, [t]);
+  const handleCheckboxChange = id => e => {
+    const checked = e.target.checked;
+    setOptions(prevOptions => {
+      var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
+      const newOptions = prevOptions.map(opt => opt.id === id ? {
+        ...opt,
+        selected: checked
+      } : opt);
+      // Set loading for this checkbox
+      setLoading(prev => ({
+        ...prev,
+        [id]: true
+      }));
+      setAlert(prev => ({
+        ...prev,
+        [id]: null
+      }));
+      // Save to backend
+      const selectedIds = newOptions.filter(opt => opt.selected).map(opt => opt.id);
+      const email = (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.email) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : window.Pelcro.helpers.getURLParameter("email");
+      const requestData = {
+        email,
+        source: "web",
+        lists: selectedIds.join(",")
+      };
+
+      // Check if this is a new subscription
+      window.Pelcro.newsletter.getByEmail(email, (err, res) => {
+        if (err) {
+          setLoading(prev => ({
+            ...prev,
+            [id]: false
+          }));
+          setAlert(prev => ({
+            ...prev,
+            [id]: "Error checking subscription status"
+          }));
+          return;
+        }
+        const didSubToNewslettersBefore = Boolean(res.data.email);
+        const callback = err => {
+          setLoading(prev => ({
+            ...prev,
+            [id]: false
+          }));
+          setAlert(prev => ({
+            ...prev,
+            [id]: err ? "Error saving" : "Saved!"
+          }));
+        };
+        if (didSubToNewslettersBefore) {
+          window.Pelcro.newsletter.update(requestData, callback);
+        } else {
+          window.Pelcro.newsletter.create(requestData, callback);
+        }
+      });
+      return newOptions;
+    });
+  };
+  if (isLoading) return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-justify-center plc-items-center plc-h-32"
+  }, /*#__PURE__*/React__default['default'].createElement(Loader, {
+    width: 60,
+    height: 100
+  }));
+  if (error) return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-text-red-600 plc-p-4"
+  }, error);
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-4 plc-text-sm plc-text-gray-600"
+  }, t("labels.emailPreferences.description") || "Select which email updates you would like to receive."), options.map(opt => /*#__PURE__*/React__default['default'].createElement("div", {
+    key: opt.id,
+    className: "plc-flex plc-items-center plc-mb-2"
+  }, /*#__PURE__*/React__default['default'].createElement("input", {
+    type: "checkbox",
+    id: `email-pref-${opt.id}`,
+    checked: !!opt.selected,
+    onChange: handleCheckboxChange(opt.id),
+    disabled: loading[opt.id],
+    className: "plc-mr-2"
+  }), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: `email-pref-${opt.id}`,
+    className: "plc-text-base"
+  }, opt.label))));
+};
+
 const SUB_MENUS = {
   PROFILE: "profile",
   SUBSCRIPTIONS: "subscriptions",
@@ -31577,7 +31791,8 @@ const SUB_MENUS = {
   GIFTS: "gifts",
   ORDERS: "orders",
   INVOICES: "invoices",
-  SAVED_ITEMS: "saved-items"
+  SAVED_ITEMS: "saved-items",
+  EMAIL_PREFERENCES: "email-preferences"
 };
 
 /**
@@ -32071,13 +32286,14 @@ class Dashboard extends React.Component {
     this.enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableReactGA4;
   }
   render() {
-    var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet;
+    var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet, _window$Pelcro3, _window$Pelcro3$uiSet;
     const {
       isOpen
     } = this.state;
     const userHasName = this.user.first_name || this.user.last_name;
     const profilePicture = (_window$Pelcro$user$r3 = window.Pelcro.user.read().profile_photo) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : userSolidIcon;
     const newsletters = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$uiSet = _window$Pelcro2.uiSettings) === null || _window$Pelcro2$uiSet === void 0 ? void 0 : _window$Pelcro2$uiSet.newsletters;
+    const emailNotifications = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$uiSet = _window$Pelcro3.uiSettings) === null || _window$Pelcro3$uiSet === void 0 ? void 0 : _window$Pelcro3$uiSet.emailNotifications;
     const siteHasNewslettersDefined = Array.isArray(newsletters) && newsletters.length > 0;
     return /*#__PURE__*/React__default['default'].createElement(Transition, {
       className: "plc-fixed plc-inset-y-0 plc-right-0 plc-h-full plc-max-w-xl plc-overflow-y-auto plc-text-left plc-bg-white plc-shadow-xl plc-z-max",
@@ -32155,7 +32371,7 @@ class Dashboard extends React.Component {
         }),
         className: "plc-text-sm plc-text-gray-500 hover:plc-text-primary-700",
         onClick: this.displayChangePassword
-      }, this.locale("labels.changePassword")), siteHasNewslettersDefined && /*#__PURE__*/React__default['default'].createElement(Button, {
+      }, this.locale("labels.changePassword")), siteHasNewslettersDefined && emailNotifications !== true && /*#__PURE__*/React__default['default'].createElement(Button, {
         variant: "ghost",
         icon: /*#__PURE__*/React__default['default'].createElement(SvgNewsletter, {
           className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -32245,6 +32461,12 @@ class Dashboard extends React.Component {
       icon: /*#__PURE__*/React__default['default'].createElement(SvgBookmark, null),
       title: this.locale("labels.savedItems.label"),
       content: /*#__PURE__*/React__default['default'].createElement(SavedItemsMenu, null)
+    }), /*#__PURE__*/React__default['default'].createElement(Accordion.item, {
+      show: emailNotifications === true,
+      name: SUB_MENUS.EMAIL_PREFERENCES,
+      icon: /*#__PURE__*/React__default['default'].createElement(SvgBookmark, null),
+      title: this.locale("labels.emailPreferences.label"),
+      content: /*#__PURE__*/React__default['default'].createElement(EmailPreferencesMenu, null)
     }), /*#__PURE__*/React__default['default'].createElement(Button, {
       variant: "outline",
       icon: /*#__PURE__*/React__default['default'].createElement(SvgExit, null),

package/dist/index.esm.js

@@ -3940,6 +3940,10 @@ var labels$V = {
 	},
 	subCancellation: {
 		goBack: "Go back"
+	},
+	emailPreferences: {
+		label: "Email Notifications",
+		description: "Select which email updates you would like to receive:"
 	}
 };
 var messages$W = {
@@ -4836,6 +4840,10 @@ var labels$E = {
 	},
 	subCancellation: {
 		goBack: "Retourner"
+	},
+	emailPreferences: {
+		label: "Notifications par courriel",
+		description: "Sélectionnez les mises à jour par courriel que vous souhaitez recevoir:"
 	}
 };
 var messages$E = {
@@ -17235,6 +17243,9 @@ class TapGateway {
   }
 }
 
+/**
+ * Cybersource gateway strategy
+ */
 /**
  * Cybersource gateway strategy
  */
@@ -17281,7 +17292,9 @@ class CybersourceGateway {
           quantity = 1,
           addressId,
           isExistingSource,
-          fingerprint_session_id
+          fingerprint_session_id,
+          cardExpirationMonth,
+          cardExpirationYear
         } = options;
         const params = isExistingSource ? {
           source_id: token
@@ -17297,6 +17310,8 @@ class CybersourceGateway {
           coupon_code: couponCode,
           address_id: product.address_required ? addressId : null,
           fingerprint_session_id: fingerprint_session_id,
+          card_expiration_month: cardExpirationMonth,
+          card_expiration_year: cardExpirationYear,
           ...params
         }, (err, res) => {
           callback(err, res);
@@ -17313,7 +17328,9 @@ class CybersourceGateway {
           couponCode,
           product,
           addressId,
-          isExistingSource
+          isExistingSource,
+          cardExpirationMonth,
+          cardExpirationYear
         } = options;
         const params = isExistingSource ? {
           source_id: token
@@ -17328,6 +17345,8 @@ class CybersourceGateway {
           campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
           subscription_id: subscriptionIdToRenew,
           address_id: product.address_required ? addressId : null,
+          card_expiration_month: cardExpirationMonth,
+          card_expiration_year: cardExpirationYear,
           ...params
         }, (err, res) => {
           callback(err, res);
@@ -17345,7 +17364,9 @@ class CybersourceGateway {
           giftRecipient,
           quantity = 1,
           addressId,
-          isExistingSource
+          isExistingSource,
+          cardExpirationMonth,
+          cardExpirationYear
         } = options;
         const params = isExistingSource ? {
           source_id: token
@@ -17365,6 +17386,8 @@ class CybersourceGateway {
           gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
           gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
           address_id: product.address_required ? addressId : null,
+          card_expiration_month: cardExpirationMonth,
+          card_expiration_year: cardExpirationYear,
           ...params
         }, (err, res) => {
           callback(err, res);
@@ -17381,7 +17404,9 @@ class CybersourceGateway {
           plan,
           couponCode,
           addressId,
-          isExistingSource
+          isExistingSource,
+          cardExpirationMonth,
+          cardExpirationYear
         } = options;
         const params = isExistingSource ? {
           source_id: token
@@ -17395,6 +17420,8 @@ class CybersourceGateway {
           coupon_code: couponCode,
           subscription_id: subscriptionIdToRenew,
           address_id: product.address_required ? addressId : null,
+          card_expiration_month: cardExpirationMonth,
+          card_expiration_year: cardExpirationYear,
           ...params
         }, (err, res) => {
           callback(err, res);
@@ -17409,7 +17436,9 @@ class CybersourceGateway {
           items,
           couponCode,
           addressId,
-          isExistingSource
+          isExistingSource,
+          cardExpirationMonth,
+          cardExpirationYear
         } = options;
         const params = isExistingSource ? {
           source_id: token
@@ -17424,7 +17453,9 @@ class CybersourceGateway {
           ...params,
           ...(addressId && {
             address_id: addressId
-          })
+          }),
+          card_expiration_month: cardExpirationMonth,
+          card_expiration_year: cardExpirationYear
         }, (err, res) => {
           callback(err, res);
         });
@@ -17831,7 +17862,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
       }
-      handleCybersourcePayment(response.token, state);
+      handleCybersourcePayment(response, state);
     });
   };
   function handleCybersourcePayment(paymentRequest, state) {
@@ -17849,7 +17880,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       window.Pelcro.source.create({
         auth_token: window.Pelcro.user.read().auth_token,
         token: paymentRequest,
-        gateway: "cybersource"
+        gateway: "cybersource",
+        cardExpirationMonth: state.month,
+        cardExpirationYear: state.year
       }, (err, res) => {
         dispatch({
           type: DISABLE_SUBMIT,
@@ -17877,6 +17910,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             content: t("messages.sourceUpdated")
           }
         });
+
+        // Reinitialize Cybersource microform after successful payment
+        setTimeout(() => {
+          cybersourceInstanceRef.current = null;
+          initCybersourceScript();
+        }, 1000);
         onSuccess(res);
       } //
       );
@@ -17900,11 +17939,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           product,
           isExistingSource: isUsingExistingPaymentMethod,
           subscriptionIdToRenew,
-          addressId: selectedAddressId
+          addressId: selectedAddressId,
+          cardExpirationMonth: state.month,
+          cardExpirationYear: state.year
         }, (err, res) => {
           if (err) {
             return handlePaymentError(err);
           }
+
+          // Reinitialize Cybersource microform after successful payment
+          setTimeout(() => {
+            cybersourceInstanceRef.current = null;
+            initCybersourceScript();
+          }, 1000);
           onSuccess(res);
         });
       } else if (giftSubscriprition) {
@@ -17917,11 +17964,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           product,
           isExistingSource: isUsingExistingPaymentMethod,
           giftRecipient,
-          addressId: selectedAddressId
+          addressId: selectedAddressId,
+          cardExpirationMonth: state.month,
+          cardExpirationYear: state.year
         }, (err, res) => {
           if (err) {
             return handlePaymentError(err);
           }
+
+          // Reinitialize Cybersource microform after successful payment
+          setTimeout(() => {
+            cybersourceInstanceRef.current = null;
+            initCybersourceScript();
+          }, 1000);
           onSuccess(res);
         });
       } else if (renewSubscription) {
@@ -17934,11 +17989,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           product,
           isExistingSource: isUsingExistingPaymentMethod,
           subscriptionIdToRenew,
-          addressId: selectedAddressId
+          addressId: selectedAddressId,
+          cardExpirationMonth: state.month,
+          cardExpirationYear: state.year
         }, (err, res) => {
           if (err) {
             return handlePaymentError(err);
           }
+
+          // Reinitialize Cybersource microform after successful payment
+          setTimeout(() => {
+            cybersourceInstanceRef.current = null;
+            initCybersourceScript();
+          }, 1000);
           onSuccess(res);
         });
       } else if (createSubscription) {
@@ -17951,22 +18014,27 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           product,
           isExistingSource: isUsingExistingPaymentMethod,
           addressId: selectedAddressId,
-          fingerprint_session_id: state.cyberSourceSessionId
+          fingerprint_session_id: state.cyberSourceSessionId,
+          cardExpirationMonth: state.month,
+          cardExpirationYear: state.year
         }, (err, res) => {
           if (err) {
             return handlePaymentError(err);
           }
+
+          // Reinitialize Cybersource microform after successful payment
+          setTimeout(() => {
+            cybersourceInstanceRef.current = null;
+            initCybersourceScript();
+          }, 1000);
           onSuccess(res);
         });
       }
     }
   }
-  const tokenizeCard = (error, microformInstance) => {
-    if (error) {
-      return;
-    }
-    cybersourceInstanceRef.current = microformInstance;
-  };
+
+  // No longer needed - microform instance is stored directly in initCybersourceScript
+
   const appendCybersourceFingerprintScripts = () => {
     var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4;
     const uniqueId = crypto.randomUUID();
@@ -17990,6 +18058,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
   };
   const initCybersourceScript = () => {
+    // Clear existing card number field before reinitializing
+    const cardNumberElement = document.querySelector("#cybersourceCardNumber");
+    if (cardNumberElement) {
+      cardNumberElement.innerHTML = "";
+    }
+
     // jwk api call
     window.Pelcro.payment.getJWK({
       auth_token: window.Pelcro.user.read().auth_token,
@@ -18014,34 +18088,56 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         });
       }
       const {
-        key: jwk
+        key: jwk,
+        captureContext,
+        js_client
       } = res;
-      // SETUP MICROFORM
-      FLEX.microform({
-        keyId: jwk.kid,
-        keystore: jwk,
-        container: "#cybersourceCardNumber",
-        placeholder: "Card Number",
-        styles: {
-          input: {
-            "font-size": "14px",
-            "font-family": "helvetica, tahoma, calibri, sans-serif",
-            color: "#555"
-          },
-          ":focus": {
-            color: "blue"
-          },
-          ":disabled": {
-            cursor: "not-allowed"
-          },
-          valid: {
-            color: "#3c763d"
-          },
-          invalid: {
-            color: "#a94442"
+
+      // Load the SDK from the dynamic URL (if not already loaded)
+      const existingScript = document.querySelector(`script[src="${js_client}"]`);
+      if (!existingScript) {
+        window.Pelcro.helpers.loadSDK(js_client, "cybersource-cdn");
+      }
+      const initializeMicroform = () => {
+        // SETUP MICROFORM
+        // eslint-disable-next-line no-undef
+        const flex = new Flex(captureContext);
+        const microform = flex.microform({
+          styles: {
+            input: {
+              "font-size": "14px",
+              "font-family": "helvetica, tahoma, calibri, sans-serif",
+              color: "#555"
+            },
+            ":focus": {
+              color: "blue"
+            },
+            ":disabled": {
+              cursor: "not-allowed"
+            },
+            valid: {
+              color: "#3c763d"
+            },
+            invalid: {
+              color: "#a94442"
+            }
           }
-        }
-      }, tokenizeCard);
+        });
+        const number = microform.createField("number", {
+          placeholder: "Enter your card number"
+        });
+        number.load("#cybersourceCardNumber");
+        cybersourceInstanceRef.current = microform;
+      };
+
+      // Wait for SDK to load then initialize microform
+      if (existingScript) {
+        // Script already loaded, initialize immediately
+        initializeMicroform();
+      } else {
+        // Wait for new script to load
+        document.querySelector(`script[src="${js_client}"]`).addEventListener("load", initializeMicroform);
+      }
     });
   };
 
@@ -19155,13 +19251,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
         initTapScript();
       }
-      if (cardProcessor === "cybersource" && !selectedPaymentMethodId && !window.FLEX) {
-        window.Pelcro.helpers.loadSDK("https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js", "cybersource-cdn");
-        document.querySelector('script[src="https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js"]').addEventListener("load", () => {
-          initCybersourceScript();
-        });
-      }
-      if (cardProcessor === "cybersource" && !selectedPaymentMethodId && window.FLEX) {
+      if (cardProcessor === "cybersource" && !selectedPaymentMethodId) {
         initCybersourceScript();
       }
       if (cardProcessor === "cybersource") {
@@ -19677,7 +19767,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
         gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
         gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
-        address_id: product.address_required ? selectedAddressId : null
+        address_id: product.address_required ? selectedAddressId : null,
+        metadata: props === null || props === void 0 ? void 0 : props.subCreateMetadata,
+        cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
+        cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
       }, (err, res) => {
         var _res$data;
         if (res !== null && res !== void 0 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data.setup_intent) {
@@ -19852,7 +19945,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       isExistingSource: Boolean(selectedPaymentMethodId),
       items: mappedOrderItems,
       addressId: selectedAddressId,
-      couponCode
+      couponCode,
+      cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
+      cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
     }, (err, orderResponse) => {
       var _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$;
       if (err) {
@@ -20133,7 +20228,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
         ...(selectedAddressId && {
           address_id: selectedAddressId
-        })
+        }),
+        cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
+        cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
       }, (err, res) => {
         if (err) {
           return handlePaymentError(err);
@@ -31537,6 +31634,123 @@ function getMemberShipStatus(status) {
   };
 }
 
+const EmailPreferencesMenu = props => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState({});
+  const [alert, setAlert] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    var _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$user$r, _window$Pelcro$user$r2;
+    const options = ((_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.newsletters) || [];
+    const email = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.email) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : window.Pelcro.helpers.getURLParameter("email");
+    setIsLoading(true);
+    window.Pelcro.newsletter.getByEmail(email, (err, res) => {
+      var _res$data$lists$split, _res$data, _res$data$lists;
+      if (err) {
+        setIsLoading(false);
+        setError(t("messages.error") || "Failed to load preferences.");
+        return;
+      }
+      const selectedIds = (_res$data$lists$split = res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$lists = _res$data.lists) === null || _res$data$lists === void 0 ? void 0 : _res$data$lists.split(",")) !== null && _res$data$lists$split !== void 0 ? _res$data$lists$split : [];
+      setOptions(options.map(opt => ({
+        ...opt,
+        id: String(opt.id),
+        selected: selectedIds.includes(String(opt.id))
+      })));
+      setIsLoading(false);
+      setError(null);
+    });
+  }, [t]);
+  const handleCheckboxChange = id => e => {
+    const checked = e.target.checked;
+    setOptions(prevOptions => {
+      var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
+      const newOptions = prevOptions.map(opt => opt.id === id ? {
+        ...opt,
+        selected: checked
+      } : opt);
+      // Set loading for this checkbox
+      setLoading(prev => ({
+        ...prev,
+        [id]: true
+      }));
+      setAlert(prev => ({
+        ...prev,
+        [id]: null
+      }));
+      // Save to backend
+      const selectedIds = newOptions.filter(opt => opt.selected).map(opt => opt.id);
+      const email = (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.email) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : window.Pelcro.helpers.getURLParameter("email");
+      const requestData = {
+        email,
+        source: "web",
+        lists: selectedIds.join(",")
+      };
+
+      // Check if this is a new subscription
+      window.Pelcro.newsletter.getByEmail(email, (err, res) => {
+        if (err) {
+          setLoading(prev => ({
+            ...prev,
+            [id]: false
+          }));
+          setAlert(prev => ({
+            ...prev,
+            [id]: "Error checking subscription status"
+          }));
+          return;
+        }
+        const didSubToNewslettersBefore = Boolean(res.data.email);
+        const callback = err => {
+          setLoading(prev => ({
+            ...prev,
+            [id]: false
+          }));
+          setAlert(prev => ({
+            ...prev,
+            [id]: err ? "Error saving" : "Saved!"
+          }));
+        };
+        if (didSubToNewslettersBefore) {
+          window.Pelcro.newsletter.update(requestData, callback);
+        } else {
+          window.Pelcro.newsletter.create(requestData, callback);
+        }
+      });
+      return newOptions;
+    });
+  };
+  if (isLoading) return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-justify-center plc-items-center plc-h-32"
+  }, /*#__PURE__*/React__default.createElement(Loader, {
+    width: 60,
+    height: 100
+  }));
+  if (error) return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-text-red-600 plc-p-4"
+  }, error);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mb-4 plc-text-sm plc-text-gray-600"
+  }, t("labels.emailPreferences.description") || "Select which email updates you would like to receive."), options.map(opt => /*#__PURE__*/React__default.createElement("div", {
+    key: opt.id,
+    className: "plc-flex plc-items-center plc-mb-2"
+  }, /*#__PURE__*/React__default.createElement("input", {
+    type: "checkbox",
+    id: `email-pref-${opt.id}`,
+    checked: !!opt.selected,
+    onChange: handleCheckboxChange(opt.id),
+    disabled: loading[opt.id],
+    className: "plc-mr-2"
+  }), /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: `email-pref-${opt.id}`,
+    className: "plc-text-base"
+  }, opt.label))));
+};
+
 const SUB_MENUS = {
   PROFILE: "profile",
   SUBSCRIPTIONS: "subscriptions",
@@ -31547,7 +31761,8 @@ const SUB_MENUS = {
   GIFTS: "gifts",
   ORDERS: "orders",
   INVOICES: "invoices",
-  SAVED_ITEMS: "saved-items"
+  SAVED_ITEMS: "saved-items",
+  EMAIL_PREFERENCES: "email-preferences"
 };
 
 /**
@@ -32041,13 +32256,14 @@ class Dashboard extends Component {
     this.enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableReactGA4;
   }
   render() {
-    var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet;
+    var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet, _window$Pelcro3, _window$Pelcro3$uiSet;
     const {
       isOpen
     } = this.state;
     const userHasName = this.user.first_name || this.user.last_name;
     const profilePicture = (_window$Pelcro$user$r3 = window.Pelcro.user.read().profile_photo) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : userSolidIcon;
     const newsletters = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$uiSet = _window$Pelcro2.uiSettings) === null || _window$Pelcro2$uiSet === void 0 ? void 0 : _window$Pelcro2$uiSet.newsletters;
+    const emailNotifications = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$uiSet = _window$Pelcro3.uiSettings) === null || _window$Pelcro3$uiSet === void 0 ? void 0 : _window$Pelcro3$uiSet.emailNotifications;
     const siteHasNewslettersDefined = Array.isArray(newsletters) && newsletters.length > 0;
     return /*#__PURE__*/React__default.createElement(Transition, {
       className: "plc-fixed plc-inset-y-0 plc-right-0 plc-h-full plc-max-w-xl plc-overflow-y-auto plc-text-left plc-bg-white plc-shadow-xl plc-z-max",
@@ -32125,7 +32341,7 @@ class Dashboard extends Component {
         }),
         className: "plc-text-sm plc-text-gray-500 hover:plc-text-primary-700",
         onClick: this.displayChangePassword
-      }, this.locale("labels.changePassword")), siteHasNewslettersDefined && /*#__PURE__*/React__default.createElement(Button, {
+      }, this.locale("labels.changePassword")), siteHasNewslettersDefined && emailNotifications !== true && /*#__PURE__*/React__default.createElement(Button, {
         variant: "ghost",
         icon: /*#__PURE__*/React__default.createElement(SvgNewsletter, {
           className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -32215,6 +32431,12 @@ class Dashboard extends Component {
       icon: /*#__PURE__*/React__default.createElement(SvgBookmark, null),
       title: this.locale("labels.savedItems.label"),
       content: /*#__PURE__*/React__default.createElement(SavedItemsMenu, null)
+    }), /*#__PURE__*/React__default.createElement(Accordion.item, {
+      show: emailNotifications === true,
+      name: SUB_MENUS.EMAIL_PREFERENCES,
+      icon: /*#__PURE__*/React__default.createElement(SvgBookmark, null),
+      title: this.locale("labels.emailPreferences.label"),
+      content: /*#__PURE__*/React__default.createElement(EmailPreferencesMenu, null)
     }), /*#__PURE__*/React__default.createElement(Button, {
       variant: "outline",
       icon: /*#__PURE__*/React__default.createElement(SvgExit, null),

package/dist/pelcro.css

@@ -2838,6 +2838,11 @@ apple-pay-button {
   color: rgba(180, 48, 43, var(--tw-text-opacity));
 }
 
+.pelcro-root .plc-text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgba(139, 37, 33, var(--tw-text-opacity));
+}
+
 .pelcro-root .plc-text-red-700 {
   --tw-text-opacity: 1;
   color: rgba(98, 26, 23, var(--tw-text-opacity));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "3.48.0",
+  "version": "3.50.0",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",