@oxy.so/bloom 3.6.0 → 4.1.0

package/lib/commonjs/payment-method/PaymentMethodRow.js

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentMethodRow = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../badge/index.js");
+var _index2 = require("../item/index.js");
+var _index3 = require("../radio-indicator/index.js");
+var _surfaceLevels = require("../styles/surface-levels.js");
+var _tokens = require("../styles/tokens.js");
+var _accentColors = require("../theme/accent-colors.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index4 = require("../typography/index.js");
+var _PaymentMethodMark = require("./PaymentMethodMark.js");
+var _constants = require("./constants.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * A way to pay, as a row: the mark, the scheme, the masked identifier, when it
+ * runs out, whether it is the default one, and either a trailing action or a
+ * selection control.
+ *
+ * It is `Item` with a payment method's slots filled in, for the same reason
+ * `AddressRow` is: the row, the press target, the selected wash, the density
+ * rungs, the disabled opacity and the ARIA role translation are `Item`'s job,
+ * and this family owns no second copy of any of them. What it adds is the card
+ * plate, the scheme/masked pairing on the title line, the default badge, the
+ * state line and the radio dot.
+ *
+ *   mark     `PaymentMethodMark`, plate only — the row draws the name itself,
+ *            so the title line can hold the masked tail and the badge too
+ *   title    scheme in `Item`'s own title rung; the masked identifier beside it
+ *            in body-2 TABULAR figures, so four rows of digits line up
+ *   line 2   the expiry, secondary
+ *   line 3   the state's words in the state's own colour, drawn only when the
+ *            method cannot be used
+ *   trailing the radio dot (`selectable`) or the action
+ *
+ * NOTHING HERE IS SENSITIVE. `masked` is a string the app already masked; this
+ * row never unmasks, parses, stores, logs or transmits anything, and there is no
+ * prop that takes a full number.
+ */
+function PaymentMethodRowComponent({
+  scheme,
+  masked,
+  expiry,
+  kind = 'card',
+  icon,
+  image,
+  leading,
+  isDefault = false,
+  defaultLabel = 'Default',
+  state = 'ok',
+  stateMessage,
+  selectable = false,
+  selected,
+  action,
+  onPress,
+  disabled = false,
+  density = 'comfortable',
+  role,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const surface = (0, _surfaceLevels.useSurfaceFill)();
+  const paint = (0, _react.useMemo)(() => (0, _shared.resolvePaymentMethodPaint)(theme, surface), [theme, surface]);
+  const g = _constants.PAYMENT_METHOD_GEOMETRY[density];
+  const tone = _constants.PAYMENT_METHOD_STATE_TONE[state];
+  const stateWords = (0, _shared.paymentMethodStateMessage)(state, stateMessage);
+  // The state's words are read as TEXT on the row's own surface, so they take
+  // the tone's `accent` member (`outlined` foreground) rather than the fill.
+  const stateColor = tone ? (0, _accentColors.resolveAccentColors)(theme.colors, tone, 'outlined').foreground : undefined;
+  const media = leading !== undefined ? leading : /*#__PURE__*/(0, _jsxRuntime.jsx)(_PaymentMethodMark.PaymentMethodMark, {
+    kind: kind,
+    icon: icon,
+    image: image,
+    state: state,
+    density: density,
+    testID: testID ? `${testID}-mark` : undefined
+  });
+  const titleNode = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      minWidth: 0
+    },
+    children: [scheme ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+      variant: "headline-medium",
+      numberOfLines: 1,
+      testID: testID ? `${testID}-scheme` : undefined,
+      style: {
+        flexShrink: 1,
+        minWidth: 0,
+        color: paint.text
+      },
+      children: scheme
+    }) : null, masked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+      variant: "body-2-regular",
+      numberOfLines: 1,
+      testID: testID ? `${testID}-masked` : undefined,
+      style: {
+        flexShrink: 1,
+        minWidth: 0,
+        color: paint.textSecondary,
+        fontVariant: ['tabular-nums']
+      },
+      children: masked
+    }) : null, isDefault ?
+    /*#__PURE__*/
+    // The badge does not SHRINK: it is two or three words that mean
+    // "this is the one", and a truncated "D…" says nothing. The masked
+    // identifier beside it gives way instead, which is the part a reader
+    // can still recognise from its first characters.
+    (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flexShrink: 0
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Badge, {
+        content: defaultLabel,
+        variant: "subtle",
+        color: "primary",
+        size: "label-small",
+        testID: testID ? `${testID}-default` : undefined
+      })
+    }) : null]
+  });
+  const subtitleNode = expiry || stateWords ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      gap: 2,
+      minWidth: 0
+    },
+    children: [expiry ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+      variant: "body-2-regular",
+      numberOfLines: 1,
+      testID: testID ? `${testID}-expiry` : undefined,
+      style: {
+        color: paint.textSecondary,
+        fontVariant: ['tabular-nums']
+      },
+      children: expiry
+    }) : null, stateWords ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+      variant: "body-2-medium",
+      numberOfLines: 2,
+      testID: testID ? `${testID}-state` : undefined,
+      style: {
+        color: stateColor ?? paint.textSecondary
+      },
+      children: stateWords
+    }) : null]
+  }) : null;
+
+  // A PRESSABLE row is a real `<button>` on web, so a control cannot live
+  // inside it: a button in a button is invalid HTML and, unlike native, a web
+  // click on the inner control ALSO fires the row. The selection DOT is not a
+  // control — it draws no press target of its own — so it stays inside; an
+  // `action` does not. The mechanism is measured in `address/AddressRow.tsx`.
+  const splitAction = action != null && onPress != null;
+  const trailing = selectable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.RadioIndicator, {
+    selected: selected === true,
+    size: g.dot,
+    testID: testID ? `${testID}-dot` : undefined
+  }) : splitAction ? null : action ?? null;
+  const row = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Item, {
+    title: titleNode,
+    subtitle: subtitleNode,
+    leading: media,
+    trailing: trailing,
+    onPress: onPress,
+    disabled: disabled,
+    selected: selected,
+    density: density,
+    role: role,
+    accessibilityLabel: accessibilityLabel ?? (0, _shared.composePaymentMethodName)([scheme, masked, expiry, isDefault && defaultLabel, stateWords])
+    // `paddingRight`, never `paddingHorizontal`: `Item` writes the longhand,
+    // and on web a shorthand here would outrank it while native honoured it.
+    ,
+    style: splitAction ? {
+      paddingRight: _tokens.space.sm
+    } : style,
+    testID: testID
+  });
+  if (!splitAction) return row;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingRight: _tokens.space.lg
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flex: 1,
+        minWidth: 0
+      },
+      children: row
+    }), action]
+  });
+}
+const PaymentMethodRow = exports.PaymentMethodRow = /*#__PURE__*/(0, _react.memo)(PaymentMethodRowComponent);
+PaymentMethodRow.displayName = 'PaymentMethodRow';
+//# sourceMappingURL=PaymentMethodRow.js.map

