contentoh-components-library 21.3.71 → 21.3.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/molecules/StripeCardForm/index.js +4 -2
  2. package/dist/components/molecules/StripeCardForm/paymentForm.js +3 -1
  3. package/dist/components/molecules/StripeCardForm/styles.js +1 -1
  4. package/dist/components/molecules/StripeCardSelector/index.js +5 -3
  5. package/package.json +1 -1
  6. package/src/components/molecules/StripeCardForm/index.js +2 -1
  7. package/src/components/molecules/StripeCardForm/paymentForm.js +2 -1
  8. package/src/components/molecules/StripeCardForm/styles.js +1 -0
  9. package/src/components/molecules/StripeCardSelector/index.js +1 -0
package/dist/components/molecules/StripeCardForm/index.js CHANGED
@@ -31,7 +31,8 @@ var stripeApiKey = (0, _stripeJs.loadStripe)("".concat(process.env.REACT_APP_KEY
31
31
 
32
32
  var StripeCardForm = function StripeCardForm(_ref) {
33
33
  var setToken = _ref.setToken,
34
- setCard = _ref.setCard;
34
+ setCard = _ref.setCard,
35
+ setStripe = _ref.setStripe;
35
36
 
36
37
  var _useState = (0, _react.useState)(false),
37
38
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -72,7 +73,8 @@ var StripeCardForm = function StripeCardForm(_ref) {
72
73
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentForm.PaymentForm, {
73
74
  labelForm: "Pago con tarjeta",
74
75
  setToken: setToken,
75
- setCard: setCard
76
+ setCard: setCard,
77
+ setStripe: setStripe
76
78
  })
77
79
  })
78
80
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {});
package/dist/components/molecules/StripeCardForm/paymentForm.js CHANGED
@@ -27,7 +27,8 @@ var PaymentForm = function PaymentForm(_ref) {
27
27
  var _ref$labelForm = _ref.labelForm,
28
28
  labelForm = _ref$labelForm === void 0 ? "Pago con tarjeta" : _ref$labelForm,
29
29
  setToken = _ref.setToken,
30
- setCard = _ref.setCard;
30
+ setCard = _ref.setCard,
31
+ setStripe = _ref.setStripe;
31
32
  var stripe = (0, _reactStripeJs.useStripe)();
32
33
  var elements = (0, _reactStripeJs.useElements)();
33
34
 
@@ -128,6 +129,7 @@ var PaymentForm = function PaymentForm(_ref) {
128
129
  return val;
129
130
  });
130
131
  allValuesComplete ? createToken() : "le falta algo oiga";
132
+ setStripe && setStripe(stripe);
131
133
  }, [valuesComplete]);
132
134
 
133
135
  var handleCardNameChange = function handleCardNameChange(event) {
package/dist/components/molecules/StripeCardForm/styles.js CHANGED
@@ -19,6 +19,6 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
19
19
 
20
20
  exports.Container = Container;
21
21
 
22
- var PaymentFormContainer = _styledComponents.default.form(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 20px;\n border: 1px solid #f0f0f0;\n\n h2 {\n font-size: 15px;\n line-height: 20px;\n color: #262626;\n font-family: ", ";\n\n & + * {\n margin-top: 10px;\n }\n }\n\n .card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n .element {\n display: flex;\n align-items: center;\n\n label {\n color: #808080;\n font-family: ", ";\n font-size: 12px;\n display: flex;\n\n & + * {\n margin-left: 6px;\n }\n }\n\n .card-input {\n border: 1px solid #f0f0f0 !important;\n border-radius: 5px;\n padding: 3px;\n font-family: ", ";\n font-size: 12px;\n flex: 1;\n }\n\n &.card-name {\n flex: 1 0 100%;\n label + * {\n margin-left: 6px;\n }\n }\n\n &.card-number {\n flex: 1 0 100%;\n label + * {\n margin-left: 43px;\n }\n }\n\n &.expiration-date,\n &.cvc-code {\n flex: 1 1 49%;\n label + * {\n margin-left: 9px;\n }\n }\n }\n }\n"])), _variables.FontFamily.Lato, _variables.FontFamily.Lato, _variables.FontFamily.Lato);
22
+ var PaymentFormContainer = _styledComponents.default.form(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 20px;\n border: 1px solid #f0f0f0;\n border-radius: 10px;\n\n h2 {\n font-size: 15px;\n line-height: 20px;\n color: #262626;\n font-family: ", ";\n\n & + * {\n margin-top: 10px;\n }\n }\n\n .card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n .element {\n display: flex;\n align-items: center;\n\n label {\n color: #808080;\n font-family: ", ";\n font-size: 12px;\n display: flex;\n\n & + * {\n margin-left: 6px;\n }\n }\n\n .card-input {\n border: 1px solid #f0f0f0 !important;\n border-radius: 5px;\n padding: 3px;\n font-family: ", ";\n font-size: 12px;\n flex: 1;\n }\n\n &.card-name {\n flex: 1 0 100%;\n label + * {\n margin-left: 6px;\n }\n }\n\n &.card-number {\n flex: 1 0 100%;\n label + * {\n margin-left: 43px;\n }\n }\n\n &.expiration-date,\n &.cvc-code {\n flex: 1 1 49%;\n label + * {\n margin-left: 9px;\n }\n }\n }\n }\n"])), _variables.FontFamily.Lato, _variables.FontFamily.Lato, _variables.FontFamily.Lato);
23
23
 
24
24
  exports.PaymentFormContainer = PaymentFormContainer;
package/dist/components/molecules/StripeCardSelector/index.js CHANGED
@@ -85,8 +85,10 @@ var CardSelector = function CardSelector(_ref) {
85
85
  (0, _react.useEffect)(function () {
86
86
  loadStripeJS();
87
87
  }, []);
88
- return stripeLoaded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
89
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.Elements, {
88
+ return stripeLoaded ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
89
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
90
+ children: "Tarjetas guardadas"
91
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.Elements, {
90
92
  stripe: stripeApiKey,
91
93
  children: cards.map(function (card) {
92
94
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
@@ -96,7 +98,7 @@ var CardSelector = function CardSelector(_ref) {
96
98
  setCard: setCard
97
99
  }, card.id);
98
100
  })
99
- })
101
+ })]
100
102
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {});
101
103
  };
