@pisell/private-materials 6.5.3 → 6.5.5

package/es/components/checkout/components/CashPaymentModule/index.less

@@ -1,27 +1,26 @@
-/* CashPaymentModule 组件样式 */
+/* CashPaymentModule 组件样式 - 重新设计 */
 
 /* 主容器 */
 .cash-pay-container {
-  width: 100%;
-  height: 100%;
+  align-self: stretch;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 8px;
   display: inline-flex;
-  flex-shrink: 0;
 }
 
 /* 标题栏 */
 .cash-pay-header {
   align-self: stretch;
   justify-content: space-between;
+  align-items: flex-end;
   display: inline-flex;
-  width: 100%;
 }
 
 .cash-pay-header-title {
-  text-align: left;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
   justify-content: center;
   display: flex;
   flex-direction: column;
@@ -33,11 +32,13 @@
 }
 
 .cash-pay-header-rounding {
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
   text-align: right;
   justify-content: center;
   display: flex;
   flex-direction: column;
-  color: #5D3F9F;
+  color: #101828;
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
@@ -48,7 +49,7 @@
 .cash-pay-main-content {
   align-self: stretch;
   padding: 8px;
-  background: white;
+  background: #FCFCFD;
   border-radius: 8px;
   outline: 1px #7F56DA solid;
   outline-offset: -1px;
@@ -59,260 +60,283 @@
   display: flex;
 }
 
-/* 金额输入和支付按钮区域 */
-.cash-pay-payment-area {
+/* 金额信息区域 */
+.cash-pay-info-section {
   align-self: stretch;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  background: white;
-  overflow: hidden;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-  display: flex;
-}
-
-.cash-pay-amount-input-area {
-  flex: 1;
   justify-content: flex-start;
   align-items: center;
-  gap: 8px;
-  display: flex;
-  min-width: 0;
-  overflow: hidden;
+  gap: 16px;
+  display: inline-flex;
 }
 
-/* 编辑图标 */
-.cash-pay-edit-icon {
-  width: 24px;
-  height: 24px;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
+/* 信息项目（Balance Due 和 Change Due）*/
+.cash-pay-info-item {
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  display: inline-flex;
 }
 
-.cash-pay-edit-icon-inner {
-  width: 20.12px;
-  height: 20.12px;
-  left: 2px;
-  top: 1.88px;
-  position: absolute;
-  outline: 2px #475467 solid;
-  outline-offset: -1px;
-  border-radius: 2px;
+.cash-pay-info-label {
+  color: #667085;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  word-wrap: break-word;
 }
 
-.cash-pay-amount-edit-icon {
-  font-size: 24px;
+.cash-pay-info-amount {
   color: #475467;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 28px;
+  word-wrap: break-word;
 }
 
-/* 金额输入包装器 */
-.cash-pay-amount-input-wrapper {
+/* Cash Received 输入区域 */
+.cash-pay-cash-received {
+  flex: 1 1 0;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  background: white;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06);
+  border-radius: 8px;
+  outline: 1px #EAECF0 solid;
+  outline-offset: -1px;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
   display: inline-flex;
-  align-items: baseline;
-  position: relative;
+}
+
+.cash-pay-cash-received-input {
+  width: 100%;
   cursor: pointer;
-  border-bottom: 1px solid #475467;
-  padding-bottom: 2px;
-  transition: border-color 0.2s ease;
+}
 
-  &:hover {
-    border-bottom-color: #7F56DA;
-  }
+.cash-pay-amount-display-section {
+  justify-content: flex-start;
+  align-items: center;
+  display: inline-flex;
 }
 
-/* 货币符号 */
 .cash-pay-currency-symbol {
-  color: #475467;
+  text-align: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  color: #101828;
   font-size: 20px;
-  font-weight: 400;
-  line-height: 24px;
-  margin-right: 2px;
+  font-weight: 600;
+  line-height: 30px;
+  word-wrap: break-word;
 }
 
-/* 金额显示 */
-.cash-pay-amount-display {
-  color: #475467;
+.cash-pay-amount-value {
+  text-align: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  color: #101828;
   font-size: 20px;
-  font-weight: 400;
-  line-height: 24px;
+  font-weight: 600;
+  line-height: 30px;
+  word-wrap: break-word;
+}
+
+/* 蓝色光标指示器 */
+.cash-pay-cursor-indicator {
+  width: 2px;
+  height: 30px;
+  background: #1570EF;
   margin-left: 2px;
-  user-select: none;
-  white-space: nowrap;
+  animation: blink 1s infinite;
 }
 
-/* Cash Pay 按钮 */
-.cash-pay-button {
-  height: 48px;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  background: #7F56DA;
-  box-shadow: 0px 1.03px 2.06px rgba(16, 24, 40, 0.05);
+@keyframes blink {
+
+  0%,
+  50% {
+    opacity: 1;
+  }
+
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+
+/* 按钮网格布局 */
+.cash-pay-button-grid {
+  align-self: stretch;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+/* 金额按钮（紫色风格）*/
+.cash-pay-amount-button {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  min-height: 40px; /* 确保按钮高度一致 */
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
   overflow: hidden;
   border-radius: 8px;
-  outline: 1px #EEE5FF solid;
-  outline-offset: -1px;
   justify-content: center;
   align-items: center;
-  gap: 8.24px;
+  gap: 8px;
   display: flex;
   cursor: pointer;
-  /* 设置宽度与栅格按钮保持一致 */
-  width: calc((100% - 16px) / 3);
-  white-space: nowrap;
-}
-
-.cash-pay-button-text {
-  color: white;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  word-wrap: break-word;
-  white-space: nowrap;
+  transition: all 0.2s ease;
 }
 
-/* 金额按钮栅格布局 */
-.cash-pay-amount-button-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
-  align-self: stretch;
-  width: 100%;
+.cash-pay-amount-button--purple {
+  background: #F9F5FF;
+  outline: 1px #E9D7FE solid;
+  outline-offset: -1px;
 }
 
-/* 响应式设计：在较小屏幕上改为2列 */
-@media (max-width: 480px) {
-  .cash-pay-amount-button-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.cash-pay-amount-button--purple:hover {
+  background: #F4F3FF;
 }
 
-/* 在超小屏幕上改为1列 */
-@media (max-width: 320px) {
-  .cash-pay-amount-button-grid {
-    grid-template-columns: 1fr;
-  }
+.cash-pay-amount-button-text {
+  color: #6941C6;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  word-wrap: break-word;
 }
 
-/* 金额按钮 */
-.cash-pay-amount-button {
-  flex: 1;
-  height: 48px;
-  padding: 16px 20px;
-  background: #EEE5FF;
+/* 操作按钮基础样式 */
+.cash-pay-action-button {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  min-height: 40px; /* 确保与金额按钮高度一致 */
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  overflow: hidden;
   border-radius: 8px;
-  display: flex;
   justify-content: center;
   align-items: center;
+  gap: 8px;
+  display: flex;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
-.cash-pay-amount-button-text {
-  color: #7F56DA;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  word-wrap: break-word;
+/* 灰色按钮样式 */
+.cash-pay-action-button--gray {
+  background: white;
+  outline: 1px #D0D5DD solid;
+  outline-offset: -1px;
 }
 
-/* 键盘模态框样式重置 */
-:global(.keyboard-modal-wrapper .ant-modal) {
-  height: auto !important;
-  min-height: auto !important;
+.cash-pay-action-button--gray:hover {
+  background: #F9FAFB;
 }
 
-:global(.keyboard-modal-wrapper .ant-modal-content) {
-  padding: 0 !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  border-radius: 0 !important;
+/* 主要按钮样式（紫色）*/
+.cash-pay-action-button--primary {
+  background: #7F56DA;
+  outline: 1px #7F56DA solid;
+  outline-offset: -1px;
 }
 
-:global(.keyboard-modal-wrapper .ant-modal-body) {
-  padding: 0 !important;
-  margin: 0 !important;
+.cash-pay-action-button--primary:hover {
+  background: #6941C6;
 }
 
-/* 更高优先级的Modal内容样式覆盖 */
-:global(.keyboard-modal-wrapper .ant-modal-header) {
-  display: none !important;
+/* 按钮文字样式 */
+.cash-pay-action-button-text {
+  color: #344054;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  word-wrap: break-word;
 }
 
-/* 更高优先级的Modal内容样式覆盖 */
-:global(.keyboard-modal-wrapper .ant-modal-content) {
-  padding: 0 !important;
+.cash-pay-action-button-text--red {
+  color: #D92D20;
 }
 
-/* 数字键盘样式 */
-:global(.pisell-number-keyboard-wrap.pisell-number-keyboard-dark) {
-  padding: 10px !important;
-  border-radius: 10px !important;
+.cash-pay-action-button-text--white {
+  color: white;
 }
 
 /* 禁用状态样式 */
 .cash-pay-container--disabled {
   pointer-events: none;
+  opacity: 0.6;
 }
 
 .cash-pay-main-content--disabled {
-  background: white;
-  border-radius: 8px;
+  background: #F9FAFB;
   outline: 1px #D0D5DD solid;
   outline-offset: -1px;
 }
 
-.cash-pay-amount-input-area--disabled {
+.cash-pay-amount-button--disabled {
+  background: #F2F4F7;
+  outline: 1px #E4E7EC solid;
+  outline-offset: -1px;
+  cursor: not-allowed;
   pointer-events: none;
 }
 
-.cash-pay-amount-edit-icon--disabled {
-  color: #475467;
+.cash-pay-amount-button--disabled .cash-pay-amount-button-text {
+  color: #98A2B3;
 }
 
-.cash-pay-amount-input-wrapper--disabled {
-  border-bottom-color: #475467;
-  
-  &:hover {
-    border-bottom-color: #475467;
-  }
+.cash-pay-action-button--disabled {
+  background: #F2F4F7;
+  outline: 1px #E4E7EC solid;
+  outline-offset: -1px;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
-.cash-pay-currency-symbol--disabled {
-  color: #475467;
+.cash-pay-action-button--disabled .cash-pay-action-button-text {
+  color: #98A2B3;
 }
 
-.cash-pay-amount-display--disabled {
-  color: #475467;
+/* 键盘弹出框样式 */
+:global(.cash-payment-keyboard-popover .ant-popover-content) {
+  padding: 0;
 }
 
-.cash-pay-button--disabled {
-  background: #D0D5DD;
-  box-shadow: 0px 1.03px 2.06px rgba(16, 24, 40, 0.05);
-  outline: 1px #EEE5FF solid;
-  outline-offset: -1px;
-  cursor: not-allowed;
-  pointer-events: none;
+:global(.cash-payment-keyboard-popover .ant-popover-arrow) {
+  display: none;
 }
 
-.cash-pay-button-text--disabled {
-  color: white;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
+:global(.cash-payment-keyboard-popover .ant-popover-inner) {
+  border-radius: 12px;
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
 }
 
-.cash-pay-amount-button--disabled {
-  background: #D0D5DD;
-  cursor: not-allowed;
-  pointer-events: none;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .cash-pay-info-section {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .cash-pay-cash-received {
+    align-self: stretch;
+  }
+
+  .cash-pay-button-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
-.cash-pay-amount-button-text--disabled {
-  color: white;
+@media (max-width: 480px) {
+  .cash-pay-button-grid {
+    grid-template-columns: 1fr;
+  }
 }

package/es/components/checkout/components/PaymentDetailModal/index.js

@@ -103,7 +103,7 @@ function PaymentDetailModal(_ref) {
     return paymentItems.filter(function (item) {
       return !item.voucher_id;
     }).reduce(function (total, item) {
-      return total + Math.abs(item.amount);
+      return total + Math.abs(item.amount) + Math.abs(item.rounding_amount);
     }, 0);
   };
 
@@ -159,7 +159,7 @@ function PaymentDetailModal(_ref) {
         className: classNames('payment-item-actions')
       }, /*#__PURE__*/React.createElement("div", {
         className: classNames('payment-item-amount')
-      }, "-", formatAmountWithOptions(Math.abs(item.amount), amountSymbol, {
+      }, "-", formatAmountWithOptions(Math.abs(item.amount) + Math.abs(item.rounding_amount), amountSymbol, {
         precision: 2,
         hideDecimalForWholeNumbers: false,
         useThousandsSeparator: true,

package/es/components/checkout/components/PaymentOptionsModule/PaymentMethodItem.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import './index.less';
+export interface ExtendedPaymentMethod {
+    id: string;
+    name: string;
+    code: string;
+    type: string;
+    surcharge: string;
+    is_surcharge?: boolean;
+    fixed?: number;
+    percentage?: number;
+    totalAmount?: string;
+}
+export interface PaymentMethodItemProps {
+    /** 支付方式数据 */
+    method: ExtendedPaymentMethod;
+    /** 金额符号 */
+    amountSymbol?: string;
+    /** 自定义金额 */
+    customAmount?: string | number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 点击回调 */
+    onClick?: (method: ExtendedPaymentMethod) => void;
+    /** 获取文本的函数 */
+    getText?: (key: string, fallback?: string) => string;
+}
+declare const PaymentMethodItem: React.FC<PaymentMethodItemProps>;
+export default PaymentMethodItem;