@pelcro/react-pelcro-js 3.26.0-beta.29 → 3.26.0-beta.30

package/dist/index.cjs.js

@@ -3678,6 +3678,7 @@ var userEdit_en = {
 };
 
 var title$x = "Enter your shipping address";
+var titleBilling = "Enter your billing address";
 var titleGifting$3 = "Enter your address";
 var selectAddressTitle$3 = "Please select an address";
 var selectAddressSubtitle$3 = "Select one of your saved addresses, or add a new one";
@@ -3690,7 +3691,8 @@ var labels$10 = {
 	firstName: "First name",
 	lastName: "Last name",
 	required: "required",
-	isDefault: "Set as default"
+	isDefault: "Set as default",
+	isBilling: "Set the billing address to be the same as shipping address"
 };
 var buttons$m = {
 	submit: "Submit",
@@ -3703,6 +3705,7 @@ var messages$13 = {
 };
 var address_en = {
 	title: title$x,
+	titleBilling: titleBilling,
 	titleGifting: titleGifting$3,
 	selectAddressTitle: selectAddressTitle$3,
 	selectAddressSubtitle: selectAddressSubtitle$3,
@@ -9465,7 +9468,9 @@ const initialState$o = {
   isAuthenticated: () => window.Pelcro.user.isAuthenticated(),
   selectedPaymentMethodId: null,
   selectedAddressId: null,
-  addressIdToEdit: null
+  addressIdToEdit: null,
+  newShippingAddressId: null,
+  addressView: null
 };
 const createPelcroStore = () => createStore(middleware_3((set, get) => {
   const actions = new PelcroActions(set, get);
@@ -12926,6 +12931,7 @@ const GET_COUNTRIES_SUCCESS = "GET_COUNTRIES_SUCCESS";
 const GET_COUNTRIES_FETCH = "GET_COUNTRIES_FETCH";
 const GET_STATES_SUCCESS = "GET_STATES_SUCCESS";
 const GET_STATES_FETCH = "GET_STATES_FETCH";
+const HANDLE_BILLING_SUBMIT = "HANDLE_BILLING_SUBMIT";
 const HANDLE_SUBMIT = "HANDLE_SUBMIT";
 const SET_UPDATED_PRICE = "SET_UPDATED_PRICE";
 const SET_TAX_AMOUNT = "SET_TAX_AMOUNT";
@@ -24623,6 +24629,7 @@ const initialState$f = {
   states: [],
   countries: [],
   isDefault: false,
+  isBilling: false,
   alert: {
     type: "error",
     content: ""
@@ -24655,7 +24662,8 @@ const AddressCreateContainer = _ref => {
     product,
     order,
     set,
-    selectedMembership
+    selectedMembership,
+    newShippingAddressId
   } = usePelcro();
   const giftCode = (_props$giftCode = props.giftCode) !== null && _props$giftCode !== void 0 ? _props$giftCode : giftCodeFromStore;
   const subscriptionIdToRenew = (_ref2 = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : subscriptionIdToRenewFromStore) !== null && _ref2 !== void 0 ? _ref2 : undefined;
@@ -24691,7 +24699,75 @@ const AddressCreateContainer = _ref => {
       });
     };
     getCountries();
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleAfterAddressCreationLogic = newAddressId => {
+    if (selectedMembership) {
+      dispatch({
+        type: LOADING,
+        payload: true
+      });
+      return window.Pelcro.membership.update({
+        auth_token: window.Pelcro.user.read().auth_token,
+        address_id: newAddressId,
+        membership_id: selectedMembership.id
+      }, (err, res) => {
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        if (err) {
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+          return onFailure(err);
+        }
+        notify.success(t("messages.addressUpdated"));
+        return onMembershipAdressUpdateSuccess(res);
+      });
+    }
+    if (product || order) {
+      set({
+        selectedAddressId: newAddressId
+      });
+    }
+    if (!giftCode) {
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+      return onSuccess(newAddressId);
+    }
+    if (giftCode) {
+      window.Pelcro.subscription.redeemGift({
+        auth_token: window.Pelcro.user.read().auth_token,
+        gift_code: giftCode,
+        address_id: newAddressId,
+        // redeem gift as a future phase of an existing subscription
+        subscription_id: subscriptionIdToRenew
+      }, (err, res) => {
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        if (err) {
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+          return onFailure(err);
+        }
+        return onGiftRedemptionSuccess(res);
+      });
+    }
+  };
   const submitAddress = (_ref3, dispatch) => {
     let {
       firstName,
@@ -24702,7 +24778,8 @@ const AddressCreateContainer = _ref => {
       state,
       country,
       postalCode,
-      isDefault
+      isDefault,
+      isBilling
     } = _ref3;
     window.Pelcro.address.create({
       auth_token: window.Pelcro.user.read().auth_token,
@@ -24732,20 +24809,27 @@ const AddressCreateContainer = _ref => {
         });
       }
       const newAddressId = String(getNewlyCreatedAddress(res.data.addresses).id);
-      if (selectedMembership) {
+      set({
+        newShippingAddressId: newAddressId
+      });
+      if (isBilling) {
         dispatch({
           type: LOADING,
           payload: true
         });
-        return window.Pelcro.membership.update({
+        window.Pelcro.address.create({
           auth_token: window.Pelcro.user.read().auth_token,
-          address_id: newAddressId,
-          membership_id: selectedMembership.id
+          type: "billing",
+          first_name: firstName,
+          last_name: lastName,
+          line1: line1,
+          line2: line2,
+          city: city,
+          state: state,
+          country: country,
+          postal_code: postalCode,
+          is_default: isDefault
         }, (err, res) => {
-          dispatch({
-            type: LOADING,
-            payload: false
-          });
           if (err) {
             dispatch({
               type: SHOW_ALERT,
@@ -24754,49 +24838,67 @@ const AddressCreateContainer = _ref => {
                 content: getErrorMessages(err)
               }
             });
-            return onFailure(err);
+            onFailure(err);
+            return dispatch({
+              type: LOADING,
+              payload: false
+            });
           }
-          notify.success(t("messages.addressUpdated"));
-          return onMembershipAdressUpdateSuccess(res);
+          handleAfterAddressCreationLogic(newAddressId);
         });
-      }
-      if (product || order) {
+      } else {
         set({
-          selectedAddressId: newAddressId
+          addressView: "billing"
         });
       }
-      if (!giftCode) {
+    });
+  };
+  const submitBillingAddress = (_ref4, dispatch) => {
+    let {
+      firstName,
+      lastName,
+      line1,
+      line2,
+      city,
+      state,
+      country,
+      postalCode,
+      isDefault,
+      isBilling
+    } = _ref4;
+    window.Pelcro.address.create({
+      auth_token: window.Pelcro.user.read().auth_token,
+      type: "billing",
+      first_name: firstName,
+      last_name: lastName,
+      line1: line1,
+      line2: line2,
+      city: city,
+      state: state,
+      country: country,
+      postal_code: postalCode,
+      is_default: isDefault
+    }, (err, res) => {
+      if (err) {
         dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+        onFailure(err);
+        return dispatch({
           type: LOADING,
           payload: false
         });
-        return onSuccess(newAddressId);
-      }
-      if (giftCode) {
-        window.Pelcro.subscription.redeemGift({
-          auth_token: window.Pelcro.user.read().auth_token,
-          gift_code: giftCode,
-          address_id: newAddressId,
-          // redeem gift as a future phase of an existing subscription
-          subscription_id: subscriptionIdToRenew
-        }, (err, res) => {
-          dispatch({
-            type: LOADING,
-            payload: false
-          });
-          if (err) {
-            dispatch({
-              type: SHOW_ALERT,
-              payload: {
-                type: "error",
-                content: getErrorMessages(err)
-              }
-            });
-            return onFailure(err);
-          }
-          return onGiftRedemptionSuccess(res);
-        });
       }
+
+      // const newAddressId = String(
+      //   getNewlyCreatedAddress(res.data.addresses).id
+      // );
+
+      handleAfterAddressCreationLogic(newShippingAddressId);
     });
   };
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {
@@ -24862,6 +24964,11 @@ const AddressCreateContainer = _ref => {
           ...state,
           isSubmitting: true
         }, (state, dispatch) => submitAddress(state, dispatch));
+      case HANDLE_BILLING_SUBMIT:
+        return lib_5({
+          ...state,
+          isSubmitting: true
+        }, (state, dispatch) => submitBillingAddress(state, dispatch));
       default:
         return state;
     }
@@ -24891,7 +24998,8 @@ const AddressCreateContainer = _ref => {
     if (state.country) {
       getStates();
     }
-  }, [state.country]);
+  }, [state.country]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
@@ -25274,6 +25382,24 @@ const AddressCreateSetDefault = props => {
   }, props.label);
 };
 
+const AddressCreateSetBilling = props => {
+  const {
+    dispatch
+  } = React.useContext(store$f);
+  const handleCheckboxChange = e => {
+    dispatch({
+      type: HANDLE_CHECKBOX_CHANGE,
+      payload: {
+        isBilling: e.target.checked
+      }
+    });
+  };
+  return /*#__PURE__*/React__default['default'].createElement(Checkbox, {
+    onChange: e => handleCheckboxChange(e),
+    id: props.id
+  }, props.label);
+};
+
 const AddressCreateView = props => {
   const {
     t
@@ -25332,6 +25458,11 @@ const AddressCreateView = props => {
   }, /*#__PURE__*/React__default['default'].createElement(AddressCreateSetDefault, {
     id: "pelcro-input-is-default",
     label: t("labels.isDefault")
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-space-x-3 plc-items-start plc-mb-3"
+  }, /*#__PURE__*/React__default['default'].createElement(AddressCreateSetBilling, {
+    id: "pelcro-input-is-billing",
+    label: t("labels.isBilling")
   })), /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-text-gray-900 pelcro-footnote"
   }, "* ", t("labels.required")), /*#__PURE__*/React__default['default'].createElement(AddressCreateSubmit, {
@@ -25342,6 +25473,92 @@ const AddressCreateView = props => {
   }))));
 };
 