102
104
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.3.71",
3
+ "version": "21.3.73",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/components/molecules/StripeCardForm/index.js CHANGED
@@ -6,7 +6,7 @@ import { PaymentForm } from "./paymentForm";
6
6
  import { Loading } from "../../atoms/Loading";
7
7
  const stripeApiKey = loadStripe(`${process.env.REACT_APP_KEY_STRIPE}`);
8
8
 
9
- export const StripeCardForm = ({ setToken, setCard }) => {
9
+ export const StripeCardForm = ({ setToken, setCard, setStripe }) => {
10
10
  const [stripeLoaded, setStripeLoaded] = useState(false);
11
11
 
12
12
  const loadStripeJS = async () => {
@@ -24,6 +24,7 @@ export const StripeCardForm = ({ setToken, setCard }) => {
24
24
  labelForm={"Pago con tarjeta"}
25
25
  setToken={setToken}
26
26
  setCard={setCard}
27
+ setStripe={setStripe}
27
28
  />
28
29
  </Elements>
29
30
  </Container>
package/src/components/molecules/StripeCardForm/paymentForm.js CHANGED
@@ -13,6 +13,7 @@ export const PaymentForm = ({
13
13
  labelForm = "Pago con tarjeta",
14
14
  setToken,
15
15
  setCard,
16
+ setStripe,
16
17
  }) => {
17
18
  const stripe = useStripe();
18
19
  const elements = useElements();
@@ -73,8 +74,8 @@ export const PaymentForm = ({
73
74
  useEffect(() => {
74
75
  const valuesArray = Object.values(valuesComplete);
75
76
  const allValuesComplete = valuesArray?.every((val) => val);
76
-
77
77
  allValuesComplete ? createToken() : "le falta algo oiga";
78
+ setStripe && setStripe(stripe);
78
79
  }, [valuesComplete]);
79
80
 
80
81
  const handleCardNameChange = (event) => {
package/src/components/molecules/StripeCardForm/styles.js CHANGED
@@ -6,6 +6,7 @@ export const Container = styled.div``;
6
6
  export const PaymentFormContainer = styled.form`
7
7
  padding: 20px;
8
8
  border: 1px solid #f0f0f0;
9
+ border-radius: 10px;
9
10
 
10
11
  h2 {
11
12
  font-size: 15px;
package/src/components/molecules/StripeCardSelector/index.js CHANGED
@@ -24,6 +24,7 @@ export const CardSelector = ({ jwt, setCard }) => {
24
24
 
25
25
  return stripeLoaded ? (
26
26
  <Container>
27
+ <h2>Tarjetas guardadas</h2>
27
28
  <Elements stripe={stripeApiKey}>
28
29
  {cards.map((card) => (
29
30
  <Card