@pelcro/react-pelcro-js 4.0.0-alpha.70 → 4.0.0-alpha.71

package/dist/index.cjs.js

@@ -3248,7 +3248,9 @@ var validation$3 = {
 	enterEmails: "Email addresses are required.",
 	enterUsername: "User name is required.",
 	enterPassword: "Password is required.",
-	confirmPassword: "Confirm password is required."
+	confirmPassword: "Confirm password is required.",
+	enterFirstName: "First name is required.",
+	enterLastName: "Last name is required."
 };
 var buttons$j = {
 	account: "My account",
@@ -3476,7 +3478,9 @@ var labels$11 = {
 	lastName: "Last name",
 	phone: "Phone",
 	freeItems: "Free Items",
-	isDefault: "Set as default"
+	isDefault: "Set as default",
+	shippingAddress: "Shipping Address",
+	contactDetails: "Contact Details"
 };
 var checkoutForm_en = {
 	messages: messages$14,
@@ -3857,6 +3861,7 @@ var labels$W = {
 	},
 	checkout: {
 		title: "Payment Information",
+		shippingAddress: "Shipping Address",
 		billingAddress: "Billing Address",
 		NoBillingAddress: "No Billing Address Found",
 		changeBillingAddress: "Change",
@@ -4165,7 +4170,9 @@ var validation$2 = {
 	enterEmails: "Les adresses e-mail sont obligatoires.",
 	enterUsername: "Nom d'utilisateur est nécessaire.",
 	enterPassword: "Mot de passe requis.",
-	confirmPassword: "Confirmer le mot de passe requis."
+	confirmPassword: "Confirmer le mot de passe requis.",
+	enterFirstName: "Le prénom est requis.",
+	enterLastName: "Le nom de famille est requis."
 };
 var buttons$e = {
 	account: "Accès abonné(e)s",
@@ -13575,6 +13582,8 @@ const initialState$n = {
   password: "",
   emailError: null,
   passwordError: null,
+  firstNameError: null,
+  lastNameError: null,
   confirmPassword: "",
   confirmPasswordError: null,
   confirmPasswordUsed: false,
@@ -13733,12 +13742,14 @@ const RegisterContainer = ({
 
       case SET_FIRST_NAME:
         return lib_7({ ...state,
-          firstName: action.payload
+          firstName: action.payload,
+          firstNameError: null
         });
 
       case SET_LAST_NAME:
         return lib_7({ ...state,
-          lastName: action.payload
+          lastName: action.payload,
+          lastNameError: null
         });
 
       case SET_TEXT_FIELD:
@@ -13764,6 +13775,18 @@ const RegisterContainer = ({
           password: ""
         });
 
+      case SET_FIRST_NAME_ERROR:
+        return lib_7({ ...state,
+          firstNameError: action.payload,
+          firstName: ""
+        });
+
+      case SET_LAST_NAME_ERROR:
+        return lib_7({ ...state,
+          lastNameError: action.payload,
+          lastName: ""
+        });
+
       case SET_CONFIRM_PASSWORD_ERROR:
         return lib_7({ ...state,
           confirmPasswordError: action.payload,
@@ -14583,117 +14606,77 @@ const RegisterButton = ({
   }, otherProps), name !== null && name !== void 0 ? name : t("messages.createAccount"));
 };
 
-const Loader = props => /*#__PURE__*/React__default['default'].createElement("div", {
-  className: `pelcro-loader-wrapper ${props.className}`
-}, /*#__PURE__*/React__default['default'].createElement("svg", {
-  width: props.width,
-  height: props.height,
-  viewBox: "0 0 120 30",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor",
-  "aria-label": props.label
-}, /*#__PURE__*/React__default['default'].createElement("circle", {
-  cx: "15",
-  cy: "15",
-  r: props.radius + 6
-}, /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "r",
-  from: "15",
-  to: "15",
-  begin: "0s",
-  dur: "0.8s",
-  values: "15;9;15",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}), /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "fillOpacity",
-  from: "1",
-  to: "1",
-  begin: "0s",
-  dur: "0.8s",
-  values: "1;.5;1",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-})), /*#__PURE__*/React__default['default'].createElement("circle", {
-  cx: "60",
-  cy: "15",
-  r: props.radius,
-  attributeName: "fillOpacity",
-  from: "1",
-  to: "0.3"
-}, /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "r",
-  from: "9",
-  to: "9",
-  begin: "0s",
-  dur: "0.8s",
-  values: "9;15;9",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}), /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "fillOpacity",
-  from: "0.5",
-  to: "0.5",
-  begin: "0s",
-  dur: "0.8s",
-  values: ".5;1;.5",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-})), /*#__PURE__*/React__default['default'].createElement("circle", {
-  cx: "105",
-  cy: "15",
-  r: props.radius + 6
-}, /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "r",
-  from: "15",
-  to: "15",
-  begin: "0s",
-  dur: "0.8s",
-  values: "15;9;15",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}), /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "fillOpacity",
-  from: "1",
-  to: "1",
-  begin: "0s",
-  dur: "0.8s",
-  values: "1;.5;1",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}))));
-Loader.defaultProps = {
-  height: 50,
-  width: 35,
-  color: "#32aea1",
-  label: "Loading data..",
-  radius: 9
-};
-
 function FirstName({
+  initWithUserFirstName = true,
   store,
   ...otherProps
 }) {
+  const {
+    t
+  } = useTranslation("common");
   const {
     dispatch,
-    state
+    state: {
+      firstName: stateFirstName,
+      firstNameError
+    }
   } = React.useContext(store);
+  const [firstName, setFirstName] = React.useState(stateFirstName);
+  const [finishedTyping, setFinishedTyping] = React.useState(false);
+  const handleInputChange = React.useCallback(value => {
+    setFirstName(value);
 
-  const handleInputChange = value => {
+    if (finishedTyping) {
+      if (firstName !== null && firstName !== void 0 && firstName.length) {
+        dispatch({
+          type: SET_FIRST_NAME,
+          payload: firstName
+        });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_FIRST_NAME_ERROR,
+            payload: t("validation.enterFirstName")
+          });
+        } else {
+          dispatch({
+            type: SET_FIRST_NAME,
+            payload: firstName
+          });
+        }
+      }
+    }
+  }, [dispatch, firstName, finishedTyping]);
+  React.useEffect(() => {
+    handleInputChange(firstName);
+  }, [finishedTyping, firstName, handleInputChange]); // Initialize first name field with user's first name
+
+  const loadFirstNameIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().first_name);
     dispatch({
       type: SET_FIRST_NAME,
-      payload: value
+      payload: window.Pelcro.user.read().first_name
     });
   };
 
