Storing Membership Information in the Wallet
In the previous section you looked at storing payment instruments in the Wallet. The Wallet also allows you to save more general information that is not necessarily of a financial nature. Membership information for stores, clubs, libraries, and so forth can also be stored in the Wallet using the WalletTransactionItem class.
In the sample for this section you see how to add membership information for a fictitious Unleashed Card. An IDealsAndMembershipService in the WalletWcfService allows the user to log in and retrieve a custom Member object that contains the user’s membership information. Later in the chapter you also see how the sample app uses the same service to retrieve coupons or deals that the user can save to the Wallet.
The source code for the app presented in this section is located in the WalletDealsAndMembership directory of the downloadable sample code.
The custom Member class has the following string properties:
Id
Customer
MembershipNumber
PhoneNumber
EmailAddress
For the sake of simplicity, the DealsAndMembershipService always returns the same member object when its SignInWithToken method is called. The method follows the awaitable asynchronous pattern, as shown in the following excerpt:
public async Task<Member> SignInWithToken(string signedInToken)
{
Member member = new Member
{
CustomerName = "Anders Hejlsberg",
EmailAddress = "[email protected]",
MembershipNumber = "123456789",
PhoneNumber = "555 3342 1212",
Id = "31415926"
};
return member;
}
Note
Normally you would use a database to store membership information in a production application. The signedInToken parameter used in the example is intended to represent a value that was sent to the client app after a previous successful login. It is not, however, used in the sample.
The MembershipViewModel class retrieves the user’s membership information from the WCF service and allows the user to add the information to the Wallet. The viewmodel’s Load method retrieves the Member object from the server, as shown in the following excerpt:
public async void Load()
{
var service = (IDealsAndMembershipService)
new DealsAndMembershipServiceClient();
try
{
Member = await Task<Member>.Factory.FromAsync(
service.BeginSignInWithToken, service.EndSignInWithToken,
string.Empty, null);
OnPropertyChanged(() => InWallet);
}
catch (Exception ex)
{
Debug.WriteLine("Unable to sign in." + ex);
MessageService.ShowError("Unable to sign in.");
}
}
As in the previous payment instruments sample, the viewmodel’s AddToWallet method saves the membership information to the Wallet using an AddWalletItemTask (see Listing 25.10).
The viewmodel uses a content resource to construct a BitmapImage for the Wallet item. The image is assigned to each of the WalletTransactionItem object’s logo properties. A custom Wallet property stores the email address of the user.
Tip
To prevent automatic image scaling and provide the best logo image clarity possible, specify a different image for each of the three logo sizes.
LISTING 25.10. MembershipViewModel.AddToWallet Method
void AddToWallet()
{
try
{
BitmapImage bitmapImage = new BitmapImage();
Uri logoUri = new Uri("Assets/UnleashedCard.png", UriKind.Relative);
bitmapImage.SetSource(Application.GetResourceStream(logoUri).Stream);
WalletTransactionItem membershipItem = new WalletTransactionItem(itemName)
{
IssuerName = "Unleashed",
DisplayName = "Unleashed Membership Card",
CustomerName = member.CustomerName,
AccountNumber = member.MembershipNumber,
BillingPhone = member.PhoneNumber,
IssuerWebsite = new Uri("http://example.com/"),
DisplayAvailableBalance = "1000 points",
/* An image must be defined for each logo size. */
Logo99x99 = bitmapImage,
Logo159x159 = bitmapImage,
Logo336x336 = bitmapImage
};
membershipItem.IssuerPhone.Business = "123456789";
membershipItem.CustomProperties.Add(
"email", new CustomWalletProperty(member.EmailAddress));
addWalletItemTask.Item = membershipItem;
addWalletItemTask.Show();
}
catch (Exception ex)
{
Debug.WriteLine(ex);
MessageService.ShowError(
"An error occurred when saving your membership to the wallet.");
}
}
Note
The WalletTransactionItem ID, provided via the class constructor, must be unique for your app, or an ArgumentOutOfRange Exception is raised.
The main page of the sample DealsAndMembership app uses a Pivot. The first pivot item displays the user’s membership information, and the second displays coupons available to the user.
The two viewmodels are defined as page resources in MainPage.xaml, like so:
<phone:PhoneApplicationPage.Resources>
<WPUnleashed:MembershipViewModel x:Name="membershipViewModel" />
<WPUnleashed:CouponsViewModel x:Name="couponsViewModel" />
</phone:PhoneApplicationPage.Resources>
Each PivotItem object’s DataContext property is bound to its associated viewmodel resource. The first pivot item is bound to the membershipViewModel as shown:
<phone:PivotItem x:Name="memberPivotItem" Header="Member"
DataContext="{StaticResource membershipViewModel}">
<StackPanel>
<TextBlock Text="member name"
Style="{StaticResource LabelStyle}" />
<TextBlock Text="{Binding Member.CustomerName}"
Style="{StaticResource ValueStyle}" />
<TextBlock Text="phone number"
Style="{StaticResource LabelStyle}" />
<TextBlock Text="{Binding Member.PhoneNumber}"
Style="{StaticResource ValueStyle}" />
<TextBlock Text="email address"
Style="{StaticResource LabelStyle}" />
<TextBlock Text="{Binding Member.EmailAddress}"
Style="{StaticResource ValueStyle}" />
<Button Content="{Binding ToggleButtonText}"
Command="{Binding ToggleInWalletCommand}" />
</StackPanel>
</phone:PivotItem>
Tapping on the Add to Wallet button places the card in the Wallet. The card information is then viewable by tapping the item in the Wallet.
Using the AddWalletItemTask, you are able to add payment instruments and membership cards to the Wallet. In the next section you look at using the Deal class to add coupons to the Wallet Hub’s Deals area.