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

package/dist/index.cjs.js

@@ -3669,6 +3669,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 = {
@@ -3694,6 +3695,7 @@ var messages$$ = {
 var address_en = {
 	title: title$z,
 	titleGifting: titleGifting$3,
+	titleBilling: titleBilling,
 	selectAddressTitle: selectAddressTitle$3,
 	selectAddressSubtitle: selectAddressSubtitle$3,
 	labels: labels$Y,
@@ -3845,7 +3847,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 = {
@@ -9404,6 +9410,7 @@ const initialState$p = {
   isAuthenticated: () => window.Pelcro.user.isAuthenticated(),
   selectedPaymentMethodId: null,
   selectedAddressId: null,
+  selectedBillingAddressId: null,
   addressIdToEdit: null
 };
 
@@ -9563,17 +9570,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;
@@ -9790,13 +9786,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['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['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("clipPath", {
+      id: "clip1"
     }, /*#__PURE__*/React__default['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['default'].createElement("clipPath", {
+      id: "clip2"
+    }, /*#__PURE__*/React__default['default'].createElement("path", {
+      d: "M584 0h1220.352v528.73H584zm0 0"
+    })), /*#__PURE__*/React__default['default'].createElement("clipPath", {
+      id: "clip3"
+    }, /*#__PURE__*/React__default['default'].createElement("path", {
+      d: "M0 0h581v528.73H0zm0 0"
+    }))), /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("g", {
+      clipPath: "url(#clip1)"
+    }, /*#__PURE__*/React__default['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['default'].createElement("g", {
+      clipPath: "url(#clip2)"
+    }, /*#__PURE__*/React__default['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['default'].createElement("g", {
+      clipPath: "url(#clip3)"
+    }, /*#__PURE__*/React__default['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['default'].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -12817,6 +12837,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";
@@ -22474,7 +22495,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();
@@ -22500,6 +22521,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;
@@ -23502,6 +23524,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;
@@ -23905,7 +23951,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);
@@ -23939,7 +23985,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,
@@ -23991,14 +24037,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
@@ -24024,10 +24072,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 {
@@ -24118,7 +24162,10 @@ const PaymentMethodContainerWithoutStripe = ({
     }
 
     return stripe.createPaymentMethod({
-      elements
+      elements,
+      params: {
+        billing_details: billingDetails
+      }
     }).then(result => {
       if (result.error) {
         return handlePaymentError(result.error);
@@ -24142,10 +24189,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 {
@@ -24231,17 +24274,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 => {
@@ -24293,37 +24335,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 */
@@ -25253,26 +25264,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: {
@@ -25283,6 +25285,14 @@ const CheckoutForm = ({
     defaultValues: {
       billingDetails: billingDetails
     },
+    fields: {
+      billingDetails: {
+        name: "auto",
+        email: "auto",
+        phone: "auto",
+        address: "never"
+      }
+    },
     terms: {
       applePay: "never",
       card: "never",
@@ -25967,7 +25977,7 @@ const SelectedPaymentMethod = () => {
   });
   return selectedPaymentMethodId && /*#__PURE__*/React__default['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['default'].createElement("div", {
     className: "plc-flex plc-items-center plc-px-1",
     id: `pelcro-payment-method-select-${paymentMethod.id}`
@@ -26525,8 +26535,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
+    }
+  } = React.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['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['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "pelcro-select-address-radio plc-order-2",
+    id: `pelcro-address-select-${address.id}`,
+    name: "address"
+  }, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-name plc-font-semibold"
+  }, t("labels.checkout.billingAddress")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-company"
+  }, address.company), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-line1 plc-text-sm plc-mt-2"
+  }, address.line1), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-country plc-text-sm"
+  }, address.city, ", ", address.state_name, " ", address.postal_code, ", ", address.country_name)), /*#__PURE__*/React__default['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['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['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['default'].createElement("p", {
+    className: "pelcro-address-name plc-font-semibold"
+  }, t("labels.checkout.NoBillingAddress"))), /*#__PURE__*/React__default['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({
@@ -26585,7 +26663,9 @@ function PaymentMethodView({
     freeOrders: showOrderButton
   }, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), showSubscriptionButton && /*#__PURE__*/React__default['default'].createElement(SubscriptionCreateFreePlanButton, null), showOrderButton && /*#__PURE__*/React__default['default'].createElement(OrderCreateFreeButton, null), !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }), showSubscriptionButton && /*#__PURE__*/React__default['default'].createElement(SubscriptionCreateFreePlanButton, null), showOrderButton && /*#__PURE__*/React__default['default'].createElement(OrderCreateFreeButton, null), !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default['default'].createElement(SelectedAddress, {
+    type: type
+  }), /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default['default'].createElement(IncludeFirstName, {
     id: "pelcro-input-first-name",
@@ -29432,7 +29512,7 @@ const AddressCreateContainer = ({
     };
 
     getCountries();
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const submitAddress = ({
     firstName,
@@ -29507,8 +29587,10 @@ const AddressCreateContainer = ({
       }
 
       if (product || order) {
-        set({
+        type == "shipping" ? set({
           selectedAddressId: newAddressId
+        }) : set({
+          selectedBillingAddressId: newAddressId
         });
       }
 
@@ -29643,7 +29725,8 @@ const AddressCreateContainer = ({
     if (state.country) {
       getStates();
     }
-  }, [state.country]);
+  }, [state.country]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
@@ -30165,6 +30248,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['default'].createElement(Modal, {
+    id: "pelcro-address-create-modal",
+    onDisplay: onDisplay,
+    onClose: onClose
+  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['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['default'].createElement("h4", {
+    className: "plc-text-xl plc-font-bold"
+  }, t("titleBilling")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(AddressCreateView, Object.assign({}, otherProps, {
+    type: "billing",
+    onSuccess: onSuccess // onGiftRedemptionSuccess={onGiftRedemptionSuccess}
+    // onMembershipAdressUpdateSuccess={
+    //   onMembershipAdressUpdateSuccess
+    // }
+
+  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
+};
+BillingAddressCreateModal.viewId = "billing-address-create";
+
 const AddressCreateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
     store: store$g
@@ -30827,6 +30974,28 @@ const AddressUpdateModal = ({
 };
 AddressUpdateModal.viewId = "address-edit";
 
+const BillingAddressUpdateModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  const {
+    t
+  } = useTranslation("address");
+  return /*#__PURE__*/React__default['default'].createElement(Modal, {
+    id: "pelcro-address-update-modal",
+    onDisplay: onDisplay,
+    onClose: onClose
+  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['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['default'].createElement("h4", {
+    className: "plc-text-xl plc-font-bold"
+  }, t("titleBilling")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(AddressUpdateView, Object.assign({
+    type: "billing"
+  }, otherProps))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
+};
+BillingAddressUpdateModal.viewId = "billing-address-edit";
+
 const AddressUpdateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
     store: store$f
@@ -33081,19 +33250,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",
@@ -33108,6 +33283,7 @@ const {
 const AddressSelectContainer = ({
   style,
   className = "",
+  type = "shipping",
   onGiftRedemptionSuccess = () => {},
   onMembershipAdressUpdateSuccess = () => {},
   onSuccess = () => {},
@@ -33203,6 +33379,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:
@@ -33210,16 +33395,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:
@@ -33235,7 +33434,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;
@@ -33248,7 +33447,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['default'].createElement("div", {
     style: { ...style
     },
@@ -33266,25 +33466,35 @@ const AddressSelectContainer = ({
   })));
 };
 
-const AddressSelectList = () => {
+const AddressSelectList = ({
+  type = "shipping"
+}) => {
   const {
     dispatch,
     state: {
       addresses,
-      selectedAddressId
+      selectedAddressId,
+      selectedBillingAddressId
     }
   } = React.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['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['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['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['default'].createElement(Radio, {
@@ -33292,7 +33502,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['default'].createElement("p", {
@@ -33309,13 +33519,15 @@ const AddressSelectList = () => {
 const AddressSelectSubmit = ({
   name,
   onClick,
+  type = "shipping",
   ...otherProps
 }) => {
   const {
     dispatch,
     state: {
       selectedAddressId,
-      isSubmitting
+      isSubmitting,
+      selectedBillingAddressId
     }
   } = React.useContext(store$7);
   const {
@@ -33328,7 +33540,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"));
 };
@@ -33342,13 +33554,16 @@ const AddressSelectView = props => {
   }, /*#__PURE__*/React__default['default'].createElement("form", {
     action: "javascript:void(0);",
     className: "plc-mt-2 pelcro-form"
-  }, /*#__PURE__*/React__default['default'].createElement(AddressSelectContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), /*#__PURE__*/React__default['default'].createElement(AddressSelectList, null), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement(AddressSelectContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), /*#__PURE__*/React__default['default'].createElement(AddressSelectList, {
+    type: props.type
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-justify-center plc-mt-4"
   }, /*#__PURE__*/React__default['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['default'].createElement(AddressSelectSubmit, {
+    type: props.type,
     role: "submit",
     className: "plc-mt-4 plc-w-full",
     name: t("buttons.selectAddress"),
@@ -33416,6 +33631,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['default'].createElement(Modal, {
+    onDisplay: onDisplay,
+    onClose: onClose,
+    id: "pelcro-address-select-modal"
+  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['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['default'].createElement("h4", {
+    className: "plc-text-xl plc-font-bold"
+  }, t("selectAddressTitle")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm"
+  }, t("selectAddressSubtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(AddressSelectView, Object.assign({
+    onAddNewAddress: onAddNewAddress
+  }, otherProps, {
+    type: "billing",
+    onSuccess: onSuccess // onGiftRedemptionSuccess={onGiftRedemptionSuccess}
+    // onMembershipAdressUpdateSuccess={
+    //   onMembershipAdressUpdateSuccess
+    // }
+
+  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
+};
+BillingAddressSelectModal.viewId = "billing-address-select";
+
 const moveDefaultPaymentMethodToStart = paymentMethods => {
   var _window$Pelcro$user$r;
 
@@ -33553,7 +33840,7 @@ const PaymentMethodSelectList = () => {
     const isSelected = selectedPaymentMethodId === String(paymentMethod.id);
     return /*#__PURE__*/React__default['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['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",
@@ -36735,11 +37022,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['default'].createElement(Card, {
@@ -36762,30 +37057,46 @@ const AddressesItems = props => {
 
   const {
     t
-  } = useTranslation("dashboard");
-  const [selectedAddressId, setSelectedAddressId] = React.useState(null);
-  const allAddresses = (_window$Pelcro$user$r = window.Pelcro.user.read().addresses) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
-  React.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['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['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['default'].createElement("div", {
     className: "plc-flex-1 plc-relative"
   }, /*#__PURE__*/React__default['default'].createElement("p", {
@@ -36796,14 +37107,17 @@ const AddressesItems = props => {
     className: "pelcro-address-line1 plc-text-sm plc-mt-2"
   }, address.line1), /*#__PURE__*/React__default['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['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['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['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['default'].createElement(Button, {
     variant: "icon",
     className: "plc-text-gray-500",
     icon: /*#__PURE__*/React__default['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
   })));
 };
@@ -36919,7 +37233,7 @@ const PaymentCardsItems = props => {
 
       return /*#__PURE__*/React__default['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['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['default'].createElement("div", {
@@ -41999,6 +42313,9 @@ exports.ApplyCouponButton = ApplyCouponButton;
 exports.Auth0LoginButton = Auth0LoginButton;
 exports.Badge = Badge;
 exports.BankRedirection = BankRedirection;
+exports.BillingAddressCreateModal = BillingAddressCreateModal;
+exports.BillingAddressSelectModal = BillingAddressSelectModal;
+exports.BillingAddressUpdateModal = BillingAddressUpdateModal;
 exports.Button = Button;
 exports.Card = Card;
 exports.CartContainer = CartContainer;
@@ -42167,6 +42484,7 @@ exports.RegisterPassword = RegisterPassword;
 exports.RegisterView = RegisterView;
 exports.Select = Select;
 exports.SelectModal = SelectModalWithHook;
+exports.SelectedAddress = SelectedAddress;
 exports.SelectedPaymentMethod = SelectedPaymentMethod;
 exports.ShopPurchaseButton = ShopPurchaseButton;
 exports.ShopSelectProductButton = ShopSelectProductButton;