@ticketboothapp/booking 0.1.19 → 0.1.22

package/src/components/booking/PriceBreakdown.tsx

@@ -93,18 +93,11 @@ export function PriceBreakdown({
         >
           {hasDiscount ? (
             <>
-              <span
-                style={{
-                  textDecorationLine: 'line-through',
-                  textDecorationThickness: '1.5px',
-                  textDecorationColor: '#a8a29e',
-                  color: '#a8a29e',
-                  marginRight: '0.35rem',
-                }}
-              >
+              <span className="line-through text-stone-400">
                 {formatCurrencyAmount(baseTotal, currency, locale)}
               </span>
-              <span style={{ color: '#059669', fontWeight: 600 }}>
+              {' '}
+              <span className="text-emerald-600">
                 {formatCurrencyAmount(itemTotal, currency, locale)}
               </span>
             </>
@@ -113,33 +106,17 @@ export function PriceBreakdown({
           )}
         </span>
         {canShowBreakdown && showTooltip && (
-          <div
-            style={{
-              position: 'absolute',
-              right: 0,
-              top: '100%',
-              marginTop: '0.5rem',
-              width: '18rem',
-              padding: '0.75rem',
-              backgroundColor: '#1c1917',
-              color: '#ffffff',
-              fontSize: '0.75rem',
-              borderRadius: '0.5rem',
-              boxShadow: '0 12px 24px rgba(0,0,0,0.24)',
-              zIndex: 100000,
-              border: '1px solid rgba(255,255,255,0.08)',
-            }}
-          >
-            <div style={{ fontWeight: 600, marginBottom: '0.5rem', paddingBottom: '0.5rem', borderBottom: '1px solid #44403c' }}>
+          <div className="absolute right-0 top-full mt-2 w-72 p-3 bg-stone-900 text-white text-xs rounded-lg shadow-xl z-50">
+            <div className="font-semibold mb-2 pb-2 border-b border-stone-700">
               Price Breakdown ({category})
             </div>
-            <div style={{ display: 'grid', rowGap: '0.375rem' }}>
+            <div className="space-y-1.5">
               {breakdown.lineItems.map((line) => (
                 <div key={line.id ?? line.name} className="flex justify-between">
-                  <span style={{ color: '#a8a29e' }}>
+                  <span className="text-stone-400">
                     {line.name}{line.type === 'base' ? ` (${currency})` : ''}{formatAdjustmentDetail(line.adjustmentType, line.adjustmentValue, line.amountInDisplayCurrency < 0)}
                   </span>
-                  <span style={line.type === 'adjustment' && line.amountInDisplayCurrency < 0 ? { color: '#fca5a5' } : undefined}>
+                  <span className={line.type === 'adjustment' && line.amountInDisplayCurrency < 0 ? 'text-red-300' : ''}>
                     {line.type === 'adjustment' && line.amountInDisplayCurrency >= 0 ? '+' : ''}
                     {formatCurrencyAmount(line.amountInDisplayCurrency, currency, locale)}
                   </span>
@@ -150,21 +127,21 @@ export function PriceBreakdown({
                 <>
                   {breakdown.feeLines.map((fee) => (
                     <div key={fee.name} className="flex justify-between">
-                      <span style={{ color: '#a8a29e' }} title={fee.description}>
+                      <span className="text-stone-400" title={fee.description}>
                         {fee.name}:
                       </span>
                       <span>{formatCurrencyAmount(fee.feeAmount, currency, locale)}</span>
                     </div>
                   ))}
                   <div className="flex justify-between">
-                    <span style={{ color: '#a8a29e' }}>
+                    <span className="text-stone-400">
                       {`${t('booking.tax') !== 'booking.tax' ? t('booking.tax') : 'Taxes and fees'} (included):`}
                     </span>
                     <span>{formatCurrencyAmount(breakdown.taxAmount, currency, locale)}</span>
                   </div>
                 </>
               )}
-              <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: '0.5rem', marginTop: '0.5rem', borderTop: '1px solid #44403c', fontWeight: 600 }}>
+              <div className="flex justify-between pt-2 mt-2 border-t border-stone-700 font-semibold">
                 <span>Final price ({currency}):</span>
                 <span>{formatCurrencyAmount(breakdown.finalPrice, currency, locale)}</span>
               </div>

package/src/index.ts

@@ -31,9 +31,10 @@ export {
   CompanyProvider,
   useCompany,
   useCompanyTimezone,
-  type Company,
 } from './contexts/CompanyContext';
 
+export { type Company } from './lib/booking-api';
+
 export {
   AVAILABILITIES_CACHE_TTL_MS,
   AvailabilitiesCacheProvider,
@@ -55,6 +56,7 @@ export {
 
 export {
   setPartnerPortalBookingJwtGetter,
+  type Product,
 } from './lib/booking-api';
 
 export {

package/tsconfig.json

@@ -15,6 +15,6 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.json", "src/**/*.d.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.json", "src/**/*.d.ts"],
   "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
 }

package/src/components/JobApplicationDialog.module.css

@@ -1,440 +0,0 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
-}
-
-.modal {
-  background: var(--primary-background, #fff);
-  border-radius: 24px;
-  width: 100%;
-  max-width: 720px;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
-}
-
-@media (min-width: 900px) {
-  .modal {
-    max-width: 960px;
-  }
-}
-
-.formRow {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-@media (min-width: 900px) {
-  .formRow {
-    flex-direction: row;
-  }
-}
-
-.rightColumn {
-  display: none;
-}
-
-@media (min-width: 900px) {
-  .rightColumn {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 0.5rem;
-    padding: var(--spacing-large);
-    width: 200px;
-    flex-shrink: 0;
-    background: var(--light-orange-background, #fff1eb);
-    border-left: 1px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
-  }
-
-  .rightColumnText {
-    font-family: 'Poppins', sans-serif;
-    font-weight: 800;
-    font-size: 1.125rem;
-    color: var(--accent-orange, #e85a2e);
-    margin: 0;
-    line-height: 1.3;
-  }
-}
-
-.header {
-  position: relative;
-  padding: var(--spacing-large) var(--spacing-large) var(--spacing-small) var(--spacing-large);
-  border-bottom: 1px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
-}
-
-.header.headerExpanded {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.headerExpanded .headerContent {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.headerContent {
-  display: block;
-}
-
-.title {
-  font-family: 'Poppins', sans-serif;
-  font-weight: 800;
-  font-size: 1.5rem;
-  color: var(--accent-orange, #e85a2e);
-  margin: 0 0 0.25rem 0;
-}
-
-@media (max-width: 768px) {
-  .title {
-    font-size: 1.25rem;
-  }
-}
-
-.descriptionSection {
-  margin: 0;
-}
-
-.descriptionSection:not(.descriptionExpanded) .description {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.descriptionSection.descriptionExpanded {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.descriptionExpandedContent {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  font-size: 0.9375rem;
-  color: var(--grey-text, #6b7280);
-  line-height: 1.5;
-  text-align: left;
-}
-
-/* Override global h3/h4 styles - match collapsed text, bold only for titles */
-.descriptionExpandedContent h3 {
-  font-family: 'Figtree', sans-serif;
-  font-size: 0.9375rem;
-  font-weight: 700;
-  color: var(--grey-text, #6b7280);
-  text-transform: none;
-  text-align: left;
-  margin: 1.25rem 0 0.5rem 0;
-}
-
-.descriptionExpandedContent h3:first-child {
-  margin-top: 0;
-}
-
-.descriptionExpandedContent h4 {
-  font-family: 'Figtree', sans-serif;
-  font-size: 0.9375rem;
-  font-weight: 700;
-  color: var(--grey-text, #6b7280);
-  text-transform: none;
-  text-align: left;
-  margin: 1rem 0 0.375rem 0;
-}
-
-/* Override global p - match collapsed description exactly */
-.descriptionExpandedContent p {
-  font-size: 0.9375rem;
-  color: var(--grey-text, #6b7280);
-  margin: 0 0 0.75rem 0;
-}
-
-.descriptionExpandedContent ul {
-  margin: 0 0 0.75rem 0;
-  padding-left: 1.25rem;
-}
-
-.descriptionExpandedContent li {
-  font-size: 0.9375rem;
-  color: var(--grey-text, #6b7280);
-  margin-bottom: 0.25rem;
-}
-
-.description {
-  font-size: 0.9375rem;
-  color: var(--grey-text, #6b7280);
-  margin: 0;
-  line-height: 1.5;
-  text-align: left;
-}
-
-.descriptionToggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  background: none;
-  border: none;
-  padding: 0.25rem 0;
-  margin: 0.25rem auto 0;
-  cursor: pointer;
-  color: var(--grey-text, #6b7280);
-  font-size: 0.875rem;
-  transition: color 0.2s ease;
-}
-
-.descriptionToggle:hover {
-  color: var(--accent-orange, #e85a2e);
-}
-
-.descriptionToggle svg {
-  display: block;
-  transition: transform 0.2s ease;
-}
-
-.descriptionSection.descriptionExpanded .descriptionToggle svg {
-  transform: rotate(180deg);
-}
-
-.bodyScroll {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.headerExpanded ~ .formRow {
-  flex: 0;
-}
-
-.closeBtn {
-  position: absolute;
-  top: var(--spacing-small);
-  right: var(--spacing-small);
-  background: none;
-  border: none;
-  padding: 0.5rem;
-  cursor: pointer;
-  color: var(--grey-text, #6b7280);
-}
-
-.closeBtn:hover {
-  color: var(--primary-text, #1f2937);
-}
-
-.content {
-  padding: var(--spacing-large);
-  flex-shrink: 0;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-medium);
-}
-
-.formGroup {
-  display: flex;
-  flex-direction: column;
-}
-
-.label {
-  font-weight: 500;
-  color: var(--primary-text, #1f2937);
-  font-size: 0.875rem;
-  text-align: left;
-}
-
-.radioGroup {
-  display: flex;
-  gap: 1.5rem;
-  margin-top: 0.25rem;
-}
-
-.radioLabel {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  font-size: 0.9375rem;
-  font-weight: 400;
-}
-
-.input {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--grey-text, #6b7280);
-  border-radius: 12px;
-  font-size: 1rem;
-  font-family: 'Figtree', sans-serif;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  box-sizing: border-box;
-  text-align: left;
-}
-
-.input:focus {
-  outline: none;
-  border-color: var(--accent-orange, #e85a2e);
-  box-shadow: 0 0 0 3px rgba(232, 90, 46, 0.15);
-}
-
-/* Match phone input outline to other form fields */
-.phoneInputMatch :global(.react-international-phone-input-container) {
-  border: 1px solid var(--grey-text, #6b7280);
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.phoneInputMatch:focus-within :global(.react-international-phone-input-container) {
-  border-color: var(--accent-orange, #e85a2e);
-  box-shadow: 0 0 0 3px rgba(232, 90, 46, 0.15);
-}
-
-.textarea {
-  min-height: 120px;
-  resize: vertical;
-}
-
-.fileInput {
-  padding: 0.5rem 0;
-  text-align: left;
-}
-
-.fileInputHidden {
-  position: absolute;
-  width: 0.1px;
-  height: 0.1px;
-  opacity: 0;
-  overflow: hidden;
-  z-index: -1;
-}
-
-.fileInputButton {
-  display: inline-block;
-  padding: 0.5rem 1.25rem;
-  background: var(--accent-orange, #e85a2e);
-  color: white;
-  border: none;
-  border-radius: 12px;
-  font-weight: 600;
-  font-size: 0.9375rem;
-  font-family: 'Poppins', sans-serif;
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.fileInputButton:hover {
-  opacity: 0.9;
-}
-
-.fileInputDisabled .fileInputButton {
-  opacity: 0.6;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.fileName {
-  font-size: 0.8125rem;
-  color: var(--accent-orange);
-  margin-top: 0.5rem;
-}
-
-.error {
-  color: #dc2626;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-}
-
-.success {
-  color: #16a34a;
-  font-size: 0.9375rem;
-  padding: 1rem;
-  background: #f0fdf4;
-  border-radius: 12px;
-  margin-bottom: var(--spacing-medium);
-}
-
-.closeConfirm {
-  text-align: center;
-}
-
-.closeConfirmTitle {
-  font-weight: 600;
-  font-size: 1.125rem;
-  color: var(--primary-text, #1f2937);
-  margin: 0 0 0.25rem 0;
-}
-
-.closeConfirmMessage {
-  font-size: 0.9375rem;
-  color: var(--grey-text, #6b7280);
-  margin: 0 0 var(--spacing-medium) 0;
-}
-
-.closeConfirmActions {
-  display: flex;
-  justify-content: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  padding-top: var(--spacing-large);
-  border-top: 1px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
-}
-
-.cancelBtn {
-  padding: 0.625rem 1.25rem;
-  background: transparent;
-  border: 1px solid var(--grey-text);
-  border-radius: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  color: var(--grey-text);
-}
-
-.cancelBtn:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.submitBtn {
-  padding: 0.625rem 1.5rem;
-  background: var(--accent-orange, #e85a2e);
-  color: white;
-  border: none;
-  border-radius: 12px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.submitBtn:hover:not(:disabled) {
-  opacity: 0.9;
-}
-
-.submitBtn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}