-  if (state.loading) {
-    return /*#__PURE__*/React__default['default'].createElement(Loader, null);
-  }
-
+  React.useEffect(() => {
+    if (initWithUserFirstName) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadFirstNameIntoField();
+      });
+      loadFirstNameIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
     type: "text",
-    value: state.firstName,
-    onChange: e => handleInputChange(e.target.value)
+    error: firstNameError,
+    value: firstName,
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
   }, otherProps));
 }
 
@@ -14702,29 +14685,76 @@ const RegisterFirstName = props => /*#__PURE__*/React__default['default'].create
 }, props));
 
 function LastName({
+  initWithUserLastName = true,
   store,
   ...otherProps
 }) {
+  const {
+    t
+  } = useTranslation("common");
   const {
     dispatch,
-    state
+    state: {
+      lastName: stateLastName,
+      lastNameError
+    }
   } = React.useContext(store);
+  const [lastName, setLastName] = React.useState(stateLastName);
+  const [finishedTyping, setFinishedTyping] = React.useState(false);
+  const handleInputChange = React.useCallback(value => {
+    setLastName(value);
 
-  const handleInputChange = value => {
+    if (finishedTyping) {
+      if (lastName !== null && lastName !== void 0 && lastName.length) {
+        dispatch({
+          type: SET_LAST_NAME,
+          payload: lastName
+        });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_LAST_NAME_ERROR,
+            payload: t("validation.enterLastName")
+          });
+        } else {
+          dispatch({
+            type: SET_LAST_NAME,
+            payload: lastName
+          });
+        }
+      }
+    }
+  }, [dispatch, lastName, finishedTyping]);
+  React.useEffect(() => {
+    handleInputChange(lastName);
+  }, [finishedTyping, lastName, handleInputChange]); // Initialize last name field with user's last name
+
+  const loadLastNameIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().last_name);
     dispatch({
       type: SET_LAST_NAME,
-      payload: value
+      payload: window.Pelcro.user.read().last_name
     });
   };
 
-  if (state.loading) {
-    return /*#__PURE__*/React__default['default'].createElement(Loader, null);
-  }
-
+  React.useEffect(() => {
+    if (initWithUserLastName) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadLastNameIntoField();
+      });
+      loadLastNameIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
     type: "text",
-    value: state.lastName,
-    onChange: e => handleInputChange(e.target.value)
+    error: lastNameError,
+    value: lastName,
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
   }, otherProps));
 }
 