package/lib/commonjs/payment-method/PaymentMethodRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_index2","_index3","_surfaceLevels","_tokens","_accentColors","_useTheme","_index4","_PaymentMethodMark","_constants","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PaymentMethodRowComponent","scheme","masked","expiry","kind","icon","image","leading","isDefault","defaultLabel","state","stateMessage","selectable","selected","action","onPress","disabled","density","role","accessibilityLabel","style","testID","theme","useTheme","surface","useSurfaceFill","paint","useMemo","resolvePaymentMethodPaint","g","PAYMENT_METHOD_GEOMETRY","tone","PAYMENT_METHOD_STATE_TONE","stateWords","paymentMethodStateMessage","stateColor","resolveAccentColors","colors","foreground","undefined","media","jsx","PaymentMethodMark","titleNode","jsxs","View","flexDirection","alignItems","gap","minWidth","children","Text","variant","numberOfLines","flexShrink","color","text","textSecondary","fontVariant","Badge","content","size","subtitleNode","splitAction","trailing","RadioIndicator","dot","row","Item","title","subtitle","composePaymentMethodName","paddingRight","space","sm","lg","flex","PaymentMethodRow","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["payment-method/PaymentMethodRow.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,aAAA,GAAAP,OAAA;AACA,IAAAQ,SAAA,GAAAR,OAAA;AACA,IAAAS,OAAA,GAAAT,OAAA;AACA,IAAAU,kBAAA,GAAAV,OAAA;AACA,IAAAW,UAAA,GAAAX,OAAA;AACA,IAAAY,OAAA,GAAAZ,OAAA;AAA0G,IAAAa,WAAA,GAAAb,OAAA;AAAA,SAAAD,wBAAAe,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAjB,uBAAA,YAAAA,CAAAe,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAG1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASkB,yBAAyBA,CAAC;EACjCC,MAAM;EACNC,MAAM;EACNC,MAAM;EACNC,IAAI,GAAG,MAAM;EACbC,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,SAAS,GAAG,KAAK;EACjBC,YAAY,GAAG,SAAS;EACxBC,KAAK,GAAG,IAAI;EACZC,YAAY;EACZC,UAAU,GAAG,KAAK;EAClBC,QAAQ;EACRC,MAAM;EACNC,OAAO;EACPC,QAAQ,GAAG,KAAK;EAChBC,OAAO,GAAG,aAAa;EACvBC,IAAI;EACJC,kBAAkB;EAClBC,KAAK;EACLC;AACqB,CAAC,EAAE;EACxB,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EACxB,MAAMC,OAAO,GAAG,IAAAC,6BAAc,EAAC,CAAC;EAChC,MAAMC,KAAK,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,iCAAyB,EAACN,KAAK,EAAEE,OAAO,CAAC,EAAE,CAACF,KAAK,EAAEE,OAAO,CAAC,CAAC;EACxF,MAAMK,CAAC,GAAGC,kCAAuB,CAACb,OAAO,CAAC;EAC1C,MAAMc,IAAI,GAAGC,oCAAyB,CAACtB,KAAK,CAAC;EAC7C,MAAMuB,UAAU,GAAG,IAAAC,iCAAyB,EAACxB,KAAK,EAAEC,YAAY,CAAC;EACjE;EACA;EACA,MAAMwB,UAAU,GAAGJ,IAAI,GAAG,IAAAK,iCAAmB,EAACd,KAAK,CAACe,MAAM,EAAEN,IAAI,EAAE,UAAU,CAAC,CAACO,UAAU,GAAGC,SAAS;EAEpG,MAAMC,KAAK,GACTjC,OAAO,KAAKgC,SAAS,GACnBhC,OAAO,gBAEP,IAAA3B,WAAA,CAAA6D,GAAA,EAAChE,kBAAA,CAAAiE,iBAAiB;IAChBtC,IAAI,EAAEA,IAAK;IACXC,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbI,KAAK,EAAEA,KAAM;IACbO,OAAO,EAAEA,OAAQ;IACjBI,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,OAAO,GAAGkB;EAAU,CAC/C,CACF;EAEH,MAAMI,SAAS,gBACb,IAAA/D,WAAA,CAAAgE,IAAA,EAAC5E,YAAA,CAAA6E,IAAI;IAACzB,KAAK,EAAE;MAAE0B,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE,CAAC;MAAEC,QAAQ,EAAE;IAAE,CAAE;IAAAC,QAAA,GAC9EjD,MAAM,gBACL,IAAArB,WAAA,CAAA6D,GAAA,EAACjE,OAAA,CAAA2E,IAAI;MACHC,OAAO,EAAC,iBAAiB;MACzBC,aAAa,EAAE,CAAE;MACjBhC,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,SAAS,GAAGkB,SAAU;MAChDnB,KAAK,EAAE;QAAEkC,UAAU,EAAE,CAAC;QAAEL,QAAQ,EAAE,CAAC;QAAEM,KAAK,EAAE7B,KAAK,CAAC8B;MAAK,CAAE;MAAAN,QAAA,EAExDjD;IAAM,CACH,CAAC,GACL,IAAI,EACPC,MAAM,gBACL,IAAAtB,WAAA,CAAA6D,GAAA,EAACjE,OAAA,CAAA2E,IAAI;MACHC,OAAO,EAAC,gBAAgB;MACxBC,aAAa,EAAE,CAAE;MACjBhC,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,SAAS,GAAGkB,SAAU;MAChDnB,KAAK,EAAE;QAAEkC,UAAU,EAAE,CAAC;QAAEL,QAAQ,EAAE,CAAC;QAAEM,KAAK,EAAE7B,KAAK,CAAC+B,aAAa;QAAEC,WAAW,EAAE,CAAC,cAAc;MAAE,CAAE;MAAAR,QAAA,EAEhGhD;IAAM,CACH,CAAC,GACL,IAAI,EACPM,SAAS;IAAA;IACR;IACA;IACA;IACA;IACA,IAAA5B,WAAA,CAAA6D,GAAA,EAACzE,YAAA,CAAA6E,IAAI;MAACzB,KAAK,EAAE;QAAEkC,UAAU,EAAE;MAAE,CAAE;MAAAJ,QAAA,eAC7B,IAAAtE,WAAA,CAAA6D,GAAA,EAACxE,MAAA,CAAA0F,KAAK;QACJC,OAAO,EAAEnD,YAAa;QACtB2C,OAAO,EAAC,QAAQ;QAChBG,KAAK,EAAC,SAAS;QACfM,IAAI,EAAC,aAAa;QAClBxC,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,UAAU,GAAGkB;MAAU,CAClD;IAAC,CACE,CAAC,GACL,IAAI;EAAA,CACJ,CACP;EAED,MAAMuB,YAAY,GAChB3D,MAAM,IAAI8B,UAAU,gBAClB,IAAArD,WAAA,CAAAgE,IAAA,EAAC5E,YAAA,CAAA6E,IAAI;IAACzB,KAAK,EAAE;MAAE4B,GAAG,EAAE,CAAC;MAAEC,QAAQ,EAAE;IAAE,CAAE;IAAAC,QAAA,GAClC/C,MAAM,gBACL,IAAAvB,WAAA,CAAA6D,GAAA,EAACjE,OAAA,CAAA2E,IAAI;MACHC,OAAO,EAAC,gBAAgB;MACxBC,aAAa,EAAE,CAAE;MACjBhC,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,SAAS,GAAGkB,SAAU;MAChDnB,KAAK,EAAE;QAAEmC,KAAK,EAAE7B,KAAK,CAAC+B,aAAa;QAAEC,WAAW,EAAE,CAAC,cAAc;MAAE,CAAE;MAAAR,QAAA,EAEpE/C;IAAM,CACH,CAAC,GACL,IAAI,EACP8B,UAAU,gBACT,IAAArD,WAAA,CAAA6D,GAAA,EAACjE,OAAA,CAAA2E,IAAI;MACHC,OAAO,EAAC,eAAe;MACvBC,aAAa,EAAE,CAAE;MACjBhC,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQ,GAAGkB,SAAU;MAC/CnB,KAAK,EAAE;QAAEmC,KAAK,EAAEpB,UAAU,IAAIT,KAAK,CAAC+B;MAAc,CAAE;MAAAP,QAAA,EAEnDjB;IAAU,CACP,CAAC,GACL,IAAI;EAAA,CACJ,CAAC,GACL,IAAI;;EAEV;EACA;EACA;EACA;EACA;EACA,MAAM8B,WAAW,GAAGjD,MAAM,IAAI,IAAI,IAAIC,OAAO,IAAI,IAAI;EAErD,MAAMiD,QAAQ,GAAGpD,UAAU,gBACzB,IAAAhC,WAAA,CAAA6D,GAAA,EAACtE,OAAA,CAAA8F,cAAc;IACbpD,QAAQ,EAAEA,QAAQ,KAAK,IAAK;IAC5BgD,IAAI,EAAEhC,CAAC,CAACqC,GAAI;IACZ7C,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,MAAM,GAAGkB;EAAU,CAC9C,CAAC,GACAwB,WAAW,GAAG,IAAI,GACnBjD,MAAM,IAAI,IACZ;EAED,MAAMqD,GAAG,gBACP,IAAAvF,WAAA,CAAA6D,GAAA,EAACvE,OAAA,CAAAkG,IAAI;IACHC,KAAK,EAAE1B,SAAU;IACjB2B,QAAQ,EAAER,YAAa;IACvBvD,OAAO,EAAEiC,KAAM;IACfwB,QAAQ,EAAEA,QAAS;IACnBjD,OAAO,EAAEA,OAAQ;IACjBC,QAAQ,EAAEA,QAAS;IACnBH,QAAQ,EAAEA,QAAS;IACnBI,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXC,kBAAkB,EAChBA,kBAAkB,IAClB,IAAAoD,gCAAwB,EAAC,CAACtE,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEK,SAAS,IAAIC,YAAY,EAAEwB,UAAU,CAAC;IAE1F;IACA;IAAA;IACAb,KAAK,EAAE2C,WAAW,GAAG;MAAES,YAAY,EAAEC,aAAK,CAACC;IAAG,CAAC,GAAGtD,KAAM;IACxDC,MAAM,EAAEA;EAAO,CAChB,CACF;EAED,IAAI,CAAC0C,WAAW,EAAE,OAAOI,GAAG;EAE5B,oBACE,IAAAvF,WAAA,CAAAgE,IAAA,EAAC5E,YAAA,CAAA6E,IAAI;IAACzB,KAAK,EAAE,CAAC;MAAE0B,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEyB,YAAY,EAAEC,aAAK,CAACE;IAAG,CAAC,EAAEvD,KAAK,CAAE;IAAA8B,QAAA,gBAM3F,IAAAtE,WAAA,CAAA6D,GAAA,EAACzE,YAAA,CAAA6E,IAAI;MAACzB,KAAK,EAAE;QAAEwD,IAAI,EAAE,CAAC;QAAE3B,QAAQ,EAAE;MAAE,CAAE;MAAAC,QAAA,EAAEiB;IAAG,CAAO,CAAC,EAClDrD,MAAM;EAAA,CACH,CAAC;AAEX;AAEO,MAAM+D,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,gBAAG,IAAAE,WAAI,EAAC/E,yBAAyB,CAAC;AAC/D6E,gBAAgB,CAACG,WAAW,GAAG,kBAAkB","ignoreList":[]}

