@pisell/private-materials 6.3.15 → 6.4.1

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

@@ -0,0 +1,471 @@
+/* SendPaymentLinkModal 组件样式 */
+
+.send-payment-link-modal-wrapper {
+  .pisell-lowcode-modal {
+    min-width: 500px !important;
+    .pisell-lowcode-modal-body {
+      padding-bottom: 24px !important;
+      min-width: 450px !important;
+    }
+  }
+  
+}
+.send-payment-link-modal {
+  
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .modal-container {
+    width: 100%;
+    max-width: 900px;
+    padding: 12px 24px 24px 24px;
+    background: white;
+    border-radius: 14px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+  }
+
+  /* Header */
+  .header {
+    align-self: stretch;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .title {
+    flex: 1;
+    height: 18px;
+    text-align: center;
+    color: #101828;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+  .close-button {
+    width: 36px;
+    height: 36px;
+    position: relative;
+    overflow: hidden;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+
+  /* Main Content */
+  .main-content {
+    align-self: stretch;
+    display: flex;
+    flex-direction: row !important;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 26px;
+    flex-wrap: nowrap !important;
+    min-width: 400px; // 确保最小宽度以维持左右布局
+    width: 100%;
+  }
+
+  .illustration-container {
+    width: 182px;
+    height: 201px;
+    position: relative;
+    margin-right: 32px;
+    flex-shrink: 0;
+  }
+
+  .illustration {
+    width: 182px;
+    height: 201px;
+    background: linear-gradient(0deg, transparent 0%, transparent 100%);
+    border-radius: 5.46px;
+    object-fit: cover;
+  }
+
+  .form-container {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+  }
+
+  /* Balance Due Card */
+  .balance-due-container {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-end;
+    gap: 8px;
+  }
+
+  .balance-due-card {
+    align-self: stretch;
+    height: 64px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    align-content: center;
+  }
+
+  .balance-due-content {
+    flex: 1;
+    align-self: stretch;
+    padding: 8px 16px;
+    background: white;
+    overflow: hidden;
+    border-radius: 16px;
+    border: 1px solid #D0D5DD;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .balance-due-inner {
+    flex: 1 1 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .balance-due-text {
+    color: #7F56DA;
+    font-size: 16px;
+    font-family: Inter, sans-serif;
+    font-weight: 400;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+  .balance-due-right {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .balance-due-amount-container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .balance-due-amount {
+    color: #7F56DA;
+    font-size: 32px;
+    font-family: Inter, sans-serif;
+    font-weight: 400;
+    text-decoration: underline;
+    text-underline-offset: 6px;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+  .edit-icon {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Email Options */
+  .email-options-container {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+    gap: 8px;
+  }
+
+  .email-section {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  .section-label {
+    align-self: stretch;
+    height: 24px;
+    padding: 12px 48px 12px 0;
+    border-radius: 7px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+    color: #7F56DA;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 24px;
+    word-wrap: break-word;
+    margin-bottom: 8px;
+  }
+
+  .section-label-inactive {
+    align-self: stretch;
+    height: 24px;
+    padding: 12px 48px 12px 48px;
+    border-radius: 7px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+    color: #D0D5DD;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+  .email-option {
+    align-self: stretch;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+  }
+
+  /* Radio Button */
+  .radio-container {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .radio-input {
+    display: none;
+  }
+
+  .radio-label {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .radio-checked {
+    flex: 1;
+    align-self: stretch;
+    position: relative;
+    background: #F9F5FF;
+    overflow: hidden;
+    border-radius: 12px;
+    border: 1px solid #7F56DA;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .radio-unchecked {
+    flex: 1;
+    align-self: stretch;
+    position: relative;
+    background: white;
+    border-radius: 12px;
+    border: 1px solid #D0D5DD;
+  }
+
+  .radio-dot {
+    width: 9px;
+    height: 9px;
+    background: #7F56DA;
+    border-radius: 50%;
+  }
+
+  /* Email Input */
+  .email-input-container {
+    flex: 1;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .email-input {
+    align-self: stretch;
+    min-height: 60px;
+    padding: 16px;
+    background: white;
+    border-radius: 8px;
+    border: 0.5px solid #D0D5DD;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    transition: border-color 0.2s ease;
+  }
+
+  .email-input-selected {
+    border: 2px solid #8157D5;
+  }
+
+  .email-text {
+    flex: 1;
+    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    color: #8157D5;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 28px;
+    word-wrap: break-word;
+  }
+
+  .email-text-placeholder {
+    flex: 1;
+    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    color: #D0D5DD;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+  .email-text-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    text-align: right;
+    color: #8157D5;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 28px;
+    background: transparent;
+
+    &::placeholder {
+      color: #D0D5DD;
+      font-size: 16px;
+    }
+  }
+
+  /* Footer Buttons */
+  .footer {
+    align-self: stretch;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .save-button {
+    width: 258px;
+    height: 48px;
+    padding: 0 20px;
+    border-radius: 10px;
+    border: 1px solid #D0D5DD;
+    background: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    text-align: center;
+    color: #D0D5DD;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22px;
+    word-wrap: break-word;
+
+    &:hover {
+      border-color: #7F56DA;
+      color: #7F56DA;
+    }
+  }
+
+  .send-button {
+    width: 258px;
+    height: 48px;
+    padding: 0 20px;
+    background: #5D3F9F;
+    border-radius: 10px;
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    
+    text-align: center;
+    color: white;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22px;
+    word-wrap: break-word;
+
+    &:hover {
+      background: #4A2C7A;
+    }
+  }
+
+  .modal-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* 媒体查询：在小屏幕下也保持左右布局 */
+  @media (max-width: 600px) {
+    .main-content {
+      min-width: 350px !important;
+    }
+    
+    .illustration-container {
+      width: 120px;
+      height: 132px;
+      margin-right: 16px;
+    }
+    
+    .illustration {
+      width: 120px;
+      height: 132px;
+    }
+  }
+}

package/es/components/checkout/components/WalletPassModule/components/ConflictModal/index.d.ts

@@ -0,0 +1,10 @@
+import { PisellWalletPassCardProps } from '../../types';
+export declare const TestModule: () => JSX.Element;
+declare const ConflictModal: (props: {
+    currentItem: PisellWalletPassCardProps;
+    newItem: PisellWalletPassCardProps;
+    onSwitch: (val: PisellWalletPassCardProps) => void;
+    onSave: (val: PisellWalletPassCardProps) => void;
+    onCancel: () => void;
+}) => JSX.Element;
+export default ConflictModal;