@pelcro/react-pelcro-js 4.0.0-alpha.58 → 4.0.0-alpha.59

package/dist/index.esm.js

@@ -3639,6 +3639,7 @@ var userEdit_en = {
 
 var title$z = "Enter your shipping address";
 var titleGifting$3 = "Enter your address";
+var titleBilling = "Enter your billing address";
 var selectAddressTitle$3 = "Please select an address";
 var selectAddressSubtitle$3 = "Select one of your saved addresses, or add a new one";
 var labels$Y = {
@@ -3664,6 +3665,7 @@ var messages$$ = {
 var address_en = {
 	title: title$z,
 	titleGifting: titleGifting$3,
+	titleBilling: titleBilling,
 	selectAddressTitle: selectAddressTitle$3,
 	selectAddressSubtitle: selectAddressSubtitle$3,
 	labels: labels$Y,
@@ -3815,7 +3817,11 @@ var labels$W = {
 		dec: "December"
 	},
 	checkout: {
-		title: "Payment Information"
+		title: "Payment Information",
+		billingAddress: "Billing Address",
+		NoBillingAddress: "No Billing Address Found",
+		changeBillingAddress: "Change",
+		addNewAddress: "Add New Address"
 	}
 };
 var messages$X = {
@@ -9374,6 +9380,7 @@ const initialState$p = {
   isAuthenticated: () => window.Pelcro.user.isAuthenticated(),
   selectedPaymentMethodId: null,
   selectedAddressId: null,
+  selectedBillingAddressId: null,
   addressIdToEdit: null
 };
 
@@ -9533,17 +9540,6 @@ const userHasAddress = () => {
   const addresses = (_window$Pelcro$user$r2 = (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.addresses) !== null && _window$Pelcro$user$r2 !== void 0 ? _window$Pelcro$user$r2 : [];
   return addresses.length > 0;
 };
-/** check wether or not the user have any billing addresses
- * @return {boolean} true if the user have at least one billing address, false otherwise
- */
-
-const userHasBillingAddress = () => {
-  var _window$Pelcro$user$r4, _window$Pelcro$user$r5;
-
-  const addresses = (_window$Pelcro$user$r4 = (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.addresses) !== null && _window$Pelcro$user$r4 !== void 0 ? _window$Pelcro$user$r4 : [];
-  const billingAddresses = addresses.filter(address => address.type == "billing");
-  return billingAddresses.length > 0;
-};
 const calcAndFormatItemsTotal = (items, currency) => {
   if (!Array.isArray(items)) return;
   let totalWithoutDividingBy100 = 0;
@@ -9760,13 +9756,37 @@ const getPaymentCardIcon = name => {
       d: "M22.255 20l-2.113 4.683L18.039 20h-2.695v6.726L12.341 20h-2.274L7 26.981h1.815l.671-1.558h3.432l.682 1.558h3.465v-5.185l2.299 5.185h1.563l2.351-5.095v5.095H25V20H22.255zM10.135 23.915l1.026-2.44 1.066 2.44H10.135zM37.883 23.413L41 20.018h-2.217l-1.994 2.164L34.86 20H28v6.982h6.635l2.092-2.311L38.767 27h2.21L37.883 23.413zM33.728 25.516h-4.011v-1.381h3.838v-1.323h-3.838v-1.308l4.234.012 1.693 1.897L33.728 25.516z"
     })),
     bacs_debit: /*#__PURE__*/React__default.createElement("svg", {
-      className: "plc-w-12 plc-text-gray-500",
+      className: "plc-w-16",
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 512 512"
+      viewBox: "0 0 1804.35 528.73"
+    }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
+      id: "clip1"
     }, /*#__PURE__*/React__default.createElement("path", {
-      fill: "currentColor",
-      d: "M243.4 2.6l-224 96c-14 6-21.8 21-18.7 35.8S16.8 160 32 160v8c0 13.3 10.7 24 24 24H456c13.3 0 24-10.7 24-24v-8c15.2 0 28.3-10.7 31.3-25.6s-4.8-29.9-18.7-35.8l-224-96c-8-3.4-17.2-3.4-25.2 0zM128 224H64V420.3c-.6 .3-1.2 .7-1.8 1.1l-48 32c-11.7 7.8-17 22.4-12.9 35.9S17.9 512 32 512H480c14.1 0 26.5-9.2 30.6-22.7s-1.1-28.1-12.9-35.9l-48-32c-.6-.4-1.2-.7-1.8-1.1V224H384V416H344V224H280V416H232V224H168V416H128V224zM256 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
-    }))
+      d: "M0 0h581v528.73H0zm0 0"
+    })), /*#__PURE__*/React__default.createElement("clipPath", {
+      id: "clip2"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M584 0h1220.352v528.73H584zm0 0"
+    })), /*#__PURE__*/React__default.createElement("clipPath", {
+      id: "clip3"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M0 0h581v528.73H0zm0 0"
+    }))), /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", {
+      clipPath: "url(#clip1)"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      fill: "#FFF",
+      d: "M580.68 0H101.277L.02 528.64h302.636c120.051-.808 194.696-98.507 214.168-194.1L580.68 0h-.016.016"
+    })), /*#__PURE__*/React__default.createElement("g", {
+      clipPath: "url(#clip2)"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      fill: "#020202",
+      d: "M1555.66 503.934c16.05 12.386 49.59 24.058 87.512 24.773 74.398 0 134.918-42.289 134.918-116.684 0-39.359-26.969-69.984-66.352-92.586-31.36-17.535-48.136-33.574-48.136-59.09 0-30.644 26.25-53.265 62.738-53.265 26.23 0 48.84 8.777 61.25 16.059l16.762-45.942c-13.114-8.758-41.563-17.515-73.653-17.515-74.39 0-127.629 47.398-127.629 109.402 0 35.75 22.59 67.09 63.442 89.71 36.476 20.411 48.86 37.188 48.86 64.9 0 31.359-26.25 57.632-67.09 57.632-28.454 0-59.071-11.687-75.852-21.883zm-43.851-45.223c-18.23 8.773-45.938 19.707-81.68 19.707-57.598 0-87.508-37.223-87.508-94.102 0-83.128 57.617-173.562 149.488-173.562 26.282 0 45.942 6.543 59.801 13.125l17.52-48.137c-10.93-5.828-40.86-15.32-73.668-15.32-126.883 0-215.864 110.855-215.864 231.191 0 75.153 44.493 137.117 135.66 137.117 47.403 0 83.864-13.132 102.102-21.886zm-309.13-245.766c-8.738-2.191-21.87-5.125-42.288-5.125-91.172 0-165.567 95.559-166.301 193.274 0 39.383 13.87 78.062 60.55 78.062 50.329 0 110.122-65.656 127.63-159.719zm-39.378 307.762c0-21.144 3.668-54.695 8.02-91.168h-1.462c-38.648 72.938-86.789 99.191-137.109 99.191-61.984 0-101.363-49.574-101.363-116.707 0-122.507 90.414-252.34 244.324-252.34 33.559 0 70.719 5.844 94.8 13.868l-35.73 183.789c-11.672 61.265-16.8 124.008-15.32 163.367zm-511.969-136.39c-2.93 11.667-5.11 26.253-4.387 44.507 0 33.535 18.973 52.504 56.895 52.504 91.172 0 146.59-108.664 146.59-186.707 0-43.77-18.973-84.605-67.09-84.605-52.528 0-106.492 53.96-123.988 137.129zM728.622 0l-47.403 231.883h1.457c31.36-47.383 76.586-72.2 123.988-72.2 77.316 0 106.492 64.196 106.492 126.919 0 107.925-78.047 242.128-219.527 242.128-62.004 0-108.668-25.515-108.668-91.148 0-16.781 2.91-37.945 5.844-54.727L668.075 0h60.546"
+    })), /*#__PURE__*/React__default.createElement("g", {
+      clipPath: "url(#clip3)"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      fill: "#E41C3B",
+      d: "M471.438 172.54C466.851 85.647 370 17.19 241.07 0h-14.316c126.144 23.848 218.434 99.512 218.434 189.246 0 68.027-52.993 128.031-133.649 163.457 98.598-37.238 163.836-105.52 159.899-180.164M275.288 0c126.055 27.027 217.73 102.375 222.637 195.703 6.527 123.57-141.555 231.863-330.766 241.824-52.219 2.766-102.101-2.27-147.094-13.578L0 528.641h302.656c120.035-.809 194.696-98.543 214.188-194.157L580.664 0zm-63.332 377.516c117.512-24.829 202.926-99.672 202.926-188.27 0-89.785-87.754-165.453-207.746-189.246h-29.203c120.695 19.223 211.02 96.816 211.02 189.715 0 97.21-98.9 177.754-227.993 192.082 3.254-.125 6.523-.195 9.816-.36 13.989-.734 27.711-2.101 41.18-3.921m-121.129-17.91a328.134 328.134 0 01-57.473-5.055L98.938 12.156C227.925 15.27 331.18 91.801 331.18 185.79c0 95.992-107.61 173.816-240.352 173.816"
+    }))))
   };
   return (_icons$name$toLowerCa = icons[name.toLowerCase()]) !== null && _icons$name$toLowerCa !== void 0 ? _icons$name$toLowerCa : /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -12787,6 +12807,7 @@ const RESET_NEW_PASSWORD_ERROR = "RESET_NEW_PASSWORD_ERROR";
 const RESET_CONFIRM_NEW_PASSWORD_ERROR = "RESET_CONFIRM_NEW_PASSWORD_ERROR";
 const SHOW_ALERT = "SHOW_ALERT";
 const SELECT_ADDRESS = "SELECT_ADDRESS";
