Gift What template

Description

The Gift What template renders column 2 ("For What") of the Gift Widget. It is injected into the mambo-ctrl-gift-what placeholder in the gift shell template once rewards data has loaded from the server.

This template is rendered separately from the shell so that server-data refreshes do not clear user input in the search field or reason textarea. It receives the rewards catalogue and current user data and renders the gifts dropdown, badge image, points dropdown, quantity input, and balance display.

Control classes

Class	Description	Required
mambo-ctrl-gift-flip	Wrapper for the front and back card elements	No
mambo-ctrl-show-gifts	Wrapper for elements shown on the front of the card (gifts view)	No
mambo-ctrl-show-pts	Wrapper for elements shown on the back of the card (points view)	No
mambo-ctrl-gift-sel-what	Toggles the mambo-ctrl-gift-flip element between front (gifts) and back (points). Only rendered when both withGifts and withPoints are true	No
mambo-ctrl-gift-gifts	Select element whose option values are reward indices. On change, updates the badge image in mambo-ctrl-gift-badge	No
mambo-ctrl-gift-badge	Element where the selected gift reward's badge image is displayed	No
mambo-ctrl-gift-pts	Select element whose option values are point type IDs. Used together with the quantity input to calculate the remaining balance	No
mambo-ctrl-gift-qnty	Input for the number of points to give	No
mambo-ctrl-gift-balance	Displays the giver's remaining balance after the entered quantity is deducted. Updates as quantity changes	No

Template data

Variable	Description	Type
data	Object containing rewards sorted by type. Access gifts via data.gifts.viewData — each entry is passed through Mambo.Util.getRewardObj() to obtain the reward object with name, imageUrl, and active fields	Object
user	Current user data object. Access giftable point types via user.points — each entry has pointId, point.name, point.giftable, and balance fields	Object
withPoints	Whether the points gifting UI should be shown. Corresponds to the withPoints render option on the widget	Boolean
withGifts	Whether the gift rewards UI should be shown. Corresponds to the withGifts render option on the widget	Boolean

Implementation example

This example shows the "For What" column with a gift rewards view on the front face of the flip card and a points view on the back face. Use Mambo.Template.giftWhat as the template key.

JavaScript

<script type="text/template" id="gift-what-template">
  <% var selected, rwd; %>

  <!-- Gifts view (front face of flip card) -->
  <% if( withGifts ) { %>
  <div class="mambo-ctrl-show-gifts">
      <select class="mambo-ctrl-gift-gifts">
      <% if( data.gifts ) { %>
          <% _.forEach( data.gifts.viewData, function( gft, idx ) { %>
          <% rwd = Mambo.Util.getRewardObj( gft ); %>
          <% if( rwd.active ) { %>
              <% if( idx == 0 ) { selected = rwd; } %>
              <option value="<%= idx %>"><%= rwd.name %></option>
          <% } %>
          <% }); %>
      <% } %>
      </select>
      <div class="mambo-ctrl-gift-badge">
          <% if( selected && selected.imageUrl ) { %>
          <img src="<%= selected.imageUrl %>">
          <% } %>
      </div>
  </div>
  <% } %>

  <!-- Points view (back face of flip card) -->
  <% if( withPoints ) { %>
  <div class="mambo-ctrl-show-pts">
      <select class="mambo-ctrl-gift-pts">
          <%
          selected = null;
          _.forEach( user.points, function( pt ) {
              if( !pt.point || !pt.point.giftable ) return;
              if( !selected ) { selected = pt; }
          %>
          <option value="<%= pt.pointId %>"><%= pt.point.name %></option>
          <% }); %>
          <% if( !selected ) { %><option>No giftable points available</option><% } %>
      </select>
      <% if( selected ) { %>
      How many: <input type="text" class="mambo-ctrl-gift-qnty" placeholder="0"><br>
      Balance: <strong class="mambo-ctrl-gift-balance"><%= selected.balance %></strong>
      <% } %>
  </div>
  <% } %>

  <!-- Toggle link shown only when both are enabled -->
  <% if( withGifts && withPoints ) { %>
  <span class="mambo-ctrl-gift-sel-what">Add points &raquo;</span>
  <% } %>
</script>

<script type="text/javascript">
  // Use the Mambo Callbacks array
  var mamboCallbacks = window.mamboCallbacks || [];
  mamboCallbacks.push(function() {
      // Override the Gift What sub-template
      Mambo.updateTemplate( Mambo.Template.giftWhat, Mambo('#gift-what-template').html() );
  });
</script>

Customisation options

Consider these enhancements:

• Customising the gift badge display with additional reward metadata such as description or category
• Adding a larger preview of the gift image before submission
• Sorting or filtering the gifts dropdown by category or tag
• Displaying a full points breakdown or transaction history instead of just the remaining balance
• Adding a visual warning or tooltip when the entered quantity would result in a negative balance