@@ -14817,6 +14847,93 @@ function hasSecurityTokenEnabled() {
   return Boolean((_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r4 = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.security_key);
 }
 
+const Loader = props => /*#__PURE__*/React__default['default'].createElement("div", {
+  className: `pelcro-loader-wrapper ${props.className}`
+}, /*#__PURE__*/React__default['default'].createElement("svg", {
+  width: props.width,
+  height: props.height,
+  viewBox: "0 0 120 30",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  "aria-label": props.label
+}, /*#__PURE__*/React__default['default'].createElement("circle", {
+  cx: "15",
+  cy: "15",
+  r: props.radius + 6
+}, /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "r",
+  from: "15",
+  to: "15",
+  begin: "0s",
+  dur: "0.8s",
+  values: "15;9;15",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "fillOpacity",
+  from: "1",
+  to: "1",
+  begin: "0s",
+  dur: "0.8s",
+  values: "1;.5;1",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+})), /*#__PURE__*/React__default['default'].createElement("circle", {
+  cx: "60",
+  cy: "15",
+  r: props.radius,
+  attributeName: "fillOpacity",
+  from: "1",
+  to: "0.3"
+}, /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "r",
+  from: "9",
+  to: "9",
+  begin: "0s",
+  dur: "0.8s",
+  values: "9;15;9",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "fillOpacity",
+  from: "0.5",
+  to: "0.5",
+  begin: "0s",
+  dur: "0.8s",
+  values: ".5;1;.5",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+})), /*#__PURE__*/React__default['default'].createElement("circle", {
+  cx: "105",
+  cy: "15",
+  r: props.radius + 6
+}, /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "r",
+  from: "15",
+  to: "15",
+  begin: "0s",
+  dur: "0.8s",
+  values: "15;9;15",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "fillOpacity",
+  from: "1",
+  to: "1",
+  begin: "0s",
+  dur: "0.8s",
+  values: "1;.5;1",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}))));
+Loader.defaultProps = {
+  height: 50,
+  width: 35,
+  color: "#32aea1",
+  label: "Loading data..",
+  radius: 9
+};
+
 function TextInput({
   store,
   fieldName,
@@ -26670,20 +26787,18 @@ const SelectedAddress = ({
   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-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", {
+  }, t("labels.checkout.billingAddress")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__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"
+    className: "pelcro-address-name plc-text-sm plc-mt-2"
+  }, address.first_name, " ", address.last_name), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-line1 plc-text-sm"
   }, 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("p", {
-    className: "pelcro-address-phone plc-text-sm"
-  }, address === null || address === void 0 ? void 0 : address.phone)), /*#__PURE__*/React__default['default'].createElement(Button, {
+  }, address.city, ", ", address.state, " ", address.postal_code, ",", " ", address.country, ", ", address === null || address === void 0 ? void 0 : address.phone))), /*#__PURE__*/React__default['default'].createElement(Button, {
     onClick: onAddNewAddress,
     disabled: isLoading,
     variant: "ghost",
@@ -28305,33 +28420,34 @@ const MeterModal = props => {
 };
 MeterModal.viewId = "meter";
 
-const SubscriptionCreateView = ({
-  onSuccess = () => {},
-  onFailure = () => {}
-}) => {
-  var _window$Pelcro, _window$Pelcro$uiSett;
+const SubscriptionCreateSummary = () => {
+  var _window$Pelcro$user$r, _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r2, _window2, _window2$Pelcro, _window2$Pelcro$user, _addresses$find, _addresses$find2;
 
   const {
     t
   } = useTranslation("checkoutForm");
   const {
     product,
-    plan
+    plan,
+    selectedAddressId
   } = usePelcro();
-  const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
-  const showSubscriptionButton = skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0;
+  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 user = (_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.read()) !== null && _window$Pelcro$user$r2 !== void 0 ? _window$Pelcro$user$r2 : [];
+  const address = selectedAddressId ? (_addresses$find = addresses === null || addresses === void 0 ? void 0 : addresses.find(address => address.id == selectedAddressId)) !== null && _addresses$find !== void 0 ? _addresses$find : null : (_addresses$find2 = addresses === null || addresses === void 0 ? void 0 : addresses.find(address => address.type == "shipping" && address.is_default)) !== null && _addresses$find2 !== void 0 ? _addresses$find2 : null;
 
   const getPricingText = plan => {
     var _plan$quantity;
 
     const autoRenewed = plan.auto_renew;
     const {
-      interval_translated,
-      interval_count
+      interval_translated: intervalTranslated,
+      interval_count: intervalCount
     } = plan;
     const intervalText = t("labels.interval", {
-      interval: interval_translated,
-      count: interval_count
+      interval: intervalTranslated,
+      count: intervalCount
     });
     const priceFormatted = getFormattedPriceByLocal((plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1), plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
     return /*#__PURE__*/React__default['default'].createElement("p", {
@@ -28345,9 +28461,7 @@ const SubscriptionCreateView = ({
     }, autoRenewed ? "/" : t("labels.for"), " ", intervalText));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    id: "pelcro-subscription-create-view"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-flex-row plc-items-center plc-mb-6 plc-text-left plc-text-gray-900 pelcro-title-wrapper"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-w-full plc-font-semibold plc-text-left plc-text-gray-900"
@@ -28359,7 +28473,49 @@ const SubscriptionCreateView = ({
     src: product.image,
     alt: "",
     className: "plc-rounded-md"
-  }))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, {
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-flex-row plc-justify-between"
+  }, 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.shippingAddress")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-company"
+  }, address === null || address === void 0 ? void 0 : address.company), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-name plc-text-sm plc-mt-1"
+  }, address === null || address === void 0 ? void 0 : address.first_name, " ", address === null || address === void 0 ? void 0 : address.last_name), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-line1 plc-text-sm"
+  }, address === null || address === void 0 ? void 0 : address.line1), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-country plc-text-sm"
+  }, address === null || address === void 0 ? void 0 : address.city, ", ", address === null || address === void 0 ? void 0 : address.state, " ", address === null || address === void 0 ? void 0 : address.postal_code, ", ", address === null || address === void 0 ? void 0 : address.country))), /*#__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.contactDetails")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-name plc-text-sm plc-mt-1"
+  }, user.email), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-line1 plc-text-sm"
+  }, address === null || address === void 0 ? void 0 : address.phone))));
+};
+
+const SubscriptionCreateView = ({
+  onSuccess = () => {},
+  onFailure = () => {}
+}) => {
+  var _window$Pelcro, _window$Pelcro$uiSett;
+
+  const {
+    plan
+  } = usePelcro();
+  const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
+  const showSubscriptionButton = skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "pelcro-subscription-create-view"
+  }, /*#__PURE__*/React__default['default'].createElement(SubscriptionCreateSummary, null), /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, {
     type: "createPayment",
     showCoupon: true,
     showExternalPaymentMethods: true,
@@ -28912,6 +29068,7 @@ const initialState$h = {
   email: (_window$Pelcro$user$r$1 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r$1 === void 0 ? void 0 : _window$Pelcro$user$r$1.email,
   emailError: null,
   firstName: (_window$Pelcro$user$r2$1 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2$1 === void 0 ? void 0 : _window$Pelcro$user$r2$1.first_name,
+  firstNameError: null,
   lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
   lastNameError: null,
   username: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.username,
@@ -29043,17 +29200,26 @@ const UserUpdateContainer = ({
 
       case SET_EMAIL:
         return lib_7({ ...state,
-          email: action.payload
+          email: action.payload,
+          emailError: null
         });
 
       case SET_EMAIL_ERROR:
         return lib_7({ ...state,
-          emailError: action.payload
+          emailError: action.payload,
+          email: ""
         });
 
       case SET_FIRST_NAME:
         return lib_7({ ...state,
-          firstName: action.payload
+          firstName: action.payload,
+          firstNameError: null
+        });
+
+      case SET_FIRST_NAME_ERROR:
+        return lib_7({ ...state,
+          firstNameError: action.payload,
+          firstName: ""
         });
 
       case SET_DISPLAY_NAME:
@@ -29063,7 +29229,14 @@ const UserUpdateContainer = ({
 
       case SET_LAST_NAME:
         return lib_7({ ...state,
-          lastName: action.payload
+          lastName: action.payload,
+          lastNameError: null
+        });
+
+      case SET_LAST_NAME_ERROR:
+        return lib_7({ ...state,
+          lastNameError: action.payload,
+          lastName: ""
         });
 
       case SET_USERNAME:
@@ -29429,8 +29602,6 @@ const nowDate$1 = new Date();
 const nowDateISO$1 = nowDate$1.toISOString().substr(0, 10);
 const hundredYearsFromNowDateISO = new Date(new Date().setFullYear(nowDate$1.getFullYear() - 100)).toISOString().substr(0, 10);
 const UserUpdateDateOfBirth = props => {
-  var _state$dateOfBirth;
-
   //   const { t } = useTranslation("userEdit");
   const {
     dispatch,
@@ -29451,7 +29622,7 @@ const UserUpdateDateOfBirth = props => {
   return /*#__PURE__*/React__default['default'].createElement(DatePicker, Object.assign({
     min: hundredYearsFromNowDateISO,
     max: nowDateISO$1,
-    value: (_state$dateOfBirth = state.dateOfBirth) !== null && _state$dateOfBirth !== void 0 ? _state$dateOfBirth : nowDateISO$1,
+    value: state.dateOfBirth,
     onChange: e => handleInputChange(e.target.value) //   tooltipText={t("labels.dateOfBirth")}
 
   }, props));
@@ -31093,13 +31264,6 @@ function AddressUpdatePhone(props) {
     }
   } = React.useContext(store$f);
 
-  const handleBlur = () => {
-    return dispatch({
-      type: VALIDATE_FIELD,
-      payload: "phone"
-    });
-  };
-
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -31124,7 +31288,6 @@ function AddressUpdatePhone(props) {
     value: phone,
     error: phoneError,
     onChange: e => handleInputChange(e.target.value),
-    onBlur: handleBlur,
     onFocus: handleFocus
   }, props));
 }
@@ -31187,8 +31350,7 @@ const AddressUpdateView = props => {
   }, /*#__PURE__*/React__default['default'].createElement(AddressUpdatePhone, {
     id: "pelcro-input-phone",
     errorId: "pelcro-input-phone-error",
-    label: t("labels.phone"),
-    required: true
+    label: t("labels.phone")
   })), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-space-x-3 plc-items-start plc-mb-3"
   }, /*#__PURE__*/React__default['default'].createElement(AddressUpdateSetDefault, {

package/dist/index.esm.js

@@ -3218,7 +3218,9 @@ var validation$3 = {
 	enterEmails: "Email addresses are required.",
 	enterUsername: "User name is required.",
 	enterPassword: "Password is required.",
-	confirmPassword: "Confirm password is required."
+	confirmPassword: "Confirm password is required.",
+	enterFirstName: "First name is required.",
+	enterLastName: "Last name is required."
 };
 var buttons$j = {
 	account: "My account",
@@ -3446,7 +3448,9 @@ var labels$11 = {
 	lastName: "Last name",
 	phone: "Phone",
 	freeItems: "Free Items",
-	isDefault: "Set as default"
+	isDefault: "Set as default",
+	shippingAddress: "Shipping Address",
+	contactDetails: "Contact Details"
 };
 var checkoutForm_en = {
 	messages: messages$14,
@@ -3827,6 +3831,7 @@ var labels$W = {
 	},
 	checkout: {
 		title: "Payment Information",
+		shippingAddress: "Shipping Address",
 		billingAddress: "Billing Address",
 		NoBillingAddress: "No Billing Address Found",
 		changeBillingAddress: "Change",
@@ -4135,7 +4140,9 @@ var validation$2 = {
 	enterEmails: "Les adresses e-mail sont obligatoires.",
 	enterUsername: "Nom d'utilisateur est nécessaire.",
 	enterPassword: "Mot de passe requis.",
-	confirmPassword: "Confirmer le mot de passe requis."
+	confirmPassword: "Confirmer le mot de passe requis.",
+	enterFirstName: "Le prénom est requis.",
+	enterLastName: "Le nom de famille est requis."
 };
 var buttons$e = {
 	account: "Accès abonné(e)s",
@@ -13545,6 +13552,8 @@ const initialState$n = {
   password: "",
   emailError: null,
   passwordError: null,
+  firstNameError: null,
+  lastNameError: null,
   confirmPassword: "",
   confirmPasswordError: null,
   confirmPasswordUsed: false,
@@ -13703,12 +13712,14 @@ const RegisterContainer = ({
 
       case SET_FIRST_NAME:
         return lib_7({ ...state,
-          firstName: action.payload
+          firstName: action.payload,
+          firstNameError: null
         });
 
       case SET_LAST_NAME:
         return lib_7({ ...state,
-          lastName: action.payload
+          lastName: action.payload,
+          lastNameError: null
         });
 
       case SET_TEXT_FIELD:
@@ -13734,6 +13745,18 @@ const RegisterContainer = ({
           password: ""
         });
 
+      case SET_FIRST_NAME_ERROR:
+        return lib_7({ ...state,
+          firstNameError: action.payload,
+          firstName: ""
+        });
+
+      case SET_LAST_NAME_ERROR:
+        return lib_7({ ...state,
+          lastNameError: action.payload,
+          lastName: ""
+        });
+
       case SET_CONFIRM_PASSWORD_ERROR:
         return lib_7({ ...state,
           confirmPasswordError: action.payload,
@@ -14553,117 +14576,77 @@ const RegisterButton = ({
   }, otherProps), name !== null && name !== void 0 ? name : t("messages.createAccount"));
 };
 
-const Loader = props => /*#__PURE__*/React__default.createElement("div", {
-  className: `pelcro-loader-wrapper ${props.className}`
-}, /*#__PURE__*/React__default.createElement("svg", {
-  width: props.width,
-  height: props.height,
-  viewBox: "0 0 120 30",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor",
-  "aria-label": props.label
-}, /*#__PURE__*/React__default.createElement("circle", {
-  cx: "15",
-  cy: "15",
-  r: props.radius + 6
-}, /*#__PURE__*/React__default.createElement("animate", {
-  attributeName: "r",
-  from: "15",
-  to: "15",
-  begin: "0s",
-  dur: "0.8s",
-  values: "15;9;15",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}), /*#__PURE__*/React__default.createElement("animate", {
-  attributeName: "fillOpacity",
-  from: "1",
-  to: "1",
-  begin: "0s",
-  dur: "0.8s",
-  values: "1;.5;1",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-})), /*#__PURE__*/React__default.createElement("circle", {
-  cx: "60",
-  cy: "15",
-  r: props.radius,
-  attributeName: "fillOpacity",
-  from: "1",
-  to: "0.3"
-}, /*#__PURE__*/React__default.createElement("animate", {
-  attributeName: "r",
-  from: "9",
-  to: "9",
-  begin: "0s",
-  dur: "0.8s",
-  values: "9;15;9",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}), /*#__PURE__*/React__default.createElement("animate", {
-  attributeName: "fillOpacity",
-  from: "0.5",
-  to: "0.5",
-  begin: "0s",
-  dur: "0.8s",
-  values: ".5;1;.5",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-})), /*#__PURE__*/React__default.createElement("circle", {
-  cx: "105",
-  cy: "15",
-  r: props.radius + 6
-}, /*#__PURE__*/React__default.createElement("animate", {
-  attributeName: "r",
-  from: "15",
-  to: "15",
-  begin: "0s",
-  dur: "0.8s",
-  values: "15;9;15",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}), /*#__PURE__*/React__default.createElement("animate", {
-  attributeName: "fillOpacity",
-  from: "1",
-  to: "1",
-  begin: "0s",
-  dur: "0.8s",
-  values: "1;.5;1",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}))));
-Loader.defaultProps = {
-  height: 50,
-  width: 35,
-  color: "#32aea1",
-  label: "Loading data..",
-  radius: 9
-};
-
 function FirstName({
+  initWithUserFirstName = true,
   store,
   ...otherProps
 }) {
+  const {
+    t
+  } = useTranslation("common");
   const {
     dispatch,
-    state
+    state: {
+      firstName: stateFirstName,
+      firstNameError
+    }
   } = useContext(store);
+  const [firstName, setFirstName] = useState(stateFirstName);
+  const [finishedTyping, setFinishedTyping] = useState(false);
+  const handleInputChange = useCallback(value => {
+    setFirstName(value);
 
-  const handleInputChange = value => {
+    if (finishedTyping) {
+      if (firstName !== null && firstName !== void 0 && firstName.length) {
+        dispatch({
+          type: SET_FIRST_NAME,
+          payload: firstName
+        });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_FIRST_NAME_ERROR,
+            payload: t("validation.enterFirstName")
+          });
+        } else {
+          dispatch({
+            type: SET_FIRST_NAME,
+            payload: firstName
+          });
+        }
+      }
+    }
+  }, [dispatch, firstName, finishedTyping]);
+  useEffect(() => {
+    handleInputChange(firstName);
+  }, [finishedTyping, firstName, handleInputChange]); // Initialize first name field with user's first name
+
+  const loadFirstNameIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().first_name);
     dispatch({
       type: SET_FIRST_NAME,
-      payload: value
+      payload: window.Pelcro.user.read().first_name
     });
   };
 
-  if (state.loading) {
-    return /*#__PURE__*/React__default.createElement(Loader, null);
-  }
-
+  useEffect(() => {
+    if (initWithUserFirstName) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadFirstNameIntoField();
+      });
+      loadFirstNameIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({
     type: "text",
-    value: state.firstName,
-    onChange: e => handleInputChange(e.target.value)
+    error: firstNameError,
+    value: firstName,
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
   }, otherProps));
 }
 
@@ -14672,29 +14655,76 @@ const RegisterFirstName = props => /*#__PURE__*/React__default.createElement(Fir
 }, props));
 
 function LastName({
+  initWithUserLastName = true,
   store,
   ...otherProps
 }) {
+  const {
+    t
+  } = useTranslation("common");
   const {
     dispatch,
-    state
+    state: {
+      lastName: stateLastName,
+      lastNameError
+    }
   } = useContext(store);
+  const [lastName, setLastName] = useState(stateLastName);
+  const [finishedTyping, setFinishedTyping] = useState(false);
+  const handleInputChange = useCallback(value => {
+    setLastName(value);
 
-  const handleInputChange = value => {
+    if (finishedTyping) {
+      if (lastName !== null && lastName !== void 0 && lastName.length) {
+        dispatch({
+          type: SET_LAST_NAME,
+          payload: lastName
+        });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_LAST_NAME_ERROR,
+            payload: t("validation.enterLastName")
+          });
+        } else {
+          dispatch({
+            type: SET_LAST_NAME,
+            payload: lastName
+          });
+        }
+      }
+    }
+  }, [dispatch, lastName, finishedTyping]);
+  useEffect(() => {
+    handleInputChange(lastName);
+  }, [finishedTyping, lastName, handleInputChange]); // Initialize last name field with user's last name
+
+  const loadLastNameIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().last_name);
     dispatch({
       type: SET_LAST_NAME,
-      payload: value
+      payload: window.Pelcro.user.read().last_name
     });
   };
 
-  if (state.loading) {
-    return /*#__PURE__*/React__default.createElement(Loader, null);
-  }
-
+  useEffect(() => {
+    if (initWithUserLastName) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadLastNameIntoField();
+      });
+      loadLastNameIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({
     type: "text",
-    value: state.lastName,
-    onChange: e => handleInputChange(e.target.value)
+    error: lastNameError,
+    value: lastName,
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
   }, otherProps));
 }
 
@@ -14787,6 +14817,93 @@ function hasSecurityTokenEnabled() {
   return Boolean((_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r4 = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.security_key);
 }
 
+const Loader = props => /*#__PURE__*/React__default.createElement("div", {
+  className: `pelcro-loader-wrapper ${props.className}`
+}, /*#__PURE__*/React__default.createElement("svg", {
+  width: props.width,
+  height: props.height,
+  viewBox: "0 0 120 30",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  "aria-label": props.label
+}, /*#__PURE__*/React__default.createElement("circle", {
+  cx: "15",
+  cy: "15",
+  r: props.radius + 6
+}, /*#__PURE__*/React__default.createElement("animate", {
+  attributeName: "r",
+  from: "15",
+  to: "15",
+  begin: "0s",
+  dur: "0.8s",
+  values: "15;9;15",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/React__default.createElement("animate", {
+  attributeName: "fillOpacity",
+  from: "1",
+  to: "1",
+  begin: "0s",
+  dur: "0.8s",
+  values: "1;.5;1",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+})), /*#__PURE__*/React__default.createElement("circle", {
+  cx: "60",
+  cy: "15",
+  r: props.radius,
+  attributeName: "fillOpacity",
+  from: "1",
+  to: "0.3"
+}, /*#__PURE__*/React__default.createElement("animate", {
+  attributeName: "r",
+  from: "9",
+  to: "9",
+  begin: "0s",
+  dur: "0.8s",
+  values: "9;15;9",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/React__default.createElement("animate", {
+  attributeName: "fillOpacity",
+  from: "0.5",
+  to: "0.5",
+  begin: "0s",
+  dur: "0.8s",
+  values: ".5;1;.5",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+})), /*#__PURE__*/React__default.createElement("circle", {
+  cx: "105",
+  cy: "15",
+  r: props.radius + 6
+}, /*#__PURE__*/React__default.createElement("animate", {
+  attributeName: "r",
+  from: "15",
+  to: "15",
+  begin: "0s",
+  dur: "0.8s",
+  values: "15;9;15",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/React__default.createElement("animate", {
+  attributeName: "fillOpacity",
+  from: "1",
+  to: "1",
+  begin: "0s",
+  dur: "0.8s",
+  values: "1;.5;1",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}))));
+Loader.defaultProps = {
+  height: 50,
+  width: 35,
+  color: "#32aea1",
+  label: "Loading data..",
+  radius: 9
+};
+
 function TextInput({
   store,
   fieldName,
@@ -26640,20 +26757,18 @@ const SelectedAddress = ({
   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-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", {
+  }, t("labels.checkout.billingAddress")), /*#__PURE__*/React__default.createElement("div", null, /*#__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"
+    className: "pelcro-address-name plc-text-sm plc-mt-2"
+  }, address.first_name, " ", address.last_name), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-line1 plc-text-sm"
   }, 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("p", {
-    className: "pelcro-address-phone plc-text-sm"
-  }, address === null || address === void 0 ? void 0 : address.phone)), /*#__PURE__*/React__default.createElement(Button, {
+  }, address.city, ", ", address.state, " ", address.postal_code, ",", " ", address.country, ", ", address === null || address === void 0 ? void 0 : address.phone))), /*#__PURE__*/React__default.createElement(Button, {
     onClick: onAddNewAddress,
     disabled: isLoading,
     variant: "ghost",
@@ -28275,33 +28390,34 @@ const MeterModal = props => {
 };
 MeterModal.viewId = "meter";
 
-const SubscriptionCreateView = ({
-  onSuccess = () => {},
-  onFailure = () => {}
-}) => {
-  var _window$Pelcro, _window$Pelcro$uiSett;
+const SubscriptionCreateSummary = () => {
+  var _window$Pelcro$user$r, _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r2, _window2, _window2$Pelcro, _window2$Pelcro$user, _addresses$find, _addresses$find2;
 
   const {
     t
   } = useTranslation("checkoutForm");
   const {
     product,
-    plan
+    plan,
+    selectedAddressId
   } = usePelcro();
-  const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
-  const showSubscriptionButton = skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0;
+  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 user = (_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.read()) !== null && _window$Pelcro$user$r2 !== void 0 ? _window$Pelcro$user$r2 : [];
+  const address = selectedAddressId ? (_addresses$find = addresses === null || addresses === void 0 ? void 0 : addresses.find(address => address.id == selectedAddressId)) !== null && _addresses$find !== void 0 ? _addresses$find : null : (_addresses$find2 = addresses === null || addresses === void 0 ? void 0 : addresses.find(address => address.type == "shipping" && address.is_default)) !== null && _addresses$find2 !== void 0 ? _addresses$find2 : null;
 
   const getPricingText = plan => {
     var _plan$quantity;
 
     const autoRenewed = plan.auto_renew;
     const {
-      interval_translated,
-      interval_count
+      interval_translated: intervalTranslated,
+      interval_count: intervalCount
     } = plan;
     const intervalText = t("labels.interval", {
-      interval: interval_translated,
-      count: interval_count
+      interval: intervalTranslated,
+      count: intervalCount
     });
     const priceFormatted = getFormattedPriceByLocal((plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1), plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
     return /*#__PURE__*/React__default.createElement("p", {
@@ -28315,9 +28431,7 @@ const SubscriptionCreateView = ({
     }, autoRenewed ? "/" : t("labels.for"), " ", intervalText));
   };
 
-  return /*#__PURE__*/React__default.createElement("div", {
-    id: "pelcro-subscription-create-view"
-  }, /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-flex-row plc-items-center plc-mb-6 plc-text-left plc-text-gray-900 pelcro-title-wrapper"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-w-full plc-font-semibold plc-text-left plc-text-gray-900"
@@ -28329,7 +28443,49 @@ const SubscriptionCreateView = ({
     src: product.image,
     alt: "",
     className: "plc-rounded-md"
-  }))), /*#__PURE__*/React__default.createElement(PaymentMethodView, {
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-flex-row plc-justify-between"
+  }, 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.shippingAddress")), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-company"
+  }, address === null || address === void 0 ? void 0 : address.company), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-name plc-text-sm plc-mt-1"
+  }, address === null || address === void 0 ? void 0 : address.first_name, " ", address === null || address === void 0 ? void 0 : address.last_name), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-line1 plc-text-sm"
+  }, address === null || address === void 0 ? void 0 : address.line1), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-country plc-text-sm"
+  }, address === null || address === void 0 ? void 0 : address.city, ", ", address === null || address === void 0 ? void 0 : address.state, " ", address === null || address === void 0 ? void 0 : address.postal_code, ", ", address === null || address === void 0 ? void 0 : address.country))), /*#__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.contactDetails")), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-name plc-text-sm plc-mt-1"
+  }, user.email), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-line1 plc-text-sm"
+  }, address === null || address === void 0 ? void 0 : address.phone))));
+};
+
+const SubscriptionCreateView = ({
+  onSuccess = () => {},
+  onFailure = () => {}
+}) => {
+  var _window$Pelcro, _window$Pelcro$uiSett;
+
+  const {
+    plan
+  } = usePelcro();
+  const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
+  const showSubscriptionButton = skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0;
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "pelcro-subscription-create-view"
+  }, /*#__PURE__*/React__default.createElement(SubscriptionCreateSummary, null), /*#__PURE__*/React__default.createElement(PaymentMethodView, {
     type: "createPayment",
     showCoupon: true,
     showExternalPaymentMethods: true,
@@ -28882,6 +29038,7 @@ const initialState$h = {
   email: (_window$Pelcro$user$r$1 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r$1 === void 0 ? void 0 : _window$Pelcro$user$r$1.email,
   emailError: null,
   firstName: (_window$Pelcro$user$r2$1 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2$1 === void 0 ? void 0 : _window$Pelcro$user$r2$1.first_name,
+  firstNameError: null,
   lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
   lastNameError: null,
   username: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.username,
@@ -29013,17 +29170,26 @@ const UserUpdateContainer = ({
 
       case SET_EMAIL:
         return lib_7({ ...state,
-          email: action.payload
+          email: action.payload,
+          emailError: null
         });
 
       case SET_EMAIL_ERROR:
         return lib_7({ ...state,
-          emailError: action.payload
+          emailError: action.payload,
+          email: ""
         });
 
       case SET_FIRST_NAME:
         return lib_7({ ...state,
-          firstName: action.payload
+          firstName: action.payload,
+          firstNameError: null
+        });
+
+      case SET_FIRST_NAME_ERROR:
+        return lib_7({ ...state,
+          firstNameError: action.payload,
+          firstName: ""
         });
 
       case SET_DISPLAY_NAME:
@@ -29033,7 +29199,14 @@ const UserUpdateContainer = ({
 
       case SET_LAST_NAME:
         return lib_7({ ...state,
-          lastName: action.payload
+          lastName: action.payload,
+          lastNameError: null
+        });
+
+      case SET_LAST_NAME_ERROR:
+        return lib_7({ ...state,
+          lastNameError: action.payload,
+          lastName: ""
         });
 
       case SET_USERNAME:
@@ -29399,8 +29572,6 @@ const nowDate$1 = new Date();
 const nowDateISO$1 = nowDate$1.toISOString().substr(0, 10);
 const hundredYearsFromNowDateISO = new Date(new Date().setFullYear(nowDate$1.getFullYear() - 100)).toISOString().substr(0, 10);
 const UserUpdateDateOfBirth = props => {
-  var _state$dateOfBirth;
-
   //   const { t } = useTranslation("userEdit");
   const {
     dispatch,
@@ -29421,7 +29592,7 @@ const UserUpdateDateOfBirth = props => {
   return /*#__PURE__*/React__default.createElement(DatePicker, Object.assign({
     min: hundredYearsFromNowDateISO,
     max: nowDateISO$1,
-    value: (_state$dateOfBirth = state.dateOfBirth) !== null && _state$dateOfBirth !== void 0 ? _state$dateOfBirth : nowDateISO$1,
+    value: state.dateOfBirth,
     onChange: e => handleInputChange(e.target.value) //   tooltipText={t("labels.dateOfBirth")}
 
   }, props));
@@ -31063,13 +31234,6 @@ function AddressUpdatePhone(props) {
     }
   } = useContext(store$f);
 
-  const handleBlur = () => {
-    return dispatch({
-      type: VALIDATE_FIELD,
-      payload: "phone"
-    });
-  };
-
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -31094,7 +31258,6 @@ function AddressUpdatePhone(props) {
     value: phone,
     error: phoneError,
     onChange: e => handleInputChange(e.target.value),
-    onBlur: handleBlur,
     onFocus: handleFocus
   }, props));
 }
@@ -31157,8 +31320,7 @@ const AddressUpdateView = props => {
   }, /*#__PURE__*/React__default.createElement(AddressUpdatePhone, {
     id: "pelcro-input-phone",
     errorId: "pelcro-input-phone-error",
-    label: t("labels.phone"),
-    required: true
+    label: t("labels.phone")
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-space-x-3 plc-items-start plc-mb-3"
   }, /*#__PURE__*/React__default.createElement(AddressUpdateSetDefault, {

package/package.json

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