+const AddressCreateBillingSubmit = _ref => {
+  let {
+    name,
+    onClick,
+    ...otherProps
+  } = _ref;
+  const {
+    dispatch,
+    state: {
+      isSubmitting
+    }
+  } = React.useContext(store$f);
+  const {
+    t
+  } = useTranslation("address");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
+    onClick: () => {
+      dispatch({
+        type: HANDLE_BILLING_SUBMIT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    isLoading: isSubmitting
+  }, otherProps), name !== null && name !== void 0 ? name : t("buttons.submit"));
+};
+
+const AddressCreateBillingView = props => {
+  const {
+    t
+  } = useTranslation("address");
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "pelcro-address-create-view"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-6 plc-text-2xl plc-font-semibold plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", null, t("titleBilling"))), /*#__PURE__*/React__default['default'].createElement("form", {
+    action: "javascript:void(0);",
+    className: "plc-mt-2 pelcro-form"
+  }, /*#__PURE__*/React__default['default'].createElement(AddressCreateContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-space-x-3 plc-items-start"
+  }, /*#__PURE__*/React__default['default'].createElement(AddressCreateFirstName, {
+    id: "pelcro-input-first-name",
+    errorId: "pelcro-input-first-name-error",
+    label: t("labels.firstName"),
+    autoFocus: true
+  }), /*#__PURE__*/React__default['default'].createElement(AddressCreateLastName, {
+    id: "pelcro-input-last-name",
+    errorId: "pelcro-input-last-name-error",
+    label: t("labels.lastName")
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-items-start"
+  }, /*#__PURE__*/React__default['default'].createElement(AddressCreateLine1, {
+    id: "pelcro-input-line1",
+    errorId: "pelcro-input-line1-error",
+    required: true,
+    label: t("labels.address")
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-space-x-3 plc-items-start"
+  }, /*#__PURE__*/React__default['default'].createElement(AddressCreatePostalCode, {
+    id: "pelcro-input-postal-code",
+    errorId: "pelcro-input-postal-code-error",
+    label: t("labels.code")
+  }), /*#__PURE__*/React__default['default'].createElement(AddressCreateCity, {
+    id: "pelcro-input-city",
+    errorId: "pelcro-input-city-error",
+    label: t("labels.city")
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-space-x-3 plc-items-start"
+  }, /*#__PURE__*/React__default['default'].createElement(AddressCreateCountrySelect, {
+    id: "pelcro-input-country",
+    errorId: "pelcro-input-country-error",
+    label: t("labels.country"),
+    required: true
+  }), /*#__PURE__*/React__default['default'].createElement(AddressCreateStateSelect, {
+    label: t("labels.region"),
+    id: "pelcro-input-state",
+    errorId: "pelcro-input-state-error"
+  })), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-gray-900 pelcro-footnote"
+  }, "* ", t("labels.required")), /*#__PURE__*/React__default['default'].createElement(AddressCreateBillingSubmit, {
+    role: "submit",
+    className: "plc-mt-2 plc-w-full",
+    name: t("buttons.submit"),
+    id: "pelcro-submit"
+  }))));
+};
+
 const AddressCreateModal = _ref => {
   let {
     onDisplay,
@@ -25351,7 +25568,8 @@ const AddressCreateModal = _ref => {
   const {
     switchView,
     switchToPaymentView,
-    resetView
+    resetView,
+    addressView
   } = usePelcro();
   const onSuccess = newAddressId => {
     var _otherProps$onSuccess;
@@ -25374,7 +25592,7 @@ const AddressCreateModal = _ref => {
     id: "pelcro-address-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(AddressCreateView, Object.assign({}, otherProps, {
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, addressView === "billing" ? /*#__PURE__*/React__default['default'].createElement(AddressCreateBillingView, null) : /*#__PURE__*/React__default['default'].createElement(AddressCreateView, Object.assign({}, otherProps, {
     onSuccess: onSuccess,
     onGiftRedemptionSuccess: onGiftRedemptionSuccess,
     onMembershipAdressUpdateSuccess: onMembershipAdressUpdateSuccess

package/dist/index.esm.js

@@ -3648,6 +3648,7 @@ var userEdit_en = {
 };
 
 var title$x = "Enter your shipping address";
+var titleBilling = "Enter your billing address";
 var titleGifting$3 = "Enter your address";
 var selectAddressTitle$3 = "Please select an address";
 var selectAddressSubtitle$3 = "Select one of your saved addresses, or add a new one";
@@ -3660,7 +3661,8 @@ var labels$10 = {
 	firstName: "First name",
 	lastName: "Last name",
 	required: "required",
-	isDefault: "Set as default"
+	isDefault: "Set as default",
+	isBilling: "Set the billing address to be the same as shipping address"
 };
 var buttons$m = {
 	submit: "Submit",
@@ -3673,6 +3675,7 @@ var messages$13 = {
 };
 var address_en = {
 	title: title$x,
+	titleBilling: titleBilling,
 	titleGifting: titleGifting$3,
 	selectAddressTitle: selectAddressTitle$3,
 	selectAddressSubtitle: selectAddressSubtitle$3,
@@ -9435,7 +9438,9 @@ const initialState$o = {
   isAuthenticated: () => window.Pelcro.user.isAuthenticated(),
   selectedPaymentMethodId: null,
   selectedAddressId: null,
-  addressIdToEdit: null
+  addressIdToEdit: null,
+  newShippingAddressId: null,
+  addressView: null
 };
 const createPelcroStore = () => createStore(middleware_3((set, get) => {
   const actions = new PelcroActions(set, get);
@@ -12896,6 +12901,7 @@ const GET_COUNTRIES_SUCCESS = "GET_COUNTRIES_SUCCESS";
 const GET_COUNTRIES_FETCH = "GET_COUNTRIES_FETCH";
 const GET_STATES_SUCCESS = "GET_STATES_SUCCESS";
 const GET_STATES_FETCH = "GET_STATES_FETCH";
+const HANDLE_BILLING_SUBMIT = "HANDLE_BILLING_SUBMIT";
 const HANDLE_SUBMIT = "HANDLE_SUBMIT";
 const SET_UPDATED_PRICE = "SET_UPDATED_PRICE";
 const SET_TAX_AMOUNT = "SET_TAX_AMOUNT";
@@ -24593,6 +24599,7 @@ const initialState$f = {
   states: [],
   countries: [],
   isDefault: false,
+  isBilling: false,
   alert: {
     type: "error",
     content: ""
@@ -24625,7 +24632,8 @@ const AddressCreateContainer = _ref => {
     product,
     order,
     set,
-    selectedMembership
+    selectedMembership,
+    newShippingAddressId
   } = usePelcro();
   const giftCode = (_props$giftCode = props.giftCode) !== null && _props$giftCode !== void 0 ? _props$giftCode : giftCodeFromStore;
   const subscriptionIdToRenew = (_ref2 = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : subscriptionIdToRenewFromStore) !== null && _ref2 !== void 0 ? _ref2 : undefined;
@@ -24661,7 +24669,75 @@ const AddressCreateContainer = _ref => {
       });
     };
     getCountries();
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleAfterAddressCreationLogic = newAddressId => {
+    if (selectedMembership) {
+      dispatch({
+        type: LOADING,
+        payload: true
+      });
+      return window.Pelcro.membership.update({
+        auth_token: window.Pelcro.user.read().auth_token,
+        address_id: newAddressId,
+        membership_id: selectedMembership.id
+      }, (err, res) => {
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        if (err) {
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+          return onFailure(err);
+        }
+        notify.success(t("messages.addressUpdated"));
+        return onMembershipAdressUpdateSuccess(res);
+      });
+    }
+    if (product || order) {
+      set({
+        selectedAddressId: newAddressId
+      });
+    }
+    if (!giftCode) {
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+      return onSuccess(newAddressId);
+    }
+    if (giftCode) {
+      window.Pelcro.subscription.redeemGift({
+        auth_token: window.Pelcro.user.read().auth_token,
+        gift_code: giftCode,
+        address_id: newAddressId,
+        // redeem gift as a future phase of an existing subscription
+        subscription_id: subscriptionIdToRenew
+      }, (err, res) => {
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        if (err) {
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+          return onFailure(err);
+        }
+        return onGiftRedemptionSuccess(res);
+      });
+    }
+  };
   const submitAddress = (_ref3, dispatch) => {
     let {
       firstName,
@@ -24672,7 +24748,8 @@ const AddressCreateContainer = _ref => {
       state,
       country,
       postalCode,
-      isDefault
+      isDefault,
+      isBilling
     } = _ref3;
     window.Pelcro.address.create({
       auth_token: window.Pelcro.user.read().auth_token,
@@ -24702,20 +24779,27 @@ const AddressCreateContainer = _ref => {
         });
       }
       const newAddressId = String(getNewlyCreatedAddress(res.data.addresses).id);
-      if (selectedMembership) {
+      set({
+        newShippingAddressId: newAddressId
+      });
+      if (isBilling) {
         dispatch({
           type: LOADING,
           payload: true
         });
-        return window.Pelcro.membership.update({
+        window.Pelcro.address.create({
           auth_token: window.Pelcro.user.read().auth_token,
-          address_id: newAddressId,
-          membership_id: selectedMembership.id
+          type: "billing",
+          first_name: firstName,
+          last_name: lastName,
+          line1: line1,
+          line2: line2,
+          city: city,
+          state: state,
+          country: country,
+          postal_code: postalCode,
+          is_default: isDefault
         }, (err, res) => {
-          dispatch({
-            type: LOADING,
-            payload: false
-          });
           if (err) {
             dispatch({
               type: SHOW_ALERT,
@@ -24724,49 +24808,67 @@ const AddressCreateContainer = _ref => {
                 content: getErrorMessages(err)
               }
             });
-            return onFailure(err);
+            onFailure(err);
+            return dispatch({
+              type: LOADING,
+              payload: false
+            });
           }
-          notify.success(t("messages.addressUpdated"));
-          return onMembershipAdressUpdateSuccess(res);
+          handleAfterAddressCreationLogic(newAddressId);
         });
-      }
-      if (product || order) {
+      } else {
         set({
-          selectedAddressId: newAddressId
+          addressView: "billing"
         });
       }
-      if (!giftCode) {
+    });
+  };
+  const submitBillingAddress = (_ref4, dispatch) => {
+    let {
+      firstName,
+      lastName,
+      line1,
+      line2,
+      city,
+      state,
+      country,
+      postalCode,
+      isDefault,
+      isBilling
+    } = _ref4;
+    window.Pelcro.address.create({
+      auth_token: window.Pelcro.user.read().auth_token,
+      type: "billing",
+      first_name: firstName,
+      last_name: lastName,
+      line1: line1,
+      line2: line2,
+      city: city,
+      state: state,
+      country: country,
+      postal_code: postalCode,
+      is_default: isDefault
+    }, (err, res) => {
+      if (err) {
         dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+        onFailure(err);
+        return dispatch({
           type: LOADING,
           payload: false
         });
-        return onSuccess(newAddressId);
-      }
-      if (giftCode) {
-        window.Pelcro.subscription.redeemGift({
-          auth_token: window.Pelcro.user.read().auth_token,
-          gift_code: giftCode,
-          address_id: newAddressId,
-          // redeem gift as a future phase of an existing subscription
-          subscription_id: subscriptionIdToRenew
-        }, (err, res) => {
-          dispatch({
-            type: LOADING,
-            payload: false
-          });
-          if (err) {
-            dispatch({
-              type: SHOW_ALERT,
-              payload: {
-                type: "error",
-                content: getErrorMessages(err)
-              }
-            });
-            return onFailure(err);
-          }
-          return onGiftRedemptionSuccess(res);
-        });
       }
+
+      // const newAddressId = String(
+      //   getNewlyCreatedAddress(res.data.addresses).id
+      // );
+
+      handleAfterAddressCreationLogic(newShippingAddressId);
     });
   };
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {
@@ -24832,6 +24934,11 @@ const AddressCreateContainer = _ref => {
           ...state,
           isSubmitting: true
         }, (state, dispatch) => submitAddress(state, dispatch));
+      case HANDLE_BILLING_SUBMIT:
+        return lib_5({
+          ...state,
+          isSubmitting: true
+        }, (state, dispatch) => submitBillingAddress(state, dispatch));
       default:
         return state;
     }
@@ -24861,7 +24968,8 @@ const AddressCreateContainer = _ref => {
     if (state.country) {
       getStates();
     }
-  }, [state.country]);
+  }, [state.country]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
@@ -25244,6 +25352,24 @@ const AddressCreateSetDefault = props => {
   }, props.label);
 };
 
+const AddressCreateSetBilling = props => {
+  const {
+    dispatch
+  } = useContext(store$f);
+  const handleCheckboxChange = e => {
+    dispatch({
+      type: HANDLE_CHECKBOX_CHANGE,
+      payload: {
+        isBilling: e.target.checked
+      }
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(Checkbox, {
+    onChange: e => handleCheckboxChange(e),
+    id: props.id
+  }, props.label);
+};
+
 const AddressCreateView = props => {
   const {
     t
@@ -25302,6 +25428,11 @@ const AddressCreateView = props => {
   }, /*#__PURE__*/React__default.createElement(AddressCreateSetDefault, {
     id: "pelcro-input-is-default",
     label: t("labels.isDefault")
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-space-x-3 plc-items-start plc-mb-3"
+  }, /*#__PURE__*/React__default.createElement(AddressCreateSetBilling, {
+    id: "pelcro-input-is-billing",
+    label: t("labels.isBilling")
   })), /*#__PURE__*/React__default.createElement("p", {
     className: "plc-text-gray-900 pelcro-footnote"
   }, "* ", t("labels.required")), /*#__PURE__*/React__default.createElement(AddressCreateSubmit, {
@@ -25312,6 +25443,92 @@ const AddressCreateView = props => {
   }))));
 };
 
+const AddressCreateBillingSubmit = _ref => {
+  let {
+    name,
+    onClick,
+    ...otherProps
+  } = _ref;
+  const {
+    dispatch,
+    state: {
+      isSubmitting
+    }
+  } = useContext(store$f);
+  const {
+    t
+  } = useTranslation("address");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    onClick: () => {
+      dispatch({
+        type: HANDLE_BILLING_SUBMIT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    isLoading: isSubmitting
+  }, otherProps), name !== null && name !== void 0 ? name : t("buttons.submit"));
+};
+
+const AddressCreateBillingView = props => {
+  const {
+    t
+  } = useTranslation("address");
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "pelcro-address-create-view"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mb-6 plc-text-2xl plc-font-semibold plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default.createElement("h4", null, t("titleBilling"))), /*#__PURE__*/React__default.createElement("form", {
+    action: "javascript:void(0);",
+    className: "plc-mt-2 pelcro-form"
+  }, /*#__PURE__*/React__default.createElement(AddressCreateContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, null), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-space-x-3 plc-items-start"
+  }, /*#__PURE__*/React__default.createElement(AddressCreateFirstName, {
+    id: "pelcro-input-first-name",
+    errorId: "pelcro-input-first-name-error",
+    label: t("labels.firstName"),
+    autoFocus: true
+  }), /*#__PURE__*/React__default.createElement(AddressCreateLastName, {
+    id: "pelcro-input-last-name",
+    errorId: "pelcro-input-last-name-error",
+    label: t("labels.lastName")
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-items-start"
+  }, /*#__PURE__*/React__default.createElement(AddressCreateLine1, {
+    id: "pelcro-input-line1",
+    errorId: "pelcro-input-line1-error",
+    required: true,
+    label: t("labels.address")
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-space-x-3 plc-items-start"
+  }, /*#__PURE__*/React__default.createElement(AddressCreatePostalCode, {
+    id: "pelcro-input-postal-code",
+    errorId: "pelcro-input-postal-code-error",
+    label: t("labels.code")
+  }), /*#__PURE__*/React__default.createElement(AddressCreateCity, {
+    id: "pelcro-input-city",
+    errorId: "pelcro-input-city-error",
+    label: t("labels.city")
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-space-x-3 plc-items-start"
+  }, /*#__PURE__*/React__default.createElement(AddressCreateCountrySelect, {
+    id: "pelcro-input-country",
+    errorId: "pelcro-input-country-error",
+    label: t("labels.country"),
+    required: true
+  }), /*#__PURE__*/React__default.createElement(AddressCreateStateSelect, {
+    label: t("labels.region"),
+    id: "pelcro-input-state",
+    errorId: "pelcro-input-state-error"
+  })), /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-text-gray-900 pelcro-footnote"
+  }, "* ", t("labels.required")), /*#__PURE__*/React__default.createElement(AddressCreateBillingSubmit, {
+    role: "submit",
+    className: "plc-mt-2 plc-w-full",
+    name: t("buttons.submit"),
+    id: "pelcro-submit"
+  }))));
+};
+
 const AddressCreateModal = _ref => {
   let {
     onDisplay,
@@ -25321,7 +25538,8 @@ const AddressCreateModal = _ref => {
   const {
     switchView,
     switchToPaymentView,
-    resetView
+    resetView,
+    addressView
   } = usePelcro();
   const onSuccess = newAddressId => {
     var _otherProps$onSuccess;
@@ -25344,7 +25562,7 @@ const AddressCreateModal = _ref => {
     id: "pelcro-address-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(AddressCreateView, Object.assign({}, otherProps, {
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, addressView === "billing" ? /*#__PURE__*/React__default.createElement(AddressCreateBillingView, null) : /*#__PURE__*/React__default.createElement(AddressCreateView, Object.assign({}, otherProps, {
     onSuccess: onSuccess,
     onGiftRedemptionSuccess: onGiftRedemptionSuccess,
     onMembershipAdressUpdateSuccess: onMembershipAdressUpdateSuccess

package/package.json

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