package/lib/commonjs/payment-method/constants.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PAYMENT_METHOD_STATE_TONE = exports.PAYMENT_METHOD_STATE_LABELS = exports.PAYMENT_METHOD_MARK_GAP = exports.PAYMENT_METHOD_LIST_GAP = exports.PAYMENT_METHOD_KIND_ICON = exports.PAYMENT_METHOD_GEOMETRY = void 0;
+var _RiBankCardLine = require("../icons/remix/RiBankCardLine.js");
+var _RiBankLine = require("../icons/remix/RiBankLine.js");
+var _RiCoinsLine = require("../icons/remix/RiCoinsLine.js");
+var _RiWallet3Line = require("../icons/remix/RiWallet3Line.js");
+/** The glyph each kind draws when the caller names none. */
+const PAYMENT_METHOD_KIND_ICON = exports.PAYMENT_METHOD_KIND_ICON = {
+  card: _RiBankCardLine.RiBankCardLine,
+  account: _RiBankLine.RiBankLine,
+  wallet: _RiWallet3Line.RiWallet3Line,
+  cash: _RiCoinsLine.RiCoinsLine
+};
+
+/** What the row says under itself when a state has no message of its own. */
+const PAYMENT_METHOD_STATE_LABELS = exports.PAYMENT_METHOD_STATE_LABELS = {
+  ok: '',
+  expired: 'Expired',
+  declined: 'Declined'
+};
+
+/**
+ * The tone each state paints. `ok` paints nothing — an ordinary row is not a
+ * status.
+ */
+const PAYMENT_METHOD_STATE_TONE = exports.PAYMENT_METHOD_STATE_TONE = {
+  ok: undefined,
+  expired: 'warning',
+  declined: 'error'
+};
+/**
+ * 40 wide is the leading column `Item` rows across the library already use
+ * (`address`'s tile is 40 round), so a checkout screen stacking an address row
+ * and a payment row does not step sideways between them. 28 tall against 40
+ * wide is the ratio that reads as a card rather than a square tile, and it is
+ * the one measurement in this family that is about SHAPE rather than size.
+ */
+const PAYMENT_METHOD_GEOMETRY = exports.PAYMENT_METHOD_GEOMETRY = {
+  comfortable: {
+    plateWidth: 40,
+    plateHeight: 28,
+    plateRadius: 6,
+    glyph: 18,
+    dot: 16
+  },
+  compact: {
+    plateWidth: 32,
+    plateHeight: 22,
+    plateRadius: 5,
+    glyph: 14,
+    dot: 14
+  }
+};
+
+/** Space between the plate and the name, inside a `PaymentMethodMark`. */
+const PAYMENT_METHOD_MARK_GAP = exports.PAYMENT_METHOD_MARK_GAP = 8;
+
+/** Space between the rows of a list, and between the list and its add row. */
+const PAYMENT_METHOD_LIST_GAP = exports.PAYMENT_METHOD_LIST_GAP = 4;
+//# sourceMappingURL=constants.js.map