+const SELECT_BILLING_ADDRESS = "SELECT_BILLING_ADDRESS";
 const LOAD_ADDRESSES = "LOAD_ADDRESSES";
 const SET_CROP = "SET_CROP";
 const SET_ZOOM = "SET_ZOOM";
@@ -22444,7 +22465,7 @@ const PaymentMethodContainerWithoutStripe = ({
   onFailure = () => {},
   ...props
 }) => {
-  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice, _window$Pelcro, _window$Pelcro$uiSett;
+  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$selectedBillin, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice, _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$user$r, _window, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$, _window$Pelcro2$user$2, _window$Pelcro$user$r2, _window2, _window2$Pelcro, _window2$Pelcro$user, _window2$Pelcro$user$, _window2$Pelcro$user$2, _billingAddress$line, _billingAddress$line2, _billingAddress$city, _billingAddress$state, _billingAddress$count, _billingAddress$posta;
 
   // Get a reference to Stripe or Elements using hooks.
   const stripe = useStripe();
@@ -22470,6 +22491,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const plan = (_props$plan = props.plan) !== null && _props$plan !== void 0 ? _props$plan : pelcroStore.plan;
   const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
   const selectedAddressId = (_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : pelcroStore.selectedAddressId;
+  const selectedBillingAddressId = (_props$selectedBillin = props.selectedBillingAddressId) !== null && _props$selectedBillin !== void 0 ? _props$selectedBillin : pelcroStore.selectedBillingAddressId;
   const giftRecipient = (_props$giftRecipient = props.giftRecipient) !== null && _props$giftRecipient !== void 0 ? _props$giftRecipient : pelcroStore.giftRecipient;
   const isGift = (_props$isGift = props.isGift) !== null && _props$isGift !== void 0 ? _props$isGift : pelcroStore.isGift;
   const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
@@ -23472,6 +23494,30 @@ const PaymentMethodContainerWithoutStripe = ({
   }, [selectedPaymentMethodId]); // eslint-disable-line react-hooks/exhaustive-deps
 
   /* ====== Start Stripe integration ======== */
+  // useEffect(() => {
+  //   if (!selectedBillingAddressId) {
+  //     const defaultAddress = window?.Pelcro?.user
+  //       ?.read()
+  //       ?.addresses?.find(
+  //         (address) => address.type == "billing" && address.is_default
+  //       );
+  //     if (defaultAddress) {
+  //       set({ selectedBillingAddressId: defaultAddress.id });
+  //     }
+  //   }
+  // }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const billingAddress = selectedBillingAddressId ? (_window$Pelcro$user$r = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro2 = _window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : (_window$Pelcro2$user$ = _window$Pelcro2$user.read()) === null || _window$Pelcro2$user$ === void 0 ? void 0 : (_window$Pelcro2$user$2 = _window$Pelcro2$user$.addresses) === null || _window$Pelcro2$user$2 === void 0 ? void 0 : _window$Pelcro2$user$2.find(address => address.id == selectedBillingAddressId)) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : {} : (_window$Pelcro$user$r2 = (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$user = _window2$Pelcro.user) === null || _window2$Pelcro$user === void 0 ? void 0 : (_window2$Pelcro$user$ = _window2$Pelcro$user.read()) === null || _window2$Pelcro$user$ === void 0 ? void 0 : (_window2$Pelcro$user$2 = _window2$Pelcro$user$.addresses) === null || _window2$Pelcro$user$2 === void 0 ? void 0 : _window2$Pelcro$user$2.find(address => address.type == "billing" && address.is_default)) !== null && _window$Pelcro$user$r2 !== void 0 ? _window$Pelcro$user$r2 : {};
+  const billingDetails = {
+    address: {
+      line1: (_billingAddress$line = billingAddress === null || billingAddress === void 0 ? void 0 : billingAddress.line1) !== null && _billingAddress$line !== void 0 ? _billingAddress$line : null,
+      line2: (_billingAddress$line2 = billingAddress === null || billingAddress === void 0 ? void 0 : billingAddress.line2) !== null && _billingAddress$line2 !== void 0 ? _billingAddress$line2 : null,
+      city: (_billingAddress$city = billingAddress === null || billingAddress === void 0 ? void 0 : billingAddress.city) !== null && _billingAddress$city !== void 0 ? _billingAddress$city : null,
+      state: (_billingAddress$state = billingAddress === null || billingAddress === void 0 ? void 0 : billingAddress.state) !== null && _billingAddress$state !== void 0 ? _billingAddress$state : null,
+      country: (_billingAddress$count = billingAddress === null || billingAddress === void 0 ? void 0 : billingAddress.country) !== null && _billingAddress$count !== void 0 ? _billingAddress$count : null,
+      postal_code: (_billingAddress$posta = billingAddress === null || billingAddress === void 0 ? void 0 : billingAddress.postal_code) !== null && _billingAddress$posta !== void 0 ? _billingAddress$posta : null
+    }
+  };
 
   const initPaymentRequest = (state, dispatch) => {
     if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
@@ -23875,7 +23921,7 @@ const PaymentMethodContainerWithoutStripe = ({
       addressId: selectedAddressId,
       couponCode
     }, (err, orderResponse) => {
-      var _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$;
+      var _window$Pelcro3, _window$Pelcro3$user, _window$Pelcro3$user$;
 
       if (err) {
         toggleAuthenticationSuccessPendingView(false);
@@ -23909,7 +23955,7 @@ const PaymentMethodContainerWithoutStripe = ({
       }
 
       window.Pelcro.user.refresh({
-        auth_token: (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : (_window$Pelcro2$user$ = _window$Pelcro2$user.read()) === null || _window$Pelcro2$user$ === void 0 ? void 0 : _window$Pelcro2$user$.auth_token
+        auth_token: (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$user = _window$Pelcro3.user) === null || _window$Pelcro3$user === void 0 ? void 0 : (_window$Pelcro3$user$ = _window$Pelcro3$user.read()) === null || _window$Pelcro3$user$ === void 0 ? void 0 : _window$Pelcro3$user$.auth_token
       }, (err, res) => {
         dispatch({
           type: DISABLE_SUBMIT,
@@ -23961,14 +24007,16 @@ const PaymentMethodContainerWithoutStripe = ({
     }
 
     return stripe.createPaymentMethod({
-      elements
+      elements,
+      params: {
+        billing_details: billingDetails
+      }
     }).then(result => {
       if (result.error) {
         return handlePaymentError(result.error);
       }
 
       if (result.paymentMethod) {
-        console.log(result.paymentMethod);
         window.Pelcro.paymentMethods.create({
           auth_token: window.Pelcro.user.read().auth_token,
           token: result.paymentMethod.id
@@ -23994,10 +24042,6 @@ const PaymentMethodContainerWithoutStripe = ({
             });
           }
 
-          if (result.paymentMethod.type == "bacs_debit") {
-            createBillingAddress(result.paymentMethod.billing_details);
-          }
-
           if (((_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$setup_inten = _res$data.setup_intent) === null || _res$data$setup_inten === void 0 ? void 0 : _res$data$setup_inten.status) === "requires_action" || ((_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : (_res$data2$setup_inte = _res$data2.setup_intent) === null || _res$data2$setup_inte === void 0 ? void 0 : _res$data2$setup_inte.status) === "requires_confirmation") {
             confirmStripeIntentSetup(res, "create");
           } else {
@@ -24088,7 +24132,10 @@ const PaymentMethodContainerWithoutStripe = ({
     }
 
     return stripe.createPaymentMethod({
-      elements
+      elements,
+      params: {
+        billing_details: billingDetails
+      }
     }).then(result => {
       if (result.error) {
         return handlePaymentError(result.error);
@@ -24112,10 +24159,6 @@ const PaymentMethodContainerWithoutStripe = ({
             });
           }
 
-          if (result.paymentMethod.type == "bacs_debit") {
-            createBillingAddress(result.paymentMethod.billing_details);
-          }
-
           if (((_res$data5 = res.data) === null || _res$data5 === void 0 ? void 0 : (_res$data5$setup_inte = _res$data5.setup_intent) === null || _res$data5$setup_inte === void 0 ? void 0 : _res$data5$setup_inte.status) === "requires_action" || ((_res$data6 = res.data) === null || _res$data6 === void 0 ? void 0 : (_res$data6$setup_inte = _res$data6.setup_intent) === null || _res$data6$setup_inte === void 0 ? void 0 : _res$data6$setup_inte.status) === "requires_confirmation") {
             confirmStripeIntentSetup(res, "replace", paymentMethodId);
           } else {
@@ -24201,17 +24244,16 @@ const PaymentMethodContainerWithoutStripe = ({
     }
 
     stripe.createPaymentMethod({
-      elements
+      elements,
+      params: {
+        billing_details: billingDetails
+      }
     }).then(result => {
       if (result.error) {
         return handlePaymentError(result.error);
       }
 
       if (result.paymentMethod) {
-        if (result.paymentMethod.type == "bacs_debit") {
-          createBillingAddress(result.paymentMethod.billing_details);
-        }
-
         return handlePayment(result.paymentMethod);
       }
     }).catch(error => {
@@ -24263,37 +24305,6 @@ const PaymentMethodContainerWithoutStripe = ({
       type: LOADING,
       payload: false
     });
-  };
-
-  const createBillingAddress = billingDetails => {
-    const hasBillingAddress = userHasBillingAddress();
-    if (hasBillingAddress) return;
-    const {
-      name,
-      address
-    } = billingDetails;
-    const [firstName, lastName] = name ? name === null || name === void 0 ? void 0 : name.split(" ") : [];
-    window.Pelcro.address.create({
-      auth_token: window.Pelcro.user.read().auth_token,
-      type: "billing",
-      first_name: firstName,
-      last_name: lastName,
-      line1: address === null || address === void 0 ? void 0 : address.line1,
-      line2: address === null || address === void 0 ? void 0 : address.line2,
-      city: address === null || address === void 0 ? void 0 : address.city,
-      state: address === null || address === void 0 ? void 0 : address.state,
-      country: address === null || address === void 0 ? void 0 : address.country,
-      postal_code: address === null || address === void 0 ? void 0 : address.postal_code,
-      is_default: true
-    }, (err, res) => {
-      if (err) {
-        console.error(err);
-      }
-
-      if (res) {
-        console.log(res);
-      }
-    });
   }; // TODO: Refactor deprecated stripe implementation
 
   /* Start Stripe deprecated functions */
@@ -25223,26 +25234,17 @@ const PelcroPaymentRequestButton = props => {
 const CheckoutForm = ({
   type
 }) => {
-  var _window$Pelcro$user$r, _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window2, _window2$Pelcro, _window2$Pelcro$user, _window2$Pelcro$user$, _window3, _window3$Pelcro, _window3$Pelcro$user, _window3$Pelcro$user$, _window4, _window4$Pelcro, _window4$Pelcro$user, _window4$Pelcro$user$, _defaultAddress$line, _defaultAddress$line2, _defaultAddress$city, _defaultAddress$state, _defaultAddress$count, _defaultAddress$posta;
+  var _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r, _window2, _window2$Pelcro, _window2$Pelcro$user, _window2$Pelcro$user$, _window3, _window3$Pelcro, _window3$Pelcro$user, _window3$Pelcro$user$;
 
   const {
     selectedPaymentMethodId,
     paymentMethodToEdit
   } = usePelcro();
   const cardProcessor = getSiteCardProcessor();
-  const defaultAddress = (_window$Pelcro$user$r = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$r2 = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : (_window$Pelcro$user$r3 = _window$Pelcro$user$r2.addresses) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.find(address => address.type == "billing" && address.is_default)) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
   const billingDetails = {
-    name: (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$user = _window2$Pelcro.user) === null || _window2$Pelcro$user === void 0 ? void 0 : (_window2$Pelcro$user$ = _window2$Pelcro$user.read()) === null || _window2$Pelcro$user$ === void 0 ? void 0 : _window2$Pelcro$user$.name,
-    email: (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$Pelcro = _window3.Pelcro) === null || _window3$Pelcro === void 0 ? void 0 : (_window3$Pelcro$user = _window3$Pelcro.user) === null || _window3$Pelcro$user === void 0 ? void 0 : (_window3$Pelcro$user$ = _window3$Pelcro$user.read()) === null || _window3$Pelcro$user$ === void 0 ? void 0 : _window3$Pelcro$user$.email,
-    phone: (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$Pelcro = _window4.Pelcro) === null || _window4$Pelcro === void 0 ? void 0 : (_window4$Pelcro$user = _window4$Pelcro.user) === null || _window4$Pelcro$user === void 0 ? void 0 : (_window4$Pelcro$user$ = _window4$Pelcro$user.read()) === null || _window4$Pelcro$user$ === void 0 ? void 0 : _window4$Pelcro$user$.phone,
-    address: {
-      line1: (_defaultAddress$line = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.line1) !== null && _defaultAddress$line !== void 0 ? _defaultAddress$line : null,
-      line2: (_defaultAddress$line2 = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.line2) !== null && _defaultAddress$line2 !== void 0 ? _defaultAddress$line2 : null,
-      city: (_defaultAddress$city = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.city) !== null && _defaultAddress$city !== void 0 ? _defaultAddress$city : null,
-      state: (_defaultAddress$state = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.state) !== null && _defaultAddress$state !== void 0 ? _defaultAddress$state : null,
-      country: (_defaultAddress$count = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.country) !== null && _defaultAddress$count !== void 0 ? _defaultAddress$count : null,
-      postal_code: (_defaultAddress$posta = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.postal_code) !== null && _defaultAddress$posta !== void 0 ? _defaultAddress$posta : null
-    }
+    name: (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$r = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.name,
+    email: (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$user = _window2$Pelcro.user) === null || _window2$Pelcro$user === void 0 ? void 0 : (_window2$Pelcro$user$ = _window2$Pelcro$user.read()) === null || _window2$Pelcro$user$ === void 0 ? void 0 : _window2$Pelcro$user$.email,
+    phone: (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$Pelcro = _window3.Pelcro) === null || _window3$Pelcro === void 0 ? void 0 : (_window3$Pelcro$user = _window3$Pelcro.user) === null || _window3$Pelcro$user === void 0 ? void 0 : (_window3$Pelcro$user$ = _window3$Pelcro$user.read()) === null || _window3$Pelcro$user$ === void 0 ? void 0 : _window3$Pelcro$user$.phone
   };
   const paymentElementOptions = {
     layout: {
@@ -25253,6 +25255,14 @@ const CheckoutForm = ({
     defaultValues: {
       billingDetails: billingDetails
     },
+    fields: {
+      billingDetails: {
+        name: "auto",
+        email: "auto",
+        phone: "auto",
+        address: "never"
+      }
+    },
     terms: {
       applePay: "never",
       card: "never",
@@ -25937,7 +25947,7 @@ const SelectedPaymentMethod = () => {
   });
   return selectedPaymentMethodId && /*#__PURE__*/React__default.createElement("div", {
     key: paymentMethod.id,
-    className: "plc-px-2 plc-my-2 plc-text-gray-900 plc-rounded plc-shadow-md plc-ring-2 plc-ring-primary-400 pelcro-payment-method-wrapper"
+    className: "plc-p-4 plc-my-4 plc-text-gray-900 plc-rounded plc-shadow-md_dark pelcro-payment-method-wrapper"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-px-1",
     id: `pelcro-payment-method-select-${paymentMethod.id}`
@@ -26495,8 +26505,76 @@ function PaymentMethodUpdateSetDefault(props) {
   }, props.label);
 }
 
+const SelectedAddress = ({
+  type
+}) => {
+  var _window$Pelcro$user$r, _window, _window$Pelcro, _window$Pelcro$user, _addresses$find, _addresses$find2;
+
+  const {
+    t
+  } = useTranslation("payment");
+  const {
+    state: {
+      isLoading
+    }
+  } = useContext(store$m);
+  const {
+    switchView,
+    set,
+    selectedBillingAddressId
+  } = usePelcro();
+  const {
+    addresses
+  } = (_window$Pelcro$user$r = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : _window$Pelcro$user.read()) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+  const address = selectedBillingAddressId ? (_addresses$find = addresses === null || addresses === void 0 ? void 0 : addresses.find(address => address.id == selectedBillingAddressId)) !== null && _addresses$find !== void 0 ? _addresses$find : null : (_addresses$find2 = addresses === null || addresses === void 0 ? void 0 : addresses.find(address => address.type == "billing" && address.is_default)) !== null && _addresses$find2 !== void 0 ? _addresses$find2 : null;
+
+  const onAddNewAddress = () => {
+    set({
+      flow: type
+    });
+
+    if (address) {
+      switchView("billing-address-select");
+    } else {
+      switchView("billing-address-create");
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-p-4 plc-my-4 last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-bg-white plc-shadow-md_dark plc-relative"
+  }, address && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "pelcro-select-address-radio plc-order-2",
+    id: `pelcro-address-select-${address.id}`,
+    name: "address"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-name plc-font-semibold"
+  }, t("labels.checkout.billingAddress")), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-company"
+  }, address.company), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-line1 plc-text-sm plc-mt-2"
+  }, address.line1), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-country plc-text-sm"
+  }, address.city, ", ", address.state_name, " ", address.postal_code, ", ", address.country_name)), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onAddNewAddress,
+    disabled: isLoading,
+    variant: "ghost",
+    className: "plc-text-primary-500 plc-absolute plc-top-4 plc-right-5"
+  }, t("labels.checkout.changeBillingAddress"))), !address && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "pelcro-select-address-radio plc-order-2",
+    id: `pelcro-address-select-${address === null || address === void 0 ? void 0 : address.id}`,
+    name: "address"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-name plc-font-semibold"
+  }, t("labels.checkout.NoBillingAddress"))), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onAddNewAddress,
+    disabled: isLoading,
+    variant: "ghost",
+    className: "plc-text-primary-500 plc-absolute plc-top-4 plc-right-5"
+  }, t("labels.checkout.addNewAddress"))));
+};
+
 /**
- *
+ *@return {paymentMethodView}
  */
 
 function PaymentMethodView({
@@ -26555,7 +26633,9 @@ function PaymentMethodView({
     freeOrders: showOrderButton
   }, /*#__PURE__*/React__default.createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), showSubscriptionButton && /*#__PURE__*/React__default.createElement(SubscriptionCreateFreePlanButton, null), showOrderButton && /*#__PURE__*/React__default.createElement(OrderCreateFreeButton, null), !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }), showSubscriptionButton && /*#__PURE__*/React__default.createElement(SubscriptionCreateFreePlanButton, null), showOrderButton && /*#__PURE__*/React__default.createElement(OrderCreateFreeButton, null), !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default.createElement(SelectedAddress, {
+    type: type
+  }), /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default.createElement(IncludeFirstName, {
     id: "pelcro-input-first-name",
@@ -29402,7 +29482,7 @@ const AddressCreateContainer = ({
     };
 
     getCountries();
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const submitAddress = ({
     firstName,
@@ -29477,8 +29557,10 @@ const AddressCreateContainer = ({
       }
 
       if (product || order) {
-        set({
+        type == "shipping" ? set({
           selectedAddressId: newAddressId
+        }) : set({
+          selectedBillingAddressId: newAddressId
         });
       }
 
@@ -29613,7 +29695,8 @@ const AddressCreateContainer = ({
     if (state.country) {
       getStates();
     }
-  }, [state.country]);
+  }, [state.country]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
@@ -30135,6 +30218,70 @@ const AddressCreateModal = ({
 };
 AddressCreateModal.viewId = "address-create";
 
+const BillingAddressCreateModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  const {
+    switchView,
+    // switchToPaymentView,
+    // resetView,
+    switchToCheckoutForm,
+    flow
+  } = usePelcro();
+  const {
+    t
+  } = useTranslation("address");
+
+  const onSuccess = newAddressId => {
+    var _otherProps$onSuccess;
+
+    (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, newAddressId);
+
+    switch (flow) {
+      case "createPaymentSource":
+        switchView("payment-method-create");
+        break;
+
+      case "deletePaymentSource":
+        switchView("payment-method-delete");
+        break;
+
+      default:
+        switchToCheckoutForm();
+        break;
+    }
+  }; // const onGiftRedemptionSuccess = () => {
+  //   otherProps.onGiftRedemptionSuccess?.();
+  //   switchView("subscription-success");
+  // };
+  // FIXME: implement me
+  // const onMembershipAdressUpdateSuccess = () => {
+  //   otherProps.onMembershipAdressUpdateSuccess?.();
+  //   resetView();
+  // };
+
+
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    id: "pelcro-address-create-modal",
+    onDisplay: onDisplay,
+    onClose: onClose
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-text-xl plc-font-bold"
+  }, t("titleBilling")))), /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(AddressCreateView, Object.assign({}, otherProps, {
+    type: "billing",
+    onSuccess: onSuccess // onGiftRedemptionSuccess={onGiftRedemptionSuccess}
+    // onMembershipAdressUpdateSuccess={
+    //   onMembershipAdressUpdateSuccess
+    // }
+
+  }))), /*#__PURE__*/React__default.createElement(ModalFooter, null));
+};
+BillingAddressCreateModal.viewId = "billing-address-create";
+
 const AddressCreateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
     store: store$g
@@ -30797,6 +30944,28 @@ const AddressUpdateModal = ({
 };
 AddressUpdateModal.viewId = "address-edit";
 
+const BillingAddressUpdateModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  const {
+    t
+  } = useTranslation("address");
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    id: "pelcro-address-update-modal",
+    onDisplay: onDisplay,
+    onClose: onClose
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-text-xl plc-font-bold"
+  }, t("titleBilling")))), /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(AddressUpdateView, Object.assign({
+    type: "billing"
+  }, otherProps))), /*#__PURE__*/React__default.createElement(ModalFooter, null));
+};
+BillingAddressUpdateModal.viewId = "billing-address-edit";
+
 const AddressUpdateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
     store: store$f
@@ -33051,19 +33220,25 @@ const GiftRedeemModal = ({
 };
 GiftRedeemModal.viewId = "gift-redeem";
 
-const getDefaultAddress = addresses => {
-  return addresses.find(address => address.is_default) || false;
+const getDefaultShippingAddress = addresses => {
+  return addresses.find(address => address.type == "shipping" && address.is_default) || false;
 };
 
-const moveDefaultAddressToStart = addresses => {
-  const defaultAddress = getDefaultAddress(addresses);
-  const addressesWithoutDefault = addresses.filter(address => !address.is_default);
-  return [defaultAddress, ...addressesWithoutDefault];
-};
+const getDefaultBillingAddress = addresses => {
+  return addresses.find(address => address.type == "billing" && address.is_default) || false;
+}; // const moveDefaultAddressToStart = (addresses) => {
+//   const defaultAddress = getDefaultAddress(addresses);
+//   const addressesWithoutDefault = addresses.filter(
+//     (address) => !address.is_default
+//   );
+//   return [defaultAddress, ...addressesWithoutDefault];
+// };
+
 
 const initialState$7 = {
   addresses: [],
   selectedAddressId: null,
+  selectedBillingAddressId: null,
   isSubmitting: false,
   alert: {
     type: "error",
@@ -33078,6 +33253,7 @@ const {
 const AddressSelectContainer = ({
   style,
   className = "",
+  type = "shipping",
   onGiftRedemptionSuccess = () => {},
   onMembershipAdressUpdateSuccess = () => {},
   onSuccess = () => {},
@@ -33173,6 +33349,15 @@ const AddressSelectContainer = ({
     onSuccess(selectedAddressId);
   };
 
+  const submitBillingAddress = ({
+    selectedBillingAddressId
+  }, dispatch) => {
+    set({
+      selectedBillingAddressId
+    });
+    onSuccess(selectedBillingAddressId);
+  };
+
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {
     switch (action.type) {
       case SELECT_ADDRESS:
@@ -33180,16 +33365,30 @@ const AddressSelectContainer = ({
           selectedAddressId: action.payload
         });
 
+      case SELECT_BILLING_ADDRESS:
+        return lib_7({ ...state,
+          selectedBillingAddressId: action.payload
+        });
+
       case LOAD_ADDRESSES:
-        if (!getDefaultAddress) {
+        if (!getDefaultShippingAddress) {
           return switchView("address-select");
+        } else if (!getDefaultBillingAddress) {
+          return switchView("billing-address-select");
         } else {
-          var _selectedMembership$a;
+          if (type == "shipping") {
+            var _selectedMembership$a;
 
-          return lib_7({ ...state,
-            addresses: moveDefaultAddressToStart(action.payload),
-            selectedAddressId: String((_selectedMembership$a = selectedMembership === null || selectedMembership === void 0 ? void 0 : selectedMembership.address_id) !== null && _selectedMembership$a !== void 0 ? _selectedMembership$a : getDefaultAddress(action.payload).id)
-          });
+            return lib_7({ ...state,
+              addresses: action.payload,
+              selectedAddressId: String((_selectedMembership$a = selectedMembership === null || selectedMembership === void 0 ? void 0 : selectedMembership.address_id) !== null && _selectedMembership$a !== void 0 ? _selectedMembership$a : getDefaultShippingAddress(action.payload).id)
+            });
+          } else {
+            return lib_7({ ...state,
+              addresses: action.payload,
+              selectedBillingAddressId: String(getDefaultBillingAddress(action.payload).id)
+            });
+          }
         }
 
       case SHOW_ALERT:
@@ -33205,7 +33404,7 @@ const AddressSelectContainer = ({
       case HANDLE_SUBMIT:
         return lib_5({ ...state,
           isSubmitting: true
-        }, (state, dispatch) => submitAddress(state, dispatch));
+        }, (state, dispatch) => type == "shipping" ? submitAddress(state, dispatch) : submitBillingAddress(state));
 
       default:
         return state;
@@ -33218,7 +33417,8 @@ const AddressSelectContainer = ({
       type: LOAD_ADDRESSES,
       payload: (_window$Pelcro$user$r = window.Pelcro.user.read().addresses) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : []
     });
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
@@ -33236,25 +33436,35 @@ const AddressSelectContainer = ({
   })));
 };
 
-const AddressSelectList = () => {
+const AddressSelectList = ({
+  type = "shipping"
+}) => {
   const {
     dispatch,
     state: {
       addresses,
-      selectedAddressId
+      selectedAddressId,
+      selectedBillingAddressId
     }
   } = useContext(store$7);
 
   const handleAddressSelect = event => {
-    dispatch({
-      type: SELECT_ADDRESS,
-      payload: event.target.value
-    });
+    if (type == "shipping") {
+      dispatch({
+        type: SELECT_ADDRESS,
+        payload: event.target.value
+      });
+    } else {
+      dispatch({
+        type: SELECT_BILLING_ADDRESS,
+        payload: event.target.value
+      });
+    }
   };
 
   return /*#__PURE__*/React__default.createElement("div", {
     className: "plc-overflow-y-auto plc-p-2 plc-max-h-80 pelcro-addresses-select-wrapper"
-  }, addresses.map(address => address.type === "shipping" && /*#__PURE__*/React__default.createElement("div", {
+  }, addresses.sort((a, b) => a.is_default === b.is_default ? 0 : a.is_default ? -1 : 1).map(address => address.type === type && /*#__PURE__*/React__default.createElement("div", {
     key: address.id,
     className: "plc-p-4 plc-mb-4 last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-bg-white plc-shadow-md_dark"
   }, /*#__PURE__*/React__default.createElement(Radio, {
@@ -33262,7 +33472,7 @@ const AddressSelectList = () => {
     labelClassName: "plc-cursor-pointer plc-w-full plc-ml-0 plc-mr-2 plc-order-1",
     id: `pelcro-address-select-${address.id}`,
     name: "address",
-    checked: selectedAddressId === String(address.id),
+    checked: type == "shipping" ? selectedAddressId === String(address.id) : selectedBillingAddressId === String(address.id),
     value: address.id,
     onChange: handleAddressSelect
   }, /*#__PURE__*/React__default.createElement("p", {
@@ -33279,13 +33489,15 @@ const AddressSelectList = () => {
 const AddressSelectSubmit = ({
   name,
   onClick,
+  type = "shipping",
   ...otherProps
 }) => {
   const {
     dispatch,
     state: {
       selectedAddressId,
-      isSubmitting
+      isSubmitting,
+      selectedBillingAddressId
     }
   } = useContext(store$7);
   const {
@@ -33298,7 +33510,7 @@ const AddressSelectSubmit = ({
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: selectedAddressId === "undefined" || selectedAddressId === null || !selectedAddressId,
+    disabled: type == "shipping" ? selectedAddressId === "undefined" || selectedAddressId === null || !selectedAddressId : selectedBillingAddressId === "undefined" || selectedBillingAddressId === null || !selectedBillingAddressId,
     isLoading: isSubmitting
   }, otherProps), name !== null && name !== void 0 ? name : t("buttons.submit"));
 };
@@ -33312,13 +33524,16 @@ const AddressSelectView = props => {
   }, /*#__PURE__*/React__default.createElement("form", {
     action: "javascript:void(0);",
     className: "plc-mt-2 pelcro-form"
-  }, /*#__PURE__*/React__default.createElement(AddressSelectContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, null), /*#__PURE__*/React__default.createElement(AddressSelectList, null), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(AddressSelectContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, null), /*#__PURE__*/React__default.createElement(AddressSelectList, {
+    type: props.type
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-justify-center plc-mt-4"
   }, /*#__PURE__*/React__default.createElement(Link, {
     id: "pelcro-add-address",
     onClick: props.onAddNewAddress,
     className: "plc-w-full plc-h-12 plc-flex plc-justify-center plc-border plc-items-center plc-border-solid plc-border-gray-300 plc-rounded plc-bg-white  hover:plc-border-primary-800"
   }, t("buttons.addAddress"))), /*#__PURE__*/React__default.createElement(AddressSelectSubmit, {
+    type: props.type,
     role: "submit",
     className: "plc-mt-4 plc-w-full",
     name: t("buttons.selectAddress"),
@@ -33386,6 +33601,78 @@ const AddressSelectModal = ({
 };
 AddressSelectModal.viewId = "address-select";
 
+const BillingAddressSelectModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  const {
+    switchView,
+    // switchToPaymentView,
+    // resetView,
+    switchToCheckoutForm,
+    flow
+  } = usePelcro();
+  const {
+    t
+  } = useTranslation("address");
+
+  const onSuccess = selectedBillingAddressId => {
+    var _otherProps$onSuccess;
+
+    (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, selectedBillingAddressId);
+
+    switch (flow) {
+      case "createPaymentSource":
+        switchView("payment-method-create");
+        break;
+
+      case "deletePaymentSource":
+        switchView("payment-method-delete");
+        break;
+
+      default:
+        switchToCheckoutForm();
+        break;
+    }
+  };
+
+  const onAddNewAddress = () => {
+    switchView("billing-address-create");
+  }; // const onGiftRedemptionSuccess = () => {
+  //   otherProps.onGiftRedemptionSuccess?.();
+  //   switchView("subscription-success");
+  // };
+  // // FIXME: implement me
+  // const onMembershipAdressUpdateSuccess = () => {
+  //   otherProps.onMembershipAdressUpdateSuccess?.();
+  //   resetView();
+  // };
+
+
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    onDisplay: onDisplay,
+    onClose: onClose,
+    id: "pelcro-address-select-modal"
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-text-xl plc-font-bold"
+  }, t("selectAddressTitle")), /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-text-sm"
+  }, t("selectAddressSubtitle")))), /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(AddressSelectView, Object.assign({
+    onAddNewAddress: onAddNewAddress
+  }, otherProps, {
+    type: "billing",
+    onSuccess: onSuccess // onGiftRedemptionSuccess={onGiftRedemptionSuccess}
+    // onMembershipAdressUpdateSuccess={
+    //   onMembershipAdressUpdateSuccess
+    // }
+
+  }))), /*#__PURE__*/React__default.createElement(ModalFooter, null));
+};
+BillingAddressSelectModal.viewId = "billing-address-select";
+
 const moveDefaultPaymentMethodToStart = paymentMethods => {
   var _window$Pelcro$user$r;
 
@@ -33523,7 +33810,7 @@ const PaymentMethodSelectList = () => {
     const isSelected = selectedPaymentMethodId === String(paymentMethod.id);
     return /*#__PURE__*/React__default.createElement("div", {
       key: paymentMethod.id,
-      className: `plc-p-2 plc-pl-4 plc-shadow-md plc-text-gray-900 plc-rounded pelcro-payment-method-wrapper ${isSelected ? "plc-ring-2 plc-ring-primary-400" : "plc-ring-1 plc-ring-gray-200"}`
+      className: `plc-p-2 plc-pl-4 plc-shadow-md plc-text-gray-900 plc-rounded plc-min-h-14 plc-flex plc-items-center pelcro-payment-method-wrapper ${isSelected ? "plc-ring-2 plc-ring-primary-400" : "plc-ring-1 plc-ring-gray-200"}`
     }, /*#__PURE__*/React__default.createElement(Radio, {
       className: "plc-flex plc-items-center pelcro-select-payment-method-radio",
       labelClassName: "plc-flex plc-items-center plc-space-x-2 plc-cursor-pointer plc-w-full",
@@ -36705,11 +36992,19 @@ const AddressesMenu = props => {
   };
 
   const displayAddressEdit = e => {
-    const address = e.currentTarget.dataset.key;
+    const addressId = e.currentTarget.dataset.key;
+    const addressType = e.currentTarget.dataset.type;
     set({
-      addressIdToEdit: address
+      addressIdToEdit: addressId
     });
-    return switchView("address-edit");
+
+    if (addressType === "shipping") {
+      return switchView("address-edit");
+    }
+
+    if (addressType === "billing") {
+      return switchView("billing-address-edit");
+    }
   };
 
   return /*#__PURE__*/React__default.createElement(Card, {
@@ -36732,30 +37027,46 @@ const AddressesItems = props => {
 
   const {
     t
-  } = useTranslation("dashboard");
-  const [selectedAddressId, setSelectedAddressId] = useState(null);
-  const allAddresses = (_window$Pelcro$user$r = window.Pelcro.user.read().addresses) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
-  useEffect(() => {
-    var _getDefaultAddress;
-
-    setSelectedAddressId(String((_getDefaultAddress = getDefaultAddress(addresses)) === null || _getDefaultAddress === void 0 ? void 0 : _getDefaultAddress.id));
-  }, []);
-
-  const getDefaultAddress = addresses => {
-    return addresses.find(address => address.is_default) || false;
-  };
-
-  const moveDefaultAddressToStart = addresses => {
-    const defaultAddress = getDefaultAddress(addresses);
-    const addressesWithoutDefault = addresses.filter(address => !address.is_default);
-    return [defaultAddress, ...addressesWithoutDefault];
-  };
+  } = useTranslation("dashboard"); // const [selectedAddressId, setSelectedAddressId] = useState(null);
+
+  const addresses = (_window$Pelcro$user$r = window.Pelcro.user.read().addresses) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : []; // useEffect(() => {
+  //   setSelectedAddressId(
+  //     String(getDefaultShippingAddress(addresses)?.id)
+  //   );
+  // }, []);
+  // const getDefaultShippingAddress = (addresses) => {
+  //   return (
+  //     addresses.find(
+  //       (address) => address.type == "shipping" && address.is_default
+  //     ) || false
+  //   );
+  // };
+  // const getDefaultBillingAddress = (addresses) => {
+  //   return (
+  //     addresses.find(
+  //       (address) => address.type == "billing" && address.is_default
+  //     ) || false
+  //   );
+  // };
+  // const moveDefaultAddressToStart = (addresses) => {
+  //   const defaultShippingAddress =
+  //     getDefaultShippingAddress(addresses);
+  //   const defaultBillingAddress = getDefaultBillingAddress(addresses);
+  //   const addressesWithoutDefault = addresses.filter(
+  //     (address) => !address.is_default
+  //   );
+  //   return [
+  //     defaultShippingAddress,
+  //     defaultBillingAddress,
+  //     ...addressesWithoutDefault
+  //   ];
+  // };
+  // const addresses = moveDefaultAddressToStart(allAddresses);
 
-  const addresses = moveDefaultAddressToStart(allAddresses);
   if (addresses.length === 0) return null;
-  return addresses.map((address, index) => address.type === "shipping" && /*#__PURE__*/React__default.createElement("div", {
+  return addresses.sort((a, b) => a.is_default === b.is_default ? 0 : a.is_default ? -1 : 1).map((address, index) => /*#__PURE__*/React__default.createElement("div", {
     key: address.id,
-    className: `plc-py-2 plc-px-4 plc-mt-5 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-bg-white plc-shadow-md_dark ${selectedAddressId === String(address.id) && `plc-border-primary-400 plc-border-2`}`
+    className: "plc-py-2 plc-px-4 plc-mt-5 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-bg-white plc-shadow-md_dark"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex-1 plc-relative"
   }, /*#__PURE__*/React__default.createElement("p", {
@@ -36766,14 +37077,17 @@ const AddressesItems = props => {
     className: "pelcro-address-line1 plc-text-sm plc-mt-2"
   }, address.line1), /*#__PURE__*/React__default.createElement("p", {
     className: "pelcro-address-country plc-text-sm"
-  }, address.city, ", ", address.state_name, " ", address.postal_code, ", ", address.country_name)), address.is_default && /*#__PURE__*/React__default.createElement("span", {
-    className: "plc-rounded-full plc-bg-gray-800 plc-text-white plc-inline-flex plc-items-start plc-py-1 plc-px-4 plc-text-sm plc-mr-4"
+  }, address.city, ", ", address.state_name, " ", address.postal_code, ", ", address.country_name)), /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-rounded-full plc-bg-gray-200 plc-text-black plc-inline-flex plc-items-start plc-py-1 plc-px-4 plc-text-sm plc-capitalize"
+  }, address.type === "shipping" ? t("labels.shipping") : t("labels.billing")), address.is_default && /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-rounded-full plc-bg-gray-800 plc-text-white plc-inline-flex plc-items-start plc-py-1 plc-px-4 plc-text-sm plc-mr-4 plc-ml-2"
   }, t("labels.default")), /*#__PURE__*/React__default.createElement(Button, {
     variant: "icon",
     className: "plc-text-gray-500",
     icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
     id: "pelcro-button-update-address-" + index,
     "data-key": address.id,
+    "data-type": address.type,
     onClick: props === null || props === void 0 ? void 0 : props.displayAddressEdit
   })));
 };
@@ -36889,7 +37203,7 @@ const PaymentCardsItems = props => {
 
       return /*#__PURE__*/React__default.createElement("div", {
         key: "dashboard-source-" + source.id,
-        className: "plc-relative plc-py-4 plc-px-6 plc-mt-5 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-rounded plc-text-gray-900 plc-bg-white plc-shadow-md_dark"
+        className: "plc-relative plc-py-4 plc-px-6 plc-mt-5 plc-min-h-16 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-rounded plc-text-gray-900 plc-bg-white plc-shadow-md_dark"
       }, source.is_default && /*#__PURE__*/React__default.createElement("span", {
         className: "plc-absolute plc--top-3 plc-right-3 plc-rounded-full plc-bg-gray-800 plc-text-white plc-inline-flex plc-h-7 plc-my-auto plc-items-start plc-py-1 plc-px-4 plc-text-sm"
       }, t("labels.default")), /*#__PURE__*/React__default.createElement("div", {
@@ -41928,4 +42242,4 @@ const QrCodeModal = ({
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddNew, AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, Card, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, Dashboard, DashboardAddresses, DashboardContainer, DashboardContent, DashboardDonations, DashboardGifts, DashboardHeading, DashboardInvoices, DashboardLink, DashboardMemberships, DashboardNewsletters, DashboardOpenButton, DashboardOrders, DashboardPasswordChange, DashboardPaymentCards, DashboardProfile, DashboardQRCode, DashboardSavedItems, DashboardSubscriptions, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodCreateContainer, PaymentMethodCreateModal, PaymentMethodCreateView, PaymentMethodDeleteContainer, PaymentMethodDeleteList, PaymentMethodDeleteModal, PaymentMethodDeleteOptions, PaymentMethodDeleteSubmit, PaymentMethodDeleteView, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateSetDefault, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddNew, AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, BillingAddressCreateModal, BillingAddressSelectModal, BillingAddressUpdateModal, Button, Card, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, Dashboard, DashboardAddresses, DashboardContainer, DashboardContent, DashboardDonations, DashboardGifts, DashboardHeading, DashboardInvoices, DashboardLink, DashboardMemberships, DashboardNewsletters, DashboardOpenButton, DashboardOrders, DashboardPasswordChange, DashboardPaymentCards, DashboardProfile, DashboardQRCode, DashboardSavedItems, DashboardSubscriptions, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodCreateContainer, PaymentMethodCreateModal, PaymentMethodCreateView, PaymentMethodDeleteContainer, PaymentMethodDeleteList, PaymentMethodDeleteModal, PaymentMethodDeleteOptions, PaymentMethodDeleteSubmit, PaymentMethodDeleteView, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateSetDefault, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedAddress, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };