@pelcro/react-pelcro-js 3.26.0-beta.70 → 3.26.0-beta.71

package/dist/index.cjs.js

@@ -3343,6 +3343,7 @@ var common_en = {
 var update$3 = {
 	title: "Update your payment information",
 	subtitle: "Enter the fields below to update your credit card information",
+	selectSubtitle: "Select a payment method to update",
 	required: "Required",
 	success: "Your payment information has been updated",
 	secure: "You're safe - PCI compliant 128 SSL by"
@@ -4310,6 +4311,7 @@ var common_fr = {
 var update$2 = {
 	title: "Mettre à jour vos informations de paiement",
 	subtitle: "Entrez les champs ci-dessous pour mettre à jour les informations de votre carte de crédit",
+	selectSubtitle: "Sélectionnez un mode de paiement à mettre à jour",
 	required: "Champs obligatoires",
 	success: "Vos informations de paiement ont été mises à jour",
 	secure: "Vous êtes en sécurité - 128 SSL conforme à la norme PCI"
@@ -5260,6 +5262,7 @@ var common_ko = {
 var update$1 = {
 	title: "결제 정보 업데이트",
 	subtitle: "신용카드 정보를 업데이트하려면 아래 항목을 입력하십시오.",
+	selectSubtitle: "업데이트할 결제 수단을 선택하세요",
 	required: "필수 항목",
 	success: "귀하의 결제 정보가 업데이트되었습니다.",
 	secure: "PCI 준수 128비트 SSL 인증서로 보호됩니다. 제공: "
@@ -6315,6 +6318,7 @@ var common_es = {
 var update = {
 	title: "Actualiza tu información de pago",
 	subtitle: "Rellena los campos a continuación para actualizar la información de tu tarjeta de crédito",
+	selectSubtitle: "Selecciona un método de pago para actualizar",
 	required: "Obligatorio",
 	success: "Tu información de pago se ha actualizado",
 	secure: "Estás seguro - PCI compliance 128 SSL por"
@@ -27678,21 +27682,83 @@ const PaymentMethodUpdateContainer = props => {
  */
 function PaymentMethodUpdateView(props) {
   const [t] = useTranslation("paymentMethod");
+  const {
+    paymentMethodToEdit,
+    setPaymentMethodToEdit
+  } = usePelcro();
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [sources, setSources] = React.useState([]);
+  React.useEffect(() => {
+    setIsLoading(true);
+    window.Pelcro.paymentMethods.list({
+      auth_token: window.Pelcro.user.read().auth_token
+    }, (err, res) => {
+      if (err) {
+        setIsLoading(false);
+        return console.error(err);
+      }
+      if (res) {
+        setIsLoading(false);
+        setSources(res.data);
+      }
+    });
+  }, []);
+  const handleEditPaymentMethod = source => {
+    setPaymentMethodToEdit(source.id);
+  };
+  const renderSources = () => {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-flex plc-flex-col plc-items-center"
+    }, sources.map((source, index) => {
+      var _source$properties, _source$properties2;
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        key: source.id,
+        className: "plc-flex plc-flex-grow plc-items-center plc-justify-between plc-max-w-xs plc-p-4 plc-mb-2 plc-text-white plc-bg-gray-800 plc-rounded-md plc-h-14 plc-w-full plc-cursor-pointer",
+        onClick: () => handleEditPaymentMethod(source)
+      }, /*#__PURE__*/React__default['default'].createElement("span", null, getPaymentCardIcon$1(source === null || source === void 0 ? void 0 : (_source$properties = source.properties) === null || _source$properties === void 0 ? void 0 : _source$properties.brand)), /*#__PURE__*/React__default['default'].createElement("span", {
+        className: "plc-ml-1 plc-text-lg plc-tracking-widest plc-flex-grow plc-text-center"
+      }, "\u2022\u2022\u2022\u2022 ", source === null || source === void 0 ? void 0 : (_source$properties2 = source.properties) === null || _source$properties2 === void 0 ? void 0 : _source$properties2.last4), /*#__PURE__*/React__default['default'].createElement(Button, {
+        id: "pelcro-button-update-source-" + index,
+        variant: "icon",
+        className: "plc-text-white",
+        icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
+        "data-key": source.id,
+        onClick: () => handleEditPaymentMethod(source)
+      }));
+    }));
+  };
+  const renderContent = () => {
+    if (isLoading) {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-w-full plc-h-20 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+      });
+    }
+    if ((sources === null || sources === void 0 ? void 0 : sources.length) > 0 && !paymentMethodToEdit) {
+      return renderSources();
+    }
+    return /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, Object.assign({
+      type: "updatePaymentSource",
+      showCoupon: false,
+      showExternalPaymentMethods: false,
+      showApplePayButton: false,
+      onDisplay: props.onDisplay,
+      onFailure: props.onFailure,
+      onSuccess: props.onSuccess
+    }, props));
+  };
+  const renderSubtitle = () => {
+    if ((sources === null || sources === void 0 ? void 0 : sources.length) > 0 && !paymentMethodToEdit) {
+      return t("update.selectSubtitle");
+    }
+    return t("update.subtitle");
+  };
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-payment-method-update-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-mb-2 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
   }, /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-2xl plc-font-semibold "
-  }, t("update.title")), /*#__PURE__*/React__default['default'].createElement("p", null, t("update.subtitle"))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, Object.assign({
-    type: "updatePaymentSource",
-    showCoupon: false,
-    showExternalPaymentMethods: false,
-    showApplePayButton: false,
-    onDisplay: props.onDisplay,
-    onFailure: props.onFailure,
-    onSuccess: props.onSuccess
-  }, props)));
+  }, t("update.title")), renderSubtitle()), renderContent());
 }
 
 const PaymentMethodUpdateModal = props => {

package/dist/index.esm.js

@@ -3313,6 +3313,7 @@ var common_en = {
 var update$3 = {
 	title: "Update your payment information",
 	subtitle: "Enter the fields below to update your credit card information",
+	selectSubtitle: "Select a payment method to update",
 	required: "Required",
 	success: "Your payment information has been updated",
 	secure: "You're safe - PCI compliant 128 SSL by"
@@ -4280,6 +4281,7 @@ var common_fr = {
 var update$2 = {
 	title: "Mettre à jour vos informations de paiement",
 	subtitle: "Entrez les champs ci-dessous pour mettre à jour les informations de votre carte de crédit",
+	selectSubtitle: "Sélectionnez un mode de paiement à mettre à jour",
 	required: "Champs obligatoires",
 	success: "Vos informations de paiement ont été mises à jour",
 	secure: "Vous êtes en sécurité - 128 SSL conforme à la norme PCI"
@@ -5230,6 +5232,7 @@ var common_ko = {
 var update$1 = {
 	title: "결제 정보 업데이트",
 	subtitle: "신용카드 정보를 업데이트하려면 아래 항목을 입력하십시오.",
+	selectSubtitle: "업데이트할 결제 수단을 선택하세요",
 	required: "필수 항목",
 	success: "귀하의 결제 정보가 업데이트되었습니다.",
 	secure: "PCI 준수 128비트 SSL 인증서로 보호됩니다. 제공: "
@@ -6285,6 +6288,7 @@ var common_es = {
 var update = {
 	title: "Actualiza tu información de pago",
 	subtitle: "Rellena los campos a continuación para actualizar la información de tu tarjeta de crédito",
+	selectSubtitle: "Selecciona un método de pago para actualizar",
 	required: "Obligatorio",
 	success: "Tu información de pago se ha actualizado",
 	secure: "Estás seguro - PCI compliance 128 SSL por"
@@ -27648,21 +27652,83 @@ const PaymentMethodUpdateContainer = props => {
  */
 function PaymentMethodUpdateView(props) {
   const [t] = useTranslation("paymentMethod");
+  const {
+    paymentMethodToEdit,
+    setPaymentMethodToEdit
+  } = usePelcro();
+  const [isLoading, setIsLoading] = useState(false);
+  const [sources, setSources] = useState([]);
+  useEffect(() => {
+    setIsLoading(true);
+    window.Pelcro.paymentMethods.list({
+      auth_token: window.Pelcro.user.read().auth_token
+    }, (err, res) => {
+      if (err) {
+        setIsLoading(false);
+        return console.error(err);
+      }
+      if (res) {
+        setIsLoading(false);
+        setSources(res.data);
+      }
+    });
+  }, []);
+  const handleEditPaymentMethod = source => {
+    setPaymentMethodToEdit(source.id);
+  };
+  const renderSources = () => {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-flex plc-flex-col plc-items-center"
+    }, sources.map((source, index) => {
+      var _source$properties, _source$properties2;
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: source.id,
+        className: "plc-flex plc-flex-grow plc-items-center plc-justify-between plc-max-w-xs plc-p-4 plc-mb-2 plc-text-white plc-bg-gray-800 plc-rounded-md plc-h-14 plc-w-full plc-cursor-pointer",
+        onClick: () => handleEditPaymentMethod(source)
+      }, /*#__PURE__*/React__default.createElement("span", null, getPaymentCardIcon$1(source === null || source === void 0 ? void 0 : (_source$properties = source.properties) === null || _source$properties === void 0 ? void 0 : _source$properties.brand)), /*#__PURE__*/React__default.createElement("span", {
+        className: "plc-ml-1 plc-text-lg plc-tracking-widest plc-flex-grow plc-text-center"
+      }, "\u2022\u2022\u2022\u2022 ", source === null || source === void 0 ? void 0 : (_source$properties2 = source.properties) === null || _source$properties2 === void 0 ? void 0 : _source$properties2.last4), /*#__PURE__*/React__default.createElement(Button, {
+        id: "pelcro-button-update-source-" + index,
+        variant: "icon",
+        className: "plc-text-white",
+        icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
+        "data-key": source.id,
+        onClick: () => handleEditPaymentMethod(source)
+      }));
+    }));
+  };
+  const renderContent = () => {
+    if (isLoading) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-w-full plc-h-20 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+      });
+    }
+    if ((sources === null || sources === void 0 ? void 0 : sources.length) > 0 && !paymentMethodToEdit) {
+      return renderSources();
+    }
+    return /*#__PURE__*/React__default.createElement(PaymentMethodView, Object.assign({
+      type: "updatePaymentSource",
+      showCoupon: false,
+      showExternalPaymentMethods: false,
+      showApplePayButton: false,
+      onDisplay: props.onDisplay,
+      onFailure: props.onFailure,
+      onSuccess: props.onSuccess
+    }, props));
+  };
+  const renderSubtitle = () => {
+    if ((sources === null || sources === void 0 ? void 0 : sources.length) > 0 && !paymentMethodToEdit) {
+      return t("update.selectSubtitle");
+    }
+    return t("update.subtitle");
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-payment-method-update-view"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-mb-2 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
   }, /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold "
-  }, t("update.title")), /*#__PURE__*/React__default.createElement("p", null, t("update.subtitle"))), /*#__PURE__*/React__default.createElement(PaymentMethodView, Object.assign({
-    type: "updatePaymentSource",
-    showCoupon: false,
-    showExternalPaymentMethods: false,
-    showApplePayButton: false,
-    onDisplay: props.onDisplay,
-    onFailure: props.onFailure,
-    onSuccess: props.onSuccess
-  }, props)));
+  }, t("update.title")), renderSubtitle()), renderContent());
 }
 
 const PaymentMethodUpdateModal = props => {

package/package.json

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