package/lib/commonjs/payment-method/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_RiBankCardLine","require","_RiBankLine","_RiCoinsLine","_RiWallet3Line","PAYMENT_METHOD_KIND_ICON","exports","card","RiBankCardLine","account","RiBankLine","wallet","RiWallet3Line","cash","RiCoinsLine","PAYMENT_METHOD_STATE_LABELS","ok","expired","declined","PAYMENT_METHOD_STATE_TONE","undefined","PAYMENT_METHOD_GEOMETRY","comfortable","plateWidth","plateHeight","plateRadius","glyph","dot","compact","PAYMENT_METHOD_MARK_GAP","PAYMENT_METHOD_LIST_GAP"],"sourceRoot":"../../../src","sources":["payment-method/constants.ts"],"mappings":";;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAKA;AACO,MAAMI,wBAAuE,GAAAC,OAAA,CAAAD,wBAAA,GAAG;EACrFE,IAAI,EAAEC,8BAAc;EACpBC,OAAO,EAAEC,sBAAU;EACnBC,MAAM,EAAEC,4BAAa;EACrBC,IAAI,EAAEC;AACR,CAAC;;AAED;AACO,MAAMC,2BAA+D,GAAAT,OAAA,CAAAS,2BAAA,GAAG;EAC7EC,EAAE,EAAE,EAAE;EACNC,OAAO,EAAE,SAAS;EAClBC,QAAQ,EAAE;AACZ,CAAC;;AAED;AACA;AACA;AACA;AACO,MAAMC,yBAA6E,GAAAb,OAAA,CAAAa,yBAAA,GAAG;EAC3FH,EAAE,EAAEI,SAAS;EACbH,OAAO,EAAE,SAAS;EAClBC,QAAQ,EAAE;AACZ,CAAC;AAaD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,uBAA4E,GAAAf,OAAA,CAAAe,uBAAA,GAAG;EAC1FC,WAAW,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,WAAW,EAAE,EAAE;IAAEC,WAAW,EAAE,CAAC;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE;EAAG,CAAC;EACpFC,OAAO,EAAE;IAAEL,UAAU,EAAE,EAAE;IAAEC,WAAW,EAAE,EAAE;IAAEC,WAAW,EAAE,CAAC;IAAEC,KAAK,EAAE,EAAE;IAAEC,GAAG,EAAE;EAAG;AACjF,CAAC;;AAED;AACO,MAAME,uBAAuB,GAAAvB,OAAA,CAAAuB,uBAAA,GAAG,CAAC;;AAExC;AACO,MAAMC,uBAAuB,GAAAxB,OAAA,CAAAwB,uBAAA,GAAG,CAAC","ignoreList":[]}

