docs/user-redeem-rewards.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="731px" height="811px" viewBox="-0.5 -0.5 731 811" content="&lt;mxfile&gt;&lt;diagram id=&quot;73GBkgHC1_w_FH3b11Ur&quot; name=&quot;Page-1&quot;&gt;7VpbU+M2GP0tfcgM+wDje8gjENh2ptttoe22TzuKrTgaZMmVFJzsr69utuNIARZCQmf6ElufJVk6Ot/VGcVX1eojA/XiEy0gHkVBsRrF01EUTcJI/irB2gjSIDaCkqHCiMJecIe+QSsMrHSJCsgHHQWlWKB6KMwpITAXAxlgjDbDbnOKh2+tQQkdwV0OsCv9ggqxMNLzNOjlP0JULto3h4F9UoG2sxXwBShosyGKr0fxFaNUmLtqdQWxwq7FxYy72fG0WxiDRDxnQDQxIx4AXtrN2YWJdbtbWMjN2yahRF4uF6LCshXKW9Nd9dm5BCvidMly28uetwCshLZXdN7tX/IG0goKtpZ9GMRAoIfh9MCeYNn16zcpb+w+/XuOnS3/wSGTks81JFxev8CZ/L2o61GUYbm6y5l8mpXq7uS3W/noShJaLUKoI4UsXwCibjkSSvxZdZkippgXBRiR+w8OpowuSQHVggI5a7OQI+9qoNFppMr4IPYg+gCZgKsNkYuefZpYvq2HzaZnbzi2ssUGc1vZq+AOHbwPQjHDpyHH4sCP0t45lkTvZ9PJDmrsfdPty13NwrRUioWI5pyknFay+GKpbl+vGo4eeHDaqRrR5Ii64doixG9hoY2HxOD7KCM3zNZ/KeDO0rb5t8VRN6arQWttWy804YFHv5JXUs0O/ZUibVHtEWVROjii8DwdTmHWYEdtwd8t43knkjkn8sN/+0jSQ7nVYJf2I25MQKngM0YAkEKvoYdVRnDqZwGHPlWHYnLQXA2qa4xyMJNYO6eAsQz+4NMGY2hd9mA+4nCLm5nHfkQe+5HtwX4k6XHcjNHzLTfzWt1/NtESZ9NN05wRNBdrFjes4Gc5rdQslkZcTT2+bJtf5UTj6dH9TjZ0O5GHN3HwVrxxdfUwvEk9BmpyKN64yvIkb47MkSR4miRd/LJvksTnL3Z2B3B1Yw+TDmaBxg6TTF74eXotLzoO4dalbSEouSCGqHHB6D28opiyHtU5wnhLBDAqiWzmEhbpVuNLxSzpDvGFfVChosC7XOD+/d6QmaEnbM48xIz3Yb3cqDmXgcH9yYaFd1PuZ3I33ORu+DbcnRyTu27F5yM0hQquLnS+EYBxtwIiCSenvhipkOYdW8qufQhLmbgljg6mDFRqt2TGa73TbTxbCa8BGUCY/bOkGnBjBhTirJydRGmqsZeLCrSJbu+D5INqqBmDGcjvS30Ep1vD46gboZJPe5tO+rFzSsTpHFQIr9tztnsYyXw10SsinGLAnQfdfJ4hS4Z0MkBgs3tcRQnlmiaD1XBdAVZrCZN61UPTY3iz1KnGDZm30R4oCgY5/9rEQEd727jfCcrUa365+V3+FkCANjfhAqg63q6DktObs2rFR2Z++nRtL/LlH/uoXySuI5Q5HYTVCYMNYMULDPHLTGriS0iyA5nUxDWpP5HTPyFZKoJ92igQY/3dwua6Uo3miFV6RQWsaoEo8YL1M5hBPETp+cGAVAL0TefMhpC1CU7k5OnlKJ0+xkH7+cQOHnUs2jwLw4Cd5AzOkqjNLSw/T633fmlNqO1C53MOX1vuSdxc0nhDY08CQ2OuX8tpjoCpVdga5mZGqW39Y77SWqhuxvefkvp86JulpOmRPhMkmWs50oN9JnCrjbfafnbU68nWWdRHeOYPNv4PLfYRWvSKy+wRvc94YEuJM0888HZK7NaVblsa6yqwgU7b0LYEvPlYV3htlfj0wTjQbTgXtJot+REqvWEwrPSOx55IK/Qge/79yCqWdX8CMH6t/ydFfP0v&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <path d="M 180 35 L 253.63 35" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 258.88 35 L 251.88 38.5 L 253.63 35 L 251.88 31.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="10" y="0" width="170" height="70" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 35px; margin-left: 11px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                User Opens Web App
                                <br/>
                                (QR Code at merchant site OR Direct link)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="95" y="39" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    User Opens Web App...
                </text>
            </switch>
        </g>
        <path d="M 345 70 L 345 113.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 345 118.88 L 341.5 111.88 L 345 113.63 L 348.5 111.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 430 35 L 503.63 35" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 508.88 35 L 501.88 38.5 L 503.63 35 L 501.88 31.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="260" y="0" width="170" height="70" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 35px; margin-left: 261px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                User logs in with Web3Auth
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="345" y="39" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    User logs in with Web3Auth
                </text>
            </switch>
        </g>
        <path d="M 299.25 169.41 L 185.86 217.51" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 181.03 219.56 L 186.11 213.61 L 185.86 217.51 L 188.84 220.05 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 195px; margin-left: 239px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
                                isRedirected
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="239" y="198" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    isRedirected
                </text>
            </switch>
        </g>
        <path d="M 391.32 169.07 L 509.11 217.58" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 513.97 219.57 L 506.16 220.15 L 509.11 217.58 L 508.83 213.67 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 195px; margin-left: 453px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
                                !isRedirected
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="453" y="198" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    !isRedirected
                </text>
            </switch>
        </g>
        <ellipse cx="345" cy="150" rx="60" ry="30" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 150px; margin-left: 286px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                User is logged in and redirected to the merchant page if applicable
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="345" y="154" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    User is logged in an...
                </text>
            </switch>
        </g>
        <path d="M 180 280 L 180 353.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 180 358.88 L 176.5 351.88 L 180 353.63 L 183.5 351.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="30" y="220" width="300" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 250px; margin-left: 31px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                www.niftyr3wrds.com/merchants/{merchant_id}
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="180" y="254" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    www.niftyr3wrds.com/merchants/{merchant_id}
                </text>
            </switch>
        </g>
        <path d="M 515 280 L 515 353.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 515 358.88 L 511.5 351.88 L 515 353.63 L 518.5 351.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="370" y="220" width="290" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 288px; height: 1px; padding-top: 250px; margin-left: 371px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                www.niftyr3wrds.com/merchants
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="515" y="254" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    www.niftyr3wrds.com/merchants
                </text>
            </switch>
        </g>
        <path d="M 30 130 L 30 213.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 30 218.88 L 26.5 211.88 L 30 213.63 L 33.5 211.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="0" y="100" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 115px; margin-left: 1px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                QR CODE Points to
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="30" y="119" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    QR CODE Po...
                </text>
            </switch>
        </g>
        <path d="M 464.55 360 L 335.47 283.25" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 330.96 280.57 L 338.77 281.14 L 335.47 283.25 L 335.19 287.16 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 320px; margin-left: 398px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
                                click(merchant_id)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="398" y="323" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    click(merchant_id)
                </text>
            </switch>
        </g>
        <rect x="370" y="360" width="290" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 288px; height: 1px; padding-top: 390px; margin-left: 371px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Get list of merchants
                                <br/>
                                call: /merchants
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="515" y="394" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Get list of merchants...
                </text>
            </switch>
        </g>
        <rect x="510" y="0" width="220" height="70" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 218px; height: 1px; padding-top: 35px; margin-left: 511px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                call:
                                <br/>
                                <span style="color: rgb(255 , 238 , 204) ; background-color: rgb(32 , 33 , 59) ; font-family: &quot;consolas&quot; , &quot;courier new&quot; , monospace ; font-size: 14px">
                                    /user/nfts/{address_w3a}
                                    <br/>
                                    Store NFT data in state
                                    <br/>
                                </span>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="620" y="39" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    call:...
                </text>
            </switch>
        </g>
        <path d="M 180 420 L 180 593.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 180 598.88 L 176.5 591.88 L 180 593.63 L 183.5 591.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 510px; margin-left: 180px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
                                redeem(reward_id)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="180" y="513" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    redeem(reward_id)
                </text>
            </switch>
        </g>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 549px; margin-left: 178px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
                                In-Venue Merchant slides to confirm redemption
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="178" y="552" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    In-Venue Merchant slides to confirm redemption
                </text>
            </switch>
        </g>
        <rect x="30" y="360" width="300" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 390px; margin-left: 31px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Get user rewards associated with merchant_id:
                                <br/>
                                call: /user/rewards/{merchant_id}
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="180" y="394" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Get user rewards associated with merchant_id:...
                </text>
            </switch>
        </g>
        <path d="M 180 660 L 180 723.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 180 728.88 L 176.5 721.88 L 180 723.63 L 183.5 721.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="30" y="600" width="300" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 298px; height: 1px; padding-top: 630px; margin-left: 31px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Redeem reward with reward_id
                                <br/>
                                call:
                                <span style="color: rgb(255 , 238 , 204) ; background-color: rgb(32 , 33 , 59) ; font-family: &quot;consolas&quot; , &quot;courier new&quot; , monospace ; font-size: 14px">
                                    /user/rewards/redeem
                                </span>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="180" y="634" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Redeem reward with reward_id...
                </text>
            </switch>
        </g>
        <path d="M 180 730 L 285 770 L 180 810 L 75 770 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 208px; height: 1px; padding-top: 770px; margin-left: 76px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Reward is redeemed and reward is applied in-venue
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="180" y="774" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Reward is redeemed and reward is ap...
                </text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Viewer does not support full SVG 1.1
            </text>
        </a>
    </switch>
</svg>