The view for the gift package where the gift contents pop out of (e.g. an envelope, box, etc.) is customizable and replaceable. As a default example in the app, we include an envelope with each of these views configured. There are two ways to change the look.

Option 1: Use the SimpleGiftPackage

The SimpleGiftPackage class has a wrapped and unwrapped state, and for each of these states, there is an associated front and back image. The Voucher items will pop out of the gift package, in between the front and back views. The constructor takes in up to 4 images/gifs. If gifs are used, their animation will play once and freeze at the final frame. The constructor optionally takes in containerMargins that allow you to define the space that contents of the Voucher can sit within the GiftPackage.

Engine.Builder builder = new Engine.Builder(serverUrl, sdkId);
...
builder.setYouTubeVideoSearchApiKey("YOUTUBE_SEARCH_API_KEY");
builder.build();

val builder = Engine.Builder(serverUrl, sdkId)
...
builder.setYouTubeVideoSearchApiKey("YOUTUBE_SEARCH_API_KEY")
builder.build()

Then add the VideoPersonalizationOption to the create configuration.

class SimpleGiftPackage {
    private int frontImageWrapped;
    private int backImageWrapped;
    private int frontImageUnwrapped;
    private int backImageUnwrapped;
    private ContainerMargins containerMargins = new ContainerMargins(0f, 0f, 0f, 0f);
}

class SimpleGiftPackage {
    private val frontImageWrapped: Int? = null,
    private val backImageWrapped: Int? = null,
    private val frontImageUnwrapped: Int? = null,
    private val backImageUnwrapped: Int? = null,
    private val containerMargins: ContainerMargins = ContainerMargins(0f, 0f, 0f, 0f)
}

Then add your SimpleGiftPackage to the CommonConfig and add commonConfig to the Engine.Builder.

CommonConfig commonConfig = new CommonConfig.Builder()
    .wrappingPaperFactory(new SimpleGiftPackage(R.drawable.box_closing,R.drawable.box_base, R.drawable.box_opening, R.drawable.box_base, new ContainerMargins(.18f, .18f, .18f, .18f)))
    .build();

new Engine.Builder("baseUrl", "SDK_ID").setCommonConfig(commonConfig).build().startup(getContext());

val commonConfig = CommonConfig.Builder()
    .wrappingPaperFactory { _ ->
        SimpleGiftPackage(R.drawable.box_closing, R.drawable.box_base, R.drawable.box_opening, R.drawable.box_base, ContainerMargins(.18f, .18f, .18f, .18f))
    }
    .build()

Engine.Builder("baseUrl", "SDK_ID").setCommonConfig(commonConfig).build().startup(context)

Note: The SimpleGiftPackage in option 1 simply implements the GiftPackageInterface but is limited. Vouchr supports custom Wrapping Images that can be configured on the Dashboard or picked by users during create, currently option 1 does nothing with that image data, if that customization is desired you must use one of the defaults or option 2.

Option 2: Implement the GiftPackageView Interface

public interface GiftPackageView {

    enum State {
        OPEN, CLOSE, WRAPPED, UNKNOWN
    }

    @Nullable View getFrontView(WrappingData data, ViewGroup container);

    @Nullable View getBackView(WrappingData data, ViewGroup container);

    ContainerMargins getContentsMargins(View contentsContainer);

    Completable setState(State state, boolean animate);

}

interface GiftPackageView {

    enum class State {
        OPEN, CLOSE, WRAPPED, UNKNOWN
    }

    fun getFrontView(data: WrappingData, container: ViewGroup) : View?

    fun getBackView(data: WrappingData, container: ViewGroup) : View?

    fun getContentsMargins(contentsContainer: View) : ContainerMargins

    fun setState(state: State, animate: Boolean) : Completable

}

Full javadoc is available here

The GiftPackageView has a three states: OPEN, CLOSE and WRAPPED. Here is what the default implementation states look like:

OPEN CLOSE WRAPPED

Then add you BoxGiftPackage to the CommonConfig and add commonConfig to the Engine.Builder.

CommonConfig commonConfig = new CommonConfig.Builder()
    .wrappingPaperFactory(new SimpleGiftPackage(R.drawable.box_closing,R.drawable.box_base, R.drawable.box_opening, R.drawable.box_base, new ContainerMargins(.18f, .18f, .18f, .18f)))
    .build();

new Engine.Builder("baseUrl", "SDK_ID").setCommonConfig(commonConfig).build().startup(getContext());

val commonConfig = CommonConfig.Builder()
        .wrappingPaperFactory { _ ->
            SimpleGiftPackage(R.drawable.box_closing,R.drawable.box_base, R.drawable.box_opening, R.drawable.box_base, ContainerMargins(.18f, .18f, .18f, .18f))
        }
        .build()

Engine.Builder("baseUrl", "SDK_ID").setCommonConfig(commonConfig).build().startup(context)

The interface asking for two views, getFrontView and getBackView. Each of the functions takes in a WrappingData object that contains either a bitmap or image_url, if you would like to use Vouchr’s gift wrapper image as an asset. Both views are optional and null can be passed to either. The Voucher items will pop out of the gift package, in between the front and back views. The getContentsMargins function is used to define the position of those Voucher items as they sit within and pop out of the package.

The final function is called whenever a state for the package is changed. When this method is called you can assume that getFrontView() and getBackView() have already been called.

/**
    * @param state   the new state requested for the view (OPEN,CLOSE,WRAPPED)
    * @param animate whether the state should be animated
    * @return a completable that returns when the view's in its new state
    */
Completable setState(State state, boolean animate);

/**
    * @param state   the new state requested for the view (OPEN,CLOSE,WRAPPED)
    * @param animate whether the state should be animated
    * @return a completable that returns when the view's in its new state
    */
fun setState(state: State, animate: Boolean) : Completable

Using the Package View in your own screens

Simply add the GiftPackageContainer to your xml like below.

<com.surpriise.vouchrcommon.ui.components.giftpackage.GiftPackageContainer
    android:id="@+id/packageContainer"
    android:layout_width="108dp"
    android:layout_height="81dp"
    android:transitionName="wrappingPaperTransition">

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</com.surpriise.vouchrcommon.ui.components.giftpackage.GiftPackageContainer>

Then in your code call setState(GiftPackageView.State state, WrappingData wrappingData, Bool animate)

WrappingData data = WrappingData.fromUrl(voucher.getWrappingPaper().getImageURL())
    .sealUrl(voucher.getGameInfo().getLockIconImageUrl());
packageContainer.setState(GiftPackageView.State.WRAPPED, data, false).subscribe();

val data = WrappingData.fromUrl(voucher.getWrappingPaper().getImageURL())
    .sealUrl(voucher.getGameInfo().getLockIconImageUrl())
packageContainer.setState(GiftPackageView.State.WRAPPED, data, false).subscribe()