package/lib/commonjs/payment-method/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PAYMENT_METHOD_GEOMETRY", {
+  enumerable: true,
+  get: function () {
+    return _constants.PAYMENT_METHOD_GEOMETRY;
+  }
+});
+Object.defineProperty(exports, "PAYMENT_METHOD_KIND_ICON", {
+  enumerable: true,
+  get: function () {
+    return _constants.PAYMENT_METHOD_KIND_ICON;
+  }
+});
+Object.defineProperty(exports, "PAYMENT_METHOD_LIST_GAP", {
+  enumerable: true,
+  get: function () {
+    return _constants.PAYMENT_METHOD_LIST_GAP;
+  }
+});
+Object.defineProperty(exports, "PAYMENT_METHOD_MARK_GAP", {
+  enumerable: true,
+  get: function () {
+    return _constants.PAYMENT_METHOD_MARK_GAP;
+  }
+});
+Object.defineProperty(exports, "PAYMENT_METHOD_STATE_LABELS", {
+  enumerable: true,
+  get: function () {
+    return _constants.PAYMENT_METHOD_STATE_LABELS;
+  }
+});
+Object.defineProperty(exports, "PAYMENT_METHOD_STATE_TONE", {
+  enumerable: true,
+  get: function () {
+    return _constants.PAYMENT_METHOD_STATE_TONE;
+  }
+});
+Object.defineProperty(exports, "PaymentMethodList", {
+  enumerable: true,
+  get: function () {
+    return _PaymentMethodList.PaymentMethodList;
+  }
+});
+Object.defineProperty(exports, "PaymentMethodMark", {
+  enumerable: true,
+  get: function () {
+    return _PaymentMethodMark.PaymentMethodMark;
+  }
+});
+Object.defineProperty(exports, "PaymentMethodRow", {
+  enumerable: true,
+  get: function () {
+    return _PaymentMethodRow.PaymentMethodRow;
+  }
+});
+Object.defineProperty(exports, "composePaymentMethodName", {
+  enumerable: true,
+  get: function () {
+    return _shared.composePaymentMethodName;
+  }
+});
+Object.defineProperty(exports, "paymentMethodStateMessage", {
+  enumerable: true,
+  get: function () {
+    return _shared.paymentMethodStateMessage;
+  }
+});
+Object.defineProperty(exports, "resolvePaymentMethodPaint", {
+  enumerable: true,
+  get: function () {
+    return _shared.resolvePaymentMethodPaint;
+  }
+});
+var _PaymentMethodList = require("./PaymentMethodList.js");
+var _PaymentMethodMark = require("./PaymentMethodMark.js");
+var _PaymentMethodRow = require("./PaymentMethodRow.js");
+var _constants = require("./constants.js");
+var _shared = require("./shared.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/payment-method/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_PaymentMethodList","require","_PaymentMethodMark","_PaymentMethodRow","_constants","_shared"],"sourceRoot":"../../../src","sources":["payment-method/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AASA,IAAAI,OAAA,GAAAJ,OAAA","ignoreList":[]}

