UI/UX Change: Re-specifying Event Detail Screen to Branch Promotion

Last Updated: 16/07/2026
Type: UI/UX & Functional Change — Event Detail Page
Screen: Event/Promotion Detail Screen (EventDetailScreen)
Severity: 🔴 High — Refactoring event/workshop concepts into local branch promotion concepts

Feedback Screenshot:

• Actual UI: Event screen displaying workshop-specific elements (Free tag, Register button, "Open" status)

---

1. Overview & Business Rationale

The Event tab in the app was previously designed as a workshop/seminar registration portal (where users register to join events, buy tickets, or redeem points for entry).

However, for the current MVP launch:

• The app does not support point-to-ticket redemption yet.
• Events are actually Branch Promotions & Spa Offers (Ưu đãi chi nhánh) rather than physical workshops.

Decisions:

1. Hide "Register Now" (Đăng ký ngay) Button: Remove/hide the bottom sticky action button since registration flows are not active in this release.
2. Remove "Free" (Miễn phí) Tag: Remove the price/ticket status indicator tag (G Miễn phí) since promotions are discount-based and not ticket-based.
3. Redefine Status States:
   • Change status label "Đang mở" (Open) → "Đang hoạt động" (Active)
   • Change status label "Đã đóng" (Closed) → "Đã kết thúc" (Ended)
4. Simplify Timeframe Display: Show a calendar range (Start Date - End Date) rather than workshop hours (e.g. 09:00 - 20:00 • 14/03/2026 → 14/03/2026 - 31/03/2026).

---

2. UI Adjustments & Mappings

┌────────────────────────────────────────────────────────┐
│  [ Banner Image ]                                      │
├────────────────────────────────────────────────────────┤
│  [Đang hoạt động]  ← Status badge                      │
│                                                        │
│  Weekend Getaway - Healing World 210K                  │
│                                                        │
│  📅 14/03/2026 - 31/03/2026   ← Start to End date      │
│  📍 Golden Lotus Healing World Thao Dien               │
│  (Remove "Free" tag completely)                        │
├────────────────────────────────────────────────────────┤
│  ┌──────────────────────────────────────────────────┐  │
│  │ Promotion Content                                │  │
│  │                                                  │  │
│  │ Details of the weekend wellness package...       │  │
│  └──────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────┘
(Bottom Sticky Button "Đăng ký ngay" is HIDDEN/REMOVED)

---

3. Style & Layout Adjustments (React Native)

3.1 Hiding the Registration Button

Modify the layout return statement in EventDetailScreen.tsx:

// ❌ Before
return (
  <View style={styles.container}>
    <ScrollView style={styles.scroll}>
      {/* Event Details */}
    </ScrollView>
    <TouchableOpacity style={styles.stickyButton} onPress={handleRegister}>
      <Text style={styles.buttonText}>Đăng ký ngay</Text>
    </TouchableOpacity>
  </View>
);

// ✅ After: Hide / Remove the sticky button
return (
  <View style={styles.container}>
    <ScrollView 
      style={styles.scroll}
      contentContainerStyle={{ paddingBottom: 32 }} // Normal padding instead of button height padding
    >
      {/* Event Details */}
    </ScrollView>
  </View>
);

3.2 Removing the Ticket Price Tag

// ❌ Before
<View style={styles.metaRow}>
  <Icon name="tag" />
  <Text style={styles.priceTag}>Miễn phí</Text>
</View>

// ✅ After
// Completely remove the price tag row component.

3.3 Dynamic Status Badges

Map the backend status payload keys to the new Vietnamese statuses:

const getStatusLabel = (status: 'open' | 'closed' | 'active' | 'ended') => {
  switch (status) {
    case 'open':
    case 'active':
      return { text: 'Đang hoạt động', color: '#4CAF50' };
    case 'closed':
    case 'ended':
      return { text: 'Đã kết thúc', color: '#9E9E9E' };
    default:
      return { text: 'Đang hoạt động', color: '#4CAF50' };
  }
};

---

4. CMS Fields Mapping (For Admins)

In the CMS article/event creation panel:

Field	Purpose in Promotion context
Tiêu đề	Name of the promotion package (e.g. "Ưu đãi HSSV Healing World 90K")
Bật từ (Start Date)	Start date of the discount period
Tắt sau (End Date)	Expiration date of the discount period
Chi nhánh (Branch)	Target branch where this promotion is valid
Nội dung (Body)	Detailed terms, checklists, and instructions for the offer

---

Technical Checklist

• Locate the event detail view file (EventDetailScreen.tsx).
• Remove the bottom sticky button container (stickyButton and <Text>Đăng ký ngay</Text>).
• Remove the ticket price tag element containing "Miễn phí" or pricing properties.
• Update the status badge translation mapping:
  • Maps open/active status to "Đang hoạt động" (Active).
  • Maps closed/ended status to "Đã kết thúc" (Ended).
• Update the date field display: render the range startDate to endDate instead of individual event start times.
• Confirm layout spacing: verify the ScrollView padding matches the new viewport after button removal.