package/lib/commonjs/payment-method/shared.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.composePaymentMethodName = composePaymentMethodName;
+exports.paymentMethodStateMessage = paymentMethodStateMessage;
+exports.resolvePaymentMethodPaint = resolvePaymentMethodPaint;
+var _surfaceLevels = require("../styles/surface-levels.js");
+var _constants = require("./constants.js");
+/**
+ * What a payment-method row paints, read RELATIVE to the surface it was dropped
+ * on (`styles/surface-levels.ts`) — a saved-methods screen sits on the page, a
+ * checkout picker sits in a card and a sheet's picker sits two rungs up, and a
+ * plate colour picked by eye disappears on one of the three.
+ *
+ * Pure, so `PaymentMethod.test.tsx` can walk presets and modes without
+ * rendering.
+ */
+
+function resolvePaymentMethodPaint(theme, surface) {
+  return {
+    ...(0, _surfaceLevels.surfaceTextOn)(theme, surface),
+    plate: (0, _surfaceLevels.surfaceFillOn)(theme, surface)
+  };
+}
+
+/** Joins the non-empty parts of an accessible name, in reading order. */
+function composePaymentMethodName(parts, separator = ', ') {
+  return parts.filter(part => typeof part === 'string' && part !== '').join(separator);
+}
+
+/**
+ * The words a state says when the caller gave no message.
+ *
+ * `ok` has none: an ordinary method is not a status, and a row that said "OK"
+ * under every card would be noise a reader has to read past four times.
+ */
+function paymentMethodStateMessage(state, message) {
+  if (typeof message === 'string' && message !== '') return message;
+  const label = _constants.PAYMENT_METHOD_STATE_LABELS[state];
+  return label === '' ? undefined : label;
+}
+//# sourceMappingURL=shared.js.map

package/lib/commonjs/payment-method/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_surfaceLevels","require","_constants","resolvePaymentMethodPaint","theme","surface","surfaceTextOn","plate","surfaceFillOn","composePaymentMethodName","parts","separator","filter","part","join","paymentMethodStateMessage","state","message","label","PAYMENT_METHOD_STATE_LABELS","undefined"],"sourceRoot":"../../../src","sources":["payment-method/shared.ts"],"mappings":";;;;;;;;AASA,IAAAA,cAAA,GAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAD,OAAA;AAXA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAWO,SAASE,yBAAyBA,CAACC,KAAY,EAAEC,OAAe,EAAsB;EAC3F,OAAO;IACL,GAAG,IAAAC,4BAAa,EAACF,KAAK,EAAEC,OAAO,CAAC;IAChCE,KAAK,EAAE,IAAAC,4BAAa,EAACJ,KAAK,EAAEC,OAAO;EACrC,CAAC;AACH;;AAEA;AACO,SAASI,wBAAwBA,CACtCC,KAAuD,EACvDC,SAAS,GAAG,IAAI,EACR;EACR,OAAOD,KAAK,CACTE,MAAM,CAAEC,IAAI,IAAqB,OAAOA,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,EAAE,CAAC,CACzEC,IAAI,CAACH,SAAS,CAAC;AACpB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,yBAAyBA,CACvCC,KAAyB,EACzBC,OAAgB,EACI;EACpB,IAAI,OAAOA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,EAAE,EAAE,OAAOA,OAAO;EACjE,MAAMC,KAAK,GAAGC,sCAA2B,CAACH,KAAK,CAAC;EAChD,OAAOE,KAAK,KAAK,EAAE,GAAGE,SAAS,GAAGF,KAAK;AACzC","ignoreList":[]}

package/lib/commonjs/payment-method/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/lib/commonjs/payment-method/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["payment-method/types.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/payment-status/PaymentStatusBar.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentStatusBar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("../order-status/index.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * The compact live strip: what happened to the money, how much, and one action.
+ *
+ * ## It IS `OrderStatusBar`
+ *
+ * Not a second strip that looks like it. `order-status` already owns the
+ * library's answer to "where is this right now": the 40 tile in the tone's
+ * tint, the one-line status with a short trailing reading in tabular figures, a
+ * quiet second line, a `Meter` for progress, the surface-relative chrome and
+ * the `plain` variant for a strip already inside a card. A payment is the same
+ * question with different data, and shipping a second strip would mean two
+ * components drifting apart on every one of those decisions.
+ *
+ * What this adds is the mapping a payment needs and an order does not: five
+ * states to five sets of words, five tones and five glyphs, in one place
+ * (`constants.ts`) so a status row and a confirmation screen cannot disagree
+ * about what "pending" is called or what colour it is.
+ *
+ * ## The amount rides the trailing reading
+ *
+ * `OrderStatusBar`'s trailing slot is a short reading in tabular figures,
+ * capped so it cannot crush the status beside it — which is exactly what an
+ * amount is. Its PROP is spelled `eta`, because an order was the first thing
+ * that needed it; the slot is general and this is the second. That naming is
+ * worth fixing in `order-status`, and it is that family's to fix.
+ *
+ * Nothing here formats money: `amount` is a string the app already formatted.
+ */
+function PaymentStatusBarComponent({
+  state,
+  status,
+  amount,
+  detail,
+  progress,
+  icon,
+  action,
+  variant = 'surface',
+  labels,
+  style,
+  testID
+}) {
+  const presentation = (0, _shared.resolvePaymentStatus)(state, {
+    status,
+    labels,
+    icon
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.OrderStatusBar, {
+    status: presentation.words,
+    eta: amount,
+    detail: detail,
+    progress: progress,
+    tone: presentation.tone,
+    icon: presentation.icon,
+    action: action,
+    variant: variant,
+    style: style,
+    testID: testID
+  });
+}
+const PaymentStatusBar = exports.PaymentStatusBar = /*#__PURE__*/(0, _react.memo)(PaymentStatusBarComponent);
+PaymentStatusBar.displayName = 'PaymentStatusBar';
+//# sourceMappingURL=PaymentStatusBar.js.map

package/lib/commonjs/payment-status/PaymentStatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_index","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PaymentStatusBarComponent","state","status","amount","detail","progress","icon","action","variant","labels","style","testID","presentation","resolvePaymentStatus","jsx","OrderStatusBar","words","eta","tone","PaymentStatusBar","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["payment-status/PaymentStatusBar.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAAgD,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASkB,yBAAyBA,CAAC;EACjCC,KAAK;EACLC,MAAM;EACNC,MAAM;EACNC,MAAM;EACNC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,OAAO,GAAG,SAAS;EACnBC,MAAM;EACNC,KAAK;EACLC;AACqB,CAAC,EAAE;EACxB,MAAMC,YAAY,GAAG,IAAAC,4BAAoB,EAACZ,KAAK,EAAE;IAAEC,MAAM;IAAEO,MAAM;IAAEH;EAAK,CAAC,CAAC;EAE1E,oBACE,IAAA1B,WAAA,CAAAkC,GAAA,EAACpC,MAAA,CAAAqC,cAAc;IACbb,MAAM,EAAEU,YAAY,CAACI,KAAM;IAC3BC,GAAG,EAAEd,MAAO;IACZC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBa,IAAI,EAAEN,YAAY,CAACM,IAAK;IACxBZ,IAAI,EAAEM,YAAY,CAACN,IAAK;IACxBC,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IACjBE,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN;AAEO,MAAMQ,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,gBAAG,IAAAE,WAAI,EAACrB,yBAAyB,CAAC;AAC/DmB,gBAAgB,CAACG,WAAW,GAAG,kBAAkB","ignoreList":[]}